往期回顾

「JavaScript 从入门到精通」1.语法和数据类型

「JavaScript 从入门到精通」2.流程控制和错误处理

「JavaScript 从入门到精通」3.循环和迭代

「JavaScript 从入门到精通」4.函数

「JavaScript 从入门到精通」5.表达式和运算符

「JavaScript 从入门到精通」6.数字

「JavaScript 从入门到精通」7.时间对象

「JavaScript 从入门到精通」8.字符串

「JavaScript 从入门到精通」9.正则表达式

「JavaScript 从入门到精通」10.数组

「JavaScript 从入门到精通」11.Map和Set对象

前置知识：

JavaScrip的设计是一个简单的基于对象的范式。

对象是一系列属性的集合，一个属性包含一个键和一个值，也叫键值对。

若一个属性的值，是一个函数，则称这个属性为方法。

一个对象，可以有很多方法，就像一个杯子，可以有颜色，重量，形状等属性。

注意：

对象的名称，对大小写敏感。

1.创建对象

本文主要是复习对象的使用，至于对象的创建，下面这里简单介绍一下常见的创建对象的方法：

创建方法1：

let obj = new Object(); // 声明一个空对象

创建方法2：

let obj = {}; // 声明一个空对象

上面的name是对象obj中的一个属性，对应的值为"leo"。

2.设置对象属性和访问属性

设置对象属性，也有两种方法：

直接设置：

let obj = {};
obj.name = "leo"; // 为对象添加属性和值

创建时设置：

let obj = {name : 'leo'};
obj.name = "leo"; // 为对象添加属性和值

当一个对象定义了一个属性，我们可以用点符号（.）来访问它。

obj.name; // "leo"

注意：

• 属性的另外一种写法：

• 属性的值也可以是个方法：

3.枚举对象的所有属性

从 ECMAScript 5 开始，有三种原生的方法用于列出或枚举对象的属性：

3.1 for...in 循环

该方法依次访问一个对象及其原型链中所有可枚举的属性。

3.2 Object.keys(o)

该方法返回一个对象 o 自身包含（不包括原型中）的所有属性的名称的数组。

3.3 Object.getOwnPropertyNames(o)

该方法返回一个数组，它包含了对象 o 所有拥有的属性（无论是否可枚举）的名称。

4.对象的拓展（ES6）

4.1 属性的简洁表示

4.2 属性名表达式

JavaScript提供2种方法定义对象的属性。

延伸出来的还有：

注意：

属性名表达式不能与简洁表示法同时使用，否则报错。

4.3 Object.is()

Object.is() 用于比较两个值是否严格相等，在ES5时候只要使用相等运算符(==)和严格相等运算符(===)就可以做比较，但是它们都有缺点，前者会自动转换数据类型，后者的NaN不等于自身，以及+0等于-0。

4.4 Object.assign()

Object.assign()方法用于对象的合并，将原对象的所有可枚举属性复制到目标对象。

基础用法：

第一个参数是目标对象，后面参数都是源对象。

注意：

• 若目标对象与源对象有同名属性，则后面属性会覆盖前面属性。

• 若只有一个参数，则返回该参数。

• 若参数不是对象，则先转成对象后返回。

typeof Object.assign(2); // 'object'

• 由于undefined或NaN无法转成对象，所以做为参数会报错。

Object.assign(undefined) // 报错
Object.assign(NaN); // 报错

• Object.assign()实现的是浅拷贝。

Object.assign()拷贝得到的是这个对象的引用。这个对象的任何变化，都会反映到目标对象上面

• 将数组当做对象处理，键名为数组下标，键值为数组下标对应的值。

Object.assign([1, 2, 3], [4, 5]); // [4, 5, 3]

5.Object.values()，Object.entries()（ES8）

ES7中新增加的 Object.values()和Object.entries()与之前的Object.keys()类似，返回数组类型。

回顾下Object.keys()：

var a = { f1: 'hi', f2: 'leo'};
Object.keys(a); // ['f1', 'f2']

5.1 Object.values()

返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历属性的键值。

let a = { f1: 'hi', f2: 'leo'};
Object.values(a); // ['hi', 'leo']

如果参数不是对象，则返回空数组：

Object.values(10); // []
Object.values(true); // []

5.2 Object.entries()

返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历属性的键值对数组。

let a = { f1: 'hi', f2: 'leo'};
Object.entries(a); // [['f1','hi'], ['f2', 'leo']]

• 用途1：
• 遍历对象属性。

• 用途2： 将对象转为真正的Map结构。

let a = { f1: 'hi', f2: 'leo'};

let map = new Map(Object.entries(a));

手动实现Object.entries()方法：

6.Object.getOwnPropertyDescriptors()（ES8）

之前有Object.getOwnPropertyDescriptor方法会返回某个对象属性的描述对象，新增的Object.getOwnPropertyDescriptors()方法，返回指定对象所有自身属性（非继承属性）的描述对象，所有原对象的属性名都是该对象的属性名，对应的属性值就是该属性的描述对象

实现原理：

引入这个方法，主要是为了解决Object.assign()无法正确拷贝get属性和set属性的问题。

value为undefined是因为Object.assign方法不会拷贝其中的get和set方法，使用getOwnPropertyDescriptors配合Object.defineProperties方法来实现正确的拷贝：

Object.getOwnPropertyDescriptors方法的配合Object.create方法，将对象属性克隆到一个新对象，实现浅拷贝。

7.对象的拓展运算符（ES9）

7.1 介绍

对象的拓展运算符，即对象的Rest/Spread属性，可将对象解构赋值用于从一个对象取值，搜键值对分配到指定对象上，与数组的拓展运算符类似：

对象的解构赋值要求等号右边必须是个对象，所以如果等号右边是undefined或null就会报错无法转成对象。

let {a, ...b} = null; // 运行时报错
let {a, ...b} = undefined; // 运行时报错

解构赋值必须是最后一个参数，否则报错。

let {...a, b, c} = obj; // 语法错误
let {a, ...b, c} = obj; // 语法错误

注意：

• 1.解构赋值是浅拷贝。

• 2.拓展运算符的解构赋值，不能复制继承自原型对象的属性。

7.2 使用场景

• 1.取出参数对象所有可遍历属性，拷贝到当前对象中。

• 2.合并两个对象。

• 3.将自定义属性放在拓展运算符后面，覆盖对象原有的同名属性。

• 4.将自定义属性放在拓展运算符前面，就会成为设置新对象的默认值。

• 5.拓展运算符后面可以使用表达式。

• 6.拓展运算符后面如果是个空对象，则没有任何效果。

{...{}, a:1}; // {a:1}

• 7.若参数是null或undefined则忽略且不报错。

let a = { ...null, ...undefined }; // 不报错

• 8.若有取值函数get则会执行。

公众号：前端自习课