前端基础之《ECMAScript 6(9)—集合介绍与API》

一、Set集合

1、ES6提供了新的数据结构Set(集合)

它类似于数组,但成员的值都是唯一的,集合实现了Iterator接口,所以可以使用【扩展运算符...】展开和【for...of】进行遍历。
Set本质上也是一个对象。

2、集合的属性和方法

(1)size:返回集合的元素个数
(2)add:增加一个新元素,返回当前集合
(3)delete:删除元素,返回boolean值
(4)has:检测集合中是否包含某个元素,返回boolean值

3、Set例子

    //声明一个Set
	let s = new Set();
    console.log(s, typeof s);

    //传入一个数组
    let s2 = new Set(['大事儿','小事儿','好事儿','坏事儿','小事儿']);
    console.log(s2);

Set会自动去除重复的项。

4、Set属性和方法例子

    //传入一个数组
    let s2 = new Set(['大事儿','小事儿','好事儿','坏事儿','小事儿']);
    console.log(s2);

    //元素个数
    console.log(s2.size);

    //添加新元素
    s2.add('喜事儿');
    console.log(s2);

    //删除元素
    s2.delete('坏事儿');
    console.log(s2);

    //检测
    console.log(s2.has('好事儿'));  //有返回true,没有返回false

    //for...of遍历Set集合
    for(let v of s2){
        console.log(v);
    }

    //清空
    s2.clear();
    console.log(s2);

二、Set实践

1、数组去重

先将数组变为Set集合,在用扩展运算符变为数组。

2、交集

先去重,在比对。

3、并集

两个直接合并,转换成Set去重,在转换成数组。

4、差集

差集是交集的取反。

    let arr = [1,2,3,4,5,4,3,2,1];

    //1. 数组去重
    let result = [...new Set(arr)];  //先将数组变为Set集合,在用扩展运算符变为数组
    console.log(result);

    //2. 交集
    let arr2 = [4,5,6,5,6];
    //arr去重
    let result2 = [...new Set(arr)].filter(item => {
        //把arr2也变成一个集合
        let s2 = new Set(arr2);
        if(s2.has(item)){
            return true;
        }else{
            return false;
        }
    });
    console.log(result2);

    //3. 并集
    let union = [...new Set([...arr, ...arr2])];
    console.log(union);

    //4. 差集
    let diff = [...new Set(arr)].filter(item => !(new Set(arr2).has(item)));
    console.log(diff);

三、Map集合

1、ES6提供了Map数据结构

它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当做键。Map也实现了Iterator接口,所以可以使用【扩展运算符】和【for...of】进行遍历。

2、Map的属性和方法

(1)size:返回Map的元素个数
(2)set:增加一个新元素,返回当前Map
(3)get:返回键名对象的键值
(4)has:检测Map中是否包含某个元素,返回boolean值
(5)clear:清空集合,返回undefined
(6)delete:删除一个元素

四、Map例子

1、声明Map

    //声明Map
    let m = new Map();
    m.set('name','张三');
    m.set('say', function(){
        console.log("发言了!");
    })

    //声明一个对象
    let key = {
        school : 'xxx三中'
    }
    m.set(key, ['北京','上海','深圳']);

    //打印Map对象
    console.log(m);

Map的键可以是字符串,方法,对象等。

2、size

    //size
    console.log(m.size);

3、delete

    //delete
    m.delete('name');
    console.log(m);

4、get

    //get
    console.log(m.get('say'));

5、遍历Map

v的每个元素,是一个数组。数组第一个元素是键,第二个元素是值。

    //遍历
    for(let v of m){
        console.log(v);
    }

五、小结

Map是升级版的对象,原来对象key只能是字符串。现在Map可以把对象作为一个key。
 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值