Javascript数组方法总结（二）

十：其他方法（返回新数组的方法）

• Array.from()方法从一个类似数组或可迭代对象中创建一个新的数组实例。

语法：Array.from(arrayLike[, mapFn[, thisArg]])
伪数组对象（拥有一个 length 属性和若干索引属性的任意对象）
可迭代对象（可以获取对象中的元素,如 Map和 Set 等）

Array.from() 方法有一个可选参数 mapFn，让你可以在最后生成的数组上再执行一次 map 方法后再返回。也就是说Array.from(obj, mapFn, thisArg)就相当于Array.from(obj).map(mapFn, thisArg), 除非创建的不是可用的中间数组。 这对一些数组的子类,如 typed arrays 来说很重要, 因为中间数组的值在调用 map()时需要是适当的类型。
from()的 length 属性为1 ，即Array.from.length = 1。

在 ES6 中， Class语法允许我们为内置类型（比如Array）和自定义类新建子类（比如叫 SubArray）。这些子类也会继承父类的静态方法，比如 SubArray.from()，调用该方法后会返回子类 SubArray 的一个实例，而不是 Array的实例。

//string
Array.from('foo')   // (3) ["f", "o", "o"]

//Set
let s = new Set(['foo',window])
Array.from(s)   // (2) ["foo", Window]

//Map
let m = new Map([[1,2],[2,4],[4,8]]);
Array.from(m)
// (3) [Array(2), Array(2), Array(2)]

//function arguments 类数组
function f(){
   return Array.from(arguments)
}
f(1,2,3)
// (3) [1, 2, 3]

//arrow function
Array.from([1,2,3],x => x + x)
// (3) [2, 4, 6]

//有length属性的对象
Array.from({length: 5},(v,i) => i)
// (5) [0, 1, 2, 3, 4]

• Array.of()方法创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。

语法：Array.of(element0[, element1[, ...[, elementN]]])

Array.of()和 Array 构造函数之间的区别在于处理整数参数：Array.of(7) 创建一个具有单个元素 7 的数组，而 Array(7)创建一个长度为7的空数组（注意：这是指一个有7个空位(empty)的数组，而不是由7个undefined组成的数组）。

Array(7)
// (7) [empty × 7]
Array.of(7)
// [7]
Array.of(1,2,3)
// (3) [1, 2, 3]
Array.of(undefined)
// [undefined]

兼容性写法

if (!Array.of) {
  Array.of = function() {
    return Array.prototype.slice.call(arguments);
  };
}
Array.of(7)
//[7]

• flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

语法：var newArray = arr.flat(depth)
参数：depth指定要提取嵌套数组的结构深度，默认值为 1。
返回：一个包含将数组与子数组中所有元素的新数组。

var arr1 = [1,2,[3,4]];
arr1.flat()
// (4) [1, 2, 3, 4]

var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat()
//(5) [1, 2, 3, 4, Array(2)]

arr2.flat(2)
//(6) [1, 2, 3, 4, 5, 6]

var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(Infinity)
//(6) [1, 2, 3, 4, 5, 6]

//flat() 方法会移除数组中的空项:
var arr4 = [1, 2, , 4, 5];
arr4
//(5) [1, 2, empty, 4, 5]
arr4.flat()
//(4) [1, 2, 4, 5]

• indexOf()方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。

• lastIndexOf() 方法返回指定元素（也即有效的 JavaScript 值或变量）在数组中的最后一个的索引，如果不存在则返回 -1。从数组的后面向前查找，从 fromIndex 处开始。

• includes() 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false。
  注意：对象数组不能使用includes方法来检测。

• keys()方法返回一个包含数组中每个索引键的Array Iterator对象。

var array1 = ['a', 'b', 'c'];
var iterator = array1.keys(); 
terator    
Array Iterator {}__proto__: Array Iteratornext: ƒ next()arguments: (...)caller: (...)length: 0name: "next"__proto__: ƒ ()[[Scopes]]: Scopes[0]Symbol(Symbol.toStringTag): "Array Iterator"__proto__: Object
iterator.next()
//{value: 0, done: false}
iterator.next()
//{value: 1, done: false}
iterator.next()
//{value: 2, done: false}
iterator.next()
//{value: undefined, done: true}

十一：数组扁平化（数组拍平）

flat方法

var arr3 = [1, 2, [3, 4, [5, 6]]];

const flatten = (arr) => {
  return arr.flat(Infinity);
}
flatten(arr3);
//(6) [1, 2, 3, 4, 5, 6]

concat、reduce方法结合展开一层数组

var arr1 = [1, 2, [3, 4]];
arr1.reduce((acc, val) => acc.concat(val), [])
//(4) [1, 2, 3, 4]

展开符

const dd = (arr) => [].concat(...arr)
dd(arr1)
//(4) [1, 2, 3, 4]

使用 reduce、concat 和递归无限反嵌套多层嵌套的数组

const flattenDeep = (arr) => {
    return arr.reduce((acc,cur) => Array.isArray(cur) ? acc.concat(flattenDeep(cur)) : acc.concat(cur),[])
}
flattenDeep(arr1)
// (10) [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]

不使用递归，使用 stack 无限反嵌套多层嵌套数组

var arr1 = [1,2,3,[1,2,3,4, [2,3,4]]];
const flatten2 = (input) {
  const stack = [...input];
  const res = [];
  while (stack.length) {
    // 使用 pop 从 stack 中取出并移除值
    const next = stack.pop();
    if (Array.isArray(next)) {
      // 使用 push 送回内层数组中的元素，不会改动原始输入 original input
      stack.push(...next);
    } else {
      res.push(next);
    }
  }
  // 使用 reverse 恢复原数组的顺序
  return res.reverse();
}
flatten2(arr1);// [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]

十二：数组去重

Array.form() Set组合

const arr = [1,2,3,6,3,5,5]
function ArrayfromSet(arr){
  if(Array.isArray(arr)){
    return Array.from(new Set(arr))
  } 
}
ArrayfromSet(arr)
//(5) [1, 2, 3, 6, 5]

indexOf方式

Array.prototype.unique = function(){
   var arr = [];
   for(var i = 0; i < this.length; i++){
     if(arr.indexOf(this[i]) == -1) arr.push(this[i]);
    }
    return arr;
 }
let arr = [1,2,1,2,3,5,4,5,3,4,4,4,4];
arr.unique()
//(5) [1, 2, 3, 5, 4]

//或者从数组第二项开始遍历
Array.prototype.unique3 = function(){
  var arr = [];
  arr.push(this[0]);
  for(var i = 1; i < this.length; i++){
     if(arr.indexOf(this[i]) == -1) arr.push(this[i]);
  }
  return arr;
}
arr.unique3()
//(5) [1, 2, 3, 5, 4]

filter indexOf 过滤数组

function unique(arr) {
    return arr.filter(function(item, index){
        // indexOf返回第一个索引值，
        // 如果当前索引不是第一个索引，说明是重复值
        return arr.indexOf(item) === index;
    });
}
unique(arr)
//(5) [1, 2, 3, 5, 4]

reduce方式

let arr = [1,2,1,2,3,5,4,5,3,4,4,4,4];
let result = arr.sort().reduce((init, current) => {
    if(init.length === 0 || init[init.length-1] !== current) {
        init.push(current);
    }
    return init;
}, []);
console.log(result); 
//[1,2,3,4,5]

参考：
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce