JavaScript数组方法(最新）包含ES10方法

---

数组方法

一、数组方法（添加，删除）

1.push()

• 在数组的末尾追加一个元素,返回一个新数组的长度，会改变原数组

var arr = [1,2,3,4,5,6,7,8,9];
console.log(arr.push(111));  //10
console.log(arr);  //[1,2,3,4,5,6,7,8,9,111]

2.pop()

• 删除数组末尾的元素,返回被删除的元素，会改变原数组

var arr = [1,2,3,4,5,6,7,8,9];
console.log(arr.pop()); //9
console.log(arr);      //[1,2,3,4,5,6,7,8]  

3.unshift()

• 添加元素到数组的最前面，返回新数组的长度，会改变原数组

var arr = [1,2,3,4,5,6,7,8,9];
console.log(arr.unshift(-1,0));    //11
console.log(arr)    //[-1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

4.shift()

• 删除数组中最前面的元素，返回被删除的元素，改变原数组

var arr = [1,2,3,4,5,6,7,8,9];
console.log(arr.shift());      //1
console.log(arr);       //[2, 3, 4, 5, 6, 7, 8, 9] 

二、数组方法（插入，连接，反转，排序，剪切，拼接）

1.splice()

• 从指定的位置删除元素并插入元素，截取数组中的某些内容，按照数组的索引来截取，改变原数组

var arr = [1,2, 3, 4, 5, 6, 7, 8, 9];
console.log(arr.splice(1,2,[33,44,55]))     //[2,3]
console.log(arr)        //[1, [33,44,55], 4, 5, 6, 7, 8, 9]
//splice(从第几个索引开始，删除元素个数，插入元素的值)    第三个值可写可不写

2.concat()

• 连接两个数组或元素，返回连接后的新数组，不改变原数组

var arr = [1,2, 3, 4, 5, 6, 7, 8, 9];
//连接元素
var arr1 = 111;
console.log(arr.concat(arr1));     //[1, 2, 3, 4, 5, 6, 7, 8, 9, 111]
console.log(arr)        //[1, 2, 3, 4, 5, 6, 7, 8, 9]

//连接数组
var arr2 = [333,444,555];
console.log(arr.concat(arr2));      //[1, 2, 3, 4, 5, 6, 7, 8, 9, 333, 444, 555]
console.log(arr)        //[1, 2, 3, 4, 5, 6, 7, 8, 9]

3.reverse()

• 将数组反转，返回反转后的值,数组中第一个变成最后一个，最后一个变成第一个

var arr = [1,2, 3, 4, 5, 6, 7, 8, 9];
console.log(arr.reverse());     //[9, 8, 7, 6, 5, 4, 3, 2, 1]
console.log(arr);       //[9, 8, 7, 6, 5, 4, 3, 2, 1]

4.sort()

• 数组排序，默认转字符串再排序，默认排序顺序是根据字符串Unicode码点

var arr = [1,6,8,7,2,3,4,5,'111'];
console.log(arr.sort());    //[1, "111", 2, 3, 4, 5, 6, 7, 8]
console.log(arr)        //[1, "111", 2, 3, 4, 5, 6, 7, 8]

var arr1 = ['Alice','Lucy','Bob','Jhon','Lin','FTX'];
console.log(arr1.sort());   //["Alice", "Bob", "FTX", "Jhon", "Lin", "Lucy"]
console.log(arr1)   //["Alice", "Bob", "FTX", "Jhon", "Lin", "Lucy"]
//当第一个字母相同时，看第二个字母

5.slice()

• 切割数组，返回值为切出来的新数组

var arr = [1,2,3,4,5,6,7,8,9];
console.log(arr.slice(3,6));    //[4, 5, 6]
console.log(arr)        //[1,2,3,4,5,6,7,8,9]
//slice(从第几个索引开始,到最后结束的索引)，这里的最后结束索引，不包括最后结束的索引的值

6.join()

• 把数组拼接成字符串，默认情况下拼接符为逗号

var arr = [1,2,3,4,5,6,7,8,9];
console.log(arr.join('_'))      //1_2_3_4_5_6_7_8_9
console.log(arr)        //[1,2,3,4,5,6,7,8,9]

三、数组方法（查找，检索，转换）

1.indexOf()

• 用来找到数组中某一项的索引

//当数组中包含该值时，indexOf中值的索引
// indexOf(需要查找的元素值，[从哪个位置开始找]),后面的值可写可不写
var arr = [1,2,3,4,5,6,7,8,9];
console.log(arr.indexOf(5,2));    //4
console.log(arr)    //[1, 2, 3, 4, 5, 6, 7, 8, 9]
  
//当数组中不包含该值时,则返回-1
var arr = [1,2,3,4,5,6,7,8,9];
console.log(arr.indexOf(222));      //-1
console.log(arr)        //[1, 2, 3, 4, 5, 6, 7, 8, 9]

2.lastIndexOf()

• 与indexOf()的功能是一样的，只不过indexOf是从左往右查找，而lastIndexOf()是从右往左查找

//当数组中包含该值时，lastIndexOf中值的索引
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9,2];
console.log(arr.lastIndexOf(2));    //9
console.log(arr)        //[1, 2, 3, 4, 5, 6, 7, 8, 9,2]

