【JS】Chapter13-构造函数数据常用函数

2023-11-21 00:36
文章标签 数据 函数 js 常用 构造函数 chapter13

本文主要是介绍【JS】Chapter13-构造函数数据常用函数，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

站在巨人的肩膀上

黑马程序员前端JavaScript入门到精通全套视频教程，javascript核心进阶ES6语法、API、js高级等基础知识和实战教程

（十三）构造函数&数据常用函数

1. 深入对象

1.1 创建对象三种方式

  1. 利用对象字面量创建对象
    const o = {name: '佩奇'
}
  2. 利用 new Object 创建对象
    const o = new Object({ name: '佩奇' })
console.log(o)  // {name: '佩奇'}
  3. 利用构造函数创建对象

1.2 构造函数

  • 构造函数：是一种特殊的函数，主要用来初始化对象
  • 使用场景：常规的 {…} 语法允许创建一个对象。比如我们创建了佩奇的对象，继续创建乔治的对象还需要重新写一遍，此时可以通过构造函数来快速创建多个类似的对象。
  • 例子：
    function Pig(name, age, gender) {this.name = namethis.age = agethis.gener = gender 
}
// 创建佩奇对象
const Peppa = new Pig('佩奇', 6, '女')
// 创建乔治对象
const George = new Pig('乔治', 3, '男')
console.log(Peppa)  // {name: '乔治', age: 6, gener: '女'}
  • 构造函数在技术上是常规函数。
  • 不过有两个约定：
    1. 它们的命名以大写字母开头。
    2. 它们只能由 “new” 操作符来执行。
  • 构造函数语法：大写字母开头的函数
  • 说明：
    1. 使用 new 关键字调用函数的行为被称为实例化
    2. 实例化构造函数时没有参数时可以省略 ()
    3. 构造函数内部无需写return，返回值即为新创建的对象
    4. 构造函数内部的 return 返回的值无效，所以不要写return
    5. new Object()、new Date() 也是实例化构造函数
  • 实例化执行过程说明：
    1. 创建新对象
    2. 构造函数this指向新对象
    3. 执行构造函数代码，修改this，添加新的属性
    4. 返回新对象

1.3 实例成员&静态成员

  • 实例成员：通过构造函数创建的对象称为实例对象，实例对象中的属性和方法称为实例成员。
  • 实例成员说明：
    1. 实例对象的属性和方法即为实例成员
    2. 为构造函数传入参数，动态创建结构相同但值不同的对象
    3. 构造函数创建的实例对象彼此独立互不影响。
  • 静态成员：构造函数的属性和方法被称为静态成员
  • 静态成员说明：
    1. 构造函数的属性和方法被称为静态成员
    2. 一般公共特征的属性或方法设置为静态成员
    3. 静态成员方法中的 this 指向构造函数本身

2. 内置构造函数

  • 在 JavaScript 中最主要的数据类型有 6 种：
    • 基本数据类型：字符串、数值、布尔、undefined、null
    • 引用类型: 对象
  • 但是，我们会发现有些特殊情况：
    // 普通字符串
const str = 'andy'
console.log(str.length) // 4
    • 其实字符串、数值、布尔、等基本类型也都有专门的构造函数，这些我们称为包装类型。
    • JS中几乎所有的数据都可以基于构成函数创建。
  • 引用类型
    • Object，Array，RegExp，Date 等
  • 包装类型
    • String，Number，Boolean 等

2.1 Object

  • Object 是内置的构造函数，用于创建普通对象。

  • 例子：

    // 通过构造函数创建普通对象
const user = new Object({name: '小明', age: 15})

  • 推荐使用字面量方式声明对象，而不是 Object 构造函数

  • 有三个常用静态方法（静态方法就是只有构造函数Object可以调用的）:

    // 想要获取对象里面的属性和值的做法：
const o = { name: '佩奇', age: 6 }// 传统做法：
for(let k in o) {console.log(k)      // 属性 name ageconsole.log(o[k])   // 值 佩奇 6
}

  1. Object.keys 静态方法获取对象中所有属性（键）

    const o = { name: '佩奇', age: 6 }// 获取对象的所有键，并且返回是一个数组
const arr = Object.keys(0)
console.log(arr)    // ['name', 'age']
    • 注意：返回的是一个数组

  2. Object.values 静态方法获取对象中所有属性值

    const o = { name: '佩奇', age: 6 }// 获取对象的所有值，并且返回是一个数组
const arr = Object.values(0)
console.log(arr)    // ['佩奇', 6]
    • 注意：返回的是一个数组

  3. Object. assign 静态方法常用于对象拷贝

    // 拷贝对象，把 o 拷贝给 obj
