《ECMAScript 6 入门》笔记 变量的解构赋值

 

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

eg.

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

a//1
b//2
c//3

let [a] = [1,2,3];

a//1

let [a,b] =[1];
a//1
b//undefined

let {a} = {a:1,b:2,c:3}

a//1

 可见，当 = 左边的格式与右边的格式一致时，左边的变量就会被赋值，

本质上是模式匹配

let [x, y, z] = new Set(['a', 'b', 'c']);
x // "a"

 只要某种数据结构具有Iterterator接口都可以采用数组形式的解构赋值

解构赋值允许指定默认值

let [a=1,b] = [2,2];
a//2 
b//2

let [a=1,b]  = [undefined,2];
a//1
b//2
let [a=1,b] =[null,2];

a//null
b//2

 数组成员是null 默认值不会生效，因为null 不严格等于undefined 

function f() {
  console.log('aaa');
}

let [x = f()] = [1];

x//1

当默认值为一个表达式时，这个表达式时惰性求值的，即只在用到的时候，才回去求值

function f() {
  console.log('aaa');
}

let [x = f()] = [1];

x//1

 解构可以用于对象，数组的解构是按次序排列的，对象则按照变量名。

当解构失败是变量的值为undefined ，对对象解构，也可以很方便的将现有对象的方法，赋值到某个变量

如果变量名与属性名不一致，可以使用 对象属性名：变量名 来获取

let {a:b} = {a:1};
b//1
let {a:a} ={a:1};
a//1

这实际的说明了对象的解构赋值详细的写法,也说明了对象的解构赋值的内部机制，是先找到同名属性，然后赋值给对应

的变量，真正赋值的是后者而不是前者

let obj = {
  arr: [
    'Hello',
    { c: 'World' }
  ]
};

let {arr:[b,{c}]} =obj;

b//Hello
c//World

与数组一样解构也可以用于嵌套解构的对象，arr是模式模式不是变量，所以不会被赋值

 

let obj = {
  arr: [
    'Hello',
    { c: 'World' }
  ]
};

let {arr,arr:[b,{c}]} =obj;
arr//[
    'Hello',
    { c: 'World' }
  ]
b//Hello
c//World

 

这样则是赋值

let obj =[];

let{a:obj.b} ={a:'a'};
obj.b//'a'

 当然也可以这样赋值

let obj ={};

let obj1 ={a:1};
Object.setPrototypeOf(obj, obj1);

let{a} =obj;

a//1

 obj的原型对象是obj1 a不是obj的自身属性，而是继承自obj1的属性，解构赋值是可以获取的。

所以解构赋值可以获取到继承的属性。

注意事项

• 如果要将一个已经声明的变量用于解构赋值。

// 错误的写法
let x;
{x} = {x: 1};
// SyntaxError: syntax error
//正确的写法
let x;
({x} ={x:1});
x//1

• 解构赋值允许左边的模式之中不放置任何变量名

({} ={a:1};)

• 由于数组是特殊的对象，因此可以对数组进行对象属性的解构

let {0:a} = [1];
a//1

字符串解构赋值

let [a,b,c] = 'def';

a//d
b//e
c//f

let {length:len} ='abc';

len//3

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

数组都有length 属性，所以可以从字符串中解构赋值到length属性

数值和布尔值的解构赋值

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

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

解构赋值时，如果右边是数值或布尔值，则会先转化为对象

数组和布尔值转化的包装对象都有toString属性，因此可以解构赋值

let { prop: x } = undefined; // TypeError
let { prop: y } = null; // TypeError

解构赋值规则，只要=右边不是对象或者数组就先将其转化为对象，null 和 undefined 不能转化为对象，所以对他们进行

解构赋值会报错

函数参数的解构赋值

function add([x, y]){
  return x + y;
}

add([1, 2]); // 3

 函数add 参数传入为一个数组，在传入的那一刻参数被解构赋值为x,y 两个变量