2.解构赋值

2.1.什么是解构赋值?

什么是解构赋值?这里的关键字还是赋值,这是说如何去赋值的问题,这里说的解构可以理解为解散重新构造,所以解构赋值可以理解为解散重新构造后进行赋值,通常是左边一种结构,右边一种结构,左右的结构拆开来一一对应进行赋值,例如:

let a, b
[a, b] = [1, 2]
console.log(a, b)

这里就相当于把1赋值给a,把2赋值给b,这样的操作就叫做解构赋值,从本质上来说,结构解构赋值是一种匹配模式,只要等号两边的模式相同,那么左边的变量就可以被赋值给右边对应的值

为什么要使用解构赋值?在没有解构赋值的时候,多个赋值会比较麻烦,为了书写更加方便,加入解构赋值是非常有必要的,例如:没有解构赋值的时候,交互两个变量的值,我们是这样做的

let a = 10;
let b = 20;
let temp = a;
a = b;
b = temp; console.log(a, b);

有了解构赋值以后,我们的代码可以这样写:


let a = 10;
let b = 20;
[a, b] = [b, a];
console.log(a, b);

2.2.数组的解构赋值

左右两边是数组这种结构,我们称为数组的解构赋值,这样也是非常常用的一种形式

注意1: 解构不成功,值为undefined

let [a, b] = [10]
console.log(a, b) // 10, undefined

注意2: 解构的时候可以设置默认值

let [a, b=20] = [10]
console.log(a, b) // 10 20

注意3: 值比变量多的情况可以使用"..."符号

let [a, b, ...rest] = [1, 2, 3, 4, 5, 6]
console.log(a,b,rest) //rest元素必须放在最后,下面这种写法会报错
let [a, b, ...rest, c] = [1, 2, 3, 4, 5, 6]

2.3.对象的解构赋值

如果等号左右两边是对象的结构,我们称之为对象的解构赋值,也是非常常用的形式

let { a:a, b:b } = { a: 1, b: 2 }
console.log(a, b)

注意1: 对象的解构赋值和数组不同,数组的赋值是以位置为对应关系进行赋值的,必须按顺序来写,而对象的赋值是以属性名为对应关系的,因此,不用考虑顺序,其内部的机制就是,先找到同名的属性,再把右边的值赋值给左边的变量

注意2: 如果左边的({属性名:变量名})属性名和变量名一样,那么可以简写成下面的形式

// let { a:a, b:b } = { a: 1, b: 2 }
//上面这种写法和下面的写法是等价的
let {a, b} = {a:1,b:2}
console.log(a, b) //如果属性名和变量名是不同的,那必须写完整,例如下面这种写法 let {x:m,y:n} = {x: 1, y: 2}
// 这里的机制是 根据x的对应关系 把1赋值给m 根据y的对应关系,把2赋值给n

注意3: 对象的解构赋值也可以设置默认值


let {a, b=20} = {a: 1}
console.log(a, b) //1, 20

2.4.数组和对象解构赋值嵌套

// 数组的解构赋值嵌套
let [a, [b, c],d] = [1, [2, 3], 4]
console.log(a, b, c, d) // 对象的解构赋值嵌套 let obj = {
p: [
'Hello',
{ y: 'World' }
]
}; let { p, p: [x, { y }] } = obj;
//p=['hello', {y: 'world'}] x='Hello' y = 'World'

2.5.解构赋值应用

1.变量交换

let a = 10;
let b = 20;
[a, b] = [b, a];
console.log(a, b);

2.函数返回多个值

function fn() {
return [1, 2, 3];
}
let [a, b, c] = fn();

3.参数定义

// 参数是一组有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]); // 参数是一组无次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});

4.提取json数据

let jsonData = {
id: 42,
status: "OK",
data: [867, 5309]
}; let { id, status, data: number } = jsonData; console.log(id, status, number);
// 42, "OK", [867, 5309]

视频教程地址:http://edu.nodeing.com/course/50

