十三、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. 如果有起始值,则起始值做为上一次值。

相关推荐
宠..3 分钟前
VS Code SSH 远程连接 Ubuntu 并实现快速运行(C/C++示例)
java·运维·c语言·开发语言·c++·ubuntu·ssh
Omics Pro3 分钟前
免费!糖蛋白质组学数据分析
开发语言·深度学习·数据挖掘·数据分析·r语言·excel·知识图谱
RPGMZ4 分钟前
RPGMZ游戏引擎事件技巧大全
javascript·游戏引擎·事件·rpgmz·rpgmakermz
枫叶林FYL5 分钟前
【强化学习】2 大规模并行强化学习中的耦合策略优化:受控多样性驱动的样本高效探索
开发语言·php
一天 24h6 分钟前
从单体到分布式:JWT 如何彻底改变 Web 认证系统
前端·分布式
持梦远方6 分钟前
Nginx 静态资源挂载与前端部署实战笔记
linux·前端·笔记·nginx
木斯佳7 分钟前
前端八股文面经大全:腾讯云智前端一面(2026-05-13)·面经深度解析
前端·状态模式
chao1898447 分钟前
基于MATLAB的音频信号AM调制与解调实现
开发语言·matlab·音视频
fanzhonghong8 分钟前
javaWeb后端开发之Linux项目部署3和Docker部署1
linux·服务器·前端·docker