javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > javascript ES6中set、map使用方法

javascript ES6中set集合、map集合使用方法详解与源码实例

作者:小刺猬_0421

这篇文章主要介绍了javascript ES6中set、map使用方法详解与源码实例,需要的朋友可以参考下

set与map理解

ES6中新增,set集合和map集合就是一种数据的存储结构(在ES6之前数据存储结构只有array,object),不同的场景使用不同的集合去存储数据

set集合

Set 对象允许你存储任何类型的唯一值,无论是原始值或者是对象引用。

set集合语法:

//创建一个set集合,传参为一个可迭代的对象
const s1 = new Set(iterable);

API

名称类型简介
Set.add()原型方法添加数据
Set.has()原型方法判断是否存在一个数据
Set.delete()原型方法删除数据
Set.clear()原型方法清空集合
Set.size属性属性集合长度
for of原型方法遍历

set源码例子:

// 1.add() 往创建好的集合中添加数据的
    const s1 = new Set();
    s1.add(1)
    s1.add(2)
    s1.add(3)
    s1.add(4)
    s1.add(1) //无效添加,因为数据重复
    console.log(s1)

// 2.has() 判断数据是否存在
    console.log(s1.has(1))
    console.log(s1.has(10))

// 3.delete()  返回是否删除成功
    s1.delete(1)
    console.log(s1)
    console.log(s1.delete(10))

// 4.clear()  清空集合
    s1.clear()
    console.log(s1)

// 5.size属性  只能读,不能改
    console.log(s1.size)

// 6.遍历:for of,因为是一个可迭代的对象
    for(const item of s1){
        console.log(item)
    }
    // 重写的实例方法  forEach
    s1.forEach((item, index, s) => {
        // index 不是下标,set集合没有下标
        // forEach中的第一个参数的值和第二个参数的值是相同的,都表示set中的每一项数据
        console.log(item, index, s)
    })

使用场景

//数组去重
  const arr = [1,1,22,22,3,1,88,88,65,123,444,65];
  const s = new Set(arr);
  console.log([...s]);

//或者一句话搞定
  const result = [...new Set(arr)];
  console.log(result);//[1,22,3,88,65,123,444,65]

// 两个数组的交集,并集,差集,结果得到一个新的数组
  const arr1 = [12,34,55,33,11,33,5,12];
  const arr2 = [55,34,11,78,10,19,88,88,99,99];

// 用set完成
// 交集:你有我也有的数组元素  组成一个新数组
  const cross = [...new Set(arr1)].filter(item => arr2.indexOf(item) >= 0);
  console.log(cross);//[]

// 并集:数组合并去重之后的新数组
  const result = [...new Set([...arr1,...arr2])];
  console.log(result);

// 差集:你有我没有,我有你没有的数组元素 组成一个新数组
  let arr4 = result.filter(item=>{
      // 判断arr1里面存在并且arr2不存在的数据  和  arr1里面不存在并且arr2里存在的数据
      return arr1.includes(item) && !arr2.includes(item) || !arr1.includes(item) && arr2.includes(item)
  })
  console.log(arr4)  //[12, 33, 5, 78, 10, 19, 88, 99]

map集合(映射)

Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。

map集合语法:

let swk=new Map()
console.log(swk);//Map(0)

API

名称类型简介
Map.set(key,value)原型方法添加数据
Map.get(key)原型方法获取数据
Map.has(key)原型方法判断是否存在一个数据
Map.delete(key)原型方法删除数据
Map.clear()原型方法清空集合
Map.size属性原型方法集合长度
for of原型方法遍历

map集合源码例子:

        let swk=new Map();
         console.log(swk);      

    // 1. 新增map元素
        // Map.set(key,value) 设置Map对象的键值对(键名,键值) 返回当前对象
        swk.set('uname', '孙悟空');
        swk.set('age', 600);
        swk.set('master', '唐僧');
        swk.set('weapon', '金箍棒');
        console.log(swk); //Map(4) {'uname' => '孙悟空', 'age' => 600, 'master' => '唐僧', 'weapon' => '金箍棒'}
        swk.set('age', 601);
        console.log(swk);
        // 键不存在,则添加一项
        // 键存在,则修改

   // 2. 获取map元素
        // Map.get(key)返回key值对应的value 如果key不存在则返回undefined
        console.log(swk.get('uname')); //孙悟空
        console.log(swk.get({})); //undefined

   // 3. 判断元素是否存在  has  返回布尔值
        console.log(swk.has('uname')); //true
        console.log(swk.has({})); //false

  // 4. 删除映射元素
        swk.delete('weapon');
        console.log(swk); //Map(3) {'uname' => '孙悟空', 'age' => 600, 'master' => '唐僧'}

  //5. 清空映射元素
        // swk.clear();
        // console.log(swk); //Map(0) {size: 0}

  // 6. 映射元素长度
        console.log(swk.size); //3

  // 7. 可以使用for of 循环
        for (let [key, value] of swk) {
            console.log(key, value);
            for (let item in value) {
                console.log(value[item])
            }
        }

        console.log('=====forEach=====');


  // 8. 可以使用forEach 遍历
        swk.forEach((item, index, map) => {
            console.log(index); //uname age master
            console.log('==========');
            console.log(item); // 孙悟空 60  唐僧
            console.log('==========');
            console.log(map);
            console.log('==========');
        })

Maps 和 Objects 的区别

本文主要讲解了javascript ES6中set集合,map集合使用方法详解与源码实例,更多关于javascript ES6的新内容请查看下面的相关链接

您可能感兴趣的文章:
阅读全文