ECMAScript6(2)：解构赋值

tinylcy 发布于2019-08-23 11:45 / 3153人阅读

摘要：解构赋值解构赋值简单来说就是对应位置数组或对应键名对象的变量匹配过程。字符串集合使用结构赋值实现叠加并交换变量对象的解构赋值对象的解构赋值与变量位置次序无关只取决于键名是否严格相等。

解构赋值

解构赋值简单来说就是对应位置(数组)或对应键名(对象)的变量匹配过程。如果匹配失败, 对于一般变量匹配不到结果就是 undefined, 对于具有展开运算符(...)的变量结果就是空数组。

数组的解构赋值

var [a, b, c] = [1, 2, 3];   //a=1, b=2, c=3
var [, , c] = [1, 2, 3];   //c=3
var [x, , y] = [1, 2, 3];  //x=1, y=3
var [head, ...tail] = [1, 2, 3, 4];   //head = 1, tail = [2, 3, 4];
var [x, y, ...z] = [1];   //x=1, y=undefined, z=[];
var [a, [b, c], d] = [1, [2, 3], 4];   //a=1.b=2, c=3, d=4
var [a, [b], d] = [1, [2, 3], 4];   //a=1.b=2, d=4

数组的解构赋值可以具有默认值, 在 ES6中对于目标数据使用严格相等(===)比较是否为空(undedined)。如果默认值是表达式, 那么对于该表达式采用惰性求值, 即只有在对应位置为空(undedined)时才执行该表达式。

var [a=1, b] = [];   //a=1, b=undefined
var [a=1, b] = [2, 3];  //a=2, b=3
var [a=1, b] = [undefined, 3];   //a=1.b=3
var [a=1, b] = [null, 3];  //a=null, b=3
var [a=1, b] = [NaN, 3];  //a=NaN, b=3

function f(){
  console.log("done");
  return 2;
}
var [a=f()] = [1];    //a=1
var [a=f()] = [];    //a=2, 输出 "done"

解构赋值的右侧表达式在必要的隐式转换后如果不具有 iterator 则遍历失败, 关于 iterator, 具体看iterator部分。这里可以先记住, 左边是数组结构的解构赋值, 右侧可以是数组, 字符串, 集合, Generator 函数, map等。

//字符串
var [a, b, c, d] = "123";   //a="1", b="2", c="3", d=undefined

//集合
var [a, b, c] = new Set(["1", "2", "3"]);  //a="1", b="2", c="3"

//Generator
function* fib(){
  let a = 1;
  let b = 1;
  while(1){
    yield a;
    [a, b] = [b, a + b];      //使用结构赋值实现叠加并交换变量
  }
}
var [a, b, c, d, e, f] = fib();  //a=1, b=1, c=2, d=3, e=5, f=8

//map
var map = new Map();
map.set("a", 1);
map.set("b", 2);
var [a, b] = map;  //a=["a", 1], b=["b", 2]

对象的解构赋值

对象的解构赋值与变量位置次序无关, 只取决于键名是否严格相等(===)。如果匹配失败, 结果就是 undefined

var {a, b, f} = {b:2, a:3, d:4};  //a=3, b=2, f=undefined
var node = {
  loc: {
    start:{
      x:1,
      y:2
    }
  }
};
var {loc: {start: {x:line}}} = node;  //line=1

可以在复制时对属性重命名, 但此时原名只用于匹配参数, 不生成变量：

var {name:alias} = {name:"Bob"};  //alias="Bob"
console.log(name);   //"global"
console.log(alias);   //"Bob"

对象解构同样可以指定默认值, 默认值生效(或表达式被行)的条件是对应属性值严格等于(===) undefined

var {a:3, b} = {b:2}; //a=3, b=2
var {a:3, b} = {a:null, b:2}; //a=null, b=2

解构嵌套对象父属性不存在会报错：

var {foo:{bar}} = {ba: 2};   //报错

解构对象如果和声明分开, 独立成为一行要加圆括号, 就想用 eval 解析 JSON 字符串的时候一样。因为系统会把一行开头花括号默认作为块级作用域的开始, 而不是对象的开始。

var a, b;
({a, b} = {a:2, b:10});   //a=2, b=10
{a, b} = {a:2, b:10};   //报错

//以下表达式无意义, 但没有错
({}=[1, 2]);
({}="abc");
({}=[]);

注意, 除了这样的情况, 不要滥用圆括号

右侧变量通过隐式类型转换可以转为对象的情况下也可以结构赋值：

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

技巧：解构的用处很多, 包括交换变量, 简化传参(可带默认值),

//参数传递
function f([x, y, z=4]){
  return [x+1, y+2, z+3];
}
var [a, b, c] = f([1, 2]);  //a=2, b=4, c=7
[[1, 2], [3, 4]].map(([a, b]) => a + b);   //返回 [3, 7]

//交换变量
var a=2, b=4;
[a, b] = [b, a];  //a=4, b=2

混合云云服务器解构赋值 ECMAScript6 对象解构解构函数

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97425.html

ECMAScript6 新特性——“变量的解构赋值”

摘要：数组的解构赋值允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。如果变量名与属性名不一致，必须写成下面这样。 1 数组的解构赋值 ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。基本用法 { var [a,[b,c],d,,...f] = [1,[2,3],4,5,6,7]; console...

Eric 2019-08-19 17:59 评论0 收藏0
常用ECMAScript6语法归纳

摘要：对象的解构赋值函数执行后，返回的是一个对象。分别取出对象中属性为和的值，根据解构赋值的规则，在左侧声明变量，放在大括号中，变量名要和属性名保持一致。箭头函数在中，箭头函数就是函数的一种简写形式允许使用箭头定义函数。原文博客地址，欢迎学习交流:点击预览声明变量可以使用let、const关键字声明变量，而不推荐使用var声明变量 var声明变量的问题：可以多次重复声明同一个变量...

raledong 2019-08-22 15:14 评论0 收藏0
ECMAScript6标准入门（一）新增变量与数据结构

摘要：一简介与的关系是的规格，是的一种实现另外的方言还有和转码器命令行环境安装直接运行代码命令将转换成命令浏览器环境加入，代码用环境安装，，根目录建立文件加载为的一个钩子设置完文件后，在应用入口加入若有使用，等全局对象及上方法安装一、ECMAScript6 简介 (1) 与JavaScript的关系 ES是JS的规格，JS是ES的一种实现（另外的ECMAScript方言还有Jscript和...

Tangpj 2019-08-21 14:26 评论0 收藏0
ECMAScript6(5)：函数的扩展

摘要：否则调用时依然需要传参报错注意这里不能用触发默认值这里我们还需要单独讨论一下默认参数对的影响很明显，默认参数并不能加到中。关于作用域集中在函数扩展的最后讨论。那如果函数的默认参数是函数呢烧脑的要来了如果基础好那就根本谈不上不烧脑。参数默认值 ES5中设置默认值非常不方便, 我们这样写: function fun(a){ a = a || 2; console.log(a); ...

afishhhhh 2019-08-23 11:45 评论0 收藏0
JavaScript中的解构赋值

摘要：是这样描述解构赋值的解构赋值语法是一种表达式用来将数组中的值或对象中的属性取出来区分为不同变量。现在让我们将坐标点放进一个数组中现在要对这些点进行处理，传统可以想到的方法是这样的借助解构赋值，能变得这样简洁使用箭头函数更简洁 JavaScript是一种很有趣的语言，我个人很喜欢它，虽然仍还有些人不大喜欢它。在ECMAScript6（ES6）中，有许多有用的特性来使JavaScript开...

Panda 2019-08-23 18:07 评论0 收藏0