ES6数组(Array)对象

转载地址：https://blog.youkuaiyun.com/u014711094/article/details/78990773

ES6数组(Array)对象

• concat

• let arr = [1, 2, 3]
  
  arr.concat([4, 5])      // [1, 2, 3, 4, 5]
  
  // 指示是否在调用concat方法时展开数组
  Array.prototype[Symbol.isConcatSpreadable] = false
  
  arr.concat([4, 5])  // [[1, 2, 3], [4, 5]]
  [].concat()         // [[]]
  Array.prototype.concat(0)
  // [[[Symbol.isConcatSpreadable]: false], 0]
    
    
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11

  • sort

  arr.sort();                 // 升序，默认
  arr.sort((a, b) => a - b);  // 升序
  arr.sort((a, b) => b - a);  // 降序
    
    
  1
  2
  3

  fill, sort, reverse, copyWithin, splice

  var arr = [3, 6, 5, 8, 5];
  
  // 测试时arr原始值都是[3, 6, 5, 8, 5]，以下操作都会改变arr
  arr.fill(0, 1, 3);      // [3, 0, 0, 8, 5]，array.fill(value, start?, end?)
  new Array(10).fill(0);  // 新数组填充非常方便
  
  ['a', 'c', 'b', 'd'].sort().reverse();  // 字符串数组的降序
  
  arr.copyWithin(2, 1, 2);    // [3, 6, 6, 5, 5],array.copyWithin(target, start, end?)
  arr.copyWithin(2, 1);       // [3, 6, 6, 5, 8],end默认为length-1
  
  // 返回值是被删除的元素，array.splice(index, howmany?, item?...)
  arr.splice(1);      // 返回[6, 5, 8, 5], arr = [3]
  arr.splice(1, 2);   // 返回[6, 5], arr = [3, 8, 5]
  arr.splice(1, 2, 0);    // 返回[6, 5], arr = [3, 0, 8, 5]
    
    
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15

  indexOf, lastIndexOf, includes, find, findIndex, some, every

  var arr = [3, 6, 5, 8, 5];
  
  arr.indexOf(5, 3);      // 4， array.indexOF(value, start?)，和String对象原理相同
  arr.lastIndexOf(5, 3);  // 2，无匹配返回-1
  arr.includes(5, -2);    // true，这里相当于length+(-2)
  
  // 以下方法的参数都是：(function(curValue, index, array){}, thisValue)
  arr.find(num => num > 5);       // 6，第一个大于5的element，无匹配返回undefined
  arr.findIndex(num => num > 5);  // 2，第一个大于5的element的index，无匹配返回-1
  arr.some(num => num > 5);       // true，有element > 5
  arr.every(num => num > 5);      // false，不是所有element > 5
  
  arr.findIndex((num, index, array) => index > 2 && num > 5)  // 等价于indexOf(5, 3)
    
    
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13

  slice, filter, map, forEach, reduce, reduceRight

  var arr = [3, 6, 5, 8, 5];
  
  arr.slice(1, -2);   // [6, 5]，原理同String对象
  
  // 以下方法的参数都是：(function(curValue, index, array){}, thisValue)
  arr.filter(num => num > 5);     // [6, 8]
  arr.map(num => num * 2);        // [6, 12, 10, 16, 10]
  
  // 注意：输出6行，最后为undefined
  arr.forEach((num, index) => {
      console.log(index > 2 && num > 5 ? num : 0);
  })
  
  // 参数：(function(total, curValue, index, array){}, initialValue)
  arr.reduce((total, num) => total + num);    // 27，所有值相加
  arr.reduceRight(((total, num) => total - num), 100);    // 73，从右开始,100-elementValue
    
    
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16

  keys, values, entries

  // 都返回遍历器(Iterator)对象，其他语言有叫游标(cursor)的
  for (let index of ['a', 'b'].keys()) {
      console.log(index);             // 0, 1
  }
  
  // 报错：TypeError: ["a","b"].values(...) is not iterable，但看阮一峰的测试是可以的
  for (let elem of ['a', 'b'].values()) {
      console.log(elem);
  }
  
  for (let [index, elem] of ['a', 'b'].entries()) {
      console.log(index, elem);
  }
  
  let arr = ['a', 'b'];
  let entries = arr.entries();    // entries={}，Iterator对象
  
  entries.next();     // {value: [0, 'a'], done: false}
  entries.next();     // {value: [1, 'b'], done: false}
  entries.next();     // {value: undefined, done: true}，判断是否遍历完毕
    
    
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20

  扩展运算符(…)

  // 将Array展开成逗号分隔的参数序列，主要用于函数调用
  console.log(1, ...[2, 3, 4], 5);    // 1 2 3 4 5
  
  // 替代apply方法
  let arr = [0, 1, 2];
  
  Math.max.apply(null, arr);  // 2
  Math.max(...arr);           // 2
  
  Array.prototype.push.apply(arr, [3, 4, 5]);
  arr.push(...[3, 4, 5]);
  
  new (Date.bind.apply(Date, [null, 2018, 7, 1]));
  new Date(...[2018, 7, 1]);
    
    
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14

  from, of

  // 部署了Iterator接口，有length属性的数据结构，Array.from都能将其转为数组
  Array.from({            // ['a', 'b', 'c']
      '0': 'a', 
      '1': 'b', 
      '2': 'c', 
      length: 3
  }); 
  
  Array.from('test');                 // ['t', 'e', 's', 't']
  Array.from(new Set(['a', 'b']));        // ['a', 'b']
  Array.from({length: 3});            // [undefined, undefined, undefined]
  
  // 将一组值转换为Array
  Array.of();             // []
  Array.of(undefined);    // [undefined]
  Array.of(1);            // [1]
  Array.of(1, 2, 3);      // [1, 2, 3]
    
    
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17

  参考：
  http://www.runoob.com/jsref/jsref-obj-array.html
  http://es6.ruanyifeng.com/#docs/array#Array-from