JavaScript数组（Array）方法整理（上篇）

1. concat()

用于连接两个或更多的数组，并返回结果。

    // array.concat(array2,array3,...,arrayX)  用于连接两个或更多的数组，并返回结果

    let arr1 = [1, 2, 3, 4];
    let arr2 = [5, 6];
    let arr = [];

    // 使用一个空数组，接收arr1和arr2合并而成的数组
    let arrs = arr.concat(arr1, arr2);

    console.log(arrs); // [1,2,3,4,5,6]
    // 注：concat() 不会改变原始数组对象

2.copyWithin()

      方法用于从数组的指定位置拷贝元素到数组的另一个指定位置中。

  // array.copyWithin(target,start,end) 方法用于从数组的指定位置拷贝元素到数组的另一个指定位置中。
   
  /*
     target：必需。复制到指定目标索引位置

     start：可选。元素赋值的起始位置

     end: 可选：停止复制的索引位置（默认为array.length)。如果为负值，表示倒数。
  */

    let color = ["red", "pink", "blue", "skyblue"];

    let newcolor = color.copyWithin(2, 0);

    console.log(newcolor); // ["red", "pink", "red", "pink"]

3. entries()

方法返回一个数组的迭代对象，该对象包含数组的键值对 (key/value)。

    // array.entries()
    /*
        entries() 方法返回一个数组的迭代对象，该对象包含数组的键值对 (key/value)。

        迭代对象中数组的索引值作为 key， 数组元素作为 value。
    */

    const colors = ["red", "pink", "blue", "skyblue"];

    const obj = colors.entries(); // 接收生成的迭代对象

    // 利用 for...of 来迭代这个对象

    for (let i of obj) {
      console.log(i);
    }
    
    /*  输出
        (2) [0, "red"]
        (2) [1, "pink"]
        (2) [2, "blue"]
        (2) [3, "skyblue"]
    */

4. every() 

方法用于检测数组所有元素是否都符合指定条件（通过函数提供）；

every() :方法接收一个函数，可以直接将函数作为参数，也可以单独定义一个参数，然后在every中调用即可。

    // 4. every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。
    /* 
        every() 方法使用指定函数检测数组中的所有元素：

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

        注意： every() 不会改变原始数组。

        array.every(function(currentValue,index,arr), thisValue)
        
        回调函数是必须的
        currentValue: 必须的。元素当前值
        index:  可选。当前元素的索引值
        arr:  可选。当前元素属于的数组对象

        thisValue：可选。对象作为该执行回调时使用，传递给函数，用作“this”的值，如果省略了thisValue,“this”的值为“undefined”
    */
    
    let nums = [32, 45, 23, 56, 47];
    
    法一：

    let flag1 = nums.every(function (currentValue, index, arr) {
      // 判断数组中的所有元素是否都大于等于20
      return currentValue >= 20;
    });
    
    法二：
        
    // 先声明一个函数：
    function isNum(currentValue){
        // 判断数组中的所有元素是否都大于等于30
      return currentValue >= 30;
    }

    let flag2 = nums.every(isNum);

    console.log(flag1); // true

    console.log(flag2); // false  23不满足条件

5. fill()

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

注意：此方法会改变原始数组。

    // fill() 方法用于将一个固定值替换数组的元素
    /*
        value: 必须。填充的值
        start: 可选。开始填充位置
        end: 可选。停止填充位置（默认为array.length）
    */
    
    let colors = ["red", "pink", "blue", "skyblue"];

    // 将colors中的后两个元素，利用red替换
    let c = colors.fill("red", 2, 4);

    console.log(c); // ["red", "pink", "red", "red"]

6. filter()

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

