javaScript面向对象之ES6新增Set和Map数据结构

197 阅读2分钟

Set 和 Map 都是 ES6 中新增的数据结构,是对当前 JS 数组和对象这两种重要数据结构的扩展.

Set 类似于数组,但数组可以允许元素重复,Set 不允许元素重复

Map 类似于对象,但普通对象的 key 必须是字符串或者数字,而 Map 的 key 可以是任何数据类型

1.Set

数组是一系列有序的数据集合,而Set是一系列无序,没有重复值得数据集合

  const setDemo = new Set();
  setDemo.add(1);
  setDemo.add(3); //add方法每次只能添加一个成员,且不能重复
  console.log(setDemo); //Set(2) {1, 3}

1.1 Set实例的方法和属性

  • add(value):添加元素,返回 Set 实例本身。
  • delete(value):删除元素,返回一个布尔值,表示删除是否成功。
  • has(value):返回一个布尔值,表示该值是否是 Set 实例的元素。
  • clear():清除所有元素,没有返回值。
  • size:获取元素数量。
  console.log(setDemo.size); //2
  setDemo.add(4).add(5).add(8);
  console.log(setDemo); //Set(5) {1, 3, 4, 5, 8}
  setDemo.delete(8);
  console.log(setDemo); //Set(4) {1, 3, 4, 5}
  console.log(setDemo.has(8)); //false
  console.log(setDemo.has(3)); //true
  setDemo.clear()
  console.log(setDemo); //Set(0) {size: 0}

Set 实例的遍历,可使用如下方法

 //forEach():使用回调函数遍历每个成员。
   const s = new Set();
   s.add('张三').add('李四').add('王麻子');
   console.log(s);
   s.forEach(function(value, key, set) {
     console.log(value, key, set);
     //张三 张三 Set(3) {'张三', '李四', '王麻子'}
     //李四 李四 Set(3) {'张三', '李四', '王麻子'}
     // 王麻子 王麻子 Set(3) {'张三', '李四', '王麻子'}
   });
        

1.2 Set构造函数的参数

    //1.数组对参数
    const ss = new Set([1, 23, 3, 2, 1]);
    console.log(ss); //Set(4) {1, 23, 3, 2}
    // 2.字符串
    const str = new Set('hello')
    console.log(str);  //Set(4) {'h', 'e', 'l', 'o'}
    

1.3 Set的应用

①数组或者字符串去重

②不需要通过下标访问,只需要遍历时

③使用set提供的方法和属性时

2.Map

 const mapDemo = new Map();
   mapDemo.set('username', 'zs');
   console.log(mapDemo); //Map(1) {'username' => 'zs'}
   //基本数据类型和引用数据类型都可以作为键,但是对象就不可以只能是字符串
   mapDemo.set(true, 'true');
   mapDemo.set({}, 'object');
   mapDemo.set({
     'name': 'lisi'
   }, 'object');
    console.log(mapDemo); //Map(4) {'username' => 'zs', true => 'true', {…} => 'object', {…} => 'object'}

2.1 Map实例的方法和属性

set:设置成员 key 和 value get:获取成员属性值 has:判断成员是否存在 delete:删除成员 clear:清空所有 size:获取成员的数量

 const mapfn = new Map();
  mapfn.set('河南省', '慧点科技').set('前端', '第一名');
  console.log(mapfn); //Map(1) {'河南省' => '慧点科技'}
  console.log(mapfn.get('河南省')); //慧点科技
  console.log(mapfn.has('河南省')); //true
     // mapfn.delete('前端');
  console.log(mapfn); //Map(1) {'河南省' => '慧点科技'}
     // mapfn.clear();
  console.log(mapfn); //Map(0) {size: 0}
     //forEach
  mapfn.forEach(function(value, key, set) {
     console.log(value, key, set);
     //慧点科技 河南省 Map(2) {'河南省' => '慧点科技', '前端' => '第一名'}
     //第一名 前端 Map(2) {'河南省' => '慧点科技', '前端' => '第一名'}
  });

2.2 Map构造函数的参数

//将数组作为参数传到Map实例中
  console.log(new Map([     ['name', '智游集团'],
     ['age', 18],
  ], [     ['name', '百知教育'],
     ['age', 20]
 ]));