es6+最佳入门实践

Posted 2021-02-08 dadifeihong

2.解构赋值

2.1.什么是解构赋值？

什么是解构赋值？这里的关键字还是赋值，这是说如何去赋值的问题，这里说的解构可以理解为解散重新构造，所以解构赋值可以理解为解散重新构造后进行赋值，通常是左边一种结构，右边一种结构，左右的结构拆开来一一对应进行赋值，例如：

let a, b
[a, b] = [1, 2]
console.log(a, b)

这里就相当于把1赋值给a，把2赋值给b，这样的操作就叫做解构赋值，从本质上来说，结构解构赋值是一种匹配模式，只要等号两边的模式相同，那么左边的变量就可以被赋值给右边对应的值

为什么要使用解构赋值？在没有解构赋值的时候，多个赋值会比较麻烦，为了书写更加方便，加入解构赋值是非常有必要的，例如：没有解构赋值的时候，交互两个变量的值，我们是这样做的

let a = 10;
let b = 20;
let temp = a;
a = b;
b = temp;

console.log(a, b);

有了解构赋值以后，我们的代码可以这样写：

let a = 10;
let b = 20;
[a, b] = [b, a];
console.log(a, b);

2.2.数组的解构赋值

左右两边是数组这种结构，我们称为数组的解构赋值，这样也是非常常用的一种形式

注意1: 解构不成功，值为undefined

let [a, b] = [10]
console.log(a, b)  // 10, undefined

注意2: 解构的时候可以设置默认值

let [a, b=20] = [10]
console.log(a, b)  // 10 20

注意3: 值比变量多的情况可以使用"..."符号

let [a, b, ...rest] = [1, 2, 3, 4, 5, 6]
console.log(a,b,rest)

//rest元素必须放在最后，下面这种写法会报错
let [a, b, ...rest, c] = [1, 2, 3, 4, 5, 6]

2.3.对象的解构赋值

如果等号左右两边是对象的结构，我们称之为对象的解构赋值，也是非常常用的形式

let { a:a, b:b } = { a: 1, b: 2 }
console.log(a, b)

注意1: 对象的解构赋值和数组不同，数组的赋值是以位置为对应关系进行赋值的，必须按顺序来写，而对象的赋值是以属性名为对应关系的，因此，不用考虑顺序,其内部的机制就是，先找到同名的属性，再把右边的值赋值给左边的变量

注意2: 如果左边的（{属性名:变量名}）属性名和变量名一样，那么可以简写成下面的形式

// let { a:a, b:b } = { a: 1, b: 2 }
//上面这种写法和下面的写法是等价的
let {a, b} = {a:1,b:2}
console.log(a, b)

//如果属性名和变量名是不同的，那必须写完整，例如下面这种写法

let {x:m,y:n} = {x: 1, y: 2}  
// 这里的机制是 根据x的对应关系 把1赋值给m 根据y的对应关系，把2赋值给n

注意3: 对象的解构赋值也可以设置默认值

let {a, b=20} = {a: 1}
console.log(a, b) //1, 20

2.4.数组和对象解构赋值嵌套

// 数组的解构赋值嵌套
let [a, [b, c],d] = [1, [2, 3], 4]
console.log(a, b, c, d)


// 对象的解构赋值嵌套

let obj = {
  p: [
    'Hello',
    { y: 'World' }
  ]
};

let { p, p: [x, { y }] } = obj;
//p=['hello', {y: 'world'}] x='Hello' y = 'World'

2.5.解构赋值应用

1.变量交换

let a = 10;
let b = 20;
[a, b] = [b, a];
console.log(a, b);

2.函数返回多个值

function fn() {
  return [1, 2, 3];
}
let [a, b, c] =  fn();

3.参数定义

// 参数是一组有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]);

// 参数是一组无次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});

4.提取json数据

let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};

let { id, status, data: number } = jsonData;

console.log(id, status, number);
// 42, "OK", [867, 5309]

视频教程地址：http://edu.nodeing.com/course/50