变量的解构赋值

  1. 解构可以用于数组和对象（用的更多，项目中常用），取值不到的话，返回undefined
let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"
  1. 对象的解构赋值，可以很方便地将现有对象的方法，赋值到某个变量
// 例一
let { log, sin, cos } = Math;// 例二
const { log } = console;
log('hello') // hello解释：上面代码的例一将Math对象的对数、正弦、余弦三个方法，赋值到对应的变量上，使用起来就会方便很多。例二将console.log赋值到log变量。
  1. 与数组一样，解构也可以用于嵌套结构的对象
let obj = {p: ['Hello',{ y: 'World' }]
};let { p: [x, { y }] } = obj;
x // "Hello"
y // "World"
  • 上述的p是模式，不是变量，因此不会被赋值，如果p也要作为变量赋值，可以这样书写
let obj = {p: ['Hello',{ y: 'World' }]
};let { p, p: [x, { y }] } = obj;
x // "Hello"
y // "World"
p // ["Hello", {y: "World"}]
  1. 对象的解构也可以指定默认值，且默认值生效的条件是：对象的属性严格等于undefined
var {x = 3} = {};
x // 3var {x, y = 5} = {x: 1};
x // 1
y // 5var {x: y = 3} = {};
y // 3var {x: y = 3} = {x: 5};
y // 5var { message: msg = 'Something went wrong' } = {};
msg // "Something went wrong"// 默认值生效的条件是：对象的属性值严格等于undefined
var {x = 3} = {x: undefined};
x // 3var {x = 3} = {x: null};
x // null
// 解释
上面代码中，属性x等于null，因为null与undefined不严格相等，所以是个有效的赋值，导致默认值3不会生效。
  • 由于数组本质上是特殊的对象，因此可以对数组进行对象属性的解构
let arr = [1, 2, 3];
let {0 : first, [arr.length - 1] : last} = arr;
first // 1
last // 3

字符串的解构赋值

  • 字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象。
const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"
  • 类似数组的对象都有一个length属性，因此还可以对这个属性解构赋值。
let {length : len} = 'hello';
len // 5

数值和布尔值的解构赋值

  • 解构赋值时，如果等号右边是数值和布尔值，则会先转为对象。
let {toString: s} = 123;
s === Number.prototype.toString // truelet {toString: s} = true;
s === Boolean.prototype.toString // true
  • 数值和布尔值的包装对象都有toString属性，因此变量s都能取到值
  • 解构赋值的规则是，只要等号右边的值不是对象或数组，就先将其转为对象。由于undefined和null无法转为对象，所以对它们进行解构赋值，都会报错。
let { prop: x } = undefined; // TypeError
let { prop: y } = null; // TypeError

函数参数的解构赋值（用的多）

  • 例子1：
function add([x, y]){return x + y;
}add([1, 2]); // 3
// 解释
上面代码中，函数add的参数表面上是一个数组，但在传入参数的那一刻，数组参数就被解构成变量x和y。对于函数内部的代码来说，它们能感受到的参数就是x和y。
  • 例子2：
[[1, 2], [3, 4]].map(([a, b]) => a + b);
// [ 3, 7 ]// 解构赋值也可以使用默认值
function move({x = 0, y = 0} = {}) {return [x, y];
}move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, 0]
move({}); // [0, 0]
move(); // [0, 0]
解释：上面代码中，函数move的参数是一个对象，通过对这个对象进行解构，得到变量x和y的值。如果解构失败，x和y等于默认值。

注意

function move({x, y} = { x: 0, y: 0 }) {return [x, y];
}move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, undefined]
move({}); // [undefined, undefined]
move(); // [0, 0]
解释：上面代码是为函数move的参数指定默认值，而不是为变量x和y指定默认值，所以会得到与前一种写法不同的结果。undefined就会触发函数参数的默认值。
[1, undefined, 3].map((x = 'yes') => x);
// [ 1, 'yes', 3 ]

解构赋值的应用（总结）

交换变量的值

let x = 1;
let y = 2;[x, y] = [y, x];

从函数返回多个值

// 返回一个数组function example() {return [1, 2, 3];
}
let [a, b, c] = example();// 返回一个对象function example() {return {foo: 1,bar: 2};
}
let { foo, bar } = example();

