ES6 - 解构赋值（学者说）

ES6解构赋值

 前言：解构赋值语法是一种JavaScript表达式。通过解构赋值，可以将属性/属性值从对象/数组中取出，然后赋值给其他变量

语法

 数组解构

var a,b,rest;
[a,b] = [10,20]；
console.log(a)  // 10
console.log(b)  // 20

 对象赋值

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

 ...rest 解构对象

({
    
    a,b,...rest} = {
    
    a:10,b:20,c:30,d:40})
console.log(a) // 10
console.log(b) // 20
console.log(rest)   // {c:30,d:40}

 ...rest 解构数组

[a,b,...rest] = [10, 20 , 30 ,40 ,50]
console.log(a) // 10
console.log(b) // 20
console.log(rest)  // [30,40,50]

 解构一个从函数返回

function f(){
    
    
	return [1,2]
}
var a,b
[a,b] = f()
console.log(a)  // 1
console.log(b)  // 2

更多应用场景

 默认值

var a, b;
[a=2, b=3] = [1];
console.log(a); // 1
console.log(b); // 3

 交换变量

var a = 1;
var b = 3;
[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1

 忽略你不感兴趣的返回值

function f() {
    
    
  return [1, 2, 3];
}
var [a, , b] = f();
console.log(a); // 1
console.log(b); // 3

 将剩余数组赋值给一个变量
    当解构一个数组时，可以使用剩余模式，将数组剩余部分赋值给一个变量。

var [a, ...b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // [2, 3]

 给新的变量名赋值
     可以从一个对象中提取变量并赋值给和对象属性名不同的新的变量名。

var j = {
    
    a: 33, b: false};
var {
    
    a: aa, b: bb} = j;
console.log(aa); // 33 
console.log(bb); // false 

 For of 迭代和解构

var people = [
  {
    
    
    name: 'Mike Smith',
    family: {
    
    
      mother: 'Jane Smith',
      father: 'Harry Smith',
      sister: 'Samantha Smith'
    },
    age: 35
  },
  {
    
    
    name: 'Tom Jones',
    family: {
    
    
      mother: 'Norah Jones',
      father: 'Richard Jones',
      brother: 'Howard Jones'
    },
    age: 25
  }
];

for (var {
    
    name: n, family: {
    
    father: f}} of people) {
    
    
  console.log('Name: ' + n + ', Father: ' + f);
}

// "Name: Mike Smith, Father: Harry Smith"
// "Name: Tom Jones, Father: Richard Jones"