JS解构赋值

1、交换变量

通常使用交换变量是定义一个临时变量然后进行交换，而使用解构赋值就能快速的交换变量，例如

// 常用方法
let temp;
let a;
let b;
temp = a;
a = b;
b = temp

//使用解构赋值
let a = 1;
let b = 2;

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

a; // => 2
b; // => 1

2、访问数组中的元素

有种场景，咱们可能有一个为空的项数组。并且希望访问数组的第一个、第二个或第n个项，但如果该项不存在，则使用指定默认值。

通常会使用数组的length属性来判断

const colors = [];

let firstColor = 'white';
if (colors.length > 0) {
 firstColor = colors[0];
}

firstColor; // => 'white'

使用数组解构，可以更简洁的实现同样的效果：

const colors = [];

const [firstColor = 'white'] = colors;

firstColor; // => 'white'

const [firstColor = ‘white’] = colors 解构将colors数组的第一个元素赋给firstColor变量。如果数组在索引0处没有任何元素，则分配“white”默认值。

当然还可以更灵活，如果只想访问第二个元素，可以这么做。

const colors = [];

const [, secondColor = 'black'] = colors;

secondColor; // => 'black'

注意解构左侧的逗号：它表示忽略第一个元素,secondColor使用colors数组中索引为1的元素进行赋值。

3、解构动态属性

let jsonData = {
	a:1,
	b:2
	}
const {a, b} = jsonData;
a; // 1
b; // 2

4、解构 iterables

许多原生基本类型和对象都是可迭代的: array, string, typed arrays, set 和 map。
如果不想局限于基本类型，通过实现可迭代协议，可以定制解构逻辑。
movies包含一个movie对象列表。在解构movies时，将title作为字符串获取是非常棒的。让咱们实现一个自定义迭代器。

const movies = {
  list: [
    { title: 'Heat' }, 
    { title: 'Interstellar' }
  ],
  [Symbol.iterator]() {
    let index = 0;
    return {
      next: () => {
        if (index < this.list.length) {
          const value = this.list[index++].title;
          return { value, done: false };
        }
        return { done: true };
      }
    };
  }
};

const [firstMovieTitle] = movies;
console.log(firstMovieTitle); // => 'Heat'

movies对象通过定义Symbol.iterator方法来实现可迭代协议，迭代器迭代title。

遵循iterable协议允许将movies对象分解为title，具体方法是读取第一个movies的title:const [firstMovieTitle] = movies。