最新消息:文章中包含代码时,请遵守代码高亮规范!

ES6 解构赋值

原创文章 user 124浏览 0评论

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


pay_weixin
pay_weixin
微信打赏
pay_weixin
支付宝打赏
感谢您对作者Miya的打赏,我们会更加努力!    如果您想成为作者,请点我

发表我的评论
取消评论

表情