解构赋值的概念

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

传统对变量赋值的方式,以前,为变量赋值,只能直接指定值。

  1. var a = 1;
  2. var b = 2;
  3. var c = 3;

数组的解构赋值——简单的数组解构赋值和嵌套数组的解构赋值

ES6允许写成下面这样。可以从数组中提取值,按照对应位置,对变量赋值 。本质上,这种写法属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值

  1. var [a,b,c] = [1,2,3];
  2. console.log(a); //
  3. console.log(b); //
  4. console.log(c); //
  5.  
  6. var arr = [4,5,6];
  7. var [d,e,f] = arr;
  8. console.log(d); //
  9. console.log(e); //
  10. console.log(f); //
  11.  
  12. //解构赋值不仅适用于var命令,也适用于let和const命令。
  13. let [a1,a2,a3] = [1,2,3];
  14. console.log(a1); //
  15. console.log(a2); //
  16. console.log(a3); //
  17.  
  18. let arr1 = [4,5,6];
  19. let [a4,a5,a6] = arr1;
  20. console.log(a4); //
  21. console.log(a5); //
  22. console.log(a6); //
  1. let [foo1, [[bar1], baz1]] = [1, [[2], 3]];
  2. console.log(foo1)
  3. console.log(bar1)
  4. console.log(baz1)
  5.  
  6. var arr = [1, [[2], 3]];
  7. var [foo2, [[bar2], baz2]] = arr;
  8. console.log(foo2)
  9. console.log(bar2)
  10. console.log(baz2)

数组的解构赋值——不完全解构

等号左边的模式,只匹配一部分的等号右边的数组。这种情况下,解构依然可以成功

  1. let [foo, [[bar], baz]] = [1, [[2], 3]];
  2. foo //
  3. bar //
  4. baz //
  5.  
  6. let [ , , third] = ["foo", "bar", "baz"];
  7. third // "baz"
  8.  
  9. let [x, , y] = [1, 2, 3];
  10. x //
  11. y //
  12.  
  13. let [head, ...tail] = [1, 2, 3, 4];
  14. head //
  15. tail // [2, 3, 4]
  16.  
  17. let [x, y, ...z] = ['a'];
  18. x // "a"
  19. y // undefined
  20. z // []

数组的解构赋值——解构不成功

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

  1. let [ftt] = [];
  2. let [bar, foo] = [1];
  3.  
  4. console.log(ftt); //undefined
  5. console.log(bar); //
  6. console.log(foo); //undefined

对象的解构赋值——简单对象的解构赋值

  1. /*
  2. let { foo, bar } = { foo: "aaa", bar: "bbb" };
  3. console.log(foo); // "aaa"
  4. console.log(bar); // "bbb"
  5. */
  6.  
  7. let { bar, foo } = { foo: "aaa", bar: "bbb" };
  8. foo // "aaa"
  9. bar // "bbb"
  10.  
  11. let { baz } = { foo: "aaa", bar: "bbb" };
  12. baz // undefined

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

上面代码的第一个例子,等号左边的两个变量的次序,与等号右边两个同名属性的次序不一致,但是对取值完全没有影响。第二个例子的变量没有对应的同名属性,导致取不到值,最后等于undefined。

对象的解构赋值——嵌套结构的对象的解构赋值

和数组一样,解构也可以用于嵌套结构的对象

  1. /*
  2. let obj = {
  3. p: [
  4. 'Hello',
  5. { y: 'World' }
  6. ]
  7. };
  8.  
  9. let { p: [x, { y }] } = obj; //这时p是模式,不是变量,因此不会被赋值
  10. x // "Hello"
  11. y // "World"
  12. */
  13.  
  14. var node = {
  15. loc: {
  16. start: {
  17. line: 1,
  18. column: 5
  19. }
  20. }
  21. };
  22. var { loc: { start: { line }} } = node; //只有line是变量,loc和start都是模式,不会被赋值
  23. line //
  24. loc // error: loc is undefined
  25. start // error: start is undefined

对象解构赋值的原理

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

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

  1. var { foo: baz } = { foo: 'aaa', bar: 'bbb' }; //foo是匹配的模式,baz才是变量。真正被赋值的是变量baz,而不是模式foo。
  2. baz // "aaa"
  3. foo // error: foo is not defined
  4.  
  5. let obj = { first: 'hello', last: 'world' };
  6. let { first: f, last: l } = obj;
  7. f // 'hello'
  8. l // 'world'

