(总结)js中操作数组的小技巧

406 阅读9分钟

1.for....in

遍历数组,循环拿到的是数组的每一个元素的下标。

var arr1 = [1,2,3,4]
for(var index in arr1){
   console.log(index,arr1[index])
}

2.for....of

遍历数组,循环拿到的是数组的每一个元素。

var arr1 = [1,2,3,4]
for(var item of arr1){
   console.log(item)
}

3.map()

map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。

map() 方法按照原始数组元素顺序依次处理元素。

**注意:**map() 不会对空数组进行检测。map() 不会改变原始数组。

**用法:**arrayObject.map( function(currentValue,index,arr), thisValue )。

**function(currentValue,index,arr):**必选。数组中的每个元素都会执行这个函数。

**thisValue:**可选,对象作为该执行回调时使用,传递给函数,用作 "this" 的值。如果不写 ,"this" 的值为 "undefined"。

var arr1 = [1,2,3,4]
var arr2 = arr1.map(item => item*2)
console.log(arr1)//[2, 4, 6, 8]
console.log(arr2)//[2, 4, 6, 8]

4.forEach()

forEach() 方法按顺序为数组中的每个元素调用一次函数。

注意: forEach() 对于空数组是不会执行回调函数的。

**用法:**arrayObject.forEach( function(currentValue,index,arr), thisValue )。

**function(currentValue,index,arr):**必选。数组中的每个元素都会执行这个函数。

**thisValue:**可选,对象作为该执行回调时使用,传递给函数,用作 "this" 的值。如果不写 ,"this" 的值为 "undefined"。

var arr1 = [1,2,3,4]
arr1.forEach(function(item,index){
  console.log(index,item)
})

5.filter()

filter() 方法遍历数组的所有元素并按指定的条件进行判断,将满足条件的元素作为一个新的数组返回。

注意: filter() 不会对空数组进行检测。 filter() 不会改变原始数组。

**用法:**arrayObject.filter( function(currentValue,index,arr), thisValue )。

**function(currentValue,index,arr):**必选。数组中的每个元素都会执行这个函数。

**thisValue:**可选,对象作为该执行回调时使用,传递给函数,用作 "this" 的值。如果不写 ,"this" 的值为 "undefined"。

var arr1 = [1,2,3,4]
var arr2 = arr1.filter(item => {
   if (item>2) {
       return item
   }
})
console.log(arr2)//[3, 4]

6.fill()

fill() 方法用于将一个固定值替换数组的元素。

**用法:**arrayObject.fill(value,startIndex, endIndex)

**value:**必选,需要替换到数组中的值。

**startIndex:**可选,被替换元素的位置。如果不设置,则从第一个元素开始替换。

**endIndex:**可选,结束替换的位置。如果不设置,则从第一个被指定的元素开始替换,直到后面的元素全部替换。

var arr1 = [1,2,3,4]

arr1.fill(5)
console.log(arr1)//[5,5,5,5]

arr1.fill(5,1)
console.log(arr1)//[1,5,5,5]

arr1.fill(5,1,2)
console.log(arr1)//[1,5,3,4]

7.every()

every() 方法用于检测数组所有元素是否都符合指定条件(通过函数提供)。

如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测。如果所有元素都满足条件,则返回 true。

**注意:**every() 不会对空数组进行检测。every() 不会改变原始数组。

**用法:**arrayObject.every( function(currentValue,index,arr), thisValue )。

**function(currentValue,index,arr):**必选。数组中的每个元素都会执行这个函数。

**thisValue:**可选,对象作为该执行回调时使用,传递给函数,用作 "this" 的值。如果不写 ,"this" 的值为 "undefined"。

var arr1 = [1,2,3,4]
console.log(arr1.every(item => item < 3))//false
console.log(arr1.every(item => item < 5))//true

8.some()

some() 方法用于检测数组中的元素是否满足指定条件(函数提供)。

some() 方法会依次执行数组的每个元素:如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。如果没有满足条件的元素,则返回false。

注意: some() 不会对空数组进行检测。 some() 不会改变原始数组。

**用法:**arrayObject.some( function(currentValue,index,arr), thisValue )。

**function(currentValue,index,arr):**必选。数组中的每个元素都会执行这个函数。

**thisValue:**可选,对象作为该执行回调时使用,传递给函数,用作 "this" 的值。如果不写 ,"this" 的值为 "undefined"。