函数参数的定义

  • 解构赋值可以方便地将一组参数与变量名对应起来
// 参数是一组有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]);// 参数是一组无次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});

提取JSON数据

  • 解构赋值对提取JSON对象中的数据，尤其有用
  • 下面代码可以快速提取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]

函数参数的默认值

jQuery.ajax = function (url, {async = true,beforeSend = function () {},cache = true,complete = function () {},crossDomain = false,global = true,// ... more config
} = {}) {// ... do stuff
};
  • 指定参数的默认值，就避免了在函数体内部再写var foo = config.foo || ‘default foo’;这样的语句。

遍历Map解构（重点）

  • 任何部署了 Iterator 接口的对象，都可以用for…of循环遍历。Map 结构原生支持 Iterator 接口，配合变量的解构赋值，获取键名和键值就非常方便。
const map = new Map();
map.set('first', 'hello');
map.set('second', 'world');for (let [key, value] of map) {console.log(key + " is " + value);
}
// first is hello
// second is world
  • 如果只想获取键名或只想获取键值，可以写成下面这样
// 获取键名
for (let [key] of map) {// ...
}// 获取键值
for (let [,value] of map) {// ...
}

输入模块的指定方法（项目中常用）

  • 加载模块时，往往需要指定输入哪些方法。解构赋值使得输入语句非常清晰。
const { SourceMapConsumer, SourceNode } = require("source-map");

字符串的扩展

字符串的遍历器接口

  • ES6 为字符串添加了遍历器接口（详见《Iterator》一章），使得字符串可以被for…of循环遍历。
for (let codePoint of 'foo') {console.log(codePoint)
}
// "f"
// "o"
// "o"
  • 除了遍历字符串，这个遍历器最大的优点是可以识别大于0xFFFF的码点，传统的for循环无法识别这样的码点。
let text = String.fromCodePoint(0x20BB7);for (let i = 0; i < text.length; i++) {console.log(text[i]);
}
// " "
// " "for (let i of text) {console.log(i);
}
// "												


											

ECMAScript重点复习（一）相关推荐
	

    
								
  1. 计算机应用基础期末考试电大,(电大)期末考试2017年广播电视大学网考《计算机应用基础》重点复习题目汇总版(理论题及操作题)...
		
    2017年度最新广播电视大学(电大)期末考试网考<计算机应用基础>重点复习题目整理汇总版(理论题及操作题) 1.一般认为,世界上第一台电子数字计算机诞生于1946年. 2.计算机当前已应用 ...
    
		
    2. 
						
  2. 计算机应用技术考试重点,复习资料：2020年江苏自考计算机应用技术考前重点练习：单项选择题二...
		
    江苏自考网整理了2020年计算机应用技术单项选择题的考前重点复习资料,大家一起来看看吧. 第11题 在PowerPoint中,若要将线条限制在从其起始点开始,在以15度角为移动单位的各个方向 上进行绘 ...
    
		
    3. 
						
  3. 《计算机组成原理》期末习题讲解和重点复习内容
		
    文章目录 计算机组成原理重点复习内容 一.I/O部分 1.中断系统流程图与结构图 2.DMA系统的流程图与结构图 二.CPU的数据通路 1.基础知识部分 2.大题部分 三.Cache的映射问题 四.磁 ...
    
		
    4. 
						
  4. 冯诺伊曼计算机釆用二进制,大一新生计算机考试重点复习资料（完整版）.docx...
		
    大一新生计算机考试重点复习资料(完整版) 第--部分 完整的计算机系统由(c )组成. 运算器.控制器.存储器.输入设备和输出设备 主机和外部设备 硬件系统和软件系统 主机箱.显示器.键盘.鼠标.打印 ...
    
		
    5. 
						
  5. 计算机网络第三章 数据链路层重点复习（点对点）
		
    目录 前言 系列文章目录 3.1 使用点对点通信的数据链路层 3.1.1 点对点通信的主要步骤 3.1.2 三个基本问题 3.2 点对点协议PPP 3.2.1 PPP协议的特点 3.2.2 PPP协议 ...
    
		
    6. 
						
  6. 概率论与数理统计考试重点复习路线
		
    概率论与数理统计考试重点复习路线 文章目录 概率论与数理统计考试重点复习路线 前言 MindMap 概率论部分 数理统计部分 概率论 基本概念 离散型 0-1 分布 分布律 数学期望 方差 二项分布  ...
    
		
    7. 
						
  7. 【计算机图形学】期末考试课后习题重点复习(第3-4章)
		
    文章目录 第三章 3.2什么是用户模型?设计一个好的用户接口要涉及哪些因素? 3.3 PHGS 和 GKS 图形软件标准有哪 6 种逻辑输入设备?试评价这 6 种逻辑分类方法. *3.4分别说明定位. ...
    
		
    8. 
						
  8. 【计算机图形学】期末考试课后习题重点复习(第1-2章)
		
    文章目录 第一章 1.1名词解释:图形.图像.点阵法.参数法. 1.2图形包括哪两方面的要素,在计算机中如何表示它们? 1.3什么叫计算机图形学?分析计算机图形学.数字图像处理和计算机视觉学科间的关系 ...
    
		
    9. 
						
  9. c语言规定变量有三种属性分别是,C++面向对象程序设计重点复习资料
		
    <C++面向对象程序设计重点复习资料>由会员分享,可在线阅读,更多相关<C++面向对象程序设计重点复习资料(7页珍藏版)>请在人人文库网上搜索. 1.面向对象程序设计复习题一. ...
    
		
    10. 
		


					

