es6 学习笔记(变量的结构赋值)

变量的解构赋值实质上是一种匹配模式,只要等号两边的模式相同,那么左边的变量就会被赋予相对应的值。

解构赋值只要分为:

1、数组的解构赋值

2、对象的解构赋值

3、基本类型的解构赋值

数组的解构赋值:

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

与上面效果相同

let [a,b,c] = [1,2,3];
console.log(a,b,c);         // 1,2,3
let [a,b,c] = [1,2,3];
console.log(a,b,c);         // 1,2,3
let [,,a] = [1,2,3];
console.log(a);         // 3
let [x] = [];    // 相当于 let x;
console.log(x);         // undefined

指定默认值

let [x = 1] = [];    // 相当于 let x;
console.log(x);         // undefined

对象的解构赋值

方式一:

let { a , b } = {b : "bbb", a : "aaa"};
console.log( a , b );       // aaa , bbb

方式二 : 

let { a : b } = { a : "aaa" };
console.log(b);     // aaa
console.log(a);     // Uncaught ReferenceError: a is not defined

基本类型的解构赋值

eg1:

let [a,b,c,d] ="maiov";
console.log(a,b,c,d);       // m a i o

eg2 : 类似数组的对象都有一个 length 属性,因此还可以对这个属性解构赋值

let { length : len } = "hello";
console.log(len);       // 5

eg3: 数值和布尔值的解构赋值

let { toString : s } = 123;
console.log(s);         // function toString() { [native code] }
console.log( s === Number.prototype.toString );         // true
let { toString : t } = true;
console.log(t);         // function toString() { [native code] }
console.log( t === Boolean.prototype.toString );        // true

eg4 : null 和 undefined 都不能进行解构赋值

let [a] =null;      // Cannot read property 'Symbol(Symbol.iterator)' of null
原文地址:https://www.cnblogs.com/debra/p/7081481.html