JavaScript 数组常用方法详解与使用指南

作者:木棉

时间:2026-10-22

浏览:327

本文系统介绍了 JavaScript 中常用的数组操作方法,涵盖 concat、copyWithin、entries、every、fill、filter、find、forEach、includes、indexOf、join、keys、map、pop/push、reduce/reduceRight、reverse、shift/unshift、slice、some、toLocaleString/toString 以及 splice 等。详细解析了各方法的参数定义、返回值类型、执行逻辑及注意事项,帮助开发者高效处理数组数据。

文章目录

数组基础操作方法:concat、copyWithin 与 entries

concat 方法用于合并数组。


var a = [1,2,3];
a.concat([4,5,6],7,8);//[1,2,3,4,5,6,7,8]

需要注意的是,调用该方法后,原数组 a 的内容保持不变,函数返回的是一个包含合并元素的新数组。

copyWithin 方法用于在数组内部将指定位置的元素复制到其他位置。

该方法接收三个参数。

target 为必需参数,指定开始替换数据的起始位置;start 为可选参数,指定开始读取数据的起始位置,默认为 0,若为负值则表示倒数;end 为可选参数,指定停止读取数据的位置(不包含该位置),默认等于数组长度,若为负值则表示倒数。

这三个参数均应为数值类型,若传入非数值,系统会自动将其转换为数值。


// 将 3 号位复制到 0 号位 
[1, 2, 3, 4, 5].copyWithin(0, 3, 4) 
// [4, 2, 3, 4, 5] 
// -2 相当于 3 号位, -1 相当于 4 号位 
[1, 2, 3, 4, 5].copyWithin(0, -2, -1) 
// [4, 2, 3, 4, 5] 
// 将 3 号位复制到 0 号位 
[].copyWithin.call({length: 5, 3: 1}, 0, 3) 
// {0: 1, 3: 1, length: 5} 
// 将 2 号位到数组结束,复制到 0 号位 
var i32a = new Int32Array([1, 2, 3, 4, 5]); 
i32a.copyWithin(0, 2); 
// Int32Array [3, 4, 5, 4, 5] 
// 对于没有部署 TypedArray 的 copyWithin 方法的平台 
// 需要采用下面的写法 
[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4); 
// Int32Array [4, 2, 3, 4, 5] 

数组遍历与筛选:every、fill、filter、find 与 forEach

entries 方法用于获取数组的键值对迭代器。


var a = [1,2,3];
var en = a.entries();
en.next().value;//[0.1];

该操作返回一个包含数组索引和对应值的迭代对象。

every 方法用于检测数组中的所有元素是否都满足指定条件。


function isBigEnough(element, index, array) {
 return (element >= 10);
}
var passed = [12, 5, 8, 130, 44].every(isBigEnough);
// passed is false
passed = [12, 54, 18, 130, 44].every(isBigEnough);
// passed is true

只有当每个元素通过测试函数时返回 true,该方法才返回 true;否则返回 false。

fill 方法用于填充数组。


[1, 2, 3].fill(4)   // [4, 4, 4]
[1, 2, 3].fill(4, 1)   // [1, 4, 4]
[1, 2, 3].fill(4, 1, 2)  // [1, 4, 3]
[1, 2, 3].fill(4, 1, 1)  // [1, 2, 3]
[1, 2, 3].fill(4, -3, -2) // [4, 2, 3]
[1, 2, 3].fill(4, NaN, NaN) // [1, 2, 3]
Array(3).fill(4);   // [4, 4, 4]
[].fill.call({length: 3}, 4) // {0: 4, 1: 4, 2: 4, length: 3}

此操作直接修改原数组本身。

filter 方法用于筛选数组元素。