最新文章
	

    
						
  1. win10下安装TensorFlow（CPU only)
		
    2. 
						
  2. Win64 驱动内核编程-22.SHADOW SSDT HOOK（宋孖健）
		
    3. 
						
  3. 索引使用的限制条件，sql优化有哪些，数据同步问题（缓存和数据库），缓存优化
		
    4. 
						
  4. 详解MySQL字符串函数重复REPEAT()、反转REVERSE()、格式化FORMAT()、返回空格SPACE()函数用法(四)
		
    5. 
						
  5. :before 和 :after
		
    6. 
						
  6. java -jar 找不到引用类_怎么解决java -jar找不到主类问题
		
    7. 
						
  7. Asp调用函数是否会影响性能？
		
    8. 
						
  8. linux 更新软件源
		
    9. 
						
  9. 安装TensorFlow-gpu
		
    10. 
						
  10. windows黑窗命令
		
    11. 
						
  11. 华为手表 android app,华为手表app叫什么
		
    12. 
						
  12. MATLAB ttest和ttest2
		
    13. 
						
  13. 什么是蜘蛛池？有什么作用？
		
    14. 
						
  14. 基于 Win32 的应用程序
		
    15. 
						
  15. 0.1+0.2 为什么不等于0.3
		
    16. 
						
  16. html5y页面布局标签,HTML常用标签 - osc_wc3dz06y的个人空间 - OSCHINA - 中文开源技术交流社区...
		
    17. 
						
  17. 1 网站压力测试工具 WEB性能测试 Web Bench
		
    18. 
						
  18. ESP8266/32 (Arduino)驱动SHT30获取温湿度
		
    19. 
						
  19. 【Pycharm教程】代码调试、git操作、连接远程服务器
		
    20. 
						
  20. 招生考试之友2017文科理科
		
    21. 
		

	


热门文章
	

    
									
  1. Google Play 政策更新提醒与重点解读 | 2021 年第四季度
			
    2. 
						
  2. mysql启动报错，ERROR! The server quit without updating PID file (/var/lib/mysql/localhost.localdomain.pid
			
    3. 
						
  3. 如何获得免费网络空间
			
    4. 
						
  4. Linux写文件断电保存,硬盘写到一半时断电，文件系统里会发生什么？
			
    5. 
						
  5. 黑马推荐系统项目实战【二】 相似度计算
			
    6. 
						
  6. 孙正义式风投是如何一步步垮掉的？
			
    7. 
						
  7. 今夕何年（模拟日期）
			
    8. 
						
  8. Rare-Variant Association Analysis | 罕见变异的关联分析
			
    9. 
						
  9. Android系统手机通讯录
			
    10. 
						
  10. 没有文件大小的php空间,host1free无广告全免费10G容量PHP免费空间申请教程
			
    11.