数组常用方法学习

最近面试经常被问到一些数组操作问题，正好在工作中学习了这些方法之后，大大方便了我日常对数组的操作，所以这次系统的总结一次，即方便我日常查看，也为工作面试做一些积累。

1、 .some()

定义
some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。
some() 方法会依次执行数组的每个元素：

如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
如果没有满足条件的元素，则返回false。

接受三个参数：

item：数组中正在处理的元素。
index：数组中正在处理的元素的索引值。
array：some()被调用的数组。

注意：

some() 不会对空数组进行检测。
some() 不会改变原始数组。

array.some(function(item,index,array),thisValue)

描述：

some 为数组中的每一个元素执行一次 callback 函数，直到找到一个使得 callback 返回一个“真值”（即可转换为布尔值 true 的值）。如果找到了这样一个值，some 将会立即返回 true。

some为数组中的每一个元素执行一次fn函数，直到找到一个使得fn返回 true 。如果找到了这样一个值，some将立即返回 ture ，其余的就不在运行，相当于短路运算符( && || )一样。如果到结束也没有找到，就会返回 false 。

fn 被调用是传入三个参数：元素的值，元素的索引，被遍历的数组。

some被调用不会改变数组。

    let arr = [11,50,40,3,5,80,90,4];
    let isHave = arr.some(item=>{
        return item<49
    })
    isHave?console.log('存在小于49的值'):console.log('不存在小于49的值')
    //0
    //1
    //2
    //3
    //'存在小于10的值'

当遇到返回结果为true时，some()停止执行

2、 .every()

定义
every() 方法用于检测数组所有元素是否都符合指定条件。
every() 方法使用指定函数检测数组中的所有元素：

如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
如果所有元素都满足条件，则返回 true。

接受三个参数：

item：数组中正在处理的元素。
index：数组中正在处理的元素的索引值。
array：some()被调用的数组。

array.every(function(currentValue,index,arr), thisValue)

注意：

every() 不会对空数组进行检测。
every() 不会改变原始数组。

every()和some()的区别：

every()是对数组中每一项运行给定函数，如果该函数对每一项返回true,则返回true。
some()是对数组中每一项运行给定函数，如果该函数对任一项返回true，则返回true。

    let arr1 = [1,2,3,4];  
    let res1_1 = arr1.some(item=>{
        return item>3
    })
    console.log(res1_1)//true,存在大于3的元素
    let res1_2 = arr1.every(item=>{
        return item>3
    })
    console.log(res1_2)//false
    let arr2 = [12,22,32,42];
    let res2 = arr2.every(item=>{
        return item>3
    })
    console.log(res2)//true,所有元素大于3

3、 .filter()

定义
filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

接受三个参数：

item：数组中正在处理的元素。
index：数组中正在处理的元素的索引值。
array：some()被调用的数组。

array.filter(function(item,index,array), thisValue)

注意：

filter() 不会对空数组进行检测。
filter() 不会改变原始数组。

描述：

filter把传入的函数依次作用于每个元素，然后根据返回值是 true 还是false决定保留还是丢弃该元素。

简单的数组去重：

    let arr = [1, 2, 4, 2, 6, 4, 2, 15];
    let newArr = arr.filter((item,index)=>{
        return arr.indexOf(item)==index
    });
    console.log(newArr)//[1,2,4,6,15]

去除重复元素依靠的是 indexOf 总是返回第一个元素的位置，后续的重复元素位置与 indexOf 返回的位置不相等，因此被 filter 滤掉了。

清除空字符串：

    let arr = ['  A', '', 'B', null, undefined, '    C', '     '];
    let newArr = arr.filter(item=>{
         return item && item.trim(); // 注：IE9(不包含IE9)以下的版本没有trim()方法
    });
    console.log(newArr)// ['  A', 'B', '    C']

如果想要去除' C'前面的空格，就不能使用filter方法了，因为他并不能改变原始item的值，只能决定去留，这时候需要使用.map()方法

4、 .map()

定义
map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
map() 方法按照原始数组元素顺序依次处理元素。

接受三个参数：

item：数组中正在处理的元素。
index：数组中正在处理的元素的索引值。
array：some()被调用的数组。

array.map(function(item,index,array), thisValue)

注意：

map() 不会对空数组进行检测。
map() 不会改变原始数组。

描述：

实际上对数组的每个元素都遍历一次，同时处理每个元素，最后返回一个新的值。

