ES6数组的解构赋值和Set

js发展到ES6阶段，代码简介了很多，同时也提供了很多方法，下面说下数组的解构赋值和Set：

1.数组解构赋值

数组的解构赋值，这个很简单，直接看代码：

最简单的一个例子：

var [a,b,c] = [1,2,3];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

复杂一点：

let [foo, [[bar],baz]] = [1,[[2],3]];
console.log(foo); // 1
console.log(bar); // 2
console.log(baz); // 3

这个看上去比较复杂，但是解构赋值遵循一个原则，只要赋值号（=）左右两边数组解构相同，那么相对应位置的元素赋值就可以成功，如果元素位置不对应的话，将会返回undefind，请看下面代码：

var [foo1] = [];
var [bar1,foo2] = [1];
console.log(foo1); // undefind
console.log(foo2); // undefind
console.log(bar1); // 1

上面代码中，变量foo1找不到在右侧的数组中找不到与其对应的值，所以没有赋值成功，返回的是undefind；

由于数组

[1]

中，只有一个元素，那么变量bar1相对应的位置的值是1，变量foo2相对应位置的值是undefind，所以变量foo2的值也是undefind；

2.set方法

在ES6中，新增加了一种数据结构——Set；

Set这种新型的数据结构也可以用于解构赋值：

let [x,y,z] = new Set(['ab', 'bc', 'cd']);
console.log(x); // ab
console.log(y); // bc
console.log(z); // cd

Set结构的实例有两大类方法：操作方法和遍历方法，首先介绍下操作方法：

add(value)

:添加某个值，返回Set结构本身。

delete(value)

:删除某个值，返回一个布尔值，便是删除是否成功。

has(value)

:返回一个布尔值，表示参数是否为Set的成员。

clear(value)

:清楚所有成员，没有返回值。

下面我们一一验证操作方法的效果：

let arr = [1,2,3];
let s = new Set(arr);

console.log(s.has(4)); // false
console.log(s.delete(1)); // true
s.add(5);
console.log(arr); // [1,2,3],打印出来还是arr数组本身，说明以上方法不是对原数组进行操作，是对Set进行操作;
let newArr = Array.from(s);
cosnsole.log(newArr); // [2,3,5]

Array.from()

方法可以将Set结构转为数组，并且Set不接受重复的元素，这就提供了一种数组去重的方法；

function dedupe (array) {
return Array.from(new Set(array))
}
dedupe([1,2,3,1,3,]); // [1,2,3]

因为ES6中扩展运算符（…）的存在,以上功能可以更加简便的写成：

let arr = [1,2,3,4,5,5,4,3,2,1];
let dedupe = [...new Set(arr)];
console.log(dedupe); // [1,2,3,4,5]

扩展运算符…

1.扩展运算符是用三个点号表示，功能是把数组或者类数组对象展开成一系列用逗号隔开的值；

例如：

let func = (a,b,c)=>{
console.log(a);
console.log(b);
console.log(c);
}
let arr = [1,2,3]
func(...arr);
// 1
// 2
// 3

数组深拷贝：

let arr = [1,2,3]
let arr2 = arr;
let arr3 = [...arr];
console.log(arr === arr2); // true,说明指向同一个数组；
console.log(arr == arr3); // false,说明指向不同

合并另个数组：

let arr = [1,2,3];
let arr2 = [...arr,4,5,6];
console.log(arr2); // [1,2,3,4,5,6]

把字符串转换为数组

let str = '你好，祝你幸福，再见';
let strArray = [...str];
console.log(strArray); // ["你", "好", "，", "祝", "你", "幸", "福", "，", "再", "见"]

rest运算符

rest运算符同样是三个点号，不过其功能与扩展运算符恰好相反，是把逗号隔开的值序列组合成一个数组；

let func = (...args)=>{
for(let i of args) {
console.log(i)
}
}
func(1,2,3,4)
// 1
// 2
// 3
// 4

let bar = (a, ...args) {
console.log(a);
console.log(args)
}
bar(1,2,3,4,5);
// 1
// [2,3,4,5]

rest运算符配合解构赋值使用

这是重点~~~~

let [a, ...res] = [1,2,3,4];
console.log(a); // 1
console.log(res); // [2,3,4]

好了，先介绍这么多，后续更新~