ES6入门教程之变量的解构赋值详解

前言

我们经常定义许多对象和数组，然后有组织地从中提取相关的信息片段。在ES6中添加了可以简化这种任务的新特性：解构。解构是一种打破数据结构，将其拆分为更小部分的过程。本文将详细介绍ES6解构赋值，下面话不多说了，来一起看看详细的介绍吧

数组的解构赋值

基本用法

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为结构。

在ES6之前想要为变量赋值，只能指定其值，如下：

let a = 1;let b = 2

而在ES6中可以写成这样，如下：

let [a,b] = [1,2]// a = 1, b = 2

值得注意的是，等式两边的值要对等，这样左边的变量才会被赋上右边对应的值，如果不对等左边的值将会出现undefined，如下写法：

let [foo,[[bar],baz]] = [1,[[2],3]]foo // 1bar // 2baz // 3

注意：只有左右两边的 格式一定要对等，数量可以不对等。

let [a,b,c] = [1,2]a = 1, b = 2, c = undefinedlet [a,,c] = [1,2,3]a = 1, c = 3let [a, ...b] = [1,2,3]a = 1, b = [2,3]let [a] = []let [b,a] = [1]a = undefined

还有一种情况，等号左边为数组，但是等号右边为其他值，将会报错。如下：

let [a] = 1;let [a] = false;let [a] = NaN;let [a] = undefined;let [a] = null;let [a] = {};以上都会报错

但是如果左边为数组，右边为字符串，将会取字符串的第一个下标的值

let [a] = '121321' a = '1'let [a] = 'adgasg' a = 'a'

对于Set结构，同样可以使用数组的解构赋值。

let [x,y,z] = new Set([1,2,3])x = 1, y = 2, z = 3

默认值

解构赋值允许指定默认值

let [a = 3] = [] // a:3let [a = 3,b] = [,4] // a:3 b:4let [a = 3,b] = [5,4] // a:5 b:4

特殊

let [a = 3] = [undefined] // a:3let [a = 3] = [null] // a:null

Tips: 在es6中使用严格相等运算符，在结构赋值中如果需要默认值生效，则应对等的值为undefined的时候才会采用默认值，否则还是使用赋值。上面中null 不严格等于undefined++

如果默认值的赋值为一个表达式，只有当等号右边的赋值没有值为undefined的时候，才会取表达式中的值，如下：

function demo(){ console.log('demo')}let [a = demo()] = [] // a: demolet [a = demo()] = [1] // a : 1

对象的解构赋值

与数组的不同点是，数组的元素必须和赋值的元素要位置一致才能正确的赋值，而对象的解构赋值则是等号两边的变量和属性同名即可取到正确的值。否则值为 undefined