var arr1 = [1,2,3,4]
console.log(arr1.some(item => item > 5))//false
console.log(arr1.some(item => item < 5))//true

9.push()

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

注意: 新元素将添加在数组的末尾。此方法改变数组的长度。

**用法:**arrayObject.push( item1,...,itemN )。

**item1,...,itemN:**可选,向数组起始位置添加一个或者多个元素。

var arr1 = [1,2,3,4]
var arr2 = [1,2,3,4]

arr1.push(5)
console.log(arr1)// (5) [1,2,3,4,5]

arr2.push({
   id:1,
   num:5
})
console.log(arr2)// (5) [1,2,3,4,{id:1,num:5}]

10.unshift()

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

注意: 该方法将改变数组的数目。

**用法:**arrayObject.unshift( item1,...,itemN )。

**item1,...,itemN:**可选,向数组起始位置添加一个或者多个元素。

var arr1 = [1,2,3,4]
var arr2 = [1,2,3,4]

arr1.unshift(5)
console.log(arr1)

arr2.unshift({
    id:1,
    num:5
})
console.log(arr2)

11.shift()

shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值。

注意: 此方法改变数组的长度!

**用法:**arrayObject.shift()。

var arr1 = [1,2,3,4]
var delStr = arr1.shift()
console.log(arr1,delStr)

12.pop()

pop() 方法用于删除数组的最后一个元素并返回删除的元素。

**注意:**此方法改变数组的长度!

**用法:**arrayObject.pop()。

var arr1 = [1,2,3,4]
var delStr = arr1.pop()
console.log(arr1,delStr)

13.splice()

splice() 方法用于添加或删除数组中的元素。

**注意:**这种方法会改变原始数组。

**用法:**arrayObject.splice( index, num, item1,...,itemN )。

**index:**必须,需要删除或开始插入的元素下标。

**num:**可选,需要删除的元素个数。

**item1,...,itemN:**可选,需要添加的元素。

//删除元素
var arr1 = [1,2,3,4]
arr1.splice(0,2)
console.log(arr1)// (2) [3,4]

//添加元素
var arr1 = [1,2,3,4]
arr1.splice(1,0,5,6,7)
console.log(arr1)

14.slice()

slice() 方法可从已有的数组中返回选定的元素。

slice() 方法可通过下标提取字符串的某个部分,并以新的字符串返回被提取的部分,被提取的部分包含起始下标的值,不包含结束下标的值。

注意: slice() 方法不会改变原始数组。

**用法:**arrayObject.slice( startIndex, endIndex )。

**startIndex:**可选,开始选取的元素的下标。如果为负数,则从原数组中的倒数第几个元素开始提取,slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素(包含最后一个元素)。

**endIndex:**可选,结束选取的元素的下标。如果不指定,那么切分的数组包含从 start 到数组结束的所有元素。如果为负数, 则在原数组中的倒数第几个元素结束抽取。slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素(不包含最后一个元素,也就是只有倒数第二个元素)。

var arr1 = [1,2,3,4]
var arr2 = arr1.slice(0,2)
console.log(arr1,arr2)

15.find()

find() 方法返回符合判断条件的数组的第一个元素的值。

find() 方法为数组中的每个元素都会调用一次函数执行:当数组中的元素符合判断条件时,返回该元素,之后的元素不会再调用执行函数。如果没有符合条件的元素则返回 undefined。

**注意:**find() 对于空数组,函数不会执行。 find() 不会改变数组的原始值。

**用法:**arrayObject.find( function(currentValue,index,arr), thisValue )。

**function(currentValue,index,arr):**必选。数组中的每个元素都会执行这个函数。

**thisValue:**可选,对象作为该执行回调时使用,传递给函数,用作 "this" 的值。如果不写 ,"this" 的值为 "undefined"。

var arr1 = [1,2,3,4]
var str1 = arr1.find(item => item > 2)
console.log(str1)//3

16.findIndex()

findIndex() 方法返回符合判断条件的数组的第一个元素下标位置。

findIndex() 方法为数组中的每个元素都调用一次函数执行:当数组中的元素符合判断条件时,返回该元素的索引位置,之后的值不会再调用执行函数。如果没有符合条件的元素则返回 -1。

**注意:**findIndex() 对于空数组,函数不会执行。 findIndex() 不会改变数组的原始值。

**用法:**arrayObject.findIndex( function(currentValue,index,arr), thisValue )。

**function(currentValue,index,arr):**必选。数组中的每个元素都会执行这个函数。