采用这种写法时,变量的声明和赋值是一体的。对于let和const来说,变量不能重新声明,所以一旦赋值的变量以前声明过,就会报错。

  1. let foo;
  2. let {foo} = {foo: 1}; // SyntaxError: Duplicate declaration "foo"
  3.  
  4. let baz;
  5. let {bar: baz} = {bar: 1}; // SyntaxError: Duplicate declaration "baz"

解构赋值的变量都会重新声明,所以报错了。不过,因为var命令允许重新声明,所以这个错误只会在使用let和const命令时出现。

如果没有第二个let命令,上面的代码就不会报错。 let命令下面一行的圆括号是必须的,否则会报错。因为解析器会将起首的大括号,理解成一个代码块,而不是赋值语句

  1. let foo;
  2. ({foo} = {foo: 1}); // 成功
  3. console.log(foo);
  4.  
  5. let baz;
  6. ({bar: baz} = {bar: 1}); // 成功

对象的解构赋值——对象的解构指定默认值

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

对undefined或null进行解构

如果对undefined或null进行解构,会报错。这是因为解构只能用于数组或对象。其他原始类型的值都可以转为相应的对象,但是,undefined和null不能转为对象,因此报错

对于Set结构,使用数组的解构赋值

对于Set结构,也可以使用数组的解构赋值。 事实上,只要某种数据结构具有Iterator接口,都可以采用数组形式的结构赋值。

  1. let [a,b,c] = new Set([1,2,3])
  2. console.log(a) //

字符串的解构赋值

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

  1. const [a, b, c, d, e] = 'hello';
  2. a // "h"
  3. b // "e"
  4. c // "l"
  5. d // "l"
  6. e // "o"
  7.  
  8. //类似数组的对象都有一个length属性,因此还可以对这个属性解构赋值。
  9. let {length : len} = 'hello';
  10. len //

函数参数的解构赋值

函数的参数也可以使用解构赋值

  1. function add([x, y]){
  2. return x + y;
  3. }
  4.  
  5. //函数add的参数表面上是一个数组,但在传入参数的那一刻,数组参数就被解构成变量x和y。
  6. //对于函数内部的代码来说,它们能感受到的参数就是x和y。
  7. add([1, 2]); // 结果是3,

变量的解构赋值的作用——交换变量的值

  1. var x = 28;
  2. var y = 83;
  3.  
  4. var [x,y] = [y,x];
  5. console.log(x);
  6. console.log(y);

变量的解构赋值的作用——从函数返回多个值

函数只能返回一个值,如果要返回多个值,只能将它们放在数组或对象里返回。有了解构赋值,取出这些值就非常方便

  1. // 返回一个数组
  2. function example() {
  3. return [1, 2, 3];
  4. }
  5. let [a, b, c] = example();
  6. console.log(a,b,c);
  1. // 返回一个对象
  2. function example() {
  3. return {
  4. foo: 1,
  5. bar: 2
  6. };
  7. }
  8. let { foo, bar } = example();

变量的解构赋值的作用——提取JSON数据

解构赋值对提取JSON对象中的数据,尤其有用

变量的解构赋值的作用——函数参数的定义

  1. function f([x,y,z]) {
  2. return [x,y,z]
  3. }
  4.  
  5. var [a, b, c] = f([3,4,5])
  6. console.log(a) //
  7. console.log(b) //
  8. console.log(c) //
  1. function f({x,y,z}) {
  2. return [x,y,z]
  3. }
  4.  
  5. var [a, b, c] = f({x:3, y:4, z:5})
  6. console.log(a) //
  7. console.log(b) //
  8. console.log(c) //

