es6+最佳入门实践(2)

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

你可能感兴趣的:(es6+最佳入门实践(2))