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

相关推荐
MAGICIAN...15 小时前
【java-软件设计原则】
java·开发语言
Ticnix15 小时前
ECharts初始化、销毁、resize 适配组件封装(含完整封装代码)
前端·echarts
纯爱掌门人15 小时前
终焉轮回里,藏着 AI 与人类的答案
前端·人工智能·aigc
twl15 小时前
OpenClaw 深度技术解析
前端
gpfyyds66616 小时前
Python代码练习
开发语言·python
崔庆才丨静觅16 小时前
比官方便宜一半以上!Grok API 申请及使用
前端
星光不问赶路人16 小时前
vue3使用jsx语法详解
前端·vue.js
天蓝色的鱼鱼16 小时前
shadcn/ui,给你一个真正可控的UI组件库
前端
盐真卿16 小时前
python第八部分:高级特性(二)
java·开发语言
茉莉玫瑰花茶16 小时前
C++ 17 详细特性解析(5)
开发语言·c++·算法