javascript中操作数组的方法

1、concat()

concat()方法用于连接两个或多个数组。该不会更改现有数组，而是返回一个新数组，其中包含已连接数组的值。该方法所有浏览器都支持

    var arr1 = [1, 2, 3];
    var arr2 = [4, 5, 6, 7];
    // 将arr2数组中的数据连接到arr1数组中去
    console.log(arr1.concat(arr2)); //打印[1, 2, 3, 4, 5, 6, 7]

2、join()

join()方法将数组作为字符串返回。元素将由指定的分隔符分隔。默认分隔符是逗号 (,)。该方法不会改变原始数组。

    var arr = ["1", "2", "3", "4", "5"];
    // 用！来分隔arr数组中的每一个数据
    console.log(arr.join("!")); //1!2!3!4!5
    console.log(arr) //['1', '2', '3', '4', '5']

3、push()

push()方法向数组末尾添加新项目(一个或者多个元素)，并返回新长度。新的项目将被添加到数组的末尾，返回的是长度，会改变原数组

    var arr = [1, 2, 3, 4];
    var arr2 = arr.push("hello"); //在arr数组的后面添加一个hello的数据
    console.log(arr); //[1, 2, 3, 4, 'hello']
    console.log(arr2); //5 返回的是追加后的数组长度

4、pop()

pop() 方法移除数组的最后一个元素，并返回该元素。该方法会改变数组的长度。会改变原有数组

    var arr = ["Banana", "Orange", "Apple", "Mango"];
    var popAfter = arr.pop();
    console.log(arr); //['Banana', 'Orange', 'Apple'] 删除最后一个数据后的数组数据
    console.log(popAfter); //Mango 返回删除的元素

5、shift()

shift() 方法移除数组的第一项。会改变数组长度，返回值是移除掉的元素，会改变原有数组

    var arr = ["Banana", "Orange", "Apple", "Mango"];
    var shiftAfter = arr.shift();
    console.log(arr); //['Orange', 'Apple', 'Mango'] 删除第一个数据后的数组数据
    console.log(shiftAfter); //Banana 返回删除的元素

6、unshift()

unshift() 方法将新项添加到数组的开头，并返回新的长度。该方法会改变原有数组

    var arr = [1, 2, 3, 4];
    // unshift()不传参表示不添加任何数据，使用它时必须要传参，可以传多个参数，传的参数是要添加到数组的开头
    var unshiftAfter = arr.unshift("hello");
    console.log(arr); //['hello', 1, 2, 3, 4]
    console.log(unshiftAfter); //5 返回的是添加元素到首项后的数组长度

7、slice()

slice() 方法以新的数组对象，返回数组中被选中的元素。slice() 方法选择从给定的 start 参数开始的元素，并在给定的 end 参数处结束，但不包括。该方法不会改变原有数组。

    var arr = [1, 2, 3, 4];
    // slice()不带参，不截取任何东西
    var sliceAfter = arr.slice(1, 3); //第一个参数为起始位置的索引，第二个参数为结束位置的索引，会将起始位置的数据拿到，不包含结束位置的数据
    console.log(arr); //[1, 2, 3, 4]
    console.log(sliceAfter); //[2, 3]

8、splice()

splice() 方法向/从数组添加/删除项目，并返回删除的项目。该方法会改变原有数组

    var arr = [1, 2, 3, 4];
    // 第一个参数从索引为1的位置上开始删除，第二个参数需要删除的个数，从第三个参数以后的数据都是为添加的元素可以有一个或多个，也可以没有，添加的位置在被删除元素的位置
    // 当splice有第三个参数时，则做添加元素的操作（先删除后添加），没有第三个参数及以后的参数，则做删除操作
    var spliceAfter = arr.splice(1, 2, "hello");
    console.log(arr); //[1, 'hello', 4]返回的是一个新数组
    console.log(spliceAfter); //[2, 3]以数组的形式存储删除的数据

9、sort()

sort()方法是用于对数组的元素进行排序。排序顺序可以是字母或数字，并按升序或降序。默认排序顺序为按字母升序。

    var arr = [3, 4, 5, 1, 9, 0, 7, 12, 10];
    var sortAfter = arr.sort();
    console.log(sortAfter); //[0, 1, 10, 12, 3, 4, 5, 7, 9]
    // 使用数字排序，你必须通过一个函数作为参数来调用。
    var sortAfter2 = arr.sort(function(a, b) {
        return a - b
    });
    console.log(sortAfter2); //[0, 1, 3, 4, 5, 7, 9, 10, 12]
    // 默认排序顺序为按字母升序。
    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    console.log(fruits.sort()); //['Apple', 'Banana', 'Mango', 'Orange']

