当前位置：首页 > 全部内容 > 正文

梳理总结25个JavaScript数组操作方法实例

作者：青柠

时间：2026-10-25

浏览：183

本文系统梳理了25个常用的JavaScript数组操作方法，涵盖去重、切片、合并、查找、过滤、排序及扁平化等核心场景。通过具体代码实例，详细解析了splice、concat、map、filter、reduce、sort及flat等关键API的使用技巧与注意事项，帮助开发者高效处理数组数据。

文章目录

1. 删除数组重复项

var array=[1,3,4,5,6,4,3]
var setArray1=Array.from(new Set(array)) 
console.log(setArray1) // [1, 3, 4, 5, 6] 
var setArray2=[...new Set(array)] 
console.log(setArray2) // [1, 3, 4, 5, 6]

2. 获取数组的片段

使用 array.splice(start、remove or update、replace value)，指定从数组索引何处开始截取、操作多少个元素，并可选项提供替换值。

var array=[1,2,3,4,5,6]
array.splice(0,3,11,22,33) // [1, 2, 3]
console.log(array) // [11, 22, 33, 4, 5, 6]
var array=[1,2,3,4,5,6]
array.splice(0,3,11,22) // [1, 2, 3]
console.log(array) // [11, 22, 4, 5, 6]
var array=[1,2,3,4,5,6]
array.splice(0,1) // [1]
console.log(array) // [2, 3, 4, 5, 6]
var array=[1,2,3,4,5,6]
array.splice(2) // [3, 4, 5, 6]
console.log(array) //[1, 2]

3. Array.from 达到 .map 的效果

var array=[{name:"one",value:1},{name:"two",value:2},{name:"three",'value':3}]
Array.from(array,({name}) => name) 
console.log(array) // ["one", "two", "three"]
Array.from(array,({value}) => value) 
console.log(array) // [1, 2, 3]

4. 置空数组

var array=[1,2,3,4,5,6]
array.length=0
console.log(array) // []

5. 将数组转换为对象

var array=['one','two','three']
var obj={...array}
console.log(obj) // {0: "one", 1: "two", 2: "three"}

6. 用数据填充数组

var array=new Array(10).fill(0)
console.log(array)// [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]

7. 数组合并

使用 array.concat()，concat() 方法创建一个新的数组，而不改变原来的数组。

array.concat( ...array1，...array2，...]) 接受多个要连接的数组。

var array1=[1,2,3]
var array2=[4,5,6]
var array=[...array1,...array2]
console.log(array) // [1, 2, 3, 4, 5, 6]
var array=array1.concat(array2)
console.log(array) // [1, 2, 3, 4, 5, 6]

8. 求两个数组的交集

var array1=[2,4,6]
var array2=[1,2,3,4,5]
var repeatValues=array2.filter(item => array1.includes(item))
console.log(repeatValues) //  [2, 4]

9. 从数组中删除虚值

虚值包括 false, 0, '', null, NaN, undefined。

var array=[0,1,2,false,'',null,NaN,undefined]
var newArray=array.filter(Boolean)
console.log(newArray) // [1, 2]

10. 从数组中获取随机值

var array=[0,1,2,3,4,5,6]
var index=Math.floor(Math.random() * (array.length))
var value=array[index]
console.log(index) //6

11. 反转数组

var array=[1,2,3,4,5,6]
var reverseArray=array.reverse();
console.log(reverseArray) // [6, 5, 4, 3, 2, 1]

12. lastIndexOf() 方法与 indexOf() 方法

var array=[1,2,3,4,5,4,3,2,1]
var lastIndexOf=array.lastIndexOf(2)
console.log(lastIndexOf) // 7
var indexOf=array.indexOf(2)
console.log(indexOf) //1

13. 对数组中的所有值求和

var array=[1,2,3,4,5,6]
var sum= array.reduce((a,b) => a+b)
console.log(sum) // 21
var array=[1,2,3,4,5,6]
var sum=0
array.forEach(item => sum+=item)
console.log(sum) // 21
let array = [1, 2, 3, 4, 5, 6];
function computeSum(sum, number) {
       return sum + number;
 }
let sum = array.reduce(computeSum, 0);
 console.log(sum)  // 21

14. 数组的遍历

使用 for(const item of items) 循环遍历数组项。

let array=[1,2,3,4,5,6]
for(let item in array){
    console.log(item)
	// 0 1 2 3 4 5
}

使用 for(let i; i < array.length; i++) 循环递增索引，遍历数组项。

let array=[1,2,3,4,5,6]
for (let index = 0; index < array.length; index++) {
    let value=array[index]
    console.log(value) 
    // 0 1 2 3 4 5
}

使用 array.forEach(callback) 方法，在每个数组项上调用 callback 函数来遍历数组项。注意 break 无法终止迭代。