**thisValue:**可选,对象作为该执行回调时使用,传递给函数,用作 "this" 的值。如果不写 ,"this" 的值为 "undefined"。

var arr1 = [1,2,3,4]
var str1 = arr1.findIndex(item => item > 2)
console.log(str1)//2

17.concat()

concat() 方法用于连接两个或多个数组。

该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。

**用法:**arrayObject.concat(arr1, arr2, ...., arrN)。

**arr1, arr2, ...., arrN:**依次需要连接的数组。

var arr1 = [1,2,3,4]
var arr2 = ['cat','pig','dog']
var arr3 = ['red','green','yellow','black']
var arr4 = arr1.concat(arr2,arr3)
console.log(arr4)

18.toString()

toString() 方法可把数组转换为字符串,并返回结果。

注意: 数组中的元素之间用逗号分隔。

**用法:**arrayObject.toString()。

var arr1 = [1,2,3,4]
console.log(arr1.toString())//1,2,3,4

19.join()

join() 方法可把数组转换为字符串,并返回结果。

注意: 数组中的元素之间用逗号分隔。

**用法:**arrayObject.join()。

var arr1 = [1,2,3,4]
console.log(arr1.join())//1,2,3,4

20.sort()

sort() 方法可对数组的元素进行排序。

排序顺序可以是字母或数字,并按升序或降序。

默认排序顺序为按字母升序。

注意: 这种方法会改变原始数组!

**用法:**arrayObject.sort(sortfunction)。

**sortfunction:**可选,主要是规定排序顺序。必须是函数。

var arr1 = [4,1,3,2]
console.log(arr1.sort())//[1,2,3,4]

21.delete

delete 可以删除数组的元素,但是数组长度仍然不会改变,该方法一般用于删除对象元素比较合适。

**注意:**delete 后面是空格。

**用法:**delete arrayObject[index] 。

**index:**数组元素的索引。

var arr1 = [1,2,3,4]
delete arr1[2]
console.log(arr1)

22.Array.isArray()

isArray() 方法用于判断一个对象是否为数组。

如果对象是数组返回 true,否则返回 false。

**用法:**Array.isArray(arrayObject)

var arr1 = [1,2,3,4]
var str1 = '1234'
console.log(Array.isArray(arr1))//true
console.log(Array.isArray(str1))//false

23.Array.from()

from() 方法用于将非数组的对象转换为数组。

如果对象是数组返回 true,否则返回 false。

**用法:**Array.from(obj, mapFunction, thisValue)

**obj:**必选,需要被转换成数组的对象。

**mapFunction:**可选,数组中每个元素要调用的函数。

**thisValue:**可选,映射函数(mapFunction)中的 this 对象。

var str1 = '1234'
console.log(Array.from(str1))

或生成指定长度数组

// key+1第一个开始数
var arr = Array.from({length:10},(value,key) => key+1)
console.log(arr)

24.new Set()

new Set() 方法可用于数组去重。

可以搭配 Array.from() 或扩展运算符...达到去重的效果。

**用法:**new Set(arrayObject)

var arr1 = [1,2,3,4,2,1,3]
var arr2 = new Set(arr1)
var arr3 = Array.from(arr2)
var arr4 = [...arr2]
console.log(arr2)
console.log(arr3) 
console.log(arr4) 

25.reverse()

reverse() 方法用于颠倒数组中元素的顺序。

**用法:**arrayObject.reverse()

var arr1 = [1,2,3,4]
console.log(arr1.reverse())//[4, 3, 2, 1]

26.indexOf()

indexOf() 方法可返回数组中某个指定的元素的位置。

该方法将从头到尾地检索数组,看它是否含有对应的元素。开始检索的位置在数组 start 处或数组的开头(没有指定 start 参数时)。如果找到一个 item,则返回 item 的第一次出现的位置。开始位置的索引为 0。

如果在数组中没找到指定元素则返回 -1。

**用法:**arrayObject.indexOf(item,startIndex)

**item:**必选,要检索的元素。

**startIndex:**可选,开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如果省略该参数,则将从字符串的首字符开始检索。

var arr1 = [1,2,3,4]
var index1 = arr1.indexOf(2)
var index2 = arr1.indexOf(2,3)
console.log(index1)//2
console.log(index2)//-1

27.lastIndexOf()

lastIndexOf() 方法可返回一个指定的元素在数组中最后出现的位置,从该字符串的后面向前查找。