ES5-ES6-ES7_解构赋值的更多相关文章

  1. ES6 的解构赋值前每次都创建一个对象吗?会加重 GC 的负担吗?

    本文来源于知乎上的一个提问. 为了程序的易读性,我们会使用 ES6 的解构赋值: function f({a,b}){} f({a:1,b:2}); 这个例子的函数调用中,会真的产生一个对象吗?如果会 ...

  2. ES6之解构赋值

    截止到ES6,共有6种声明变量的方法,分别是var .function以及新增的let.const.import和class: 我们通常的赋值方法是: var foo='foo'; function ...

  3. 进军es6(2)---解构赋值

    本该两周之前就该总结的,但最近一直在忙校招实习的事,耽误了很久.目前依然在等待阿里HR面后的结果中...但愿好事多磨!在阿里的某轮面试中面试官问到了es6的掌握情况,说明es6真的是大势所趋,我们更需 ...

  4. es6的解构赋值学习(1)

    相对es5的简单的"="赋值来说,es6增加了一种新的赋值模式--解构赋值,按照它的规则,可以从数组和对象中提取值来对变量进行赋值,个人觉得方便了很多,但是这个模式有点恶心人,相比 ...

  5. ES6语法~解构赋值、箭头函数、class类继承及属性方法、map、set、symbol、rest、new.target、 Object.entries...

    2015年6月17日 ECMAScript 6发布正式版本 前面介绍基本语法,  后面为class用法及属性方法.set.symbol.rest等语法. 一.基本语法:  1.         定义变 ...

  6. Es6 新增解构赋值

    1.数组的解构赋值 基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 要想实现解构,就必须是容器,或者具有可遍历的接口. 以前,为 ...

  7. ES6 之 解构赋值

    本博文配合 阮一峰 <ES6 标准入门(第3版)>一书进行简要概述 ES6 中变量的解构赋值. 数组的解构赋值 基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这 ...

  8. ES6变量解构赋值

    ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构ES6之前我们申明多个变量需要按照下面的方法: let l a=1; let b=2; let c=3; let d=4; ...

  9. es6变量解构赋值的用途

    这里是我觉得es6解构赋值,在平时我们写js的时候非常有用,而且经常用到的地方,能简化我们的代码,让写代码简介优雅易读; 用途 1.交换变量的值,太方便了这逼,写法不仅简介而且一看就明白 let [x ...

  10. 粗看ES6之解构赋值

    标签: javascript es6 什么是解构赋值? 示例如下: <!DOCTYPE html> <html> <head> <meta charset=& ...

随机推荐

  1. MEF 基础简介 二

    MEF的导出(Export)和导入(Import) using System; using System.Collections.Generic; using System.Linq; using S ...

  2. Centos 7.6配置nginx反向代理负载均衡集群

    一,实验介绍 利用三台centos7虚拟机搭建简单的nginx反向代理负载集群, 三台虚拟机地址及功能介绍 192.168.2.76    nginx负载均衡器 192.168.2.82    web ...

  3. ASP.NET MVC3 在_ViewStart设置Layout使用RenderAction的注意事項

    来源:https://dotblogs.com.tw/lastsecret/archive/2012/03/26/71052.aspx ASP.NET MVC3 在_ViewStart設定Layout ...

  4. .NET 单元测试的利剑——模拟框架Moq(简述篇)

    .NET 单元测试的利剑--模拟框架Moq 前言 这篇文章是翻译文,因为通过自己参与的项目,越发觉得单元测试的重要性,特别是当跟业务数据打交道的时候的,Moq就如雪中送炭,所以想学习这个框架,就从这篇 ...

  5. mysql用户授权、数据库权限管理、sql语法详解

    mysql用户授权.数据库权限管理.sql语法详解 —— NiceCui 某个数据库所有的权限 ALL 后面+ PRIVILEGES SQL 某个数据库 特定的权限SQL mysql 授权语法 SQL ...

  6. php的TS和NTS的区别

    ts(Thread-Safety)即线程安全,多线程访问时,采用了加锁机制,当一个线程访问该类的某个数据时,进行保护,其他 线程不能进行访问直到该线程读取完,其他线程才可使用.不会出现数据不一致或者数 ...

  7. 封装个 Android 的高斯模糊组件

    本篇文章已授权微信公众号 hongyangAndroid (鸿洋)独家发布 最近基于 Android StackBlur 开源库,根据自己碰到的需求场景,封装了个高斯模糊组件,顺便记录一下. 为什么要 ...

  8. 如何创建.gitignore文件,忽略git不必要提交的文件

    touch .gitignore 在项目目录里输入以上名利后,会自动生成一个文件 .gitignore,可在文件里写入忽略的文件名,例如 node_modules coverage .idea npm ...

  9. 向后台提交数据:利用cookie加session提交更多数据,

    个人逻辑,可能考虑不全面,各位看到后留言,我修改啊 实现效果:浏览器第一次访问提交用户名,后台验证通过,生成随机字符串,和用户名组成字典,保存到服务器,把随机字符串设置成cookie发给浏览器,同一个 ...

  10. 个人练习:使用HTML+CSS制作二级菜单

    最近一直在学习HTML+CSS,刚看完如果制作下拉菜单部分,就想着做一个练练手. 先上成品图: 就是上面这个效果,横向菜单选项能点击,鼠标放在上面也能展开二级菜单,二级菜单也能点击,点击后就会在底下的 ...