十三、JS进阶(二)

1. 深入对象

1.1 创建对象的三种方式

1. 利用对象字面量创建对象

复制代码
const o = {
    name:'佩奇'
}

2. 利用new Object创建对象

复制代码
const o = new Object({name:'佩奇'})
console.log(o);//{name:'佩奇'}

        const obj = new Object({age:18});
        obj.uname = '张三';
        console.log(obj);

3. 利用构造函数创建对象

1.2 构造函数

构造函数:是一种特殊的函数,主要用来初始化对象。

构造函数在技术上是常规函数。不过有两个约定:

1. 它们的命名以大写字母开头。

2. 它们只能由"new"操作符来执行。

复制代码
        // 创建一个猪 构造函数
        function Pig(name,age){
            this.name = name;
            this.age = age;
        }
        // console.log(new Pig('佩奇',6))
        const p = new Pig('佩奇',6)

1. 使用new关键字调用函数的行为被称为实例化。

2. 实例化构造函数时没有参数时可以省略()

3. 构造函数内部无需写return,返回值即为新创建的对象。

4. 构造函数内部的return返回的值无效,所以不要写return。

5. new Object() new Date()也是实例化构造函数。

实例化执行过程:

说明:

1. 创建新对象

2. 构造函数this指向新对象

3. 执行构造函数代码,修改this,添加新的属性。

4. 返回新对象。

1.3 实例成员&静态成员

实例成员:通过构造函数创建的对象称为实例对象,实例对象中的属性和方法成为实例成员。(实例属性和实例方法)

复制代码
        function Pig(name,age){
            this.name = name;
        }
        const peiqi = new Pig('佩奇')
        const qiaozhi = new Pig('乔治')
        peiqi.name = '小猪佩奇'
        peiqi.sayHi = () =>{
            console.log('我是佩奇')
        }
        console.log(peiqi === qiaozhi)// false

说明:

1. 为构造函数传入参数,创建结构相同但值不同的对象。

2. 构造函数创建的实例对象彼此独立互不影响。

静态成员:构造函数的属性和方法被称为静态成员(静态属性和静态方法)。

复制代码
        function Pig(name){
            this.name = name;
        }
        Pig.eyes = 2 //静态属性
        Pig.sayHi = function(){ //静态方法
            console.log(this)
        }
        Pig.sayHi()
        console.log(Pig.eyes)// 2

说明:

1. 静态成员只能构造函数来访问。

2. 静态方法中的this指向构造函数。

比如:Data.now()、Math.PI、Math.random()。

2. 内置构造函数

在JS中最主要的数据类型有6种:

基本数据类型:

字符串、数值、布尔、undefined、null

引用类型:

对象

但是,会有特殊情况:

复制代码
        //普通字符串
        const str = 'red';
        console.log(str.length); // 3
        console.num = 12
        console.log(num.toFixed(2)); // 12.00
        //js底层完成,把简单数据类型包装为引用数据类型
        const str = new String('red');

其实字符串、数值、布尔、等基本类型也都有专门的构造函数,这些我们称之为包装类型。

JS中几乎所有的数据都可以基于构成函数创建。

内置构造函数:

引用类型:Object、Array、RegExp、Date等。

包装类型:String、Number、Boolean等。

Object

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

三个常用的静态方法(只有构造函数Object可以调用的)

1. 作用:Object.keys静态方法获取对象中的所有属性(键)

2. 作用:Object.vs静态方法获取对象中的所有属性值。

语法:

复制代码
        const o = {uname:'张三',age:18}
        //获得所有的属性名
        console.log(Object.keys(o));//返回数组['uname','age']
        //获得所有的属性值
        console.log(Object.values(o));//返回数组['张三',18]

注意:返回的是一个数组。

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

语法:

复制代码
        const o = {uname:'张三',age:18}
        //获得所有的属性名
        console.log(Object.keys(o));//返回数组['uname','age']
        //获得所有的属性值
        console.log(Object.values(o));//返回数组['张三',18]

        const oo = {}
        Object.assign(oo,o)//将o的属性赋值给oo

Array

Array是内置的构造函数,用于创建数组。

数组常见实例方法:

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

作用:reduce返回累计处理的结果,经常用于求和等。

基本语法:

复制代码
arr.reduce(function(){},起始值)
arr.reduce(function(上一次值,当前值){},起始值)

参数:

1. 如果有起始值,则把初始值累加到里面。

复制代码
        const arr = [1,5,8]
        //1.没有初始值
        // const total = arr.reduce(function (prev,current) {
        //     return prev + current
        // })
        // console.log(total)
        //2.有初始值
        const total = arr.reduce(function (prev,current) {
            return prev + current
        },10)
        console.log(total)
        //3.箭头函数
        const total2 = arr.reduce((prev,current) => prev + current,10)
        console.log(total2)

reduce执行过程:

1. 如果没有起始值,则上一次值以数组的第一个数组元素的值。

2. 每一次循环,把返回值给做为下一次循环的上一次值。

3. 如果有起始值,则起始值做为上一次值。

相关推荐
@木辛梓7 小时前
Linux 线程
linux·开发语言·c++
JarvanMo7 小时前
Flutter:使用图像作为屏幕背景
前端
Mintopia7 小时前
💰 金融Web应用中的AIGC风险控制技术与合规适配
前端·javascript·aigc
Mintopia7 小时前
🚀 Next.js 压力测试与性能调优实战
前端·javascript·全栈
江城开朗的豌豆7 小时前
TypeScript 类型系统漫游指南:从入门到爱上类型安全
前端·javascript
江城开朗的豌豆7 小时前
从 JavaScript 到 TypeScript:我为什么选择了类型守护
前端·javascript
孤独的追光者7 小时前
使用Qt Designer开发上位机
开发语言·python·qt
杨超越luckly8 小时前
HTML应用指南:利用POST请求获取全国爱回收门店位置信息
大数据·前端·python·信息可视化·html
m0_736927048 小时前
Java面试场景题及答案总结(2025版持续更新)
java·开发语言·后端·职场和发展