JavaScript进阶 第二天

• 深入对象
• 内置构造函数

一. 深入对象

• 创建对象三种方式
• 构造函数
• 实例成员&静态成员

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))