function isBigEnough(value) {
 return value >= 10;
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered is [12, 130, 44]

该方法返回一个由通过测试的元素组成的新数组。

find 方法用于查找数组中满足条件的元素。

该方法返回数组中第一个满足提供测试函数的元素的值,若未找到则返回 undefined。


function isBigEnough(element) {
 return element >= 15;
}
[12, 5, 8, 130, 44].find(isBigEnough); // 130

findIndex 方法用于查找满足条件元素的索引。

findIndex() 方法返回数组中第一个满足提供测试函数的元素的索引,若未找到则返回 -1。


function isBigEnough(element) {
 return element >= 15;
}
[12, 5, 8, 130, 44].findIndex(isBigEnough); // 3

forEach 方法用于遍历数组。


let a = ['a', 'b', 'c'];
a.forEach(function(element) {
 console.log(element);
});
// a
// b
// c
//语法
array.forEach(callback(currentValue, index, array){
 //do something
}, this)
array.forEach(callback[, thisArg])

callback 是 forEach 接收的处理函数。


为数组中每个元素执行的函数,该函数接收三个参数:
currentValue(当前值)
数组中正在处理的当前元素。
index(索引)
数组中正在处理的当前元素的索引。
array
forEach()方法正在操作的数组。
thisArg可选
可选参数。当执行回调 函数时用作this的值(参考对象)

注意:forEach 循环无法通过 break 或 continue 中止或跳出,除非抛出异常。若需提前终止,使用 forEach 并不合适,建议改用普通循环。若需判断数组元素是否符合某条件并返回布尔值,可使用 Array.every 或 Array.some。若环境支持,find() 或 findIndex() 也可用于真值测试的提早终止。

数组查找与映射:includes、indexOf、join、keys 与 map

includes 方法用于判断数组是否包含指定元素。


arr.includes(searchElement)
arr.includes(searchElement, fromIndex)

该方法接受参数。

searchElement 为需要查找的元素值。

需要查找的元素值。

fromIndex 为可选参数。

可选。

指定从该索引处开始查找 searchElement。

。若为负值,则按升序从 array.length + fromIndex 的索引开始搜索,默认为 0。

返回值类型。

返回一个 Boolean 值。


[1, 2, 3].includes(2);  // true
[1, 2, 3].includes(4);  // false
[1, 2, 3].includes(3, 3); // false
[1, 2, 3].includes(3, -1); // true
[1, 2, NaN].includes(NaN); // true

indexOf 方法用于查找元素索引。


arr.indexOf(searchElement)
arr.indexOf(searchElement[, fromIndex = 0])

该方法接受参数。

searchElement 为要查找的元素。

要查找的元素。

fromIndex 为开始查找的位置。

开始查找的位置。若该索引值大于或等于数组长度,则不会在数组里查找,返回 -1。若参数中提供的索引值是一个负值,则将其作为数组末尾的一个抵消,即 -1 表示从最后一个元素开始查找,-2 表示从倒数第二个元素开始查找,以此类推。注意:即使索引值为负,查询仍从前向后进行。若抵消后的索引值仍小于 0,则整个数组都将被查询,其默认值为 0。

返回值说明。

返回首个被找到的元素在数组中的索引位置;若没有找到则返回 -1。


let a = [2, 9, 7, 8, 9]; 
a.indexOf(2); // 0 
a.indexOf(6); // -1
a.indexOf(7); // 2
a.indexOf(8); // 3
a.indexOf(9); // 1
if (a.indexOf(3) === -1) {
 // element doesn't exist in array
}

join 方法用于将数组元素连接为字符串。


str = arr.join()
// 默认为 ","
str = arr.join("")
// 分隔符 === 空字符串 ""
str = arr.join(separator)
// 分隔符

keys 方法用于获取数组索引。

keys() 方法返回一个新的 Array 迭代器,它包含数组中每个索引的键。


let arr = ["a", "b", "c"];
let iterator = arr.keys();
// undefined
console.log(iterator);
// Array Iterator {}
console.log(iterator.next()); 
// Object {value: 0, done: false}
console.log(iterator.next()); 
// Object {value: 1, done: false}
console.log(iterator.next()); 
// Object {value: 2, done: false}
console.log(iterator.next()); 
// Object {value: undefined, done: true}

map 方法用于映射数组元素。

map() 方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。


let array = arr.map(function callback(currentValue, index, array) { 
 // Return element for new_array 
}[, thisArg])
let numbers = [1, 5, 10, 15];
let doubles = numbers.map((x) => {
 return x * 2;
});
// doubles is now [2, 10, 20, 30]
// numbers is still [1, 5, 10, 15]
let numbers = [1, 4, 9];
let roots = numbers.map(Math.sqrt);
// roots is now [1, 2, 3]
// numbers is still [1, 4, 9]

callback 是生成新数组元素的函数。

生成新数组元素的函数,使用三个参数:

currentValue 为 callback 的第一个参数。

callback 的第一个参数,数组中正在处理的当前元素。

index 为 callback 的第二个参数。

callback 的第二个参数,数组中正在处理的当前元素的索引。

array 为 callback 的第三个参数。

callback 的第三个参数,map 方法被调用的数组。

thisArg 为可选参数。

可选的。执行 callback 函数时使用的 this 值。

返回值说明。

返回一个新数组,每个元素都是回调函数的结果。

数组增删与归并:pop/push、reduce/reduceRight 与 reverse

pop 和 push 方法用于数组末尾操作。

pop() 方法从数组中删除最后一个元素,并返回该元素的值。此方法会更改数组的长度。

push() 方法将一个或多个元素添加到数组的末尾,并返回数组的新长度。

arr.push(element1, ..., elementN)

合并两个数组的示例。

该示例使用 apply() 添加第二个数组的所有元素。

注意:当第二个数组(如示例中的 moreVegs)太大时,不要使用此方法来合并数组,因为函数能够接受的参数个数是有限制的。具体可参考 apply() 的相关说明。


var vegetables = ['parsnip', 'potato'];
var moreVegs = ['celery', 'beetroot'];
// 将第二个数组融合进第一个数组
// 相当于 vegetables.push('celery', 'beetroot');
Array.prototype.push.apply(vegetables, moreVegs);
console.log(vegetables); 
// ['parsnip', 'potato', 'celery', 'beetroot']

reduce 和 reduceRight 方法用于数组归并。

reduce() 方法对累加器和数组中的每个元素(从左到右)应用一个函数,将其减少为单个值。


array.reduce(function(accumulator, currentValue, currentIndex, array), initialValue)
var total = [0, 1, 2, 3].reduce(function(sum, value) {
 return sum + value;
}, 0);
// total is 6
var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {
 return a.concat(b);
}, []);
// flattened is [0, 1, 2, 3, 4, 5]