所以刚刚.filter()想清除所有空并包括字符串前后的空，需要这样：

    let arr = ['  A', '', 'B', null, undefined, '    C', '     '];
    let newArr = arr.filter(item=>{
         return item && item.trim(); // 注：IE9(不包含IE9)以下的版本没有trim()方法
    });
    console.log(newArr)// ['  A', 'B', '    C']
    newArr = newArr.map(item=>{
         return item && item.trim(); // 注：IE9(不包含IE9)以下的版本没有trim()方法
    });
    console.log(newArr)// ['A', 'B', 'C']

先筛选一遍，留下非空的元素，在通过.map()清除非空元素前后的空格，同时，这2个函数也可以链式调用：

    let arr = ['  A', '', 'B', null, undefined, '    C', '     '];
    let newArr = arr.filter(item=>{
         return item && item.trim(); // 注：IE9(不包含IE9)以下的版本没有trim()方法
    }).map(item=>{
         return item && item.trim(); // 注：IE9(不包含IE9)以下的版本没有trim()方法
    });
    console.log(newArr)// ['A', 'B', 'C']

.map()方法是有返回值的，可以return出来，并且不会改变原数组

    let ary = [1,2,3,4,5];
    let res = ary.map(function (item,index,array) {
        return item*10;
    })
    console.log(res);//-->[10,20,30,40,50];  原数组拷贝了一份，并进行了修改
    console.log(ary);//-->[1,2,3,4,5]；  原数组并未发生变化

map方法内也可以用箭头函数简化写成：

    let ary = [1,2,3,4,5];
    let res = ary.map((item,index,array)=>{
        return item*10;
    })

5、 .forEach()

定义
forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。

接受五个参数：

item：数组中正在处理的元素。
index：可选,数组中正在处理的元素的索引值。
array：可选。当前元素所属的数组对象。

array.forEach(function(item,index,array), thisValue)

注意:

forEach() 对于空数组是不会执行回调函数的。
forEach() 没有返回值。

改变数组中的项，没有返回值res：

    let ary = [1,2,3,4];
    let res = ary.forEach(function (item,index,array) {
           array[index] = item*10;
    })
    console.log(res);//--> undefined;
    console.log(ary);//--> [10,20,30,40]

给数组中对象添加元素，没有返回值res：

    let ary = [{name:'aa',age:'18'},{name:'bb',age:'182'}];
    let res = ary.forEach(function (item,index,array) {
       // array[index]['num'] = item.age*10;2种写法都行
       item['num'] = item.age*10;
    })
    console.log(res);
    // undefined;
    console.log(ary);
    // [{name:'aa',age:'18',num:'180'},{name:'bb',age:'182',num:'1820'}]

6、 .reduce()

定义
reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

接受五个参数：

item：数组中正在处理的元素。
index：数组中正在处理的元素的索引值。
array：some()被调用的数组。
total：上一次调用回调返回的值（计算结束后的返回值），或者是提供的初始值（initialValue）。
initialValue：可选。传递给函数的初始值(特殊情况会用到)。其值用于第一次调用 callback 的第一个参数。如果没有设置初始值，则将数组中的第一个元素作为初始值。

array.reduce(function(total, item,index, array), initialValue)

注意:

reduce() 对于空数组是不会执行回调函数的。

下面就是reduce()的一个基本的累加：

    let nums = [0, 1, 2, 3, 4]
    let totalNum = nums.reduce((item,total) => {
    　　return total+item; 
    })
    console.log(totalNum)//10

去重数组中相同属性的数据，并添加该数据到新数组：

    let offerArr = [
        {name:'Amy',age: 20},
        {name:'Tom',age:21},
        {name:'Rose',age:22},
        {name:'Tom',age:23}];
    let obj = {};
    let newArr2 = offerArr.reduce((total, item,index) => {
        obj[item.name] ? '' : obj[item.name] =true && total.push(item)
        return total
    }, []) 
    console.log(newArr2)
    // [
    //  {name:'Amy',age: 20},
    //  {name:'Tom',age:21},
    //  {name:'Rose',age:22}
    // ];

7、 .splice()

定义
splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。

接受三个参数：

index：必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
howmany：必需。要删除的项目数量。如果设置为 0，则不会删除项目。
item1, ..., itemX：可选。向数组添加的新项目。

array.splice(index,howmany,item1,.....,itemX)

注意：

该方法会改变原始数组。

  let offerArr = [
  {name:'Amy',age: 20},
  {name:'Tom',age:21},
  {name:'Rose',age:22},
  {name:'Tom',age:23}];
  offerArr.splice(2,1)//从下标为2开始删除1项
  
  console.log(offerArr)
  //[{name:'Amy',age: 20},{name:'Tom',age:21},{name:'Tom',age:23}];
  
  offerArr.splice(2,0,{name:'Tom',age:21})
  //从下标为2开始删除0项，添加1项
  
  console.log(offerArr)
  //[{name:'Amy',age: 20},{name:'Tom',age:21},
  {name:'Tom',age:21},{name:'Tom',age:23}];
  
  offerArr.splice(1,3,{name:'Amy',age:21},{name:'Amy',age:21})
  //从下标为1开始删除3项添加2项
  
  console.log(offerArr)
  //[{name:'Amy',age: 20},{name:'Amy',age:21},{name:'Amy',age:21}];

8、 .reverse()

定义
.reverse()用于颠倒数组中元素的顺序。

array.reverse()

注意：

该方法会改变原来的数组，而不会创建新的数组。

  let nums = [1, 2, 3, 4];
  nums.reverse();
  console.log(nums)//4,3,2,1

9、 .join()

定义
.join() 方法用于把数组中的所有元素放入一个字符串。

接受一个个参数：

separator：可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。

array.join(separator)

    let arr = [1,2,3,4]
    let bbc = arr.join()
    console.log(bbc)//1,2,3,4

10、 .concat()

定义
concat() 方法用于连接两个或多个数组。
该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

接受一个参数：

arrayX：可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。

array.concat(arrayX,arrayX,......,arrayX)

    let arr1 = [1,2,3,4];
    let arr2 = [5,6,7,8];
    let arr3 = arr2.concat(arr1)
    console.log(arr3)//[5,6,7,8,1,2,3,4]

11、 .indexOf()

定义
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
若存在参数，返回这个参数在数组里面的索引值，如果参数不在操作的数组中，则返回 -1。

    let arr = [1,2,3,4];
    arr.indexOf(1) // 0
    arr.indexOf(5) // -1

12、 Array.of()

定义
Array.of()方法：数组创建，将参数中所有值作为元素形成数组，如果参数为空，则返回一个空数组。

    console.log(Array.of(1, 2, 3, 4)); // [1, 2, 3, 4]
    // 参数值可为不同类型
    console.log(Array.of(1, '2', true,{'name':'hk'}));
    // [1, '2', true,{'name':'hk'}]
    // 参数为空时返回空数组
    console.log(Array.of()); // []

13、 find()

定义
find()方法：查找数组中符合条件的元素,若有多个符合条件的元素，则返回第一个元素。

    let arr = Array.of(1, 2, 3, 4);
    console.log(arr.find(item => item > 2)); // 3

14、 includes()

定义
includes() 方法：检测数组中是否包含一个值，如果是返回 true，否则false。

接受两个参数：

searchElement：必须。需要查找的元素值。
fromIndex：可选。从该索引处开始查找 searchElement。默认为 0。

arr.includes(searchElement)
arr.includes(searchElement, fromIndex)

    // 参数1：包含的指定值
    [1, 2, 3].includes(1);    // true
    // 参数2：可选，搜索的起始索引，默认为0
    [1, 2, 3].includes(1, 2); // false
    // NaN 的包含判断
    [1, NaN, 3].includes(NaN); // true

15、 fill()

定义
fill() 方法用于将一个固定值替换数组的元素。

接受两个参数：

value：必需。填充的值。
start：可选。开始填充位置。
end:可选。停止填充位置 (默认为 array.length)

array.fill(value, start, end)

    let arr = Array.of(1, 2, 3, 4);
    // 参数1：用来填充的值
    // 参数2：被填充的起始索引
    // 参数3(可选)：被填充的结束索引，默认为数组末尾
    console.log(arr.fill(0,1,2)); // [1, 0, 3, 4]

16、 flat()

定义
数组扁平化，嵌套数组转一维数组

    console.log([1 ,[2, 3]].flat()); // [1, 2, 3]
    // 指定转换的嵌套层数
    console.log([1, [2, [3, [4, 5]]]].flat(2)); // [1, 2, 3, [4, 5]]
    // 不管嵌套多少层
    console.log([1, [2, [3, [4, 5]]]].flat(Infinity)); // [1, 2, 3, 4, 5]
    // 自动跳过空位
    console.log([1, [2, , 3]].flat())// [1, 2, 3]