const o = { name: '佩奇', age: 6 }
const obj = {}
Object.assign(obj, o)
console.log(obj)    // { name: '佩奇', age: 6 }const o = { name: '佩奇', age: 6 }
Object.assign(o, { gender: '女' })
console.log(o)    // { name: '佩奇', age: 6, gender: '女' }
    • 经常使用的场景给对象添加属性。

2.2 Array

  • Array 是内置的构造函数，用于创建数组
    const arr = new Array(3. 5)
console.log(arr)    // [3, 5]
  • 创建数组建议使用字面量创建，不用 Array 构造函数创建
2.2.1 数组常见实例方法-核心方法
方法作用说明
forEach遍历数组不返回，用于不改变值，经常用于查找打印输出值
filter过滤数组筛选数组元素，并生成新数组
map迭代数组返回新数组，新数组里面的元素是处理之后的值，经常用于处理数据
reduce累计器返回函数累计处理的结果，经常用于求和等
  1. reduce 返回函数累计处理的结果，经常用于求和等
  • 基本语法：
    arr.reduce(function(){}, 起始值)
  • 参数：起始值可以省略，如果写就作为第一次累计的起始值
  • 语法：
    arr.reduce(function(累计值, 当前元素 [,索引号][,源数组]){}, 起始值)
  • 累计值参数：
    1. 如果有起始值，则以起始值为准开始累计， 累计值 = 起始值
    2. 如果没有起始值， 则累计值以数组的第一个数组元素作为起始值开始累计
    3. 后面每次遍历就会用后面的数组元素 累计到 累计值 里面 （类似求和里面的 sum ）
  • 使用场景：求和运算：
    const arr = [1, 5, 9]
const count = arr.reduce((prev, item) => prev + item)
console.log(count)
2.2.2 数组常见方法-其他方法
  • 实例方法 join 数组元素拼接为字符串，返回字符串(重点)
  • 实例方法 find 查找元素，返回符合测试条件的第一个数组元素值，如果没有符合条件的则返回 undefined(重点)
  • 实例方法 every 检测数组所有元素是否都符合指定条件，如果所有元素都通过检测返回 true，否则返回 false(重点)
  • 实例方法 some 检测数组中的元素是否满足指定条件，如果数组中有元素满足条件返回 true，否则返回 false
  • 实例方法 concat 合并两个数组，返回生成新数组
  • 实例方法 sort 对原数组单元值排序
  • 实例方法 splice 删除或替换原数组单元
  • 实例方法 reverse 反转数组
  • 实例方法 findIndex 查找元素的索引值
2.2.3 数组常见方法-伪数组转换为真数组
  • 静态方法 Array.from()

2.3 String

  • 在 JavaScript 中的字符串、数值、布尔具有对象的使用特征，如具有属性和方法
  • 例子：
    // 字符串类型
const str = 'hello world!'
// 统计字符的长度（字符数量）
console.log(str.length)// 数值类型
const price = 12.345
// 保留两位小数
price.toFixed(2) // 12.34
  • 之所以具有对象特征的原因是字符串、数值、布尔类型数据是 JavaScript 底层使用 Object 构造函数“包装”来的，被称为包装类型。
2.3.1 常见实例方法
  1. 实例属性 length 用来获取字符串的长度(重点)
  2. 实例方法 split('分隔符') 用来将字符串拆分成数组(重点)
  3. 实例方法 substring（需要截取的第一个字符的索引[,结束的索引号]） 用于字符串截取(重点)
  4. 实例方法 startsWith(检测字符串[, 检测位置索引号]) 检测是否以某字符开头(重点)
  5. 实例方法 includes(搜索的字符串[, 检测位置索引号]) 判断一个字符串是否包含在另一个字符串中，根据情况返回 true 或 false(重点)
  6. 实例方法 toUpperCase 用于将字母转换成大写
  7. 实例方法 toLowerCase 用于将字母转换成小写
  8. 实例方法 indexOf 检测是否包含某字符
  9. 实例方法 endsWith 检测是否以某字符结尾
  10. 实例方法 replace 用于替换字符串，支持正则匹配
  11. 实例方法 match 用于查找字符串，支持正则匹配

2.4 Number

  • Number 是内置的构造函数，用于创建数值
  • 常用方法：
    • toFixed() 设置保留小数位的长度
  • 例子：
    // 数值类型
const price = 12.345
// 保留两位小数，四舍五入
console.log(price.toFixed(2)) // 12.34

这篇关于【JS】Chapter13-构造函数数据常用函数的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/398571。

