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]

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

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值