callback 是执行数组中每个值的函数。

执行数组中每个值的函数,包含四个参数

accumulator 为上一次调用回调返回的值。

上一次调用回调返回的值,或者是提供的初始值(initialValue)。

currentValue 为数组中正在处理的元素。

数组中正在处理的元素。

currentIndex 为数据中正在处理的元素索引。

数据中正在处理的元素索引,如果提供了 initialValue,从 0 开始;否则从 1 开始。

array 为调用 reduce 的数组。

调用 reduce 的数组。

initialValue 为可选项。

可选项,其值用于第一次调用 callback 的第一个参数。如果没有设置初始值,则将数组中的第一个元素作为初始值。空数组调用 reduce 时没有设置初始值将会报错。

PS: 与 reduceRight() 和 reduce() 的执行方向相反。

reverse 方法用于反转数组。

reverse 方法颠倒数组中元素的位置,并返回该数组的引用。

数组切片与修改:shift/unshift、slice、some 及 splice

shift 与 unshift 方法用于数组头部操作。

shift() 方法从数组中删除第一个元素,并返回该元素的值。此方法会更改数组的长度。

unshift() 方法将一个或多个元素添加到数组的开头,并返回新数组的长度。

slice 方法用于截取数组。

slice() 方法返回一个从开始到结束(不包括结束)选择的数组的一部分浅拷贝到一个新数组对象。原始数组不会被修改。


arr.slice();
//[0,end];
arr.slice(start);
//[start,end];
arr.slice(start,end);
//[start,end];

slice 不修改原数组,只会返回一个浅复制了原数组中的元素的一个新数组。原数组的元素会按照下述规则拷贝:

如果该元素是个对象引用(不是实际的对象),slice 会拷贝这个对象引用到新的数组里。两个对象引用都引用了同一个对象。如果被引用的对象发生改变,则新的和原来的数组中的这个元素也会发生改变。

对于字符串、数字及布尔值来说(不是 String、Number 或者 Boolean 对象),slice 会拷贝这些值到新的数组里。在别的数组里修改这些字符串或数字或是布尔值,将不会影响另一个数组。

如果向两个数组任一中添加了新元素,则另一个不会受到影响。

some 方法用于检测数组元素。

some() 方法测试数组中的某些元素是否通过由提供的函数实现的测试。


const isBiggerThan10 = (element, index, array) => {
 return element > 10;
}
[2, 5, 8, 1, 4].some(isBiggerThan10); 
// false
[12, 5, 8, 1, 4].some(isBiggerThan10); 
// true

toLocaleString 与 toString 方法用于数组转字符串。

toLocaleString() 返回一个字符串表示数组中的元素。数组中的元素将使用各自的 toLocaleString 方法转成字符串,这些字符串将使用一个特定语言环境的字符串(例如一个逗号 ",")隔开。


var number = 1337;
var date = new Date();
var myArr = [number, date, "foo"];
var str = myArr.toLocaleString(); 
console.log(str); 
// 输出 "1,337,2017/8/13 下午8:32:24,foo"
// 假定运行在中文(zh-CN)环境,北京时区
var a=1234
a.toString()
//"1234"
a.toLocaleString()
//"1,234"
//当数字是四位及以上时,toLocaleString()会让数字三位三位一分隔,像我们有时候数字也会三位一个分号
var sd=new Date()
sd
//Wed Feb 15 2017 11:21:31 GMT+0800 (CST)
sd.toLocaleString()
//"2017/2/15 上午11:21:31"
sd.toString()
//"Wed Feb 15 2017 11:21:31 GMT+0800 (CST)"

数组基础操作方法:concat、copyWithin 与 entries

splice 方法用于修改数组内容。

splice() 方法通过删除现有元素和/或添加新元素来更改一个数组的内容。


array.splice(start)
array.splice(start, deleteCount) 
array.splice(start, deleteCount, item1, item2, ...)

start 为指定修改的开始位置。

指定修改的开始位置(从 0 计数)。如果超出了数组的长度,则从数组末尾开始添加内容;如果是负值,则表示从数组末位开始的第几位(从 1 计数)。

deleteCount 为可选参数。

整数,表示要移除的数组元素的个数。如果 deleteCount 是 0,则不移除元素。这种情况下,至少应添加一个新元素。如果 deleteCount 大于 start 之后的元素的总数,则从 start 后面的元素都将被删除(含第 start 位)。

如果 deleteCount 被省略,则其相当于 (arr.length - start)。

item1, item2, ... 为可选参数。

要添加进数组的元素,从 start 位置开始。如果不指定,则 splice() 将只删除数组元素。

返回值说明。

由被删除的元素组成的一个数组。如果只删除了一个元素,则返回只包含一个元素的数组。如果没有删除元素,则返回空数组。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章