【ES6】 变量的解析赋值

原创 2018年04月17日 14:17:05

1、数组的解构赋值

基本语法

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

下面是一些使用嵌套数组进行解构的例子:

let [foo,[[bar],baz]] = [1,[[2],3]];
foo;   //1
bar;   //2
baz;   //3

let [ , , third] = [1,2,3];
third;   //3

let [x, , y] = [1,2,3];
x;   //1
y;   //3

let [head, ...tail] = [1,2,3,4];
head;   //1
tail;   //[2,3,4]

let [x, y, ...z] = ['a'];
x;   //'a'
y;   //undefined
z;   //[]

如果解构不成功,变量的值就等于undefined。

let [foo] = [];
let [bar, foo] = [];

以上两种情况foo的值都是undefined。

另一种情况是不完全解构,即等号左边的模式,只匹配一部分的等号右边的数组。这种情况下,解构仍能成功。

let [x,y] = [1,2,3];
x;   //1
y;   //2

let [a,[b],d] = [1,[2,3],4];
a;   //1
b;   //2
d;   //4

如果等号的右边不是数组(或者严格地说,不是可遍历的结构),会报错。

对于Set结构,也可以使用数组的解构赋值。

let [x,y,z] = new Set([1,2,3]);
x;   //1
y;   //2
z;   //3

默认值

解构赋值允许指定默认值。

let [a = true] = [];
a;   //true

let [x,y = 'b'] = ['a',undefined];
x;   //'a'
y;   //'b'

ES6内部使用严格相等运算符(===),判断一个位置是否有值。所以,只有当一个数组成员严格等于undefined,默认值才会生效。

let [x = 1] = [undefined];
x;   //1

let [y = 1] = [null];
y;   //null

上面代码中,如果一个数组成员是null,默认值就不会生效,因为null不严格等于undefined。

如果默认值是一个表达式,那么这个表达式是惰性求值的,即只有在用到的时候,才会求值。

function f(){
    console.log('aaa');
}
let[x = f()] = [1];
x;   //1

上面代码中,因为x能取到值,所以函数f不会执行。等价于下面代码:

let x;
if([1][0] === undefined){
    x = f();
}else {
    x = [1][0];
}

可用于交换变量的值。

let x = 1;
let y = 2;
[x, y] = [y, x];
x;   //2
y;   //1


2、对象的解构赋值

解构不仅可以用于数组,还可以用于对象。

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

let{x,y} = {x:"aaa",y:"bbb"};
x;   //"aaa"
y;   //"bbb"

let{z} = {x:"aaa",y:"bbb"};
z;   //undefined

如果变量名与属性名不一致,必须写成下面这样。

let {ooo:ppp} = {ooo:111,ppp:222};
ooo;   //报错
ppp;   //111

let obj = {first : 'hello', last: 'world'};
let {first:f, last:l} = obj;
f;   //'hello'
l;   //'world'

这实际上说说明,对象的解构赋值是下面形式的简写。

let {foo: foo, bar: bar} = {foo: "aaa",bar: "bbb"};

也就是说,对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量。真正被赋值的是后者,而不是前者。

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

此时p是模式,不是变量,因此不会被赋值。如果p也要作为变量赋值,可写成下面这样。

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

对象解构赋值的默认值同数组解构赋值。

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

let x;
{x} = {x:1};   //报错

上面代码会报错,因为js引擎会将{x}理解成一个代码块,从而发生语法错。

let a;
({a} == {a: 1});
a;   //1


3、字符串的解构赋值

字符串也可以解构赋值。因为字符串被转换成了一个类似数组的对象。

const [a1,b1,c1,d1,e1,f1] = "hello";
a1;   //"h"
b1;   //"e"
c1;   //"l"
d1;   //"l"
e1;   //"o"
f1;   //undefined

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

let {length : len} = 'hello';
len;   //5

4、数值和布尔值的解构赋值

解构赋值时,如果等号右边是数值和布尔值,则会先转为对象。

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

