JS数组方法集合

1.arr.push() 从数组后边添加元素,返回值为添加完成后数组的长度

  let arrPush = [1, 2, 3, 4, 5]
  console.log(arrPush.push(6)) //6返回值是数组的长度
  consolelog(arrPush) //[1,2,3,4,5,6]

2.arr.pop()从数组后边删除元素,返回值是删除的元素

  let arrPop = [1, 2, 3, 4, 5]
  console.log(arrPop.pop()) //5
  console.log(arrPop) //[1,2,3,4]

3.arr.shift()从数组前边删除元素,返回值是删除的元素

let arrShift = [1, 2, 3, 4, 5];
console.log(arrShift.shift()) //1
console.log(arrShift) //[2,3,4,5]

4.arr.unshift()从数组前边添加元素,返回值是添加完之后数组的长度

   let arrUnshift = [1, 2, 3, 4, 5];
   console.log(arrUnshift.unshift(0)); //6
   console.log(arrUnshift) //[0,1,2,3,4,5]

5.arr.splice(i,n)从索引为i的位置开始删除,n是删除的个数,即从索引i开始删除n个项,返回值是删除的元素

let arrSplice = [1, 2, 3, 4, 5];
console.log(arrSplice.splice(1, 2)) //2,3
console.log(arrSplice) //1,4,5

6.arr.reverse()数组反转,返回值是翻转后的数组

 let arrReverse = [1, 2, 3, 4, 5];
 conole.log(arrReverse.reverse()) //[5,4,3,2,1]
 conole.log(arrReverse) //[5,4,3,2,1]

7.arr.copyWithin()方法浅复制数组的一部分到同一数组中的另一个位置，并返回它，不会改变原数组的长度。

 //语法:arr.copyWithin(target[, start[, end]])
// target
 // 0 为基底的索引，复制序列到该位置。如果是负数，target 将从末尾开始计算。
 // 如果 target 大于等于 arr.length，将会不发生拷贝。如果 target 在 start 之后，复制的序列将被修改以符合 arr.length。

// start
/ 0 为基底的索引，开始复制元素的起始位置。如果是负数，start 将从末尾开始计算。
// 如果 start 被忽略，copyWithin 将会从0开始复制。

// end
// 0 为基底的索引，开始复制元素的结束位置。copyWithin 将会拷贝到该位置，但不包括 end 这个位置的元素。如果是负数， end 将从末尾开始计算。
// 如果 end 被忽略，copyWithin 方法将会一直复制至数组结尾（默认为 arr.length）。
 let array1 = ['a', 'b', 'c', 'd', 'e'];

// copy to index 0 the element at index 3
 console.log(array1.copyWithin(0, 3, 4)); // ["d", "b", "c", "d", "e"]
// copy to index 1 all elements from index 3 to the end
 console.log(array1.copyWithin(1, 3)); //["d", "d", "e", "d", "e"]
 console.log(array1) // ["d", "d", "e", "d", "e"]

 let numbers = [1,2,3,4,5];
 numbers.copyWithin(-2); // [1, 2, 3, 1, 2]
 numbers.copyWithin(0, 3); // [4, 5, 3, 4, 5]
 numbers.copyWithin(0, 3, 4); // [4, 2, 3, 4, 5]
 numbers.copyWithin(-2, -3, -1); // [1, 2, 3, 3, 4]
不改变数组的方法--->

8.arr.concat() 连接两个数组 返回值为连接后的新数组

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

9.arr.split()将字符串转化为数组,返回值就是转化后的数组

 let str = "12345";
 console.log(str.split("")); //[1,2,3,4,5]

10.arr.sort()将数组按照字符编码的顺序进行排序 返回值是排好的数组,默认是按照最左边的数字进行排序,不是按照数字大小排序

let arrSort = [1, 3, 2, 14, 5];
console.log(arrSort.sort()) //[1, 14, 2, 3, 5]
console.log(arrSort.sort((m, n) => m - n)) //[1,2,3,5,14]
console.log(arrSort.sort((m, n) => n - m)) //[14,5,3,2,1]

11.arr.slice(start,end)从start开始截止到end,不包含end,返回的是截取出来的数组

 var arrSlice = [1, 2, 3, 4, 5];
 console.log(arrSlice.slice(1, 3)) //2,3
 console.log(arrSlice) //[1,2,3,4,5]