es6+最佳入门实践(2)的更多相关文章

  1. es6+最佳入门实践(14)

    14.模版字符串 模版字符串(template string)是增强版的字符串,定义一个模版字符串需要用到反引号 let s = `这是一个模版字符串` console.log(s) 14.1.模版字 ...

  2. es6+最佳入门实践(12)

    12.class基础用法和继承 12.1.class基础语法 在es5中,面向对象我们通常写成这样 function Person(name,age) { this.name = name; this ...

  3. es6+最佳入门实践(10)

    10.Generator 10.1.Generator是什么? Generator函数是ES6提供的一种异步编程解决方案.在它的内部封装了多个状态,因此,又可以理解为一种状态机,执行Generator ...

  4. es6+最佳入门实践(9)

    9.Iterator和for...of 9.1.Iterator是什么? Iterator又叫做迭代器,它是一种接口,为各种不同的数据结构提供统一的访问机制.这里说的接口可以形象的理解为USB接口,有 ...

  5. es6+最佳入门实践(8)

    8.Promise 8.1.什么是异步? 要理解异步,首先,从同步代码开始说 alert(1) alert(2) 像上面的代码,执行顺序是从上到下,先后弹出1和2,这种代码叫做同步代码 alert(0 ...

  6. es6+最佳入门实践(7)

    7.set和map数据结构 7.1.什么是set? Set就是集合,集合是由一组无序且唯一的项组成,在es6中新增了set这种数据结构,有点类似于数组,但是它的元素是唯一的,没有重复 let st = ...

  7. es6+最佳入门实践(6)

    6.Symbol用法 6.1.什么是Symbol? Symbol是es6中一种新增加的数据类型,它表示独一无二的值.es5中我们把数据类型分为基本数据类型(字符串.数字.布尔.undefined.nu ...

  8. es6+最佳入门实践(5)

    5.对象扩展 5.1.对象简写 在es5中,有这样一种写法 var name = "xiaoqiang"; var age = 12; var obj = { name : nam ...

  9. es6+最佳入门实践(4)

    4.函数扩展 4.1.参数默认值 默认参数就是当用户没有传值的时候函数内部默认使用的值,在es5中我们通过逻辑运算符||来实现 function Fn(a, b) { b = b || "n ...

  10. es6+最佳入门实践(3)

    3.数组扩展 3.1.扩展运算符 扩展运算符用三个点(...)表示,从字面上理解,它的功能就是把数组扩展开来,具体形式如下: let arr = [1, 2, 3]; console.log(...a ...

随机推荐

  1. static作用域

    当一个函数完成时,它的所有变量通常都会被删除.然而,有时候您希望某个局部变量不要被删除. 要做到这一点,请在您第一次声明变量时使用 static 关键字: <?php function myTe ...

  2. Python 中关于文件操作的注意事项

    文件操作 #打开文件 f = open('要打开的文件路径',mode = 'r/w/a', encoding = '文件原来写入时的编码') #操作 data = f.read() #读取 f.wr ...

  3. 第一章 UNIX 基础知识

    1.1 Unix体系结构 OS定义为一种软件,它控制计算机硬件资源,提供程序运行环境,一般称其为内核(kernel),它体积小,位于环境中心. 内核的接口为系统调用(system call),共用函数 ...

  4. C语言进阶—— 接续符和转义符13

    接续符的意义: C语言中的接续符 (\) 是指示编译器行为的利器 我们来看一个案例: #in\ clud\ e <st\ dio.h> in\ t m\ ain(\ ) { pri\ nt ...

  5. 17-比赛1 C - Binary Nim (栈的游戏)

    题目描述 Tweedle-Dee 和 Tweedle-Dum 正在进行一场激烈的二进制 Nim 游戏.这是你没有玩过的船新版本,游戏包含 N 个栈,每个栈只包含 0 和 1 的元素.就像一般的 Nim ...

  6. 20145202马超GDB调试汇编堆栈过程分析

    20145202马超GDB调试汇编堆栈过程分析 esc :w保存,:wq保存并退出 x:删除错误的单个字母 dw:删除整个单词 gcc hello.c -o hello:运行hello.c gcc - ...

  7. 4,MongoDB 之 $关键字 及 $修改器 $set $inc $push $pull $pop MongoDB

    MongoDB中的关键字有很多, $lt $gt $lte $gte 等等,这么多我们也不方便记,这里我们说说几个比较常见的 一.查询中常见的 等于 大于 小于 大于等于 小于等于 等于 : 在Mon ...

  8. Android学习记录(5)—在java中学习多线程下载之断点续传②

    在上一节中我们学习了在java中学习多线程下载的基本原理和基本用法,我们并没有讲多线程的断点续传,那么这一节我们就接着上一节来讲断点续传,断点续传的重要性不言而喻,可以不用重复下载,也可以节省时间,实 ...

  9. 【APUE】Chapter11 Threads

    看完了APUE第三版的Chapter11 Threads,跟着书上的demo走了一遍,并且参考了这个blog(http://www.cnblogs.com/chuyuhuashi/p/4447817. ...

  10. C++文件操作(转)

    C++文件操作(转) 第一个:简单,容易理解,常用:http://www.cnblogs.com/uniqueliu/archive/2011/08/03/2126545.html 第二个:详细的,如 ...