//当数组中不包含该值时,则返回-1
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9,2];
console.log(arr.lastIndexOf(222));    //-1
console.log(arr)        //[1, 2, 3, 4, 5, 6, 7, 8, 9,2]

3.toString()

• 返回一个字符串，表示指定的数组及其元素

var arr = [1,2,'a','b',3,4,'c','d']
console.log(arr.toString()) // 1,2,a,b,3,4,c,d

4.toLocaleString()

• 可根据本地时间把 Date 对象转换为字符串，并返回结果

var timer =  new Date();
console.log(timer.toLocaleString())     //2021/1/19 下午8:43:25 

四、数组方法（迭代方法）ES5

1.every()

• 测试一个数组内的所有元素是否都能通过某个指定函数的测试，它返回一个布尔值

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var newArr = arr.every(function(value,index){
    if (value>1) {
      	return true
     }
})
console.log(newArr)     //false
console.log(arr)        //[1, 2, 3, 4, 5, 6, 7, 8, 9]

2.some()

• 和every()使用是一样的，测试一个数组内至少有一个元素是否能通过某个指定函数的测试，它返回一个布尔值

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var newArr = arr.some(function(value,index){
   	 if (value>7) {
       return true
     }
})
 console.log(newArr)     //true
 console.log(arr)        //[1, 2, 3, 4, 5, 6, 7, 8, 9]

3.forEach()

• 和for作用一致，用来遍历数组的

//里面有多少个元素，函数就会执行多少次
//语法：arr.forEach(function (item, index, arr) {})
var arr = [1,2,3,4];
arr.forEach(function(item, index, arr){
//item 就是数组中的每一项
//index  数组中的索引
//arr   原始数组
console.log('数组的第 ' + index + ' 项的值是 ' + item + '，原始数组是', arr);
//数组的第 0 项的值是 1，原始数组是[1,2,3,4]
//数组的第 0 项的值是 1，原始数组是[1,2,3,4]
//数组的第 0 项的值是 1，原始数组是[1,2,3,4]
//数组的第 0 项的值是 1，原始数组是[1,2,3,4]
})

4.map()

• 和forEach()类似，只不过可以对数组中的每一项进行操作，返回一个新的数组

var arr = [1,2,3,4,5,6,7,8,9];
var newArr = arr.map(function (item,index,arr){
    return item*2
}) 
console.log(newArr);      //[2, 4, 6, 8, 10, 12, 14, 16, 18]
console.log(arr)     //[1, 2, 3, 4, 5, 6, 7, 8, 9]

5.filter()

• 创建一个新数组, 其包含通过所提供函数实现的测试的所有元素

// 语法：       arr.filter(function(value,index，array){})     value当前索引的值，index正在处理元素在数组中的索引，array 调用filter数组本身
// 这个函数可以设置一个返回值
// 返回值会被强转布尔值，凡是false的就是检测不通过的，凡是true的就是检测通过的
// 数组里面有多少个元素，函数就会执行多少次，就会有多少个返回值
// 返回值为true的所有元素就是通过检测的元素，这些元素组成的新数组就是filter的返回值
var arr = [1,2,3,4,5,6,7,8,9];
var newArr = arr.filter(function(value){
     if (value > 3) {
    	return true
     }
})
console.log(newArr)     //[4, 5, 6, 7, 8, 9]
console.log(arr)        //[1, 2, 3, 4, 5, 6, 7, 8, 9]

六、数组方法（归并操作）

1.reduce()

• 对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。

// 语法：arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])
         var arr = [1,2,3,4,5]
        var sum = arr.reduce(function(accumulator,currentValue){
            console.log("本次遍历到的数组元素的值是:"+currentValue)
            console.log("上一次调用回调时返回的值:"+accumulator)
            // accumulator:上一次调用回调时返回的值 (累计器)
            // currentValue:当前遍历到的值  (当前值)
            //currentindex:当前索引
            //Sourcearray:  源数组

            return accumulator+currentValue;
        });
        console.log(sum)

2.reduceRight()

• 和 reduce() 功能是一样的，不同的是 reduceRight() 从数组的末尾向前将数组中的数组项做累加。

var arr = [5,8,10,16];

function getSum(total, num) {
    return total + num;
}
function myFunction(item) {
    console.log(arr.reduceRight(getSum));		//39
}
myFunction() 	

七、ES6新增新操作数组的方法

1.find()

• 找到第一个符合条件的元素

