ES6-基础语法三

1. Set

ES6 提供了新的数据结构 Set（集合 。它类似于数组，但成员的值都是唯一的 ，集合实现了 iterator接口，所以可以使用『扩展运算符』和『 for…of…』进行遍历，集合的属性和方法：

1. size 返回集合的元素个数
2. add 增加一个新元素，返回当前集合
3. delete 删除元素，返回 boolean 值
4. has 检测集合中是否包含某个元素，返回 boolean值
5. clear 清空集合，返回 undefined

1.1. set基础

// state a set
let s = new Set();
// state a set with initial value
let s2 = new Set(['Lisa', 'jisoo', 'rose', 'jenny'])

// size of set
console.log(s2.size)  // 4

// add new element
s2.add('michael')
console.log('s2 after adding a new element', s2) // s2 after adding a new element Set(5) { 'Lisa', 'jisoo', 'rose', 'jenny', 'michael' }

// delete element
s2.delete('michael')
console.log('s2 after deleting michael', s2)  // s2 after deleting michael Set(4) { 'Lisa', 'jisoo', 'rose', 'jenny' }

// check if element exists
console.log(s2.has('Lisa'))  // true  
console.log(s2.has('Michael'))  // false

// clear set
s2.clear()
console.log('s2 after clearing: ', s2) // s2 after clearing:  Set(0) {}

1.2. set 实战练习

// 1. remove duplicate elements from the array
const arr = [1,2,3,4,5,4,3,2,1]
const result = [...new Set(arr)]
console.log('result without duplicate ele: ', result)  // result without duplicate ele:  [ 1, 2, 3, 4, 5 ]

// 2. intersection
let arr2 = [4,5,6,5,6]
// let result2 = [...new Set(arr)].filter((item) => {
//     let s2 = new Set(arr2)
//     if (s2.has(item)){
//         return true
//     } else {
//         return false
//     }
// })
let result2 = [...new Set(arr)].filter(item => new Set(arr2).has(item))
console.log(result2)  // [ 4, 5 ]


// 3. union set
let union = [...new Set([...arr, ...arr2])]
console.log(union)   // [ 1, 2, 3, 4, 5, 6 ]

// 4. difference set
let diff = [...new Set(arr)].filter(item => !(new Set(arr2).has(item)))
console.log(diff)  // [ 1, 2, 3 ]

2. Map

ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合。 但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。 Map也实现了iterator接口，所以可以使用『扩展运算符』和『 for…of…』进行遍历。 Map的属性和方法：

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

// state map
let m = new Map()

// add element
m.set('name', 'michael')
m.set('change', function(){
    console.log('add a function as the value of an element in map')
})
let key = {
    school: 'w3school'
}
m.set(key, ['html', 'css', 'javascript'])

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

// delete
m.delete('name')
console.log(m)  /*
    Map(2) {
    'change' => [Function (anonymous)],
    { school: 'w3school' } => [ 'html', 'css', 'javascript' ]
  } */

// get
console.log(m.get('change'))  // [Function (anonymous)
console.log(m.get(key))      //  [ 'html', 'css', 'javascript' ]


// for..of
for(item of m) {
    console.log(item)
}

// clear
m.clear()
console.log(m)  // Map(0) {}