ES6 知识点整理
[toc]
02 变量的解构赋值
02.1 数组的解构赋值
基本用法:
- let [x, y = 1] = [10, 20];//x:10 y:20
- let [x, y = 1] = [10];//x:10 y:1
- let [, y] = [10, 20];//y:20
- let [x, y] = [10];//x:10 y:undefined
上例中使用了默认值, 若该位置对应的值不严格等于 undefined, 则会使用默认值
默认值也可以使用解构赋值的其他变量, 前提是其已声明
- let [x = 1, y = x] = [];//x:1 y:1
- let [x = y, y = 1] = [];//ReferenceError
02.2 对象的结构赋值
对象的解构赋值与数组一点不同在于: 数组的元素是有序的, 变量的取值取决于位置; 而对象需要寻找其属性同名的变量:
- let {
- a, b
- } = {
- b:"Hello", a:"World"
- };
- a//World
- b//Hello
而当需要变量名与属性名不同名时, 可以写成如下这样:
- let {
- a:stringA, b:stringB
- } = {
- a:"Hello",b:"World"
- }
- a//ReferenceError
- b//ReferenceError
- stringA//Hello
- stringB//World
注意:
如果要将一个已经声明的变量用于解构赋值, 可能会产生意想不到的错误:
- let a;
- {
- a
- } = {
- a:"Hello World"
- };//SynaxError
产生语法错误的原因是,{a} 会被 JS 引擎解释为一个代码块, 正确的方法应该是不将大括号写在行首
- let a;
- ({
- a
- } = {
- a:"Hello World"
- });//a:Hello World
另外, 由于数组也是一种特殊的对象, 因此数组也可以使用对象的解构赋值:
- let arr = ["Hello", "My", "World"];
- let {
- 0:First, [arr.length - 1]:Last
- } = arr;
- First//Hello
- Last//World
02.3 字符串的解构赋值
- let [a,b,c] = "Hello";
- a//H
- b//e
- c//l
- // 类似数组的对象都有一个 length 属性, 下例中等于将 "Hello" 的 length 属性解构赋值给 len
- let {
- length : len
- } = "Hello";
- len//5
02.4 数值和布尔值的解构赋值
如果使用布尔值或数值作为等号右边来解构赋值, 则会先将其转换为对象, 而如果是 undefied 或 null, 由于无法转换成对象, 解构赋值则会报错.
02.5 函数参数的解构赋值
- // 例 1
- function add([x,y]){
- return x + y;
- }
- add([1,2]);//3
- // 例 2
- [[1,2],[3,4]].map(([a,b]) => a+b);//[3,7]
02.6 解构赋值的应用
02.6.1 交换变量的值
以前我们需要交换两个变量的值可能会采用以下的方法:
- let a = 0, b = 1;
- let temp;
- temp = b;
- b = a;
- a = temp;
- a//1
- b//0
应用解构赋值后, 代码可以更简洁:
- let a = 0, b = 1;
- [a,b] = [b,a];
- a//1
- b//0
02.6.2 从函数返回多个值
函数只能返回一个值, 如果需要返回多个值, 只能放在数组或对象中返回, 使用解构赋值取出这些值就会非常方便
- function someResults(){
- return{
- a:0,
- b:1,
- c:2
- }
- }
- let {a,b,c} = someResults();
02.6.3 函数参数
可以方便的将一组参数与变量对应起来, 这种应用在各类 JS 插件中很常见, 比如需要设定一个 options 参数, 用于设置插件的各项参数:
- function someFunc({
- color = "red",
- width = "100",
- height = "100"
- } = {
- color : "red",
- width : "100",
- height : "100"
- }){
- console.log(color,width,height);
- }
- someFunc();//red,100,100
- someFunc({});////red,100,100
- someFunc({color:"orange",width:"200"});//orange,200,100
以上函数 someFunc 中, 使用了对象的结构赋值及函数参数的默认值来设定 options 参数, 未设定的参数将使用默认值
02.6.4 提取 JSON 数据
等同于对象的解构, JSON 的数据提取可以非常简洁快速
- let jsonData = {
- name : "Jelly",
- age : 20,
- account : ["622662266226","75577557757"]
- }
- let {name,age,account} = jsonData;
02.6.5 遍历 Map 结构
结合 for...of 循环遍历和变量的结构赋值, 取出 Map 的键值非常方便
- let map = new Map();
- map.set('first','hello');
- map.set('second','world');
- for(let [key,value] of map){
- console.log(key + 'is' +value);
- }
02.6.6 输入模块的指定方法
加载模块的指定方法时:
const {SourceMapConsumer, SourceNode} = require("source-map");
来源: http://www.jianshu.com/p/c088b1da6009