12.arr.forEach(value,index,array)遍历数组,相当与for循环,无返回值

   let arr = [1, 2, 3, 4, 5]
   arr.forEach((value, index, array) => {
     console.log(`value:${value}    index:${index}     array:${array}`)
  })
  //  value:1    index:0     array:1,2,3,4,5
  //  value:2    index:1     array:1,2,3,4,5
  //  value:3    index:2     array:1,2,3,4,5
  //  value:4    index:3     array:1,2,3,4,5
  //  value:5    index:4     array:1,2,3,4,5

13.arr.map(value,index,array)遍历数组,返回一个新的数组

   let arr = [1, 2, 3, 4, 5]
   arr.map((value, index, array) => {
   console.log(`value:${value}    index:${index}     array:${array}`)
 })
  //  value:1    index:0     array:1,2,3,4,5
  //  value:2    index:1     array:1,2,3,4,5
  //  value:3    index:2     array:1,2,3,4,5
  //  value:4    index:3     array:1,2,3,4,5
  //  value:5    index:4     array:1,2,3,4,5

14.arr.filter(value,index,array)过滤数组,返回一个满足要求的数组,不改变原始数组

  var arrFilter = [1, 2, 3, 4, 5];
  console.log(arrFilter.filter((item) => item <= 3)); //[1,2,3]
  console.log(arrFilter) //[1,2,3,4,5] 
//数组方法中的map和filter的区别:一般如果我们要操作数组的话,就实用Map.而一般仅仅是过滤数组中满足条件的项的话,我们就使用filter

15.arr.every()根据条件判断,如果所有项都满足这个条件,则返回true,如果有一项不满足,则返回false,返回值是布尔值

  let arrEvery = [1, 2, 3, 4, 5]
  console.log(arrEvery.every(item => item > 3)) //false

16.arr.some()遍历数组,根据条件判断,如果有一项满足则返回true,如果都不满足则返回false

let arrSome = [1, 2, 3, 4, 5];
console.log(arrSome.some(item => item >= 3)) //true
console.log(arrSome.some(item => item >= 6)) //false

17.arr.reduce(callback,initialValue)迭代数组的所有项,累加器,数组中的每个值(从左到右)合并,最终计算为一个值

//参数 callback:previousValue:必选--上一次调用回调返回的值,或者是提供的初始值(initivalValue)
//    currentValue:必选--数组中当前被处理的数组项
//    index可选--当前数组项在数组中的索引值
//    array可选--初始值
//应用场景1:数组中所有值的和
let arrReduce = [1, 2, 3, 4, 5];
let sum = arrReduce.reduce((preVal, curVal) => preVal + curVal);
console.log(sum) //15
//应用场景2:累加对象数组里面的值
let initivalValue = 0
let arrObj = [{
     x: 1
}, {
    x: 2
}, {
    x: 3
}]
let objSum = arrObj.reduce((preVal, curVal) => preVal + curVal, initivalValue)
console.log(objSum) //6
//应用场景3:将二维数组转化为一维数组
let flattened = [
  [0, 1],
  [2, 3],
  [4, 5]
].reduce((preVal, curVal) => preVal.concat(curVal))
 console.log(flattened) //[0,1,2,3,4,5];
//应用场景4:计算数组中每个元素出现的次数
let names = ['Clice', 'BOb', 'Tiff', 'Bruce', 'Alice'];
let count = names.reduce((nameObj, name) => {
            if (name in nameObj) {
                nameObj[name]++
            } else {
                nameObj[name] = 1
            }
            return nameObj
        })
console.log(count) //{ 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }

18.arr.reduceRight(callback,initivalValue)与arr.redduce()的功能一样,不同的是,reduceRight是从数组的末尾向前将数组中的每一项进行累加(参考上例理解即可)

19.arr.indexOf()查看某个元素的索引值,若有重复的,则返回第一个查到的索引值,若不存在,则返回-1

 let arrIndexOf = [1, 2, 3, 4, 5];
    console.log(arrIndexOf.indexOf(2)) //  1 存在
    console.log(arrIndexOf.indexOf(9)) // -1 不存在

20.arr.lastIndexOf()和arr.indexOf()的功能一样，不同的是从后往前查找(参考上例理解即可)

21.arr.from()将伪数组变成数组,只要有length就可以转成数组 --es6

//注意转化对象的时候,只有当其中有length这个属性才能转化,而且对象中的key值只有从索引为0开始才能生效

        let str = '张三';
        Array.from(str) //['张','三']

        let fromObj = {
            0: "张三",
            1: 18,
            2: "man",
            length: 3
        }
        Array.from(fromObj) // ["张三", 18, "man"]
        let fromObj1 = {
            name: "张三",
            age: 18,
            sex: "man",
            length: 3
        }
        Array.from(fromObj1) //[undefined,undefined,undefined]