此方法极为常用，主要用来过滤数组元素，筛选满足条件的元素。

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

    /*
        注意： filter() 不会对空数组进行检测。

        注意： filter() 不会改变原始数组。
    
        array.filter(function(currentValue,index,arr), thisValue)

            currentValue: 必须。当前元素的值
            index: 可选。 当前元素的索引值
            arr: 可选。 当前元素属于的数组对象
          
            thisValue: 可选。对象作为该执行回调时使用，传递给函数，用作“this”的值。如果省略了thisValue，“this”的值为“undefined”
    */
    
    var colors = ["red", "pink", "blue", "skyblue"];

    // 将colors数组中，red元素过滤出来
    let newc = colors.filter(function (currentValue, index, arr) {
        // 将满足条件的元素返回
      return currentValue == "red";
    });

    console.log(newc); // 返回一个新数组 ["red"]

7. find()

方法返回通过测试（函数内判断）的数组的第一个元素的值。

    // 法返回通过测试（函数内判断）的数组的第一个元素的值。

    /*
        ind() 方法为数组中的每个元素都调用一次函数执行：

        当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。
        如果没有符合条件的元素返回 undefined

            注意: find() 对于空数组，函数是不会执行的。

            注意: find() 并没有改变数组的原始值。

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

            currentValue:	必需。当前元素
            index:	可选。当前元素的索引值
            arr:	可选。当前元素所属的数组对象
    */
    
    // 在colors数组中查找 red元素
    var colors = ["red", "pink", "blue", "skyblue"];

    let c = colors.find(function (currentValue, index, arr) {
      // return currentValue == "red"; // 根据元素 返回确定的元素
      return index == 2; // 根据索引 返回确定的元素
    });

    console.log(c); // red / blue

8. findIndex()

方法返回传入一个测试条件（函数）符合条件的数组第一个元素的位置。

    // findIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置。
    /*
        
        findIndex() 方法为数组中的每个元素都调用一次函数执行：

        当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的        值不会再调用执行函数。
        如果没有符合条件的元素返回 -1
        注意: findIndex() 对于空数组，函数是不会执行的。

        注意: findIndex() 并没有改变数组的原始值。

        array.findIndex(function(currentValue, index, arr), thisValue)
    
            currentValue：必须。当前元素
            index：可选。当前元素的索引
            arr：可选。当前元素所属的数组对象
                
            thisValue: 可选。传递给函数的值一般用“this”值。如果这个参数为空，“undefined”会传递给this。
    */
    
    var colors = ["red", "pink", "blue", "skyblue"];

     返回colors数组中 red元素的索引
    let cc = colors.findIndex(function (currentValue, index, arr) {
      return currentValue == "red";
    });

    console.log(cc); // 0

9. forEach()

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

注意: forEach() 对于空数组是不会执行回调函数的。

    // array.forEach(function(currentValue, index, arr), thisValue)
    /*
        currentValue: 必须。当前元素
        index: 可选。当前元素的索引值
        arr: 可选。当前元素所属的数组对象
    */
    
    var colors = ["red", "pink", "blue", "skyblue"];
    var nums=[1,2,3,4]

    colors.forEach(function (currentValue, index, arr) {
      console.log(currentValue);  // 将数组元素 遍历出来
    });
    
    // 或者做一些其他的操作

10. from()

from() 方法用于通过拥有 length 属性的对象或可迭代的对象来返回一个数组。

如果对象是数组返回 true，否则返回 false。

    // Array.from(object, mapFunction, thisValue)
    /*
        object	    必需，要转换为数组的对象。
        mapFunction	可选，数组中每个元素要调用的函数。
        thisValue	可选，映射函数(mapFunction)中的 this 对象。
    */

    
    // 将字符串装换为数组
    let a = Array.from("love");
    console.log(a); // ["l", "o", "v", "e"]

    // 将set对象转换为数组
    let setObj = new Set(["a", "b", "c"]);
    let arrObj = Array.from(setObj);
    console.log(arrObj);

    // 利用回调函数，处理数组元素
    let as = [1, 2, 3, 4];

    var ass = Array.from(as, function (item) {
      return item * 2;
    });

    console.log(ass);// [2,4,6,8]

最近重拾JavaScript，我简单整理了一下数组方法，考虑到阅读问题，我将所有的数组方法分为三部分，每部分整理十个数组方法，供读者参考阅读。

内容如有不当之处，欢迎您的指正反馈。

tip:内容借鉴**菜鸟教程**整理所得。