资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/es6 解构笔记分享

es6 解构笔记分享

Hancock_Xu / 2496人阅读

摘要：只要某种数据结构具有接口，都可以采用数组形式的解构赋值。解构赋值允许指定默认值。默认值可以引用解构赋值的其他变量，但该变量必须已经声明。解构也可以用于嵌套结构的对象。

Es6 新增了destructuring(解构)语法糖, 我们快来了解一下:

可以按照一定的模式从数组/对象中提取值,为变量赋值
数组解构

</>复制代码 
  1. var a = 1;
  2. var b = 2;
  3. var c = 3;

可以写作:

</>复制代码 
  1. var [a, b, c] = [1, 2, 3];

本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。

</>复制代码 
  1. let [foo, [[bar], baz]] = [1, [[2], 3]];
  2. foo // 1
  3. bar // 2
  4. baz // 3
  5. let [ , , third] = ["foo", "bar", "baz"];
  6. third // "baz"
  7. let [head, ...tail] = [1, 2, 3, 4];
  8. head // 1
  9. tail // [2, 3, 4]
  10. let [x, y, ...z] = ["a"];
  11. x // "a"
  12. y // undefined
  13. z // []
  14. let [a, [b], d] = [1, [2, 3], 4];
  15. a // 1
  16. b // 2
  17. d // 4
  18. let [x, y, z] = new Set(["a", "b", "c"]);
  19. x // "a"

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

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

</>复制代码 
  1. var [foo = true] = [];
  2. foo // true
  3. var [x, y = "b"] = ["a"]; // x="a", y="b"
  4. var [x, y = "b"] = ["a", undefined]; // x="a", y="b"

ES6内部使用严格相等运算符（===），判断一个位置是否有值。所以，如果一个数组成员不严格等于undefined，默认值是不会生效的。

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

</>复制代码 
  1. function f() {
  2.   console.log("aaa");
  3. }
  4. let [x = f()] = [1];

上面代码中，因为x能取到值，所以函数f根本不会执行。

默认值可以引用解构赋值的其他变量，但该变量必须已经声明。

</>复制代码 
  1. let [x = 1, y = x] = [];    // x=1; y=1
  2. let [x = 1, y = x] = [2];   // x=2; y=2
  3. let [x = 1, y = x] = [1, 2]; // x=1; y=2
  4. let [x = y, y = 1] = [];    // ReferenceError

对象解构

</>复制代码 
  1. var { foo, bar } = { foo: "aaa", bar: "bbb" };
  2. foo // "aaa"
  3. bar // "bbb"

对象的解构与数组有一个重要的不同,变量必须与属性同名，才能取到正确的值。

</>复制代码 
  1. var { baz } = { foo: "aaa", bar: "bbb" };
  2. baz // undefined

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

</>复制代码 
  1. var { foo: baz } = { foo: "aaa", bar: "bbb" };
  2. baz // "aaa"
  3. let obj = { first: "hello", last: "world" };
  4. let { first: f, last: l } = obj;
  5. f // "hello"
  6. l // "world"

解构也可以用于嵌套结构的对象。

</>复制代码 
  1. var obj = {
  2.   p: [
  3.     "Hello",
  4.     { y: "World" }
  5.   ]
  6. };
  7. var { p: [x, { y }] } = obj;
  8. x // "Hello"
  9. y // "World"
  10. 这时p是模式，不是变量，因此不会被赋值。
  11. 嵌套赋值的例子:
  12. let obj = {};
  13. let arr = [];
  14. ({ foo: obj.prop, bar: arr[0] } = { foo: 123, bar: true });
  15. obj // {prop:123}
  16. arr // [true]

对象的解构也可以指定默认值

</>复制代码 
  1. var {x = 3} = {};
  2. x // 3var {x, y = 5} = {x: 1};
  3. x // 1
  4. y // 5var { message: msg = "Something went wrong" } = {};
  5. msg // "Something went wrong"

对象的解构赋值，可以很方便地将现有对象的方法，赋值到某个变量。

</>复制代码 
  1. let { log, sin, cos } = Math;

解构的用途
交换变量值

</>复制代码 
  1. [x, y] = [y, x];

函数参数默认值

</>复制代码 
  1. jQuery.ajax = function (url, {
  2.   async = true,
  3.   beforeSend = function () {},
  4.   cache = true,
  5.   complete = function () {},
  6.   crossDomain = false,
  7.   global = true,
  8.   // ... more config
  9. }) {
  10.   // ... do stuff
  11. };

对解构的学习先到这里吧

云服务器 GPU云服务器 对象解构 解构函数 解构赋值 ES6

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

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

相关文章

  • ES6 学习笔记（一）let，const和解构赋值

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

    iOS122 评论0 收藏0

  • ES6笔记之 变量解构赋值

    摘要：变量的解构赋值中允许按照一定模式，从数组和对象中提取，对变量进行赋值。数组的解构赋值上面的代码标示可以从数组中提取值，按照位置的对应关系对变量进行赋值。默认值解构赋值允许指定默认值。 变量的解构赋值 ES6中允许按照一定模式，从数组和对象中提取，对变量进行赋值。 数组的解构赋值 var [a,b,c] = [1,2,3]; a // 1; b // 2; c // 3; 上面的代码标示...

    baukh789 评论0 收藏0

  • 《深入理解ES6》笔记——解构：使数据访问更便捷（5）

    摘要：解构，一种黑魔法解构是从对象中提取出更小元素的过程。赋值是对解构出来的元素进行重新赋值。总结本章讲解了对象解构赋值和数组解构赋值，以及对象和数组混合情况下的解构赋值操作，最后一个知识点是解构函数的参数。 解构，一种黑魔法 解构是从对象中提取出更小元素的过程。赋值是对解构出来的元素进行重新赋值。 下面的代码你可能无法在浏览器上实时测试，推荐在babel官网在线测试代码：在线测试ES6代码...

    Drinkey 评论0 收藏0

  • 深入理解ES6笔记（五）解构：使访问数据更便捷

    摘要：当冒号右侧存在花括号时，表示目标被嵌套在对象的更深一层中。在对象的嵌套解构中同样能为本地变量使用不同的名称提取数组解构结构赋值基本忽略一些选项重新赋值默认值数组解构赋值同样允许在数组任意位置指定默认值。 主要知识点：对象解构、数组解构、混合解构以及参数解构showImg(https://segmentfault.com/img/bVbfWgH?w=1020&h=585); 《深入理解...

    _DangJin 评论0 收藏0

发表评论

登陆后可评论

0条评论

Hancock_Xu

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<