万字总结JavaScript 中Array对象身上的方法

我觉得平时对数组的加工操作可能要比字符串更加频繁，而且操作的逻辑复杂程度也是存在不确定性。Array对象身上的方法有很多，其实常用的也就几个，我们需要牢记这些常用的方法。废话不多说，下面在进入正题前，声明一下：本人前端菜🐓，文采水平有限，还望指正。

1. concat():连接两个或更多的数组，并返回结果

• 语法：array1.concat(array2,array3,...,arrayN)
• 参数： 该参数可以是具体的值，也可以是数组对象。可以是任意多个
• 返回值：返回一个新的数组

let arr1 = ["red","blue"];
let arr2 = ["yellow","green"];
let str = "white";
let arr = ["block"];
console.log(arr.concat(arr1,arr2,str));//["block","red","blue","yellow","green","white"]

如果要进行 concat() 操作的参数是数组，那么添加的是数组中的元素，而不是数组

• 小知识：传递两个参数m,n,返回长度为m,所有元素都为n的数组，要求不能用循环(这里利用函数的递归和concat方法可以实现)：

const fn = (m,n) =>{
    return m ? fn(m-1,n).concat(n):[];
}
console.log(fn(5,"n"));//["n","n","n","n","n"]

2. copyWithin()：从数组的指定位置拷贝元素到数组的另一个指定位置中

• 语法：array.copyWithin(target, start, end)
• 参数：target：复制到指定目标索引位置。 start：可选。元素赋值的起始位置。end：可选。停止复制的索引位置(默认为array.length)。如果为负值，表示倒数
• 返回值：处理之后的数组

let fruits = ["banana","orange","apple","mango"];
// 复制数组的前两个元素到第三和第四个位置上
console.log(fruits.copyWithin(2,0,2));//["banana","orange","banana","orange"]

3.entries()：返回数组的可迭代对象

• 语法：array.entries()
• 返回值：数组迭代对象

let fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.entries();//这里是一个迭代器对象，需要利用到迭代器的方法next(),遍历得到，结果为[0, "Banana"][1, "Orange"][2, "Apple"][3, "Mango"]

4. every()：检测数组元素的每个元素是否都符合条件

• 语法：array.every(function(currentValue,index,arr), thisValue)
• 参数：function(currentValue,index,arr)：函数，数组中的每个元素都会执行这个函数，函数参数：currentValue：(必须)当前元素的值，index：(可选)当前元素的索引值，arr：(可选)当前元素属于的数组对象。 thisValue：(可选)对象作为该执行回调时使用，传递给函数，用作"this"的值。如果省略了thisValue,“this"的值为"undefined”
• 注意：如果数组中检测有一个元素不满足，则整个表达式返回false,且剩余的元素不会再进行检测。every()不会对空数组进行检测。every()不会改变原始数组
• 返回值：boolean 。如果所有元素都通过检测返回true，否则返回false

let ages = [32,23,33,16,40];
const checkValue = (age) =>{
    return age >= 18;
}
console.log(ages.every(checkValue));//false
//或者
console.log(ages.every((item)=>{
    return item >= 18;
}))//false

5.fill()：使用一个固定值来填充数组

• 语法：array.fill(value, start, end)
• 参数：value：(必须)要填充的值。 start：(可选)开始填充的位置。end：(可选)停止填充的位置，默认为array.length
• 返回值：返回填充后的数组

let fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.fill("Pear",2,4));//['Banana', 'Orange', 'Pear', 'Pear']

6. filter()：检测数组元素，并返回符合条件所有元素的数组

• 语法：array.filter(function(currentValue,index,arr), thisValue)
• 参数：function(currentValue, index,arr)：函数，数组中的每个元素都会执行这个函数，函数参数currentValue：(必须)当前元素的值，index：(可选)当前元素的索引值，arr：(可选)当前元素属于的数组对象。thisValue：可选。对象作为该执行回调时使用，传递给函数，用作"this"的值。如果省略了thisValue，“this"的值为"undefined”
• 返回值：返回一个新的数组，包含了所有符合条件的所有元素，如果没有符合条件的元素则返回空数组

