1. 持续更新公众号
  2. set
    1. 概念
      1. 类似于数组,但是成员的值都是唯一的,没有重复的值。
        1. const s = new Set(); [2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x)); for (let i of s) { console.log(i); } // 2 3 5 4
      2. 接收数组、对象为参数
        1. // 例一 const set = new Set([1, 2, 3, 4, 4]); [...set] // [1, 2, 3, 4] // 例二 const items = new Set([1, 2, 3, 4, 5, 5, 5, 5]); items.size // 5 // 例三 function divs () { return [...document.querySelectorAll('div')]; } const set = new Set(divs()); set.size // 56 // 类似于 divs().forEach(div => set.add(div)); set.size // 56
      3. 去除数组重复成员的方法
        1. // 去除数组的重复成员 [...new Set(array)]
      4. 两个空对象不相等
        1. let set = new Set(); set.add({}); set.size // 1 set.add({}); set.size // 2
    2. Set实例的属性和方法
      1. Set.prototype.constructor
        1. 构造函数,默认就是set函数
      2. Set.prototype.size
        1. 返回set实例的成员总数
      3. add(value)
        1. 添加某个值,返回set结构本事
      4. delete(value)
        1. 删除某个值,返回一个布尔值,表示删除是否成功
      5. has(value)
        1. 返回一个布尔值,表示该值是否为set的成员
      6. clear()
        1. 清除所有成员,没有返回值
    3. 遍历操作
      1. keys()
        1. 遍历键名的遍历器
          1. let set = new Set(['red', 'green', 'blue']); for (let item of set.keys()) { console.log(item); } // red // green // blue for (let item of set.values()) { console.log(item); } // red // green // blue for (let item of set.entries()) { console.log(item); } // ["red", "red"] // ["green", "green"] // ["blue", "blue"]
      2. values()
        1. 返回键值的遍历器
      3. entries()
        1. 返回键值对的遍历器
      4. forEach()
        1. 使用回调函数遍历每个成员
          1. set = new Set([1, 4, 9]); set.forEach((value, key) => console.log(key + ' : ' + value)) // 1 : 1 // 4 : 4 // 9 : 9
      5. 遍历的应用
        1. 扩展运算符适用于set,转数组
          1. let set = new Set(['red', 'green', 'blue']); let arr = [...set]; // ['red', 'green', 'blue']
        2. 去重复元素
          1. let arr = [3, 5, 2, 2, 5, 5]; let unique = [...new Set(arr)]; // [3, 5, 2]
        3. 使用map和filter
          1. let set = new Set([1, 2, 3]); set = new Set([...set].map(x => x * 2)); // 返回Set结构:{2, 4, 6} let set = new Set([1, 2, 3, 4, 5]); set = new Set([...set].filter(x => (x % 2) == 0)); // 返回Set结构:{2, 4}
        4. 实现并集、交集、差集
          1. let a = new Set([1, 2, 3]); let b = new Set([4, 3, 2]); // 并集 let union = new Set([...a, ...b]); // Set {1, 2, 3, 4} // 交集 let intersect = new Set([...a].filter(x => b.has(x))); // set {2, 3} // 差集 let difference = new Set([...a].filter(x => !b.has(x))); // Set {1}
  3. weakset
    1. 概念
      1. WeakSet 结构与 Set 类似,也是不重复的值的集合。但是,它与 Set 有两个区别。 首先,WeakSet 的成员只能是对象,而不能是其他类型的值。
        1. const ws = new WeakSet(); ws.add(1) // TypeError: Invalid value used in weak set ws.add(Symbol()) // TypeError: invalid value used in weak set
      2. 对象都是弱引用,不可遍历
      3. 构造函数接收数组作为参数
        1. const a = [[1, 2], [3, 4]]; const ws = new WeakSet(a); // WeakSet {[1, 2], [3, 4]}
    2. 方法
      1. WeakSet.prototype.add(value):向 WeakSet 实例添加一个新成员。 WeakSet.prototype.delete(value):清除 WeakSet 实例的指定成员。 WeakSet.prototype.has(value):返回一个布尔值,表示某个值是否在 WeakSet 实例之中。
      2. 没有size,无法遍历
        1. ws.size // undefined ws.forEach // undefined ws.forEach(function(item){ console.log('WeakSet has ' + item)}) // TypeError: undefined is not a function
  4. weakmap
    1. 概念
    2. 方法
    3. 应用
  5. map
    1. 概念
      1. JavaScript 的对象(Object),本质上是键值对的集合(Hash 结构), 但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。 map把原有的键值,无论是以数组还是其他方式传入,都是已key-value的形式传出的
        1. const data = {}; const element = document.getElementById('myDiv'); data[element] = 'metadata'; data['[object HTMLDivElement]'] // "metadata"
      2. 键,某对象的内存地址,值,相应的值
        1. const map = new Map([ ['name', '张三'], ['title', 'Author'] ]); map.size // 2 map.has('name') // true map.get('name') // "张三" map.has('title') // true map.get('title') // "Author"
      3. 特殊情况
        1. let map = new Map(); map.set(-0, 123); map.get(+0) // 123 map.set(true, 1); map.set('true', 2); map.get(true) // 1 map.set(undefined, 3); map.set(null, 4); map.get(undefined) // 3 map.set(NaN, 123); map.get(NaN) // 123
    2. 应用
    3. 方法
      1. size属性
      2. set(key,value)
      3. get(key)
      4. has(key)
      5. delete(key)
      6. clear()
    4. 遍历方法
      1. keys()
        1. const map = new Map([ ['F', 'no'], ['T', 'yes'], ]); for (let key of map.keys()) { console.log(key); } // "F" // "T" for (let value of map.values()) { console.log(value); } // "no" // "yes" for (let item of map.entries()) { console.log(item[0], item[1]); } // "F" "no" // "T" "yes" // 或者 for (let [key, value] of map.entries()) { console.log(key, value); } // "F" "no" // "T" "yes" // 等同于使用map.entries() for (let [key, value] of map) { console.log(key, value); } // "F" "no" // "T" "yes"
      2. values()
      3. entries()
      4. forEach()
      5. 扩展运算符
        1. const map = new Map([ [1, 'one'], [2, 'two'], [3, 'three'], ]); [...map.keys()] // [1, 2, 3] [...map.values()] // ['one', 'two', 'three'] [...map.entries()] // [[1,'one'], [2, 'two'], [3, 'three']] [...map] // [[1,'one'], [2, 'two'], [3, 'three']]
    5. 与其他数据结构的互相转换
      1. map转为数组
        1. const myMap = new Map() .set(true, 7) .set({foo: 3}, ['abc']); [...myMap] // [ [ true, 7 ], [ { foo: 3 }, [ 'abc' ] ] ]
      2. 数组转为map
        1. new Map([ [true, 7], [{foo: 3}, ['abc']] ]) // Map { // true => 7, // Object {foo: 3} => ['abc'] // }
      3. map转为对象
        1. function strMapToObj(strMap) { let obj = Object.create(null); for (let [k,v] of strMap) { obj[k] = v; } return obj; } const myMap = new Map() .set('yes', true) .set('no', false); strMapToObj(myMap) // { yes: true, no: false }
      4. 对象转为map
        1. function objToStrMap(obj) { let strMap = new Map(); for (let k of Object.keys(obj)) { strMap.set(k, obj[k]); } return strMap; } objToStrMap({yes: true, no: false}) // Map {"yes" => true, "no" => false}
      5. map转json
        1. function strMapToJson(strMap) { return JSON.stringify(strMapToObj(strMap)); } let myMap = new Map().set('yes', true).set('no', false); strMapToJson(myMap) // '{"yes":true,"no":false}'
      6. json转map
        1. function jsonToStrMap(jsonStr) { return objToStrMap(JSON.parse(jsonStr)); } jsonToStrMap('{"yes": true, "no": false}') // Map {'yes' => true, 'no' => false}