let array=[1,2,3,4,5,6]
array.forEach(function(item,index){ //item：元素 index：索引
    console.log(item,':',index)
})
1 ":" 0
2 ":" 1
3 ":" 2
4 ":" 3
5 ":" 4
6 ":" 5

15. 数组的映射

使用 Array.map() 创建一个新的映射数组，不改变原始数组，在每个数组项上使用 callback 调用结果来创建一个新数组。

let array=[1,2,3,4,5,6]
let newArray=array.map(item => {
    //返回新项。
    return item+1 
})
console.log(newArray) // [2, 3, 4, 5, 6, 7]

使用 Array.from() 创建一个新的映射数组，而不改变原始数组。适合从类似数组的对象进行映射。

let array=[1,2,3,4,5,6];
let newArray= Array.from(array,function(item){
    return item+1;
  })
console.log(newArray) // [2, 3, 4, 5, 6, 7]

16. 数组的拷贝

[...array]方法

let array=[1,2];
let clone =[...array]
console.log(clone) // [1, 2]
array===clone //false

使用 [].concat(array) 方法。

let array=[1,2];
let clone=[].concat(array)
console.log(clone) // [1, 2]
array===clone //false

使用 array.slice()) 方法。

let array=[1,2];
let clone=array.slice()
console.log(clone) // [1, 2]
array===clone //false

17. 数组元素的查找

使用 array.includes() 方法。

let array=[1,2,3,4,5,6]
array.includes(3) // true

使用 array.find() 返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

let arrray=[1,2,3,4,5,6]
function test(number) {
  return number % 2 === 0;
}
let value = arrray.find(test);
console.log(value) // 2

使用 array.indexOf() 从开始 0 索引开始查找，返回找到元素的索引值，如果找不到该项，则返回 -1。

let array=[1,2,3,4,5,6]
array.indexOf(2) //1

18. 查询数组

使用 array.every() 方法，每个项都通过‘检查’，则返回 true。

let array=[1,2,3,4,5,6]
array.every((item,index) => item % 2) // false
array.every((item,index) => item>0) // true

使用 array.some() 方法，每个项中只要一项通过‘检查’，则返回 true。

let array=[1,2,3,4,5,6]
array.some((item,index) => item>0) //true
array.some((item,index) => item % 2) //true

19. 数组的过滤

使用 array.filter() 创建一个新数组，而不改变原始数组。其包含通过所提供函数实现的测试的所有元素。

let array=[1,2,3,4,5,6]
let newArray= array.filter(item => item>3)
console.log(newArray) // [4, 5, 6]

20. 数组的插入

使用 array.push() 方法，将一个或多个项追加到数组的末尾，并返回新的长度。

使用 array.push() 会改变原数组。

使用 array.push(item1, item2, ..., itemN) 可以添加多个元素。

let array=[1,2,3,4,5,6]
let length= array.push(7) 
console.log(length) //7
console.log(array) //[1, 2, 3, 4, 5, 6, 7]

使用 array.unshift()  方法，将一个或多个项追加到数组的开头，返回数组的新长度。

let array=[1,2,3,4,5,6]
let length= array.unshift(0)
console.log(length) //7
console.log(array) //[0,1, 2, 3, 4, 5, 6]

通过组合 展开操作符 和数组字面量以不可变的方式在数组中插入项。

let array=[1,2,3,4,5,6]
let newArray array=[...array,7,8]
console.log(newArray) // [1, 2, 3, 4, 5, 6, 7, 8]
let array=[1,2,3,4,5,6]
let newArray array=[0,...array]
console.log(newArray) // [0,1, 2, 3, 4, 5, 6]

任何索引处插入元素

let array=[1,2,3,4,5,6]
array.splice(array.length,0,'增加一个')
console.log(newArray) // [1, 2, 3, 4, 5, 6, "增加一个"]
let array=[1,2,3,4,5,6]
let newArray=[...array.splice(0,1),'删除2',...array.splice(1)]
console.log(newArray) // [1, "删除2", 3, 4, 5, 6]

21. 删除数组元素

使用 array.pop() 方法，从数组中删除最后一个元素，然后返回该元素，会改变原数组。

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

使用 array.shift() 方法，从数组中删除第一个元素，然后返回该元素。会改变原数组。

let array=[1,2,3,4,5,6]
let value=array.shift()
console.log(value) //1
console.log(array) // [2, 3, 4, 5, 6]

使用 array.splice() 方法，从数组中删除元素，删除元素并插入新的元素。会改变原数组。

let array=[1,2,3,4,5,6]
array.splice(1,2)// [2, 3]
console.log(array) // [1, 4, 5, 6]
let array=[1,2,3,4,5,6]
array.splice(1,3,'删除2，3，4，插入234') //[2, 3, 4]
console.log(array) //  [1, "删除2，3，4，插入234", 5, 6]

