es6之变量的解构赋值

184 阅读1分钟

解构赋值,指的是按照相应位置,对变量进行赋值(一个萝卜一个坑)

图片来自网络

解构赋值允许指定默认值

let [foo = true] = []
console.log(foo)  // true

let {a = 3} = {}
console.log(a)   // 3

数组解构赋值

let [a, b, c] = [1, 2, 3]

console.log(a,b,c) //1,2,3

对象解构赋值

let { name, age } = { name: '法外狂徒张三', age: 33 }  

console.log(name) // "法外狂徒张三"
console.log(age)  // 33

//左边的变量想取到右边对象的属性,变量必须与属性同名
let { sex } = { name: '法外狂徒张三', age: 33 }  
console.log(sex)  //解构失败,变量的值等于undefined

//嵌套结构
let people = {
    name:'法外狂徒张三',
    age:33,
    fault:{
        active:'偷电瓶车'
    }
}
let {name, age, fault:{ active} } = people
console.log(name) // "法外狂徒张三"
console.log(age)  // 33
console.log('罪行是:'+active) // 罪行是:偷电瓶车

字符串解构赋值

const [a, b, c, d, e] = 'hello'

console.log(a) // "h"
console.log(b) // "e"
console.log(c) // "l"
console.log(d) // "l"
console.log(e) // "o"

//字符串有一个length属性,因此还可以对这个属性解构赋值。
let {length : len} = 'hello';
console.log(len)   // 5

数值和布尔值的解构赋值

// 如果等号右边是数值和布尔值,则会先转为对象
// 数值和布尔值的包装对象都有toString属性,因此变量s都能取到值。
let {toString: s} = 123        
s === Number.prototype.toString // true

let {toString: s} = true;
s === Boolean.prototype.toString // true