【ES6】-- Set与Map | Map与Object

Set

Set是ES6提供的一种新的数据结构,允许存储任何类型的值, 类似于数组,但Set中的成员是唯一的, 没有重复值

  •  构造函数创建一个set数据结构
let set = new Set();

Set中的特殊值

因为Set中的值是唯一的,需要判断两个值是否恒等。在此有几个特殊值需要特殊对待:

console.log(+0 === -0); // true
console.log(undefined === undefined); // true
console.log(NaN === NaN); // false

Set实例对象的方法

  • add

        向set对象中添加新的成员

set.add('zzy');
set.add('water')
console.log(set); // Set(2) { 'zzy', 'water' }

注意: 使用add方法添加基本数据类型会自动去重,添加引用数据类型不会去重

set.add('zzy');
set.add('water')
console.log(set); // Set(2) { 'zzy', 'water' }
set.add([1]);
console.log(set); // Set(3) { 'zzy', 'water', [ 1 ] }
set.add('water')
set.add([1]);
// 使用add方法添加基本数据类型会自动去重
// 添加引用数据类型不会去重
console.log(set);  // Set(4) { 'zzy', 'water', [ 1 ], [ 1 ] }
  • size

查看set的长度

console.log(set.size); // 2
  • delete

删除set对象中的成员

set.delete('zzy');
console.log(set);  // Set(3) { 'water', [ 1 ], [ 1 ] }

  • has

判断有没有某个成员

set.has('hello');  // 返回布尔值true或者false
  • clear

清空set 无参无返回值

set.clear();

应用:数组去重

console.log(...new Set([1,22,22,3,4])); // 1 22 3 4

遍历方法

  • keys():返回键名的遍历器。

  • values():返回键值的遍历器。
  • entries():返回键值对的遍历器。
  • forEach():使用回调函数遍历每个成员。

// keys和 values是一样的
console.log(set.keys()); // [Set Iterator] { 'water', [ 1 ], [ 1 ] }
console.log(set.values()); // [Set Iterator] { 'water', [ 1 ], [ 1 ] }
console.log(set.entries());
// [Set Entries] {
    // [ 'water', 'water' ],
    // [ [ 1 ], [ 1 ] ],
    // [ [ 1 ], [ 1 ] ]
//   }

let res = set.forEach((key,value,set)=>{
    console.log(key,value,set);
})
console.log(res);
// water water Set(3) { 'water', [ 1 ], [ 1 ] }
// [ 1 ] [ 1 ] Set(3) { 'water', [ 1 ], [ 1 ] }
// [ 1 ] [ 1 ] Set(3) { 'water', [ 1 ], [ 1 ] }

Map

Map是一种集合,类似于对象,是由键值对组成的数据结构。 键可以是任意数据类型

而对象的键只能是字符串或者symbol值。

  • 构造函数创建一个map集合
let map = new Map();

Map实例对象的方法

  • set

        给map添加成员 

// 第一个参数是key值 第二个参数是value值
map.set("yse","zzy")
map.set([2],'hello')
console.log(map); // Map(2) { 'yse' => 'zzy', [ 2 ] => 'hello' }
  • delete

        删除Map中的成员,

        可以直接删除基本数据类型的键,删除引用数据类型需要删除引用地址

map.delete("yse")
console.log(map); // Map(1) { [ 2 ] => 'hello' }
  • get

        获取成员

map1.get([2])
console.log(map1); // Map(1) { [ 2 ] => 'hello' }

Map与其他数据结构的互相转换

  • map与数组的转换 
 const arr = [[{'a': 1}, 111], ['b': 222]]
 
const myMap = new Map(arr)
 
[...myMap] // map转数组。 [[{'a': 1}, 111], ['b': 222]]
  • map与对象的互换
const obj = {}
const map = new Map(['a', 111], ['b', 222])
for(let [key,value] of map) {
  obj[key] = value
}
console.log(obj) // {a:111, b: 222}

注意:

JSON字符串要转换成Map可以先利用JSON.parse()转换成数组或者对象,然后再转换即可。

面试问点 

Set和Map的区别

  1. Map是键值对,Set是值的集合,当然键和值可以是任何的值;
  2. Map可以通过get方法获取值,而set不能,因为它只有值;
  3. Set的值是唯一的可以做数组去重,Map由于没有格式限制,可以做数据存储

Map和Object的区别

  1. 一个Object 的键只能是字符串或者 Symbols,但一个Map 的键可以是任意值。
  2. Map中的键值是有序的,而添加到Object中的键则不是。
  3. Map的键值对个数可以从 size 属性获取,而 Object 的键值对个数只能手动计算。
  4. Object 都有自己的原型,原型链上的键名有可能和你自己在对象上的设置的键名产生冲突。而Map 默认情况不包含任何键。只包含显式插入的键。

你可能感兴趣的:(前端,ES6,es6,前端,ecmascript,javascript,开发语言)