通过组合 展开操作符 和数据字面量以不可变的方式从数组中删除项。

let array=[1,2,3,4,5,6]
let newArray=[...array.splice(0,1),...array.splice(4)]
	//array.splice(0,1) [1]  array : [2, 3, 4, 5, 6]
	//array.splice(4) [6] array: [2, 3, 4, 5]
console.log(newArray) //  [1, 6]

22. 清空数组

array.length 是保存数组长度的属性。除此之外，array.length 是可写的。

如果写一个小于当前长度的 array.length = newLength，多余的元素从数组中移除。

let array=[1,2,3,4,5,6]
array.length=3
console.log(array) // [1, 2, 3]
array.length=0
console.log(array) // []

使用 array.splice() 删除数组中的所有元素。

let array=[1,2,3,4,5,6]
array.splice(0)
 console.log(array) //[1,2,3,4,5,6]

23. 填充数组

使用 Array(length).fill(initial) 来初始化特定长度和初始值的数组。会改变原数组。

let array=[1,2,3,4,5,6]
array.fill(0)
console.log(array) // [0, 0, 0, 0, 0, 0]
var array=new Array(10).fill(0)
console.log(array)// [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]

使用 Array.from() 有助于初始化带有对象的特定长度的数组。

var array=[{name:"one",value:1},{name:"two",value:2},{name:"three",'value':3}]
Array.from(array,({name}) => name) 
console.log(array) // ["one", "two", "three"]
Array.from(array,({value}) => value) 
console.log(array) // [1, 2, 3]
let array=Array.from(Array(3),()=> {return {} })
console.log(array) // [{},{},{}]

24. 数组的扁平化

使用 array.flat([depth]) 方法，通过递归扁平属于数组的项直到一定深度来创建新数组。depth 可选参数默认为 1：array.flat() 创建一个新数组，而不会改变原始数组。

let array = [0, [1, 3], [2, 4]];
let  flatArray = array.flat();
console.log(flatArray) // [0, 1, 3, 2, 4]

25. 数组的排序

使用 array.sort() 以升序对数字进行排序。

let array=[4,6,7,9,3,2]
array.sort()
console.log(array) // [2, 3, 4, 6, 7, 9]

数 compare(a, b) 是一个自定义排序顺序的回调函数。如果比较 compare(a, b) 返回的结果：

  • 如果 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，就返回一个小于 0 的值。
  • 如果 a 等于 b，就返回 0。
  • 如果 a 大于 b，在排序后的数组中 a 应该出现在 b 之后，就返回一个大于 0 的值。

让偶数排在奇数前面。

let array=[4,6,7,9,3,2]
function compare(a, b) {
  //返回<0,则a在b之前出现
  if (a % 2 === 0 && b % 2 !== 0) {
    return -1;
  }
  //返回>0,则a在b之后出现
  if (a % 2 !== 0 && b % 2 === 0) {
    return 1;
  }
  return 0;
}
array.sort(compare)
console.log(array) // [4, 6, 2, 7, 9, 3]

让大于等于 4 的书排在前面。

let array=[1,2,3,4,5,6]
function compare(a,b){
     //返回>0,则a在b之后出现
    if(a<4 && b>=4){
    	return 11
    }
    //返回<0,则a在b之前出现
     if(a>=4 && b<4){
    	return -11
    }
    return 0
}
array.sort(compare)
console.log(array) // [4, 5, 6, 1, 2, 3]

到此这篇关于 JavaScript 数组操作方法实例梳理总结的文章就介绍到这了，更多相关 JS 数组操作 内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

实用工具推荐

电子包浆

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

使用 ›
图片压缩

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

使用 ›
作者最新文章

JS读取本地文件时报错或无响应的常见原因

let、const与var的区别：JavaScript变量声明最佳实践

JS中直接定义静态二维数组的字面量写法

JS 怎么查找字符串中所有匹配项的位置

JavaScript新手常犯的编码错误与最佳实践指南

相关文章
热门文章
更多
CSS text-transform与JS修改首字母大写的适用场景区别
JS中constructor属性判断数组存在哪些风险
JS正则替换中$1捕获组引用与字符串重组技巧
全栈开发中JavaScript与Java怎么协作？前后端技术栈配合解析
Node.js后端生成高强度随机字符串的方法
怎么在本地运行JavaScript脚本：Node.js下载安装与环境配置教程
JS正则表达式基础：字面量与RegExp构造函数的区别及常用元字符
JS 解压出现乱码或报错怎么解决？
JavaScript常见SyntaxError语法错误排查与修复方法
JS动态构建复杂嵌套JSON对象的方法