// 语法：arr.find(function(value,index,array))
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var newArr = arr.find(function(value,index,arr){
     if(value>5){
     return true
	}
})
console.log(newArr)     //6
console.log(arr)        //[1, 2, 3, 4, 5, 6, 7, 8, 9] 

2.findIndex()

• 找到第一个符合条件的数组元素的索引值

        var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
        var newArr = arr.findIndex(function(value,index,arr){
            if(value>5){
                return true
            }
        })
        console.log(newArr)     //5
        console.log(arr)    //[1, 2, 3, 4, 5, 6, 7, 8, 9]

3.fill()

• 用给定的值填充原来的值

        // 语法： arr.fill(value,start,end)  value需要填充的值，start起始索引，默认为0，end终止索引，默认为this.length
        var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
        console.log(arr.fill(1));   //[1, 1, 1, 1, 1, 1, 1, 1, 1]
        console.log(arr.fill('a',5,8));     //[1, 1, 1, 1, 1, "a", "a", "a", 1]

4.Array.from()

• 从一个数组或可迭代对象创建一个新的数组

var str = 'Hello world'
console.log(Array.from(str));   //["H", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d"]
console.log(str)        //Hello world

5.Array.of()

• 将一组值转化成数组，和声明数组类似，可替代Array() 或 new Array()

        console.log(Array.of(1,2,3,4,5,6,'A','B'));     //[1, 2, 3, 4, 5, 6, "A", "B"]   
        console.log(Array.of(1))        //[1]

6.copyWithin()

• 复制数组的一部分到同一数组中的另一个位置，并返回它，不会改变原数组的长度

        // 语法：arr.copyWithin(target,start,end)
        //参数: target 必写 索引从该位置开始替换数组项
        //start 可写可不写 索引从该位置开始读取数组项，默认为0.如果为负值，则从右往左读。
        //end 可写可不写 索引到该位置停止读取的数组项，默认是Array.length,如果是负值，表示倒数
        var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
        console.log(arr.copyWithin(0,4,6));     //[5, 6, 3, 4, 5, 6, 7, 8, 9]
        console.log(arr)        //[5, 6, 3, 4, 5, 6, 7, 8, 9]

7.includes()

• 判断一个数组中是否包含一个指定的值

        //当该数组中包含一个指定的值时，则为true，不包含一个指定的值时，则为false
        //includes()   最终结果一定为boolean值
        var arr = [1,2,3,4,5,6,7,8,9];
        console.log(arr.includes(5));       //true
        console.log(arr.includes(100));     //false
        console.log(arr)        //[1,2,3,4,5,6,7,8,9]

8.entries()

• 返回一个新的Array Iterator对象，这个对象包含数组中每个索引的键与值

        var arr = ['a','b','c','d']
        var arr2 = arr.entries();
        console.log(arr.entries())      // Array Iterator {}
        console.log(arr.entries().next().value)     //[0, "a"] 
        for(var i of arr2){
            console.log(i)      // [0, "a"] [1, "b"] [2, "c"] [3, "d"]
        }

9.keys()

• 把数组的所有键变成一个新数组

        var arr = [1,5,3,8,2,18,2154];
        var newArr = arr.keys();
        console.log(newArr);    //结果需要通过for of遍历出来
        for(var key of newArr){
            console.log(key);       //0    1    2   3   4   5   6
        }

10.values()

• 返回一个新的 Array Iterator 对象，该对象包含数组每个索引的值

        var arr = ['a','p','p','l','e'];
        var newArr = arr.values();
        console.log(newArr)     //使用for..of循环进行迭代
        for(var arr1 of newArr){
            console.log(arr1);      //"a" "p" "p" "l" "e"
        }

八、ES10新增新操作数组的方法

1.flat()

• 简单来说，就是将多维数组降维,flat()会默认拉平一层，

       //如果想要拉平多层的嵌套数组，可以将flat()方法的参数写成一个整数，表示想要拉平的层数，默认情况下是1
       //如果想要不管多少层都要变成一维数组的话，可以使用flat(Infinity)
       var arr1 = [1,2,3,[7,8,9,[10,11]]]
       console.log(arr1.flat());   //[1, 2, 3, 7, 8, 9, [10,11]] 
       console.log(arr1.flat(2))   //[1, 2, 3, 7, 8, 9, 10, 11]
       var arr2 = [1,2,3,[25,26,[77,23,[55,6681,[11223,1234,[7862]]]]]]
       console.log(arr2.flat(Infinity))        //[1, 2, 3, 25, 26, 77, 23, 55, 6681, 11223, 1234, 7862]

2.flatMap()

• 原数组的每个成员执行一个函数，相当于执行map(),然后对返回值组成的数组执行flat()方法,返回一个新数组，不改变原数组

        var arr = [1,2,3,4];
        console.log(arr.flatMap(x => [x,[2*x]]));   //[1, [2], 2, [4], 3, [6], 4, [8]]