let ages = [32,33,16,40];
let newArr = ages.filter((item) => {
    return item >= 18
});
console.log(newArr);//[32,33,40]

7. find()：返回符合传入测试(函数)条件的数组元素

• 语法：array.fiind(function(currentValue,index,arr).thisValue)
• 参数：function(currentValue, index,arr)：必须。数组每个元素需要执行的函数，函数参数：currentValue：必须。当前元素，index：可选。当前元素的索引值，arr：可选。当前元素所属的数组对象。thisValue：可选。对象作为该执行回调时使用，传递给函数，用作"this"的值。如果省略了thisValue，“this"的值为"undefined”
• 返回值：返回符合测试条件的第一个数组元素值，如果没有符合条件的则返回undefined(注意：当数组中的元素在测试条件时返回true时，find()返回符合条件的元素，之后的值不会再调用执行函数)

let ages = [32,33,16,40];
let findItem = ages.find((item) => {
    return item >= 18
});
console.log(findItem);//32

8. findIndex()：返回符合传入测试(函数)条件的数组元素索引

• 语法：array.findIndex(function(currentValue,index,arr).thisValue)
• 参数：参照find()方法
• 返回值：返回符合测试条件的第一个数组元素索引，如果没有符合条件的则返回-1

let ages = [32,33,16,40];
let findItem = ages.findIndex((item) => {
    return item >= 18
});
console.log(findItem);//0

9. forEach()：数组每个元素都执行一次回调函数

• 语法：array.forEach(function(currentValue,index,arr),thisValue)
• 参数：function(currentValue,index,arr)：必须。数组中每个元素需要调用的函数，函数参数：currentValue：必须。当前元素，index：可选。当前元素的索引值，arr：可选。当前元素所属的数组对象。thisValue：可选。对象作为该执行回调时使用，传递给函数，用作"this"的值。如果省略了thisValue，“this"的值为"undefined”
• 返回值：undefined
• 注意：forEach()对于空数组是不会执行回调函数的

let arr = [10,20,30,40,50];
let sum = 0;
arr.forEach((item) => {
    sum += item;
});
console.log(sum);//150

关于forEach的更多介绍，请跳转到JS中的forEach()和map()方法介绍，这篇文章查看

10. from()：通过给定的对象中创建一个数组

• 语法：Array.from(object,mapFunction,thisValue)
• 参数：object：必须。要转换为数组的对象。mapFunction：可选。数组中每个元素要调用的函数。thisValue：可选。映射函数(mapFunction)中的this对象
• 返回值：数组对象

//返回集合中包含的对象数组
let setObj = new Set(["a","b","b","c"]);
let objArr = Array.from(setObj);
console.log(objArr);//['a','b','c']

//利用映射函数更改元素的值
let arr = [1,2,3];
let newArr = Array.from(arr,x => x * 10);
console.log(newArr); //[10,20,30]

//Array.from()也可以将一个伪数组转换为数组

11. includes()：判断一个数组是否包含一个指定的值

• 语法：array.inculdes(searchElement,fromIndex)
• 参数：searchElement：必须。需要查找的元素值。fromIndex：可选。从该索引处开始查找searchElement。如果为负值，则按升序从array.length+fromIndex的索引开始搜索，默认为0
• 返回值：布尔值。如果找到指定值返回true，否则返回false

let arr = ['a','b','c'];
console.log(arr.includes('c'))//true
// 如果fromIndex大于等于数组长度，则返回false。该数组不会被搜索
console.log(arr.includes('c',3))//false

12. indexOf()：搜索数组中的元素，并返回它所在的位置

• 语法：array.indexOf(item,start)
• 参数：item：必须。查找的元素。start：可选的整数参数。规定在数组中开始检索的位置。它的合法取值是0到stringObject.length-1。如省略该函数，则将从字符串的首字母开始检索
• 返回值：数值类型。元素在数组中的位置，如果没有搜索到则返回-1

let fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.indexOf("Apple")); //2

13. isArray()：判断对象是否为数组

• 语法：Array.isArray(obj)
• 参数：obj：必须。要判断的对象
• 返回值：如果对象是数组返回true，否则返回false

let fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(Array.isArray(fruits));//true

14. join()：把数组的所有元素放入一个字符串