10、reverse()

reverse() 方法反转数组中元素的顺序。该方法将改变原有数组。

    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    console.log(fruits.reverse()); //['Mango', 'Apple', 'Orange', 'Banana']
    console.log(fruits); //['Mango', 'Apple', 'Orange', 'Banana']

11、indexOf() 和 lastIndexOf()

indexOf()方法可返回某个指定的字符串值在字符串中首次出现的位置。indexOf() 方法对大小写敏感！如果要检索的字符串值没有出现，则该方法返回 -1。indexOf 是从前往后查找

    var arr = [1, 2, 3, 5];
    // 两个参数：查找的值、查找起始位置
    // 第一次出现的位置
    console.log(arr.indexOf(2)); //1 返回索引位置
    console.log(arr.indexOf(3, 0)); //2 从索引为0的位置开始查找元素3

lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。lastIndexOf() 方法对大小写敏感！如果要检索的字符串值没有出现，则该方法返回 -1。

    var arr2 = [3, 4, 7, 8, 9];
    // 两个参数：查找的值、查找起始位置
    console.log(arr2.lastIndexOf(8)); //3 返回索引位置 从数组后面开始查找
    console.log(arr2.indexOf(7, 0)); //2 从索引为0的位置开始查找元素7

12、every()

every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）；使用指定函数检测数组中的所有元素；如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。如果所有元素都满足条件，则返回 true。不会对空数组进行检测，不会改变原有数组。

    var arr = [3, 6, 7, 9, 34, 76];
    console.log(arr.every(function(a) {
        return a > 10; //检测所有元素是否都大于10
    })); //flase

13、some()

some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。会依次执行数组的每个元素。如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。如果没有满足条件的元素，则返回false。不会对空数组进行检测，不会改变原有数组。

    var arr = [2, 3, 4, 5, 5, 78, 34, 7];
    console.log(arr.some(function(a) {
        return a > 15; //检测数组arr中是否有大于15的元素，即使只有一个满足也会返回true
    })); //true

14、filter()

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。不会对空数组进行检测。不会改变原始数组。

    var arr = [12, 34, 56, 1, 43, 6, 7];
    var filterAfter = arr.filter(function(a) {
        return a > 10; //筛选元素大于10的数据，将满足条件的数据存入到一个新的数组中去
    })
    console.log(arr); //[12, 34, 56, 1, 43, 6, 7]
    console.log(filterAfter); //[12, 34, 56, 43]

15、map()

map()方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。 按照原始数组元素顺序依次处理元素。 不会对空数组进行检测。不会改变原始数组。

    var arr = [1, 3, 4, 5, 7, 34, 56, 68];
    var mapAfter = arr.map(function(a) {
        return a * 3; //对数组中的每一项进行增大3倍的操作，将加倍后的数据存入一个新的数组中
    })
    console.log(arr); //[1, 3, 4, 5, 7, 34, 56, 68]
    console.log(mapAfter); //[3, 9, 12, 15, 21, 102, 168, 204]

16、forEach() 数组遍历

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

    var arr = [3, 4, 5, 6, 2, 12, 21, 67];
    var forEachAfter = [];
    //会遍历出数组中的每一个元素
    arr.forEach(function(item, index) {
        forEachAfter.push(item); //将遍历出的元素追加到forEachAfter空数组中
    });
    console.log(arr); //[3, 4, 5, 6, 2, 12, 21, 67]
    console.log(forEachAfter); //[3, 4, 5, 6, 2, 12, 21, 67]

---

ES6新增新操作数组的方法

1、find()

find()方法查找数组中符合条件（函数提供）的元素,若有多个符合条件的元素，则返回第一个元素。空数组中的元素被定义为undefined。

    var arr = [1, 2, 3, 5, 6];
    console.log(arr.find(function(a) {
        return a > 4; // 5 查找数组中大于4的元素，返回的是满足条件的第一个元素
    }));

2、findIndex()