如果要检索的元素没有出现,则该方法返回 -1。

该方法将从尾到头地检索数组中指定元素 item。开始检索的位置在数组的 start 处或数组的结尾(没有指定 start 参数时)。如果找到一个 item,则返回 item 从尾向前检索第一个次出现在数组的位置。数组的索引开始位置是从 0 开始的。

如果在数组中没找到指定元素则返回 -1。

**用法:**arrayObject.lastIndexOf(item,startIndex)

**item:**必选,要检索的元素。

**startIndex:**可选,开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如果省略该参数,则将从字符串的最后一个字符处开始检索。

var arr1 = [1,2,3,4,2,5]
var index1 = arr1.indexOf(2)
var index2 = arr1.indexOf(2,3)
console.log(index1)//1
console.log(index2)//4

28.valueOf()

valueOf() 方法返回 Array 对象的原始值。

该原始值由 Array 对象派生的所有对象继承。

valueOf() 方法通常由 JavaScript 在后台自动调用,并不显式地出现在代码中。

注意: valueOf() 方法不会改变原数组。

**用法:**arrayObject.valueOf()

var arr1 = [1,2,3,4]
var arr2 = arr1.valueOf()
console.log(arr2)//[1,2,3,4]

29.includes()

includes() 方法用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false。

**用法:**arrayObject.includes(obj, startIndex)

obj: 必须。需要查找的元素。

**startIndex:**可选。从该索引处开始查找 searchElement。如果为负值,则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。

var arr1 = [1,2,3,4]
console.log(arr1.includes(2))//true
console.log(arr1.includes(2,2))//false

30.reduce()

reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。

reduce() 可以作为一个高阶函数,用于函数的 compose。

**注意:**reduce() 对于空数组是不会执行回调函数的。

**用法:**arrayObject.reduce( function(total, currentValue, currentIndex, arr),initialValue)。

**function(total, currentValue, currentIndex, arr):**必选。数组中的每个元素都会执行这个函数。

**initialValue:**可选,传递给函数的初始值。

var arr1 = [1,2,3,4]
var sum = arr1.reduce((a,b) => {
   console.log(a,b)// 1,2  3,3  6,4
   return a + b
})
console.log("result:" + sum)// 10

31.reduceRight()

reduceRight() 方法的功能和 reduce() 功能是一样的,不同的是 reduceRight() 从数组的末尾向前将数组中的数组项做累加。

**注意:**reduce() 对于空数组是不会执行回调函数的。

**用法:**arrayObject.reduceRight( function(total, currentValue, currentIndex, arr),initialValue)。

**function(total, currentValue, currentIndex, arr):**必选。数组中的每个元素都会执行这个函数。

**initialValue:**可选,传递给函数的初始值。

var arr1 = [1,2,3,4]
var sum = arr1.reduceRight((a,b) => {
	console.log(a,b)// 4,3  7,2  9,1
    return a + b
})
console.log("result:" + sum)// 10

32.copyWithin()

copyWithin() 方法用于从数组的指定位置拷贝元素到数组的另一个指定位置中。

**用法:**arrayObject.copyWithin(target, startIndex, endIndex)

**target:**必选。复制到指定目标索引位置。

**startIndex:**可选。元素复制的起始位置。

**endIndex:**可选。停止复制的索引位置 (默认为 array.length)。如果为负值,表示倒数。

var arr1 = [1,2,3,4,5,6,7]
console.log(arr1.copyWithin(2,0,2)) // (7) [1,2,3,4,5,6,7]

33.entries()

entries() 方法返回一个数组的迭代对象,该对象包含数组的键值对 (key/value)。

迭代对象中数组的索引值作为 key, 数组元素作为 value。

**用法:**arrayObject.entries()

var arr1 = [1,2,3,4]
console.log(arr1.entries())

34.keys()

keys() 方法用于从数组创建一个包含数组键的可迭代对象。

如果对象是数组返回 true,否则返回 false。

**用法:**arrayObject.keys()

var arr1 = [1,2,3,4]
var key = arr1.keys()
console.log(key)

35.new Array()

利用new Array创建指定长度数组

let arr1 = new Array(10).join(',').split(',') // (10) ['', '', '', '', '', '', '', '', '', '']
let arr2 = new Array(10).fill('')  // (10) ['', '', '', '', '', '', '', '', '', '']
let arr3 = [...new Array(10).keys()] // (10) [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]