相关文章

Java实现字符串大小写转换的常用方法

Java实现字符串大小写转换的常用方法

《Java实现字符串大小写转换的常用方法》在Java中,字符串大小写转换是文本处理的核心操作之一,Java提供了多种灵活的方式来实现大小写转换,适用于不同场景和需求,本文将全面解析大小写转换的各种方法... 目录前言核心转换方法1.String类的基础方法2. 考虑区域设置的转换3. 字符级别的转换高级转换
阅读更多...
Python使用Matplotlib和Seaborn绘制常用图表的技巧

Python使用Matplotlib和Seaborn绘制常用图表的技巧

《Python使用Matplotlib和Seaborn绘制常用图表的技巧》Python作为数据科学领域的明星语言,拥有强大且丰富的可视化库,其中最著名的莫过于Matplotlib和Seaborn,本篇... 目录1. 引言：数据可视化的力量2. 前置知识与环境准备2.1. 必备知识2.2. 安装所需库2.3
阅读更多...
MySQL数据目录迁移的完整过程

MySQL数据目录迁移的完整过程

《MySQL数据目录迁移的完整过程》文章详细介绍了将MySQL数据目录迁移到新硬盘的整个过程,包括新硬盘挂载、创建新的数据目录、迁移数据（推荐使用两遍rsync方案）、修改MySQL配置文件和重启验证... 目录1，新硬盘挂载（如果有的话）2，创建新的 mysql 数据目录3，迁移 MySQL 数据（推荐两
阅读更多...
Python数据验证神器Pydantic库的使用和实践中的避坑指南

Python数据验证神器Pydantic库的使用和实践中的避坑指南

《Python数据验证神器Pydantic库的使用和实践中的避坑指南》Pydantic是一个用于数据验证和设置的库,可以显著简化API接口开发,文章通过一个实际案例,展示了Pydantic如何在生产环... 目录1️⃣ 崩溃时刻：当你的API接口又双叒崩了！2️⃣ 神兵天降：3行代码解决验证难题3️⃣ 深度
阅读更多...
MySQL快速复制一张表的四种核心方法(包括表结构和数据)

MySQL快速复制一张表的四种核心方法(包括表结构和数据)

《MySQL快速复制一张表的四种核心方法(包括表结构和数据)》本文详细介绍了四种复制MySQL表（结构+数据）的方法,并对每种方法进行了对比分析,适用于不同场景和数据量的复制需求,特别是针对超大表（1... 目录一、mysql 复制表（结构+数据）的 4 种核心方法（面试结构化回答）方法 1：CREATE
阅读更多...
详解C++ 存储二进制数据容器的几种方法

详解C++ 存储二进制数据容器的几种方法

《详解C++存储二进制数据容器的几种方法》本文主要介绍了详解C++存储二进制数据容器,包括std::vector、std::array、std::string、std::bitset和std::ve... 目录1.std::vector<uint8_t>（最常用）特点：适用场景：示例：2.std::arra
阅读更多...
C++构造函数中explicit详解

C++构造函数中explicit详解

《C++构造函数中explicit详解》explicit关键字用于修饰单参数构造函数或可以看作单参数的构造函数,阻止编译器进行隐式类型转换或拷贝初始化,本文就来介绍explicit的使用,感兴趣的可以... 目录1. 什么是explicit2. 隐式转换的问题3.explicit的使用示例基本用法多参数构造
阅读更多...
MyBatis配置文件中最常用的设置

MyBatis配置文件中最常用的设置

《MyBatis配置文件中最常用的设置》文章主要介绍了MyBatis配置的优化方法,包括引用外部的properties配置文件、配置外置以实现环境解耦、配置文件中最常用的6个核心设置以及三种常用的Ma... 目录MyBATis配置优化mybatis的配置中引用外部的propertis配置文件⚠️ 注意事项X
阅读更多...
一文详解Java常用包有哪些

一文详解Java常用包有哪些

《一文详解Java常用包有哪些》包是Java语言提供的一种确保类名唯一性的机制,是类的一种组织和管理方式、是一组功能相似或相关的类或接口的集合,：本文主要介绍Java常用包有哪些的相关资料,需要的... 目录Java.langjava.utiljava.netjava.iojava.testjava.sql
阅读更多...
pandas使用apply函数给表格同时添加多列

pandas使用apply函数给表格同时添加多列

《pandas使用apply函数给表格同时添加多列》本文介绍了利用Pandas的apply函数在DataFrame中同时添加多列,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习... 目录一、Pandas使用apply函数给表格同时添加多列二、应用示例一、Pandas使用apply函
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2