javaScript中数组常用方法的详细归纳
javaScript中数组常用方法详细归纳总结
文章目录
- javaScript中数组常用方法详细归纳总结
-
- 一、改变原数组方法
-
- 1.push()
- 2.pop()
- 3.shift()
- 4.unshift()
- 5.splice()
- 6.reverse()
- 7.sort()
- 二、不改变原数组的方法
-
- 1.slice()
- 2.concat()
- 3.join()
- 4.indexOf()
- 5.lastIndexOf()
- 三、数组迭代方法（不改变原数组）
-
- 1.filter()
- 2.reduce()
- 3.find()
- 4.findIndex()
- 5.forEach()
- 6.map()
- 7.some()
- 8.every()
一、改变原数组方法
1.push()
向数组末尾添加一个或多个元素，并返回新的数组长度，添加多个元素时用 " , " 隔开。
push()方法会改变原数组，即向原数组中添加一个或多个元素。
语法：
array.push(element1, element2, ... , elementN)
示例：
let arr = [1,2,3,4];
let length = arr.push(8,9)
console.log(arr); // [ 1, 2, 3, 4, 8, 9 ]
console.log(length); // 6
2.pop()
从数组末尾移除一个元素，并返回该元素。
pop()方法会改变原数组，即从原数组中移除一个元素。
语法：
array.pop()
示例：
let arr = [10,20,30,40];
let res = arr.pop()
console.log(arr); // [ 10, 20, 30 ]
console.log(res); // 40
注意：
如果pop()方法应用于一个空数组，它将返回undefined。因此，在使用pop()方法前，最好先检查数组是否为空
3.shift()
从数组开头移除一个元素，并返回该元素。
shift()方法会改变原数组，即从原数组中移除一个元素。
语法：
array.shift()
示例：
let arr = [10,20,30,40];
let res = arr.shift()
console.log(arr); // [ 20, 30, 40 ]
console.log(res); // 10
注意：
如果shift()方法应用于一个空数组，它将返回undefined。因此，在使用shift()方法前，最好先检查数组是否为空
4.unshift()
向数组开头添加一个或多个元素，并返回新的数组长度，添加多个元素时用 " , " 隔开。
unshift()方法会改变原数组，即向原数组开头添加一个或多个元素。
语法：
array.unshift(element1, element2, ... , elementN)
示例：
let arr = [10,20,30,40];
let length = arr.unshift(100,200)
console.log(arr); // [ 100, 200, 10, 20, 30, 40 ]
console.log(length); // 6
5.splice()
向数组中添加或删除元素，并返回被删除的元素。
splice()方法会改变原数组，即向原数组中添加或删除元素。
语法：
array.splice(start, deleteCount, item1, item2, ..., itemN)
参数说明：
- start：必需，表示从哪个位置开始添加或删除元素，可以是负数（表示从末尾开始计算）。
- deleteCount：可选，表示要删除多少个元素，默认为0，如果为负数，则表示从start位置添加元素，而不是删除元素。
- item1, item2, …, itemN：可选，表示要添加到数组中的元素。
返回值：
- 返回一个由被删除元素组成的数组，如果没有删除任何元素，则返回空数组。
示例：
let arr = [1, 2, 3, 4, 5];
let deleted = arr.splice(1, 2, 'a', 'b', 'c');
console.log(deleted); // 输出 [2, 3]
console.log(arr); // 输出 [1, 'a', 'b', 'c', 4, 5]
容易看出，splice()方法可以用于添加、删除或替换数组中的元素。
6.reverse()
反转数组中元素的顺序，并返回反转后的数组。
reverse()方法同时会改变原数组
语法：
array.reverse()
示例：
let arr = [1, 2, 3, 4, 5];
let res = arr.reverse();
console.log(arr); // [5, 4, 3, 2, 1]
console.log(res); // [5, 4, 3, 2, 1]
7.sort()
用于对数组进行排序，会改变原数组
语法：
array.sort(compareFunction)
参数说明：
- compareFunction：可选参数，表示排序时要使用的比较函数。如果省略该参数，则按照ASCII字符顺序进行排序。
返回值：
此方法会修改原数组，也会返回排序后的新数组。
比较函数的参数：
- a：表示当前比较的元素。
- b：表示下一个比较的元素。
比较函数的返回值：
- 如果返回值小于0，则a排在b前面。
- 如果返回值等于0，则a和b的顺序不变。
- 如果返回值大于0，则b排在a前面。
示例：
1.compareFunction比较函数被省略，则按ASCII字符顺序排序
let arr = ['banana', 'apple', 'orange', 'pear'];
arr.sort();
console.log(arr); // ['apple', 'banana', 'orange', 'pear']
2.如果一个数组元素是数字，此时还是用sort()为数组排序：
let arr = [1, 3, 15, 4, 2];
arr.sort();
console.log(arr); // [ 1, 15, 2, 3, 4 ]
之所以出现这种情况，是因为sort(方法会调用每个数组项的toString()方法，得到字符串，然后再对得到的字符串进行排序。虽然数值15比3大，但在进行字符串比较时"15"则排在"3"前面（ASCII字符顺序）。
此时，compareFunction比较函数就起到了作用：
let arr = [1, 3, 15, 4, 2];
arr.sort(function(a,b){
return a-b
});
console.log(arr); // [ 1, 2, 3, 4, 15 ]
3.按对象属性排序
let arr = [
{name: 'Tom', age: 20},
{name: 'Jerry', age: 18},
{name: 'Lucy', age: 22}
];
arr.sort(function(a, b) {
return a.age - b.age;
});
console.log(arr); // [{name: 'Jerry', age: 18}, {name: 'Tom', age: 20}, {name: 'Lucy', age: 22}]
二、不改变原数组的方法
1.slice()
从原数组中截取一段元素，生成一个新的数组。不会修改原数组。
语法：
array.slice(start, end)
参数说明：
- start：必选参数，表示截取的起始位置（包含start元素）。如果为负数，则表示从后往前数的位置，例如-1表示倒数第一个元素。
- end：可选参数，表示截取的结束位置（不包含end元素）。如果省略该参数，则截取到数组末尾。如果为负数，则表示从后往前数的位置，例如-1表示倒数第一个元素。
返回值：
该方法会返回一个新的数组。
示例：
let arr = ['apple', 'banana', 'orange', 'pear', 'grape'];
let newArr = arr.slice(1, 3);
console.log(newArr); // ['banana', 'orange']
console.log(arr); // ['apple', 'banana', 'orange', 'pear', 'grape']
2.concat()
将两个或多个数组合并成一个新数组，并返回新数组。不会修改原数组。
语法：
array.concat(array1, array2, ..., arrayN)
参数说明：
- array1, array2, …, arrayN：可选参数，表示要合并的一个或多个数组。
返回值：
该方法会返回一个新的数组，新数组中包含原数组和所有参数数组中的元素。
示例：
let arr1 = ['apple', 'banana'];
let arr2 = ['orange', 'pear'];
let arr3 = ['grape'];
let newArr = arr1.concat(arr2, arr3);
console.log(newArr); // ['apple', 'banana', 'orange', 'pear', 'grape']
console.log(arr1); // ['apple', 'banana']
console.log(arr2); // ['orange', 'pear']
console.log(arr3); // ['grape']
3.join()
将数组中的所有元素转换为一个字符串，并返回该字符串。不会修改原数组。
语法：
array.join(separator)
参数说明：
- separator：可选参数，表示元素之间的分隔符，默认为逗号。
返回值：
该方法会返回一个字符串，该字符串由数组中所有元素组成，元素之间使用separator分隔。
示例：
let arr = ['apple', 'banana', 'orange'];
let str1 = arr.join('-');
let str2 = arr.join();
console.log(str1); // 输出：'apple-banana-orange'
console.log(str2); // 输出：'apple,banana,orange'
4.indexOf()
查找指定的元素在数组中第一次出现的位置（索引）。不会修改原数组。
语法：
array.indexOf(searchElement, fromIndex)
参数说明：
- searchElement：要查找的元素
- fromIndex：可选参数，起始查找的索引
返回值：
返回指定元素在数组中第一次出现的位置，如果不存在则返回-1。
示例：
let arr = [1, 2, 3, 4, 5];
console.log(arr.indexOf(3)); // 输出：2
console.log(arr.indexOf(6)); // 输出：-1
console.log(arr.indexOf(3, 2)); // 输出：2 （从索引2开始查找）
console.log(arr.indexOf(3, 3)); // 输出：-1 （从索引3开始查找，但是没找到）
注意：
indexOf()方法使用“全等比较”（===）来判断元素是否相等，因此对于复杂类型的元素（如对象、数组等），只有在引用地址相同的情况下才能被认为是相等的。
5.lastIndexOf()
查找指定元素在数组中最后一次出现的位置（索引）。
其他同indexOf()方法。
三、数组迭代方法（不改变原数组）
1.filter()
筛选数组中符合条件的元素，返回一个新的数组。
语法：
array.filter(callback(element, index, array){ return 条件（布尔值）})
参数：
- callback：回调函数，用于判断数组中的每个元素是否满足条件，需要返回一个布尔值。回调函数接受以下三个参数：
- element：当前元素的值。
- index：当前元素的索引。
- array：原数组。
返回值：
- 返回一个新的数组，包含满足条件的元素。
示例：
let arr = [1, 2, 3, 4, 5];
let newArr = arr.filter(function(item) {
return item > 2;
});
console.log(newArr); // 输出：[3, 4, 5]
注意：
callback函数中不应该修改原始数组的值
2.reduce()
接受一个回调函数作为参数，可以将数组中的元素迭代为单个值。
语法：
array.reduce(callback(prev,element, index, array){ },initialValue)
其中，callback 函数接收四个参数：
- prev（累加器）：累加器累加回调函数的返回值。它是上一次调用回调函数时返回的值，或者是传递给 reduce() 方法的 initialValue。
- element（当前值）：当前正在处理的元素。
- index（当前索引）：当前正在处理的元素的索引。
- array（原数组）：调用 reduce() 方法的数组。
initialValue 参数是可选的，如果传递了 initialValue，则作为第一次调用 callback 函数时的 accumulator 值。如果没有传递，则将使用数组的第一个元素作为初始值。
reduce() 方法执行时，从数组的第一个元素开始迭代，依次传递每个元素给回调函数。在每次迭代时，回调函数返回的值将成为下一次迭代时的 prev值。
最后，reduce() 方法返回 prev 的值。如果数组是空的，并且没有传递 initialValue，那么它将抛出 TypeError。如果数组只有一个元素（无论是否传递了 initialValue），则不执行回调函数，直接将这个元素作为 reduce() 方法的返回值。
示例，使用 reduce() 方法计算数组中所有元素的和：
let arr = [1, 2, 3, 4, 5];
let sum = arr.reduce((prev, element) => {
return prev + element;
}, 0);
console.log(sum); // 输出 15
3.find()
查找数组中满足条件的第一个元素，并返回该元素的值。如果没有找到满足条件的元素，则返回 undefined。
语法：
array.find(callback(element, index, array){ return 条件（布尔值）})
其中，callback 函数接收三个参数：
- element（当前值）：当前正在处理的元素。
- index（索引）：当前正在处理的元素的索引。
- array（原数组）：调用 find() 方法的数组。
find() 方法执行时，从数组的第一个元素开始迭代，依次传递每个元素给回调函数。当回调函数返回 true 时，find() 方法返回该元素的值，并停止迭代。如果数组中没有满足条件的元素，则返回 undefined。
示例，使用 find() 方法查找数组中第一个大于 3 的元素：
let arr = [1, 2, 3, 4, 5];
let result = arr.find((element) => {
return element > 3;
});
console.log(result); // 输出 4
注意：
find() 方法只会返回第一个满足条件的元素，并不会返回所有满足条件的元素。如果需要查找所有满足条件的元素，可以使用 filter() 方法。
4.findIndex()
查找数组中满足条件的第一个元素，并返回该元素的索引。如果没有找到满足条件的元素，则返回 -1。
其他同find()方法。
5.forEach()
用于对数组中的每个元素执行一次指定的操作。该方法没有返回值，只是在数组的每个元素上执行指定的操作，替代了for循环使用。
语法：
array.forEach(callback(element, index, array){ })
其中，callback 函数接收三个参数：
- element（当前值）：当前正在处理的元素。
- index（索引）：当前正在处理的元素的索引。
- array（原数组）：调用 forEach() 方法的数组。
forEach() 方法会依次遍历数组中的每个元素，并将每个元素传递给 callback 函数，让其执行指定的操作。在遍历过程中，不会对数组进行修改。
示例，使用 forEach() 方法对数组中的每个元素进行打印：
let arr = [1, 2, 3, 4, 5];
arr.forEach((element) => {
console.log(element);
});
6.map()
对数组中的每个元素执行指定的操作，并将操作的结果存储在一个新的数组中。该方法返回一个新的数组，原数组不会被修改。
语法：
array.map(callback(element, index, array){ })
其中，callback 函数接收三个参数：
- element（当前值）：当前正在处理的元素。
- index（索引）：当前正在处理的元素的索引。
- array（原数组）：调用 map() 方法的数组。
map() 方法会依次遍历数组中的每个元素，并将每个元素传递给 callback 函数，让其执行指定的操作。在遍历过程中，将每个元素的操作结果存储在新的数组中，并返回该数组。
示例，使用 map() 方法将数组中的每个元素都平方，并将平方后的结果存储在新的数组中：
let arr = [1, 2, 3, 4, 5];
let res = arr.map((element) => {
return element * element;
});
console.log(res); // 输出 [1, 4, 9, 16, 25]
7.some()
检测数组中是否至少有一个元素满足指定条件。该方法返回一个布尔值，如果有至少一个元素满足条件，则返回 true，否则返回 false。
语法：
array.some(callback(element, index, array){return 条件 })
其中，callback 函数接收三个参数：
- element（当前值）：当前正在处理的元素。
- index（索引）：当前正在处理的元素的索引。
- array（原数组）：调用 some() 方法的数组。
some() 方法会依次遍历数组中的每个元素，并将每个元素传递给 callback 函数，让其执行指定的判断条件。如果有至少一个元素满足条件，则返回 true，否则返回 false。
示例，使用 some() 方法检测数组中是否存在数字5：
let arr = [1, 2, 5, 4, 5, 6, 5];
let res = arr.some((element) => {
console.log(element)
return element === 5;
});
console.log(res); // 输出 1 2 5 true
注意：
some() 方法只要找到满足条件的元素就会停止遍历，不会继续执行。
8.every()
检测数组中是否所有元素都满足指定条件。该方法返回一个布尔值，如果所有元素都满足条件，则返回 true，否则返回 false。
语法：
array.every(callback(element, index, array){return 条件 })
其中，callback 函数接收三个参数：
- element（当前值）：当前正在处理的元素。
- index（索引）：当前正在处理的元素的索引。
- array（原数组）：调用 every() 方法的数组。
every() 方法会依次遍历数组中的每个元素，并将每个元素传递给 callback 函数，让其执行指定的判断条件。如果所有元素都满足条件，则返回 true，否则返回 false。
示例，使用 every() 方法检测数组中是否所有元素都为奇数：
let arr = [1, 3, 4, 7, 9];
let res = arr.every((element) => {
console.log(element);
return element % 2 === 1
});
console.log(res); // 输出 1 3 4 false
注意：
every() 方法只要找到一个不满足条件的元素就会停止遍历，不会继续执行。
该篇文章属个人对javaScript中数组方法的理解，如有不当之处，还请批评指正。