砥砺前行

写作不易，Star是最大鼓励，感觉写的不错的可以给个Star⭐，请多多指教。本博客的Github地址。

对象结构

const obj = {
    name: 'lisi',
    age: 12
}

// 这里是给name属性重命名，是先声明了一个变量n，然后将对象obj中的name属性值赋值给n。
// 因此，这里解构得到的是变量n和age，所以访问name会报错。
const {name: n, age, hobbies} = obj;
console.log(n); // lisi
console.log(name); // ReferenceError: name is not defined
1
2
3
4
5
6
7
8
9
10
const obj = {
    name: 'lisi',
    age: 12
}

const {name: n, age, hobbies} = obj;
console.log(n); // lisi
// obj中没有hobbies属性，默认解构出来的是undefined
console.log(hobbies); // undefined
console.log(name); // ReferenceError: name is not defined
1
2
3
4
5
6
7
8
9
10
const obj = {
    name: 'lisi',
    age: 12
}

// 也可以为要解构的属性设置默认值
const {name: n, age, hobbies = 'have no hobby'} = obj;
console.log(n); // lisi
console.log(hobbies); // have no hobby
console.log(name); // ReferenceError: name is not defined
1
2
3
4
5
6
7
8
9
10

需要注意：只有当对象属性是undefined时才会使用默认值，属性为null、false或者0时都不会使用默认值。设置默认值的目的：当用户没有传递某些参数的时候，可以基于默认值来实现一种回滚机制。

数组解构

const arr = [1, 2, 3];
// 解析第一个和第三个元素，跳过第二个元素
const [a, ,b] = arr;
console.log(a, b); // 1 3
1
2
3
4

数组解构应用

可以用来交换两个变量的值。

[a, b] = [b, a];
1

解构赋值：结构相同，可以通过相同的结构来取值。

const {length} = [1, 2, 3];
console.log(length); // 3
1
2
const [,b, c] = [1, 2, 3];
// 忽略个别值
console.log(b, c); // 2 3

// 剩余运算符
const [a, ...args] = [1, 2, 3];
console.log(a, args); // 1 [ 2, 3 ]
// 注意：剩余运算符只能用在最后一项，有收敛的功能，会把剩余的内容重新组装。
let [, ...args] = ['lisi', 12, 13, 11];
console.log(args); // [ 12, 13, 11 ]

let {name, ...obj} = {name: 'lisi', age: 12, sex: 'man'};
console.log(obj); // { age: 12, sex: 'man' }
1
2
3
4
5
6
7
8
9
10
11
12
13

注意：剩余运算符只能用在最后一项，有收敛的功能，会把剩余的内容重新组装。

展开运算符应用

将类数组转为数组

function fn () {
    console.log(arguments); // { '0': 1, '1': 2, '2': 3 }
    console.log([...arguments]); // [ 1, 2, 3 ]
}

fn(1, 2, 3);
1
2
3
4
5
6

数组拷贝

let arr = [1, 2, 3];
// 数组拷贝：展开运算符或者使用slice方法，都是浅拷贝
// let newArr = arr.slice(0);
let newArr = [...arr];
// Object.assign也是浅拷贝
console.log(arr === newArr); // false
1
2
3
4
5
6

arr改变了，newArr也跟着改变了，所以是浅拷贝。

let arr = [{name: 'lisi'}, 1, 2];
let newArr = [...arr];
arr[0].name = 'wangwu';
console.log(arr, newArr); // [ { name: 'wangwu' }, 1, 2 ] [ { name: 'wangwu' }, 1, 2 ]
1
2
3
4

实现深拷贝

let obj = {name: 'lisi', age: 12};
// JSON.parse(JSON.stringify(obj)); 纯对象没问题
const obj2 = JSON.parse(JSON.stringify(obj));
obj2.name = 'wangwu';
console.log(obj, obj2); // { name: 'lisi', age: 12 } { name: 'wangwu', age: 12 }
1
2
3
4
5
let obj = {name: 'lisi', age: 12, fn: function name() {}};

const obj2 = JSON.parse(JSON.stringify(obj));
obj2.name = 'wangwu';
// 函数属性会丢失
console.log(obj, obj2); // { name: 'lisi', age: 12, fn: [Function: name] } { name: 'wangwu', age: 12 }
1
2
3
4
5
6

← 4. 箭头函数→