22.arr.of()将一组值转换成数组，类似于声明数组

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

  console.log(Array.of(7)) // [7]
  console.log(Array.of(1,2,3)) // [1,2,3]
  console.log(Array(7)) // [empty*7] [ , , , , , , ]
  console.log(Array(1,2,3)) // [1,2,3]

23.arr.find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

let arrFind = [5, 12, 8, 130, 44];

var found = arrFind.find(function(element) {
    return element > 10;
});

console.log(found); //12

24.arr.findIndex()返回数组中满足提供的测试函数的第一个元素的索引,否则，返回-1

  var arrFindIndex = [5, 12, 8, 130, 44];
    console.log(arrFindIndex.findIndex(element => element >13)); // 3 即130

25.arr.includes()方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false。

  // 注意：对象数组不能使用includes方法来检测。
    let arrIncludes = [1, 2, 3];
    console.log(arrIncludes.includes(2));  //  true
    let pets = ['cat', 'dog', 'bat'];
    console.log(pets.includes('cat')); //  true
    console.log(pets.includes('at')); //  false

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

var arrKeys = ['a', 'b', 'c'];
var iterator = arrKeys.keys(); 

for (let key of iterator) {
  console.log(key); //  0 1 2
}

27.arr.values()方法返回一个新的 Array Iterator 对象，该对象包含数组每个索引的值

  let arrValues = ['a', 'b', 'c'];
    let iterator = arrValues.values();

    for (const value of iterator) {
      console.log(value); //  "a" "b" "c"
    }

28.arr.entries()方法返回一个新的Array Iterator对象，该对象包含数组中每个索引的键/值对。

 var arrEntries = ["a", "b", "c"];
    var iterator = arrEntries.entries();
    // undefined

    for (let e of iterator) {
        console.log(e);
    }

    // [0, "a"] 
    // [1, "b"] 
    // [2, "c"]

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

 //语法 : var newArray = arr.flat([depth])
    //参数 : depth 可选 指定要提取嵌套数组的结构深度，默认值为 1。

    //实际用途1: 嵌套数组扁平化
    var arr1 = [1, 2, [3, 4]];
    arr1.flat(); // [1, 2, 3, 4]

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

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

    //使用 Infinity 作为深度，展开任意深度的嵌套数组
    arr3.flat(Infinity); // [1, 2, 3, 4, 5, 6]

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

30.arr.flatMap()方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。它与 map 和 深度值1的 flat 几乎相同，但 flatMap 通常在合并成一种方法的效率稍微高一些。

 //语法 : var new_array = arr.flatMap(function callback(currentValue[, index[, array]]) {
    //              返回新数组的元素
    //       }[, thisArg])

    var arr1 = [1, 2, 3, 4];

    arr1.map(x => [x * 2]); // [[2], [4], [6], [8]]

    arr1.flatMap(x => [x * 2]); // [2, 4, 6, 8]

    // 只会将 flatMap 中的函数返回的数组 “压平” 一层
    arr1.flatMap(x => [
        [x * 2]  // [[2], [4], [6], [8]]
    ]);
  
    //下边示例更好的说明了flatMap的用法特性
    let arr = ["今天天气不错", "", "早上好"]
    arr.map(s => s.split("")) // [["今", "天", "天", "气", "不", "错"],[],["早", "上", "好"]]
    arr.flatMap(s => s.split('')); // ["今", "天", "天", "气", "不", "错", "早", "上", "好"]

31.arr.slice()方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。

  let fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];
    let citrus = fruits.slice(1, 3);
    console.log(citrus) // ['Orange','Lemon']
    console.log(fruits) // ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']

32.arr.join()方法将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目，那么将返回该项目而不使用分隔符。

 let a = ['Wind', 'Rain', 'Fire'];
    let myVar1 = a.join(); // myVar1的值变为"Wind,Rain,Fire"
    let myVar2 = a.join(', '); // myVar2的值变为"Wind, Rain, Fire"
    let myVar3 = a.join(' + '); // myVar3的值变为"Wind + Rain + Fire"
    let myVar4 = a.join(''); // myVar4的值变为"WindRainFire"
    console.log(1) // ['Wind', 'Rain', 'Fire']

上述示例只是大概对相关方法进行了一些简单的展示,具体还需要在具体的项目中进行更深的研究,有问题的地方希望大家指正,共同学习,共同进步.