hugh 的个人博客

变量解构赋值--ES6学习笔记(三)

1、了解

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

ES6之前赋值方式

var a=1;
var b=2;

或者
var a=1,b=2;

ES6允许这样赋值

var [a,b] = [1,2];

2、解构规则

1)数组结构赋值

等号左右两边模式相同,左边的变量会被赋予对应的值

1.1)结构不成功,即右侧模式相同,但匹配没有对应的值

var [a]=[];
let [b,c]=[1];

--a:undefined,b:1,c:undefined

1.2)不完全结构,即右侧模式相同,且右侧的值多余左侧的变量

var [a,b] = [1,2,3];
let [e,[f],g]= [1,[2,3],4];

--a:1,b:2,e:1,f:2,g:4

1.3)结构失败,即右侧模式和左侧不匹配,右侧结构为具备Iterator接口的对象

var [foo] = 1; //TypeError: 1 is not iterable

let [a] = {};//error

let [b] = Array.prototype.slice.call({length:1,0:1});//b:1

在ES6中,有三类数据结构原生具备Iterator接口:数组、某些类似数组的对象、Set和Map结构。

2、对象结构赋值

 对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。

2.1)同变量名、属性名情况

var {a,b} = {a:1,b:2};
a//1
b//2

var {c,d} = {c:1,e:2};
c//1
d//undefined

 

2.2)变量名和属性名不一致时

感觉像sql中的重命名,实际使用了ES6中属性的简洁表达:

var { a: b } = { a: "aaa", c: "bbb" };
b // "aaa"

2.3)对象嵌套模式匹配正确,可解析

var obj = {
  p: [
    "Hello",
    { y: "World" }
  ]
};

var { p: [x, { y }] } = obj;
x // "Hello"
y // "World"

2.4)指定默认值

var {a=1} = {}
a//1

默认值生效的条件是,对象的属性值严格等于undefined

2.5)注意点

如果解构模式是嵌套的对象,而且子对象所在的父属性不存在,那么将会报错。

// 报错
var {a: {b}} = {c: 'c'};

如果要将一个已经声明的变量用于解构赋值,必须非常小心。

var x;
{x} = {x: 1};//SyntaxError: expected expression, got '='

({x} = {x: 1})//正确

3、字符串解构

字符串本身可认为是类数组的结构

var [a,b,c] = "123";
a;//1
b;//2
c;//3
var {length:len} = '123';
len//3


4、函数参数解构

 

 

 

 


标题:变量解构赋值--ES6学习笔记(三)
作者:hugh0524
地址:https://blog.uproject.cn/articles/2016/06/24/1466738876988.html