let {toString: s} = true;
s === Boolean.prototype.toString;   //true
解构赋值的规则是,只要等号右边的值不是对象或数组,就先将其转为对象。由于undefined和null无法转为对象,所以对它们进行解构赋值,会报错。


5、函数参数的解构赋值

function move({x = 0, y = 0} = {}){
    return [x,y];
}
move({x: 3, y: 8});   //[3,8]
move({x: 3});   //[3,0]
move({});   //[0,0]
move();   //[0,0]
上面代码中,函数move的参数是一个对象,通过对这个对象进行解构,得到变量x和y的值。如果解构失败,x和y等于默认值。

下面这种写法会得到不一样的结果。

function move({x, y} = { x: 0,y: 0}){
    return [x,y];
}
move({x: 3, y: 8});   //[3,8]
move({x: 3});   //[3, undefined]
move({});   //[undefined, undefined]
move();   //[0,0]

undefined就会触发函数参数的默认值。

[1,undefined,3].map((x = 'yes') => x);
//   [1, "yes", 3]

ES6中变量的结构赋值作用

1 交换变量的值[x, y] = [y, x]; 变换x和y的值.2 函数多个返回值通常函数只有一个返回值,通过结构赋值的方式,可以将返回值,直接匹配多个变量.function example() {...
  • wu_xiao_yang
  • wu_xiao_yang
  • 2017-01-03 13:58:33
  • 1412

ES6 解析赋值

解析赋值可是解决了之前es5的一大弊端,如果对一个对象取值,需要写好长的代码,现在使用解析赋值可以轻松的获取对应的元素。 解析赋值主要用在可以迭代的变量上。 例如 对象 数组 集合 等具有Iter...
  • leol77
  • leol77
  • 2016-12-14 11:58:31
  • 593

ES6之——变量的解构赋值

一、数组的结构赋值1>、什么是解构?ES6允许我们队数组和对象中提取值,对变量进行赋值,这被叫做“解构”。 通常我们像下面这样为变量赋值:var a = 1; b = 2; c = 3...
  • u014695532
  • u014695532
  • 2016-07-03 14:01:45
  • 3462

ES6中的变量解构赋值的书写模式

ES6中的解构赋值的书写模式var [a, b, c] = [1, 2, 4]; let [foo, [[baz], bar]] = [1, [[2], 3]]; let [, , third] ...
  • itpinpai
  • itpinpai
  • 2016-09-20 17:19:03
  • 994

ES6变量的结构赋值

变量的解构赋值 1、数组的解构赋值 基本用法 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。 以前,...
  • Ihaveabeautifuldream
  • Ihaveabeautifuldream
  • 2016-10-13 11:51:25
  • 1510

【ES6】变量的解构赋值

1.数组的解构赋值 var [a, b, c] = [1, 2, 3]; 这种写法属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子。 ...
  • lx583274568
  • lx583274568
  • 2016-07-25 22:29:57
  • 1627

3.es6之变量的解构赋值

ES6解构:es6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称之为解构1.数组的解构赋值var [a,b,c] = [1,2,3]; console.log(a);//1 conso...
  • qq_36846234
  • qq_36846234
  • 2018-01-04 17:26:32
  • 189

ES6 变量解构赋值的用途

变量的解构赋值
  • web1504
  • web1504
  • 2017-05-15 17:21:46
  • 991

ES6--变量的声明及解构赋值

ES6的目标是使得JavaScript语言可以用来编写大型的复杂的应用程序,成为企业级开发语言;该标准已于2015年6月17日正式发布。但是真正的普及我认为还得需要一段时间,然而这并不是理由让我们不去...
  • ligang2585116
  • ligang2585116
  • 2017-02-11 21:13:57
  • 3841

ES6——Day2(数组的解构赋值)

1、Destructuring ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这称为“解构”。 2、不完全解构 等号左边的模式,只匹配一部分的等号右边的数组。 3、指定默认值 ...
  • zxy9602
  • zxy9602
  • 2017-03-09 21:10:11
  • 689
收藏助手
不良信息举报
您举报文章:【ES6】 变量的解析赋值
举报原因:
原因补充:

(最多只允许输入30个字)