- 深入对象
- 内置构造函数
一. 深入对象
- 创建对象三种方式
- 构造函数
- 实例成员&静态成员
1.1 创建对象三种方式
① 利用对象字面量创建对象
const o = {
'name': '哈哈'
}② 利用new Object 创建对象
const o = new Object({ name: '哈哈' })③ 构造函数创建对象
1.2 构造函数
① 构造函数：是一种特殊的函数，主要用来初始化对象
② 使用场景：常规的{...} 语法允许创建一个对象，可以使用构造函数快速创建多个类似的对象
③ 约定：
- 命名以大写字母开头
- 只能由 new 操作符来执行
④ 写法：
- 使用new关键词调用函数的行为被称为实例化
- 实例化构造函数没有参数时可以省略（）
- 构造函数内部无需写return，返回值即为新创建的对象
- 构造函数内部的return返回的值无效，所以不要写return
- new Object（） new Date() 也是实例化构造函数
function Pig (uname, age) {
this.name = uname
this.age = age
}
const p = new Pig('佩奇', 6)
const q = new Pig('乔治', 3)⑤ 实例化执行过程
- 创建新的空对象
- 构造函数this指向新对象
- 执行构造函数代码，修改this, 添加新的属性
- 返回新对象
1.3 实例成员&静态成员
① 实例成员
- 通过构造函数创建的对象称为实例对象，实例对象中的属性和方法称为实例成员
- 为构造函数传入参数，创建结构相同但值不同的对象
- 构造函数创建的实例对象彼此独立互不影响
function Pig (name) {
this.name = name
}
const peiqi = new Pig('佩奇')
// 1.实例对象上的属性和方法称为实例成员
peiqi.sayHi = () => {
console.log('hi')
}
console.log(peiqi)② 静态成员
- 构造函数的属性和方法被称为静态成员（静态属性和静态方法）
- 静态成员只能构造函数来访问
- 静态方法中的this指向构造函数
Pig.eyes = 2
console.log(Pig.eyes)
Pig.sayHi = function () {
console.log(this)
}
// 静态成员调用
Pig.sayHi()二.内置构造函数
- Object
- Array
- String
- Number
① 基本数据类型：字符串，数值，布尔，undefined, null
② 引用类型：对象
③ 字符串，数值，布尔等基本类型也都有专门的构造函数，这些我们称为包装类型
④ 引用类型：Object， Array, RegExp, Date等
⑤ 包装类型：String, Number, Boolean 等
2.1 Object
① Object 是内置的构造函数，用于创建普通对象
const o = new Object({ name: '哈哈' })② 三个静态方法
（1）获取所有属性名：Object.keys， 返回的是一个数组
const o = {uname:'pink', age: 18}
// 1.获取所有属性名
console.log(Object.keys(o))（2）获取所有的属性值：Object.values
console.log(Object.values(o))（3）拷贝对象： Object.assign(目标，拷贝对象)
使用场景：经常给对象添加属性
const oo = {}
Object.assign(oo, o)
console.log(oo)
// 追加一个新的属性
Object.assign(o, {gender: '女'})2.2 Array
Array是内置的构造函数，用于创建数组， 建议使用字面量创建，不用Array构造函数创建
1. 实例方法
- reduce 返回累计处理的结果，经常用于求和
- 基本语法
arr.reduce(function(){}, 起始值)
arr.reduce(function(上一次值, 当前值){}, 初始值)- 参数
① 没有初始值
const total = arr.reduce(function (pre, current) {
return pre + current
})② 有初始值
const total = arr.reduce(function (pre, current) {
return pre + current
}, 10)③ 箭头函数写法
const total = arr.reduce((pre, current) => pre + current, 10)
console.log(total)④ reduce的执行过程
- 如果没有初始值，则上一次值是数组的第一个元素
- 每一次循环，把返回值给作为下一次循环的上一次值
- 如果有起始值，则起始值作为上一次值
2.其他方法
| 编号 | 方法 | 含义 |
| 1 | join | 数组元素拼接为字符串，返回字符串 |
| 2 | find | 查找元素，返回符合测试条件的第一个数组值，如果没有符合条件的就返回undefined |
| 3 | every | 检测数组所有元素是否都符合指定条件，如果所有元素都通过检测返回true, 否则返回false |
| 4 | some | 检测数组中的元素是否满足指定条件，如果数组中有元素满足条件返回true |
| 5 | concat | 合并两个数组，返回生成新数组 |
| 6 | sort | 对原数组单元值排序 |
| 7 | splice | 删除或替换原数组单元 |
| 8 | reverse | 反转数组 |
| 9 | findIndex | 查找元素的索引值 |
- find方法使用举例：
const arr = ['red', 'blue', 'green']
const re = arr.find(function (item) {
return item === 'blue'
})
console.log(re)
const arr = [
{
name: '小米',
price: 1999
},
{
name: '华为',
price: 3999
}
]
const re = arr.find(item => item.name === '小米')
console.log(re)- every方法：每一个是否都符合条件，如果都符合，返回true, 如果有一个不符合，返回false
const arr1 = [10, 20, 30]
const flag = arr1.every(item => item >= 20)
console.log(flag)- some方法
const arr1 = [10, 20, 30]
const flag = arr1.some(item => item >= 40)
console.log(flag)3.数组静态方法
- 把伪数组转换为真数组
const lis = document.querySelectorAll('ul li')
// lis.pop() // 伪数组无法使用数组的方法
const liss = Array.from(lis)
liss.pop()
console.log(liss)2.3 String
| 编号 | 方法 | 含义 |
| 1 | length | 实例属性，用来获取字符串的长度 |
| 2 | split(’分隔符‘) | 用来将字符串拆分成数组 |
| 3 | substring(需要截取的第一个字符的索引，[, 结束的索引号) | 用于字符串截取 |
| 4 | startswith(检测字符串[, 检测位置索引号]) | 检测是否以某字符开头 |
| 5 | includes(搜索的字符串[, 检测位置索引号]) | 判断一个字符串是否包含在另一个字符串中，根据情况返回true或false |
| 6 | toUpperCase | 将字母转换成大写 |
| 7 | toLowerCase | 用于将字母转换成小写 |
| 8 | indexOf | 检测是否包含某字符 |
| 9 | endsWith | 检测是否以某字符结尾 |
| 10 | replace | 用于替换字符串，支持正则匹配 |
| 11 | match | 用于查找字符串，支持正则匹配 |
// 1.split 字符串转换为数组和join相反
const str = 'pink,red'
const arr = str.split(',')
console.log(arr)
// 2.字符串截取
const str = 'hello'
// 不包含结束的索引号
console.log(str.substring(2, 3))
