JavaScript数组操作方法实例代码分析

这篇文章主要介绍了javascript数组操作方法实例代码分析的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇JavaScript数组操作方法实例代码分析文章都会有所收获，下面我们一起来看看吧。

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=0console.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) // 7var 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) // 21var array=[1,2,3,4,5,6]var sum=0array.forEach(item => sum+=item)console.log(sum) // 21let 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 ":" 02 ":" 13 ":" 24 ":" 35 ":" 46 ":" 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) // falsearray.every((item,index) => item>0) // true

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

let array=[1,2,3,4,5,6]array.some((item,index) => item>0) //truearray.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) //7console.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) //7console.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) //6console.log(array) // [1, 2, 3, 4, 5]

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

let array=[1,2,3,4,5,6]let value=array.shift()console.log(value) //1console.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=3console.log(array) // [1, 2, 3]array.length=0console.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数组操作方法实例代码分析”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“JavaScript数组操作方法实例代码分析”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网精选频道。