Set和Map

ES6 set 和 map理解

---

前言

对ES6的理解

---

一、set方法

ES6提供了新的数据结构Set,它类似于数组，但成员是唯一的，没有重复的值
只针对一维数组，是以大括号的形式展示的

二、Set的属性和方法

定义使用

//方式一
const s = new Set()  
//方式二
const s = new Set([1,2,4,5,6,32,5,5])   // {1,2,4,5,6,32}

属性和方法

1、add(vlalue)添加某个值，返回Set解构本身

const set = new Set();
set.add(1).add(2).add(3).add(3);

2、delete(value)删除某个值，返回一个布尔值

set.delete(value)

3、clear（）清除所有成员，没有返回值

set.clear()

4、has（value）该值是否为set成员，返回布尔值

set.has(value)

5、size（value）返回set结构的成员总数

set.size()

与数组结构类型转换

const set = new Set([1,5,4,254,1,4])
// 方式一：扩展运算符
let arr = [...set]
// 方式二： Array.from()
let arr = Array.from(set)

遍历方法

const set = new Set([1,5,4,8,5,26,2,8])
for(let v of set) {
	console.log(v)
}
set.forEach(v => {
	console.log(v)
})

应用

去重

ES5去重

// 方法一
let arr1 = [1,2,4,5,2,3,68,1,2,3,1]
function fun1 (arr) {
	for(var i= 0; i<arr.length; i++) {
		for(var j=i+1;j<arr.length;j++) {
			if(arr[i] === arr[j]) {
				arr.splice(j,1) 
				j-- // 因为数组已经删除了一个 所以需要减一，数组length也会减一，所以需要减--
			}
		}
	}
	return arr
}

// 方法二
function fun2(arr) {
	var arrNew = []
	for(var i=0; i<arr.length;i++){
		if(arrNew.indexOf(arr[i]) == -1) {
			arrNew.push(arr[i])
		}
	}
	return arrNew
}

ES6去重

var arr = [1,2,3,1,2,35,4,5,62,10]
// 方法一
var s1 =[... new Set(arr)]
// 方法二
var s1 = Array.from(new Set(arr))
// 大于30且去重
var arr1 = [10,20,50,32,15,25,10,85,6,5,4,52,5,42]
var s1 = arr1.filter(v => v>30)
var s2 = Array.from(new Set(s1))

一、Map方法

ES6提供了Map数据结构t,它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。
obj是不能使用for…of… 除非 entries（）方法

二、Map的属性和方法

定义使用

//方式一
const m = new Map()  
//方式二
const m = new Map([['a',1],['b',2],['c',3]]) 
// 方式三
const obj = {a:1,b:2,c:3}
const m = new Map(Object.entries(obj))
// {'a' => 1, 'b' => 2, 'c' => 3}

属性和方法

1、Map(key,vlalue)添加键值对

const m = new Map();
m.set('qq', '2429462491')       // 键是字符串
m.set(100, 'jindu')     // 键是数值
m.set(undefined, 'value')   // 键是 undefined

2、delete(key) 删除某个键，返回 true 。如果删除失败，返回 false 。

map.delete(key)

3、clear（）清除所有成员，没有返回值

map.clear()

4、has(key) 返回一个布尔值，表示某个键是否在当前 Map 对象之中。

set.has(key)

5、size（）返回Map结构的成员总数

map.size()

与数组结构类型转换

const set = new Set([1,5,4,254,1,4])
// 方式一：扩展运算符
let arr = [...set]
// 方式二： Array.from()
let arr = Array.from(set)

遍历方法

// 方法一
const m1 = new Map([['a',1],['b',2],['c',3]]);
for(let k of m1.keys()){
       console.log(k) // a,b,c
}
// 方法二
for(let [v,i] of m1){
       console.log(v) // a,b,c
       console.log(i) // 1,2,3
}

应用

set中的运用

var set = new Set([1,2,3,4,5]);
for(let v of set){
   console.log(v) //1,2,3,4,5 
};

map中的运用

var m = new Map();
m.set('name','value').set('age',18).set('a','a');
for(let [k,v] of m){
   console.log(k) //name,age,a
   console.log(v)   //value,18,'a'
};

对象中的运用

    var obj = {
       id:1,
       name:'abc'
   };
   for (let k in obj) {
       console.log(k);
       console.log(obj[k]);
   }
   for (let k of obj) {
       console.log(k);
   }
   // TypeError: es6[Symbol.iterator] is not a function
    
   解决的办法
   for (let [k,v] of Object.entries(obj)) {
       console.log(k); //获取键
       console.log(v); //获取值
   }