• 语法：array.join(separator)
• 参数：separator：可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符
• 返回值：返回一个字符串。该字符串是通过把arrayObject的每个元素转换为字符串，然后把这些字符串连接起来，在两个元素之间插入separator字符串而生成的

let fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.join());//Banana,Orange,Apple,Mango
console.log(fruits.join(" and "));//Banana and Orange and Apple and Mango

15. keys()：返回数组的可迭代对象，包含原始数组的键(key)

• 语法：array.keys()
• 返回值：一个数组可迭代对象

let fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.keys()); //Array Iterator {}

16. lastIndexOf()：搜索数组中的元素，并返回它最后出现的位置

• 语法：array.lastIndexOf(item,start)
• 参数：item：必须。规定需检索的字符串值。start：可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是0到string.Object.length-1。如省略该参数，则从字符串的最后一个字符处开始检索
• 返回值：该方法将从尾到头地检索数组中指定元素 item。开始检索的位置在数组的 start 处或数组的结尾（没有指定 start 参数时）。如果找到一个 item，则返回 item 从尾向前检索第一个次出现在数组的位置。数组的索引开始位置是从 0 开始的。如果在数组中没找到指定元素则返回 -1

let fruits=["Banana","Orange","Apple","Mango","Banana","Orange","Apple"];
console.log(fruits.lastIndexOf("Apple"));//6

17.map()：通过指定函数处理数组的每个元素，并返回处理后的数组

• 语法：array.map(function(currentValue,index,arr), thisValue)
• 参数：function(currentValue,index,arr)：必须。数组中每个元素需要调用的函数，函数参数：currentValue：必须。当前元素，index：可选。当前元素的索引值，arr：可选。当前元素所属的数组对象。thisValue：可选。对象作为该执行回调时使用，传递给函数，用作"this"的值。如果省略了thisValue，“this"的值为"undefined”
• 返回值：返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值

let numbers = [1, 2, 3, 4];
console.log(numbers.map((item) => {
	return item * 10
})); //[10,20,30,40]

18. pop()：删除数组的最后一个元素并返回删除的元素

• 语法：array.pop()
• 返回值：返回删除的元素
• 注意：此方法改变数组的长度

let fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.pop());//Mango
console.log(fruits);//["Banana", "Orange", "Apple"]

19. push()：向数组的末尾添加一个或更多元素，并返回新的长度

• 语法：array.push(item1,item2,...,itemN)
• 参数：item1,item2,...,itemX：必须。要添加到数组的元素
• 返回值：数组新长度

let fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.push("Kiwi","Lemon","Pineapple"));//7
console.log(fruits);//["Banana", "Orange", "Apple", "Mango","Kiwi","Lemon","Pineapple"]

20. reduce()：将数组元素计算为一个值(从左到右)

• 语法：array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
• 参数：function(total,currentValue,currentIndex,arr)： 必需，用于执行每个数组元素的函数，函数参数：total：必须。初始值，或者计算结束后的返回值，currentValue：必须。当前元素，currentIndex：可选。当前元素的索引值， arr：可选。当前元素属于的数组对象(可以理解为当前遍历的数组对象)。initialValue：可选。传递给函数的初始值
• 返回值：返回计算结果

//计算数组元素相加后的总和
let arr = [1,2,3,4,5];
let sum = arr.reduce((total,item)=>{
    return total + item;
},0);
console.log(sum);//15

关于reduce的更多介绍，请跳转到JS中filter()和reduce()方法介绍，这篇文章查看

21. reduceRight()：将数组元素计算为一个值(从右到左)

• 语法：array.reduceRight(function(total, currentValue, currentIndex, arr), initialValue)
• 参数：参照 reduce()
• 返回值：返回计算结果

//从右到左，减去每个数组元素
let nums = [2,45,30,100];
console.log(nums.reduceRight((total,num) => {
    return total - num;
})); //23

22. reverse()：反转数组的元素顺序

• 语法：array.reverse()
• 返回值：颠倒顺序后的数组

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

23. shift()：删除并返回数组的第一个元素

• 语法：array.shift()
• 返回值：数组原来的第一个元素的值(移除的元素)

let fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.shift());//Banana
console.log(fruits);//["Orange", "Apple", "Mango"]

24. slice()：选取数组的一部分，并返回一个新数组

• 语法：array.slice(start,end)
• 参数：start：可选。规定从何处开始选取。如果该参数为负数，则表示从原数组中的倒数第几个元素开始提取，slice(-2)表示提取原数组中的倒数第二个元素到最后一个元素(包含最后一个元素)。end：可选。规定从何处结束选取。该参数是数组片段结束处的数组下标。如果没有指定该参数，那么切分的数组包含从start到数组结束的所有元素。如果该参数为负数，则它表示在原数组中的倒数第几个元素结束抽取。slice(-2,-1)表示抽取了原数组中的倒数第二个元素到最后一个元素(不包含最后一个元素，也就是只有倒数第二个元素)
• 返回值：返回一个新的数组，包含从start(包括该元素)到end(不包括该元素)的arrayObject中的元素

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

25. some()：检测数组元素中是否有元素符合指定条件

• 语法：array.some(function(currentValue,index,arr),thisValue)
• 参数：function(currentValue, index,arr)：必须。数组每个元素需要执行的函数，函数参数：currentValue：必须。当前元素，index：可选。当前元素的索引值，arr：可选。当前元素所属的数组对象。thisValue：可选。对象作为该执行回调时使用，传递给函数，用作"this"的值。如果省略了thisValue，“this"的值为"undefined”
• 返回值：布尔值。如果数组中有元素满足条件返回true，否则返回false
• 注意：some()方法会依次执行数组的每个元素。如果一个有一个元素满足条件，则表达式返回true，剩余的元素不会再执行检测

//检测数组中是否有元素大于18
let nums = [3,10,18,20];
console.log(nums.some((item) => {
	return item > 18;
}));//true

26. sort()：对数组的元素进行排序

• 语法：array.sort(sortfunction)
• 参数：sortfunction：可选。规定排序顺序，必须是函数
• 返回值：对数组的引用。请注意，数组在原数组上进行排序，不生成副本

let nums = [40,100,1,5,20,10];
nums.sort((a,b) => {return a - b}); //升序
console.log(nums);//[1,5,10,20,40,100]
nums.sort((a,b) => {return b -a});//降序
console.log(nums);//[100, 40, 20, 10, 5, 1]
let fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();//默认按首字母
console.log(fruits);//['Apple', 'Banana', 'Mango', 'Orange']

27. splice()：从数组中添加或删除元素

• 语法：array.splice(index,howmany,item1,...,itemN)
• 参数：index：必须。规定从何处添加/删除元素。该参数是开始插入和(或)删除的数组元素的下标，必须是数字。howmany：可选。规定应该删除多少元素，必须是数字，但可以是"0"。如果未规定此参数，则删除从index开始到原数组结尾的所有元素。item1,...itemN：可选。要添加到数组的新元素
• 返回值：如果从arrayObject中删除了元素，则返回的是含有被删除的元素的数组

//移除数组的第三个元素，并在数组第三个位置添加新元素
let fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.splice(2,1,"Lemon","Kiwi")); //['Apple']
console.log(fruits); //['Banana', 'Orange', 'Lemon', 'Kiwi', 'Mango']

28. toString()：把数组转换为字符串，并返回结果

• 语法：array.toString()
• 返回值：数组的所有值用逗号隔开

let fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.toString());//Banana,Orange,Apple,Mango

29. unshif()：向数组的开头添加一个或更多元素，并返回新的长度

• 语法：array.unshift(item1,item2, ..., itemN)
• 参数：item1,item2, ..., itemN：可选。向数组起始位置添加一个或者多个元素
• 返回值：数组的新长度

let fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.unshift("Lemon","Pineapple"));//6
console.log(fruits);//['Lemon', 'Pineapple', 'Banana', 'Orange', 'Apple', 'Mango']

30. valueOf()：返回数组对象的原始值

• 语法：array.valueOf()
• 返回值：valueOf() 返回数组值
• 注意：valueOf() 方法通常由 JavaScript 在后台自动调用，并不显式地出现在代码中

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

跳转： JavaScript String 方法

乾坤未定，你我皆是黑马！