ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)
《ES6标准入门》
之前版本的js赋值:
var x = 1
var y = 2
//或者
var x = 1 , y = 2
ES6下进行js多变量赋值
let [ x , y ] = [ 1 , 2 ];
// x = 1 ,y = 2
ES6的变量赋值机制,ES6的解构赋值也可以为变量先设置一个默认值
var [x,y='b'] = ['a'] // x = a ; y =b
var [x,y='b'] = ['a',undefined] // x = a ; y =b
暂时性死区:在y未定义的情况下调用x=y
,那么该操作就会被报错
let [x=1,y=x]=[]; //x = 1;y=1
let [x=1,y=x]=[2] //x = 2;y=2
let [x=1,y=x]=[1,2] //x = 1;y=2
let [x=y,y=1]=[] //Error
在重新赋值的情况下,x
的默认函数不会执行
function f(x){
console.log(x)
}
let [x = f()] = [1] //x能取到值所以fun()不会执行
如果一个数组成员是null
,那么默认值不会生效,因为null
不严格等于undefined
var [x,y='b'] = ['a']
var [x,y='b'] = ['a',null]
console.log(null === undefined) // false 严格模式
console.log(null == undefined) // true 不严格模式
变量赋值
变量的解构赋值要建立在赋值的key
对应到变量的名字的基础上
var { x , y :} = { x : "asd" , y : "qwe" } // x = "asd" , y = "qwe"
如果变量名与key
不同,需要改变赋值的写法
var { a : b } = { c: "asd" , d: " qwe" } // a = "asd"
注:对象的结构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量,所以相当于先声明了一个变量,再进行赋值,而let和const是不支持两次声明变量的
因为var是支持两次声明变量的
let a;
let a = {a : "asd"} // syntaxError ×
var b;
var b = {b: "asd"} // b = "asd" √
变量赋值
字符串的解构赋值
const [ a, b, c, d, e ] = 'hello' // a="h" b="e" c="l" d="l" e="o"
属性解构赋值
解构赋值的规则是只要等号右面的值不是对象,就先将其转为对象,由于undefined和null无法转为对象,所以对它们进行解构赋值都会报错。
let { length : num } = "hello" // let = 5
let { toString : type } = 132 // type === Number.prototype.toString true
let { toString : type } = true // type === Boolean.prototype.toString true
let { a : x } = undefined ; // TypeError
let { a : y } = null ; //TypeError