js进阶_day02

目录

1.深入对象

1.1创建对象三种方式

1.2实例成员&静态成员

2.内置构造函数

2.1 Object

2.2 Array

2.2.1数组常见实例方法-核心方法

2.2.2数组常见实例方法-其它方法

2.2.3数组常见方法-伪数组转换为真数组

2.3 String

2.3.1常见实例方法

2.4 Number

目录

1.深入对象

1.1创建对象三种方式

1.2实例成员&静态成员

2.内置构造函数

2.1 Object

2.2 Array

2.2.1数组常见实例方法-核心方法

2.2.2数组常见实例方法-其它方法

2.2.3数组常见方法-伪数组转换为真数组

2.3 String

2.3.1常见实例方法

2.4 Number

---

1.深入对象

1.1创建对象三种方式

（1）利用对象字面量创建对象：

const obj = {
    name: '白敬亭'
}

（2）利用new Object创建对象：

const obj = new Object({ name: 'bjt' })
console.log(o) //{name: 'bjt'}

（3）利用构造函数创建对象：

• 构造函数：是一种特殊的函数，主要用来初始化对象
• 使用场景：常规的{...}语法允许创建一个对象。比如我们创建了白敬亭的对象，继续创建刘亦菲的对象还需要重新写一遍，此时通过构造函数来快速创建多个类似的对象。
• 构造函数语法：大写字母开头的函数
• 创建构造函数：

// 创建一个Person 构造函数
        function Person(name, age) {
            this.name = name  //第一个name是对象的属性  第二个是形参
            this.age = age
        }
        //console.log(new Person('白敬亭', 25))
        //console.log(new Person('刘亦菲', 32))

        const boy = new Person('白敬亭', 25)
        console.log(boy)

说明：

1. 使用new关键字调用函数的行为被称为实例化
2. 实例化构造函数时没有参数时可以省略（）
3. 构造函数内部无需写return，返回值即为新创建的对象
4. 构造函数内部的return返回的值无效，所以不要写return
5. new Object()  new Date() 也是实例化构造函数

• 实例化执行过程（重点：面试题）

说明：

1. 创建新对象
2. 构造函数this指向新对象
3. 执行构造函数代码，修改this，添加新的属性
4. 返回新对象

1.2实例成员&静态成员

实例成员：

通过构造函数创建的对象称为实例对象，实例对象中的属性和方法称为实例成员（实例属性和实例方法）

// 1.实例成员：实例对象上的属性和方法属于实例成员
        function Person(name) {
            this.name = name
        }
        const boy = new Person('白敬亭')
        const girl = new Person('刘亦菲')
        boy.name = '吴磊' //实例属性
        boy.sayHi = () => { //实例方法
            console.log('hello')
        }
        console.log(boy)
        console.log(girl)
        console.log(boy === girl) //false

说明：

1. 为构造函数传入参数，创建结构相同但值不同的对象
2. 构造函数创建的实例对象彼此独立互不影响

静态成员：

构造函数的属性和方法被称为静态成员（静态属性和静态方法）

// 2.静态成员
        // 构造函数
            function Person() {
                // 省略实例成员
            }
            // 静态属性
            Person.uname = '白敬亭'
            Person.age = 25
            console.log(Person.uname) 
            console.log(Person.age)
            // 静态方法
            Person.sayHi = function () {
                console.log('白敬亭很帅')
                //this指向Person
                console.log(this)
            }
            Person.sayHi()

说明：

1. 静态成员只能构造函数来访问
2. 静态方法中的this指向构造函数

比如 Date.now()  Math.PI  Math.random()

2.内置构造函数

2.1 Object

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

//通过构造函数创建普通对象
const user = new Object({ name: '白敬亭', age: 25 })

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

• 作用：Object.keys静态方法获取对象中所有属性（键）
• 语法：

const obj = {name: 'bjt', age: 25}
// 1.获得所有的属性名
console.log(Object.keys(obj)) //返回数组 ['name', 'age']

• 注意：返回的是一个数组

• 作用：Object.values静态方法获取对象中所有属值
• 语法：

