ES6 解构赋值

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

之前，为变量赋值，只能指定值

var a = 0;
var b = 1;
var c = 2;

在ES6中可以写成

var [a,b,c] = [1,2,3]
var {a,b,c} = { a:'1' , b:'2' , c:'3'}

ES6根据数组的下标对应位置，对变量进行赋值，也可以称为 ‘’模式匹配‘’ 只要 等号双边模式相同，左边的变量就会被赋予对应的值

var [a,b,c] = [1,2,3]
console.log(a) //输出 1
console.log(b) //输出 2
console.log(c) //输出 3
var { a , b , c } = { a:'1' , b:'2' , c:'3'}
console.log(a) //输出 1
console.log(b) //输出 2
console.log(c) //输出 3

如果解构赋值失败，对象的值会等于 undefined

var [a,b] = [1]
console.log(a) //输出undefined
console.log(b) //输出undefined
var { a } = { b:'1' }
console.log(a) //输出undefined

还有的情况为不完全解构，即 等号左边的模式 只 匹配一部分等号右边的数组，这种情况下，解构赋值依然可以成功

var [ a , c ] = [ 1 ,  2 , 3 , 4 ]
console.log(a) //输出1
console.log(c) //输出2

var [ a , [b] , c ] = [ 1 , [ 2 , 3] , 4 ]
console.log(a) //输出1
console.log(b) //输出2
console.log(c) //输出4

如果等号右边不为数组或不可遍历的解构，将会报错

var [a] = 1;
var [a] = NaN;
var [a] = undefined;
var [a] = null;
var [a] = { };
var [a] = false;

以上结构都会报错

解构赋值允许默认值

var [a = 1] = [ ]
console.log(a) // 输出1

var [a = 1] = [ null ]
console.log(a) // 输出null

ES6内部使用 严格相等运算符 === 判断一个位置是否有值，当数组成员严格等于undefined的时候，默认值才会生效,

当数组成员等于null的时候，默认值不会生效，因为js中null不严格等于undefined

注:如果将一个已经声明的变量用于结构赋值，会出现很多问题

var a ; 
{a} = { a:'1' } // 报错SyntaxError: syntax error

因为js引擎会将{a}理解成一个代码块，从而发生语法错误，只有不将大括号写在行首，避免js将其解释为代码块

var a ; 
({a} = { a:'1' });

字符串也可以解构赋值

var [a,b,c,d] = 'word';
console.log(a) // 输出 w
…
console.log(d) // 输出 d

因为在此时 ， 字符串被转换成了一个类似数组的对象

学会解构赋值会让赋值更简单，代码更简短

转载时请注明出处及相应链接，本文永久地址：https://blog.yayuanzi.com/25378.html

微信打赏

支付宝打赏

感谢您对作者Miya的打赏，我们会更加努力！    如果您想成为作者，请点我