变量的解构赋值
其实是挺好理解的，用一条式子可以很容易明白
let [foo, [[bar], baz]] = [1, [[2], 3]];
let [a, b, c] = [1, 2, 3];
类似于模式匹配的赋值模式，长得一样的就可以完美赋值
1、数组解构
let [ , , third] = ["foo", "bar", "baz"];
third // "baz"
let [x, , y] = [1, 2, 3];
x // 1
y // 3
let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]
let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []
ps:这里可以说一下...X,这个符号是什么意思呢？还是通过式子可以比较清晰的说明：
## 1、展开运算符
let a = [1,2,3];
let b = [0, ...a, 4]; // [0,1,2,3,4]
## 一样是展开代表元素的意思
let obj = { a: 1, b: 2 };
let obj2 = { ...obj, c: 3 }; // { a:1, b:2, c:3 }
let obj3 = { ...obj, a: 3 }; // { a:3, b:2 }
## 2、解构的一种，叫做剩余操作符
let a = [1,2,3];
let [b, ...c] = a;
b; // 1
c; // [2,3]
// 也可以
let a = [1,2,3];
let [b, ...[c,d,e]] = a;
b; // 1
c; // 2
d; // 3
e; // undefined
// 也可以
function test(a, ...rest){
console.log(a); // 1
console.log(rest); // [2,3]
}
test(1,2,3)
#### 2、对象解构
下面模式p是一个模式，但这样写也是一个对象
let obj = {p: [
'Hello',
{ y: 'World' }
]
};
let { p, p: [x, { y }] } = obj;
x // "Hello"
y // "World"
p // ["Hello", {y: "World"}]
3、字符串的解构赋值
const [a,b,c,d,e]='hello',
a //"h"
b //"e"
let {length:len} ='hello';
len //5数组对象的length属性
4、函数参数的解析赋值
function([x,y]){
return x+y;
}
add([1,2]);//3
5、对函数参数使用默认值
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]
上面的例子可以看到，传参为空的话就会使用默认值,下面是Chrome的控制台下打印出来的结果：
function move({x=0,y=0}={}){
return [x,y];
}
undefined
move({s:3,y:8});
(2) [0, 8]
move({x:3,y:8});
(2) [3, 8]
move({x:3});
(2) [3, 0]
move({y:3});
(2) [0, 3]
move({});
(2) [0, 0]
下面是一种跟上面不一样的操作：
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]
这个函数和上面的不同点在于这个函数只有未传参（传参为空）的时候才会是用默认值。
[1, undefined, 3].map((x = 'yes') => x);
// [ 1, 'yes', 3 ]
这里，map函数会遍历所有参数，如果没有参数传进来，或者传进来的参数为undefined的时候，会为该参数传输一个处理函数吧(下面是Chrome控制台输出)
[1,undefined,3].map((x='yes') => x);
(3) [1, "yes", 3]
[1,null,3].map((x='yes') => x);
(3) [1, null, 3]
[1,'',3].map((x='yes') => x);
(3) [1, "", 3]
ES6 规则：
只要可能导致解构的歧义，就不得使用圆括号。
（严谨模式）
解构模式的应用
1、交互变量的值
let x = 1;
let y = 2;
[x, y] = [y, x];
代码相当的少。很舒服
2、从函数返回多个值
//返回一个数组
function example(){
return [1,2,3];
}
let [a,b,c]=example();
//返回一个对象
function example(){
return{
foo:1,
bar:2
}
}
let {foo,bar}=example();
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]
5、设置函数的默认值，
例子在上面有（ES6规则上面）
6、便利Map结构
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
7、输入模块的制定方法
其实一直都在用的
const { SourceMapConsumer, SourceNode } = require("source-map");
上面的是今天查看阮一峰的ecmaScript6入门的一些笔记吧，挺多新奇的概念和用法，看以后实战能不能尝试加上去！起码在交换和设置默认值，这种用法就相当的整洁。不用写太多冗余的代码。结