ES6精华：解构赋值

468122151 发布于2019-08-26 11:54 / 2549人阅读

摘要：按一定的匹配模式，从数组或对象中解构出相应值，并赋值给变量。和是单值，没有相应的构造函数，不能被解构。等价于报错解构方式左侧的解构符决定如何看待右侧的解构值。解构符意味着视右侧的值为对象，采用对象解构。

按一定的匹配模式，从数组或对象中解构出相应值，并赋值给变量。

let [a] = [3]; // a = 3
let [, a] = [3, [7]]; // a = [7]
let {a} = {a: 3}; // a = 3，{a} 相当 {a: a}
let {a: {b}} = {a: {b: 3}}; // b = 3

应用举例

快速的声明并赋予相应的属性值

// --- 以前
let id = obj.id;
let name = obj.name;
let ago = obj.ago;

// --- 现在
let { id, name, ago } = obj;

函数配置参数的解构和赋默认值

// --- 以前
function dealUser(id, conf) {
  let name = conf.name || "";
  let ago = conf.ago || 0;
}

// --- 现在
// 可以直接使用 name 等，以及设置默认值（类型也易见）。
function dealUser(id, {
  name = "",
  ago = 0
}) {
  // 函数体
}

解构非对象

当解构的目标为非对象时，会将目标转化成相应类型的对象。
NaN可以使用Number构造函数生成，可以被解构。
null和undefined是单值，没有相应的构造函数，不能被解构。

let {length: a} = "ab"; // a = 2
// 等价于
let {length: a} = new String("ab"); // a = 2

let {toString: a} = NaN; // a = function
let {toString: a} = null; // 报错

解构方式

左侧的解构符决定如何看待右侧的解构值。
解构符{}意味着视右侧的值为对象，采用对象解构。
解构符[]意味着视右侧的值为数组，采用数组解构。
以此可以推断：数组即支持数组解构也支持对象解构。

原生类数组对象有迭代接口，也支持两种解构。（arguments, NodeList, new String()）

let [a] = "ab"; // a = "a"，a 为第一个元素。
let {length: a} = "ab"; // a = 2
let {length: a} = ["a", "b"]; // a = 2
let [a] = {0: a, length: 1}; // 报错，自定义对象没有迭代接口。

解构失败 解构不成功

右侧没有相对应的值，解构不报错，变量值为undefined。

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

解构出错

当右侧值（包括转换后）不满足左侧要求的类型时，解构失败。

let [[a]] = [1]; // 报错，目标 1 不是数组。
let [a] = {a: 3}; // 报错，目标 {a: 3} 不是数组。

指定默认值

可以为待赋值的变量指定默认值。
默认值可以使用解构中其他变量，但该变量的解构必须在此之前。

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

GPU云服务器云服务器解构赋值对象解构解构函数精华帖

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

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

ES6精华：函数扩展

摘要：在函数方面的扩展比较丰富也很实用，本篇概括了这中的精华知识。所以无法成为构造函数，不能使用操作符。参数将扩展运算符作用于参数，即为参数。声明式，直接为函数名。通过构造函数生成的，为。函数的属性，在其描述对象的属性上，为函数名。 ES6在函数方面的扩展比较丰富也很实用，本篇概括了这中的精华知识。 1 箭头函数箭头函数是ES6中定义函数的新形式。新形式不仅简化了定义方式，更为函数本身...

lansheng228 2019-08-22 18:11 评论0 收藏0
ES6 学习笔记（一）let，const和解构赋值

摘要：另外对于已经声明的变量进行解构赋值时，要非常小心。因此在行首加，将其强制转化为表达式执行。由于和无法转为对象，所以对它们进行解构赋值，都会报错。 let和const let和const是es6新增的两个变量声明关键字，与var的不同点在于：（1）let和const都是块级作用域，在{}内有效，这点在for循环中非常有用，只在循环体内有效。var为函数作用域。（2）使用let和con...

iOS122 2019-08-23 15:29 评论0 收藏0
es6 - 解构赋值

摘要：比如上面展示的情况都是可以联合使用的比如对象的解构赋值对象的解构赋值是基于属性的。当给已存在的变量解构赋值时，注意加这是由于如果不加会把左边看成一个代码块，会报错。注意事项数组的解构赋值中，使用的变量必须放在最后。解构赋值解构赋值是一个听起来比较高大上的特性，但按我的理解，它就是一种语法糖。它并没有赋予js更强大的能力，只是让赋值操作更加的灵活，效率。在es6之前，赋值操作需要=...

DirtyMind 2019-08-26 11:45 评论0 收藏0
ES6学习第二章变量的解构赋值

摘要：前言前言该篇笔记是第二篇变量的解构赋值。这一章原文链接变量的解构赋值解构赋值解构赋值允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。对象的解构赋值是根据对象值进行匹配。前言该篇笔记是第二篇变量的解构赋值。这一章原文链接：变量的解构赋值解构赋值ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。解构赋值是对赋值运...

番茄西红柿 2021-11-24 09:38 评论0 收藏2637
ES6学习第二章变量的解构赋值

摘要：前言该篇笔记是第二篇变量的解构赋值。这一章原文链接变量的解构赋值解构赋值允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。对象的解构赋值是根据对象值进行匹配。前言该篇笔记是第二篇变量的解构赋值。这一章原文链接：变量的解构赋值解构赋值ES6 允许按照一定模式，从数组和对象中提取值，对...

番茄西红柿 2021-11-24 09:38 评论0 收藏2637