ES6之 数组，Set和Map数据结构（十三）

• 数组

  • 扩展运算符（spread）是三个点（…），将一个数组转为用逗号分隔的参数序列

  • 该运算符主要用于函数调用

    console.log(...[1, 2, 3])
    // 1 2 3
    
    console.log(1, ...[2, 3, 4], 5)
    // 1 2 3 4 5
    
    [...document.querySelectorAll('div')]
    // [<div>, <div>, <div>]
    
    

    //该运算符主要用于函数调用
    function push(array, ...items) {
      array.push(...items);
    }
    
    function add(x, y) {
      return x + y;
    }
    
    const numbers = [4, 38];
    add(...numbers) // 42
    

  • Array.from（）

    • Array.from方法用于将两类对象转为真正的数组：

      • 类似数组的对象（array-like object）
      • 可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）

      let arrayLike = {
          '0': 'a',
          '1': 'b',
          '2': 'c',
          length: 3
      };
      
      // ES5的写法
      var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
      
      // ES6的写法
      let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
      

      //实际应用中，常见的类似数组的对象是 DOM 操作返回的 NodeList 
      //集合，以及函数内部的arguments对象。Array.from都可以将它们转为真正的数组
      // NodeList对象
      let ps = document.querySelectorAll('p');
      Array.from(ps).filter(p => {
        return p.textContent.length > 100;
      });
      
      // arguments对象
      function foo() {
        var args = Array.from(arguments);
        // ...
      }
      

      //只要是部署了 Iterator 接口的数据结构，Array.from都能将其转为数组
      Array.from('hello')
      // ['h', 'e', 'l', 'l', 'o']
      
      let namesSet = new Set(['a', 'b'])
      Array.from(namesSet) // ['a', 'b']
      
      //如果参数是一个真正的数组，Array.from会返回一个一模一样的新数组
      Array.from([1, 2, 3])
      // [1, 2, 3]
      
      //Array.from还可以接受第二个参数，作用类似于数组的map方法，
      //用来对每个元素进行处理，将处理后的值放入返回的数组
      Array.from(arrayLike, x => x * x);
      // 等同于
      Array.from(arrayLike).map(x => x * x);
      Array.from([1, 2, 3], (x) => x * x)
      // [1, 4, 9]
      

  • Array.of（）

    • Array.of方法用于将一组值，转换为数组

      Array.of(3, 11, 8) // [3,11,8]
      Array.of(3) // [3]
      Array.of(3).length // 1
      

      //Array.of总是返回参数值组成的数组。如果没有参数，就返回一个空数组
      Array.of() // []
      Array.of(undefined) // [undefined]
      Array.of(1) // [1]
      Array.of(1, 2) // [1, 2]
      

• Set

  • Set容器 : 无序不可重复的多个value的集合体

    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
    

    // 例一
    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
    

    s.add(1).add(2).add(2);
    // 注意2被加入了两次
    
    s.size // 2
    
    s.has(1) // true
    s.has(2) // true
    s.has(3) // false
    
    s.delete(2);
    s.has(2) // false
    

    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
    
    let set = new Set(['red', 'green', 'blue']);
    
    for (let x of set) {
      console.log(x);
    }
    // red
    // green
    // blue
    
    let set = new Set([1, 4, 9]);
    set.forEach((value, key) => console.log(key + ' : ' + value))
    // 1 : 1
    // 4 : 4
    // 9 : 9
    

• Map

  • 无序的 key不重复的多个key-value的集合体

    const map = new Map();
    map
    .set(1, 'aaa')
    .set(1, 'bbb');
    map.get(1) // "bbb"
    
    //size 属性
    const map = new Map();
    map.set('foo', true);
    map.set('bar', false);
    map.size // 2
    
    //Map.prototype.set(key, value)
    //set方法返回的是当前的Map对象，因此可以采用链式写法
    let map = new Map()
      .set(1, 'a')
      .set(2, 'b')
      .set(3, 'c');
    
    //Map.prototype.has(key)
    //has方法返回一个布尔值，表示某个键是否在当前 Map 对象之中
    const m = new Map();
    
    m.set('edition', 6);
    m.set(262, 'standard');
    m.set(undefined, 'nah');
    
    m.has('edition')     // true
    m.has('years')       // false
    m.has(262)           // true
    m.has(undefined)     // true
    
    //Map.prototype.delete(key)
    //delete方法删除某个键，返回true。如果删除失败，返回false
    const m = new Map();
    m.set(undefined, 'nah');
    m.has(undefined)     // true
    
    m.delete(undefined)
    m.has(undefined)       // false
    
    //Map.prototype.clear()
    //clear方法清除所有成员，没有返回值
    let map = new Map();
    map.set('foo', true);
    map.set('bar', false);
    
    map.size // 2
    map.clear()
    map.size // 0
    

  • 遍历方法

    • Map.prototype.keys()：返回键名的遍历器
    • Map.prototype.values()：返回键值的遍历器
    • Map.prototype.entries()：返回所有成员的遍历器
    • Map.prototype.forEach()：遍历 Map 的所有成员

    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