基于ES6标准入门（第3版）这本书的笔记
要学习angula，vue，react等新的前端框架，必须先熟悉ES6的语法
数组的结构赋值
基本用法
es6允许按照一定是模式从数组和对象中提取值，然后对变量进行赋值，这个过程称为解构
{
let a = 1;
let b = 2;
let c = 3;
let [d,e,f] = [4,5,6];
console.log(d);
console.log(e);
console.log(f);
console.log('-----------------');
let [a1,[b1,c1]] = [7,[8,9]];
console.log(a1);
console.log(b1);
console.log(c1);
console.log('-----------------');
let [a2, ,c2] = [1,2,3];
console.log(a2);
console.log(c2);
console.log('-----------------');
let [a3,...c3] = [1,2,3];
console.log(a3);
console.log(c3);
console.log('-----------------');
}
上面的代码其实经过编译器编译会出现如下代码
'use strict';
{
var a = 1;
var b = 2;
var c = 3;
var d = 4,
e = 5,
f = 6;
console.log(d);
console.log(e);
console.log(f);
console.log('-----------------');
var a1 = 7,
b1 = 8,
c1 = 9;
console.log(a1);
console.log(b1);
console.log(c1);
console.log('-----------------');
var _ref = [1, 2, 3],
a2 = _ref[0],
c2 = _ref[2];
console.log(a2);
console.log(c2);
console.log('-----------------');
var a3 = 1,
c3 = [2, 3];
console.log(a3);
console.log(c3);
console.log('-----------------');
}
}
控制台会输出
image.png
如果解构不成功，变量值就是undefined
{
let [a,b] = [a];
console.log(b);// 输出undefined
}
默认值
解构赋值允许指定默认值
{
let [a = 1] = [];
console.log(a);
console.log('------------');
let [b,c = 2] =[1];
console.log(b);
console.log(c);
console.log('------------');
let [b1,c1 = 2] =[1,3];
console.log(b1);
console.log(c1);
console.log('------------');
}
es6内部执行严格的相等于（===）判断一个位置是否有值，如果赋了默认值，然后后面有有值，会取后面的赋值
image.png
对象的结构赋值
基本用法
解构可以用于数组，也可以用于对象，和数组按照顺序赋值不同，对象解构是按照变量名来的
{
let {a,b} ={b:1,a:2}
console.log(a);
console.log(b);
console.log('------------');
}
image.png
如果变量名不一致，必须取别名才行
{
let obj ={first:'hello',last:'word'}
let {first:f,last:l} = obj;
console.log(f);
console.log(l);
console.log('------------');
}
同样，对象也可以嵌套赋值
{
let obj = {
msg:[
'hello',
{m2:'word'}
]
}
let {msg:[m1,{m2}]} = obj;
console.log(m1);
console.log(m2);
}
image.png
对象赋值也可以设置默认值，如果设置了默认值后再赋值，取后面的赋值
{
let {a1 =1} = {}
console.log(a1);
console.log('------');
let {a2,b2 = 2} ={a2:1};
console.log(a2);
console.log(b2);
console.log('------');
let {a3: b3 =3 } = {a3 :10};
console.log(b3);
console.log('------');
}
image.png
对象赋值也可通过对象名点属性名点方式取出来
{
let obj ={first:'hello',last:'word'}
console.log(obj.first);
console.log(obj.last);
console.log('------------');
}
还有就是需要特别注意的是如果一个声明了的变量还要进行解构赋值，需要特别注意，下面这种写法是会报错的，因为会吧{x}识别为代码块
{
let x;
{x} = {x:1};
}
正确写法
{
let x;
({x} = {x:1});
console.log(x);
}
解构赋值也可以将对象的方法属性赋值到一个变量上面，控制台会输出2
{
let {a,b,c} = {a:1,b:2,c:3};
let obj = {a,b,c};
console.log(obj.b);
}
因为数组本质是特殊的对象，所以可以对数组进行对象属性解构，控制台会输出1，3
{
let arr =[1,2,3];
let{0:first,[arr.length-1]:last} = arr;
console.log(first);
console.log(last);
}
字符串的解构赋值
字符串解构赋值就是把字符串转换成一个类似数组的结构，控制台会输出3
{
let[a,b,c,d] = '1234';
console.log(c);
}
数值和布尔值的解构赋值
因为数值和布尔值都呕toString属性，因此变量都能取到值，解构赋值的规则是，只要等号右边的值不是对象或者数组，就先转换为对象
{
let{toString:s}=123;
console.log(s == Number.prototype.toString);
let{toString:y}=true;
console.log(y == Boolean.prototype.toString);
}
函数参数的解构赋值
下面代码控制台会输出3，因为对于代码内部来说，在传入参数的时候，数组就被解构成了变量x,y
function add([x,y]) {
return x + y;
}
console.log(add([1,2]));
函数参数同样可以设置默认值，可以从输出看出遵循一样的规则
function show({x = 0, y = 0} = {}) {
return [x,y];
}
console.log(show({x:1,y:2}));
console.log(show({x:1}));
console.log(show({}));
image.png
圆括号的使用
在所有变量的声明是不能使用圆括号的，只有在赋值语句的非模式部分可以使用圆括号
{
[(a)] = [1];
({p:(d)} = {});
[(parseInt.prop)] = [3];
}
解构的用途
变量值交换
{
let x = 1;
let y = 2;
[x,y] = [y,x];
}
函数参数返回对象或者数组
function backArr() {
return [1,2,3];
}
let [a, b, c] = backArr();
function backObj() {
return {
fast:'hello',
last:'word'
}
}
let {fast,last} = backObj();
解析json对象
这样就可以直接使用name，age
{
let jsonData = {name :'小明',age:12};
let {name,age} = jsonData;
}
函数参数默认值
前面有举例，就不重复列举了
遍历map
key和value就可以直接使用
{
var map = new Map();
map.put('k1','v1');
map.put('k2','v2');
map.put('k3','v3');
for(let [key,value] of map){
console.log(key);
console.log(value)
}
}
模块加载指定输入方法
const {SourceMapConsumer,SourceNode } = require("source-map");