const obj = {name: 'bjt', age: 25}
// 1.获得所有的属性值
console.log(Object.values(obj)) //返回数组 ['bjt', 25]

• 注意：返回的是一个数组

• 作用：Object.assign静态方法常用于对象拷贝
• 语法：

const obj = {name: 'bjt', age: 25}
// 3.拷贝对象  把obj拷贝给arr
const arr = {}
Object.assign(arr, obj)
console.log(arr) //{name: 'bjt', age: 25}

//应用场景
Object.assign(obj, {sex: '男'})
console.log(obj) //{name: 'bjt', age: 25, sex: '男'}

• 使用场景：给对象添加属性

2.2 Array

2.2.1数组常见实例方法-核心方法

方法	作用	说明
forEach	遍历数组	不返回数组，经常用于查找遍历数组元素
filter	过滤数组	返回新数组，返回的是筛选满足条件的数组元素
map	迭代数组	返回新数组，返回的是处理之后的数组元素，想要使用返回的新数组
reduce	累计器	返回累计处理的结果，经常用于求和等

• 作用：reduce返回累计处理的结果，经常用于求和等
• 基本语法：

// 数组reduce方法 实现求和
        // arr.reduce(function(上一次的值, 当前值){}, 初始值)
        const arr = [1, 5, 8]

        // 1.没有初始值
        // const result = arr.reduce(function(prev, current) {
        //     return prev + current
        // })
        // console.log(result) //14

        // 2.有初始值
        const result = arr.reduce(function(prev, current) {
            return prev + current
        }, 10) //10为初始值
        console.log(result) //24
    
        // 3.箭头函数写法
        const result = arr.reduce((prev, current) => prev + current, 6)
        console.log(result) //20

• reduce执行过程：

1. 如果没有起始值，则上一次值以数组的第一个数组元素的值
2. 每一次循环，把返回值给作为下一次循环的上一次值
3. 如果有起始值，则起始值作为上一次值

2.2.2数组常见实例方法-其它方法

2.2.3数组常见方法-伪数组转换为真数组

静态方法Array.from()

// Array.from() 把伪数组转换成真数组
        const lis = document.querySelectorAll('ul li')
        // console.log(lis)
        const liss = Array.from(lis)
        liss.pop()
        console.log(liss)

2.3 String

在JavaScript中字符串、数值、布尔具有对象的使用特征，如具有属性和方法

之所以具有对象特征的原因是字符串、数值、布尔类型数据是JavaScript底层使用Object构造函数“包装”来的，被称为包装类型

2.3.1常见实例方法

        // 1.split把字符串转换为数组  join()把数组转换成字符串
        const str = 'red,green'
        const arr = str.split(',')
        console.log(arr) //['red', 'green']

        const arr1 = ['red', 'green']
        const str1 = arr1.join(',')
        console.log(str1) //red,green

        // 2.字符串的截取   substring(开始的索引号[, 结束的索引号])
        // 2.1如果省略了 结束索引号 默认取到最后
        const str2 = '白敬亭刘亦菲吴磊赵今麦'
        console.log(str2.substring(6)) //吴磊赵今麦
        // 2.2结束的索引号 不包含想要截取的那部分
        console.log(str2.substring(0, 6)) //白敬亭刘亦菲

        // 3.startsWith(searchString[, 开始查找的地方])判断是否以某个字符开头 返回布尔类型
        const str3 = '白敬亭觉得自己很帅，我也觉得 hhh'
        console.log(str3.startsWith('白敬亭')) //true
        console.log(str3.startsWith('敬亭')) //false
        console.log(str3.startsWith('我')) //false
        console.log(str3.startsWith('很帅', 7)) //true

        // 4.includes(searchString[, 开始查找的地方]) 判断某个字符是不是包含在一个字符串里面
        const str4 = '吴磊也很handsome'
        console.log(str4.includes('handsome')) //true

2.4 Number

Number是内置的构造函数，用于创建数值

常用方法：

toFixed()设置保留小数位数的长度

//数值类型
const price = 12.345
//保留两位小数 四舍五入
console.log(price.toFixed(2)) //12.35