findIndex()方法查找数组中符合条件的元素索引，若有多个符合条件的元素，则返回第一个元素索引。空数组中的元素被定义为undefined。

    var arr = [2, 6, 7, 8, 9, 20];
    console.log(arr.findIndex(function(a) {
        return a > 7; // 3 查找满足大于7的元素，返回的是满足条件的第一个元素的索引值
    }));

3、fill()

fill()方法将一定范围索引的数组元素内容填充为单个指定的值。用新元素替换掉数组内的元素，可以指定替换下标范围。

    var arr = [1, 5, 6, 8, 9, 34];
    // 参数1：用来填充的值
    // 参数2：被填充的起始索引
    // 参数3(可选)：被填充的结束索引，默认为数组末尾
    console.log(arr.fill("hello", 1, 2)); // [1, 'hello', 6, 8, 9, 34]

4、copyWithin()

copyWithin()将一定范围索引的数组元素修改为此数组另一指定范围索引的元素。

    // 参数1：被修改的起始索引（如果为负数，则从数组最后开始算起最后一位的索引是-1）
    // 参数2：被用来覆盖的数据的起始索引
    // 参数3(可选)：被用来覆盖的数据的结束索引，默认为数组末尾
    var arr = [3, 5, 6, 8, 9, 21];
    console.log(arr.copyWithin(1, 2, 5)); //[3, 6, 8, 9, 9, 21]从索引为1的位置开始覆盖，用索引2-5位置的元素来进行覆盖（起始索引位置的元素包含在内，结束索引位置的元素不包含在内）
    console.log(arr.copyWithin(-2, 2, 4)); //[3, 5, 6, 8, 6, 8]

5、entries()

entries()方法遍历键值对。

    var arr = [3, 5, 6, 2, 3, 6];
    for (let [value, key] of arr.entries()) {
        console.log(value, key); //会遍历打印出数组中的每一个元素值以及索引
    }

6、keys()

keys()方法遍历键名。

    var arr = [2, 3, 4, 5, 6];
    for (let key of arr.keys()) {
        console.log(key); //遍历打印出数组中每一个元素的索引
    }

7、values()

values()方法遍历键值。

    var arr = [4, 5, 6, 7, 8];
    for (let value of arr.values()) {
        console.log(value); //遍历打印出数组中每一个元素的值
    }

8、includes()

includes()方法用来判断数组是否包含指定值。返回值是布尔值

    var arr = [2, 3, 5, 6, 7, NaN];
    // 参数1：包含的指定值
    console.log(arr.includes(5)); // true

    // 参数2：可选，搜索的起始索引，默认为0
    console.log(arr.includes(3, 2)); // false

    // NaN 的包含判断
    console.log(arr.includes(NaN)); // true

9、flat()

flat()方法用于将嵌套数组转为一维数组

    var arr = [3, 5, 6, 7, [45, 56, 23, [43, 65, 67]]];
    // 转换时会跳过空格
    console.log(arr.flat()); //[3, 5, 6, 7, 45, 56, 23, Array(3)] 不传参默认只转一层
    console.log(arr.flat(2)); //[3, 5, 6, 7, 45, 56, 23, 43, 65, 67] 指定转换的嵌套层数
    console.log(arr.flat(Infinity)); //[3, 5, 6, 7, 45, 56, 23, 43, 65, 67] 不管嵌套多少层，最后都是一维数组

10、flatMap()

flatMap()方法先对数组中每个元素进行了的处理，再对数组执行 flat() 方法。

    // 参数1：遍历函数，该遍历函数可接受3个参数：当前元素、当前元素索引、原数组
    // 参数2：指定遍历函数中 this 的指向
    var arr = [1, 2, 3];
    console.log(arr.flatMap(n => [n * 2])); // [2, 4, 6]

11、Array.of()

Array.of()方法将参数中所有值作为元素形成数组。

    var arr = [1, 2, 3, 4];
    console.log(Array.of(arr)); // [1, 2, 3, 4]

    // 参数值可为不同类型
    console.log(Array.of(1, '2', true)); // [1, '2', true]

    // 参数为空时返回空数组
    console.log(Array.of()); // []

12、Array.from()

Array.from()方法将类数组对象或可迭代对象转化为数组。

    // 参数为数组,返回与原数组一样的数组
    console.log(Array.from([1, 2])); // [1, 2]

    // 参数含空位
    console.log(Array.from([1, , 3])); // [1, undefined, 3]