前言
本篇随笔是对 《ECMAScript 6 入门》作者:阮一峰 的学习笔记,此书已经开源,地址为:http://es6.ruanyifeng.com/ 请买实体书支持他。我已经买了。
let 和 const 声明变量
let 和 const 是在es6中 新增的变量声明。在es6中 推荐使用 let 和 const而不推荐使用 var
- let 声明的变量 相当于一个成员变量
- const 为声明一个 只读变量。
解构赋值
数组的解构赋值
在es6版本之前 我们只能直接指定赋值:
var a = 1;
var b = 2;
var c = 3;
但在es6中 增加了结构赋值:
let [a, b, c] = [1, 2, 3];
//a=1,b=2,c=3
let [foo, [[bar], baz]] = [1, [[2], 3]];
//foo=1,bar=2,baz=3
let [head, ...tail] = [1, 2, 3, 4];
//head=1,tail = [2,3,4]
let [x, y, z] = new Set(['a', 'b', 'c']);
//x ="a",y ="b",c ="c"
对象解构
//对象解构
let {objA,objB}={objA:"1",objB:"2"};
// 上面的 声明等于
let {objA2:objA2,objB2:objB2}={objA2:"1",objB2:"2"};
//objA2=1,objB2=2
let {objA2:o2,objB2:o3}={objA2:"1",objB2:"2"};
//o2=1,o3=2
注意:上面代码中,objA2是匹配的模式,o2才是变量。真正被赋值的是变量o2,而不是模式objA2。
更加复杂的对象解构
let objLv1 = {
child1: [
"value1",
{cChild1: "cValue1"},
]
};
let {child1: [param1, {cChild1: param2}]} = objLv1;
//param1 = "value1",param2 = "cValue1"
上面的代码 只有 param1,param2为变量 其他的均为匹配模式。
更复杂的对象解构2
let objLv2 = {
childLv2: {
cChildLv2: {
min: 0,
max: 99
}
}
};
let {childLv2, childLv2: {cChildLv2}, childLv2: {cChildLv2: {min, max}}} = objLv2;
//childLv2 = { "cChildLv2": { "min": 0, "max": 99 } }
//cChildLv2 = { "min": 0, "max": 99 }
//min=0,mix=99
注:可能此处对刚接触的同志来说很难以理解,上边的结构操作仅仅是对childLv2结构了三次,但每次节后的复杂程度不同。
默认值
赋值时允许声明默认值
let [a0,b0="222"] = ["111"];
//a1 = "111" ,b1 = "222"
let [a1,b1="222"] = ["111",null];
//a1 = "111" ,b1 = null
let [a2,b2="222"] = ["111",undefind];
//a1 = "111" ,b1 = "222"
//默认值也可以为其他变量
let [x = 1, y = x] = [2]; // x=2; y=2
let {x: y = 3} = {x: 5}; //x=5;y=3
let [x = y, y = 1] = []; // ReferenceError: y is not defined
上面最后一个表达式之所以会报错,是因为x用y做默认值时,y还没有声明。
函数解构
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]
理解:{x = 0, y = 0} = {} 当传参为 undefind时,参数变为 {} 传入进行解构
运用
let { log, sin, cos } = Math;
let arr = [1, 2, 3];
let {0 : first, [arr.length - 1] : last} = arr;
// first = 1
// last = 3
//变量的交换
let x = 1;
let y = 2;
[x, y] = [y, x];
//参数的默认值
jQuery.ajax = function (url, {
async = true,
beforeSend = function () {},
cache = true,
complete = function () {},
crossDomain = false,
global = true,
// ... more config
} = {}) {
// ... do stuff
};