十三、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); // 3console.num = 12console.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的属性赋值给ooArray
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. 如果有起始值,则起始值做为上一次值。
