javascript 最全的数组方法总结

第一次在掘金文章，总结一下 js 的数组的一些经常使用的方法，之后开发的时候若是忘了相关方法的语法，看这篇文章就够啦～～

includes

该方法用于判断数组中是否存在某个元素

const arr = [1, 2, 3, 4, 5]

const includeNum4 = arr.includes(4)

const includeNum7 = arr.includes(7)

=> includeNum4 = true  includeNum7 = false
复制代码

forEach()

这是最经常使用的用来遍历数组的方法，须要注意的是该方法不会改变原数组，并且没有返回值。

const arr = [1,3,4,5,6,8]
arr.forEachI(item => {
  console.log(item)
})
复制代码

map()

map() 也是经常使用来遍历的方法，该方法会返回一个新的数组，但不会改变原数组，默认返回 undefined

const arr = [1,5,3,2,66]
const newArr = arr.map(item => item + 1)

=> newArr = [2,6,4,3,67]

若是没有显式跟隐式返回值的话，获得的数组是全部元素都为 undefined 的数组

const arr = [1,5,3]
const newArr = arr.map((item, index)=> {console.log(item, index)})

=> newArr = [undefined, undefined, undefined]

在 react 中这也经常使用来遍历生成 dom 节点，相信都很熟悉

const data = [1,2,3,7]

{
  data.map((item, index) => (
    <div key={index + Math.random()}>{item}</div>
  ))
}

map 遍历以后尽可能不用 index 做为返回值，最好用元素的 id 等

复制代码

find()

该方法根据检索条件，找到数组中第一个知足条件的元素，若找不到则返回 undefined

const arr = [1,5,3,22,6]
const bigNum = arr.find(item => item > 6)

=> bigNum = 22
复制代码

findIndex()

该方法与 find() 相似根据检索条件，不一样的是该方法返回的是索引

const arr = [1,5,3,22,6]
const bigNumIndex = arr.findIndex(item => item > 6)

=> bigNumIndex = 3
复制代码

filter()

该方法顾名思义，这个方法是用来过滤的，该方法返回一个新数组，不改变原数组

const arr = [1,5,3,22,6]
const filterItem = arr.filter(item => item % 2 === 0)

=> filterItem = [22,6]
复制代码

push() 和 pop()

push() 方法在数组末尾添加一个元素，返回数组的长度
const arr = [1,3,5]
const pushArrLen = a.push(7)

=> arr = [1,3,5,7]  pushArrLen = 4

pop() 方法删除数组最后一个元素并返回该元素
const arr = [1,3,5]
const popArrLen = a.pop()

=> arr = [1,3]  popArrLen = 5

复制代码

unshift() 和 shift()

unshift() 方法在数组开头添加一个元素，返回数组的长度
const arr = [1,3,5]
const unshiftArrLen = arr.unshift(7)

=> arr = [7,1,3,5]  unshiftArrLen = 4

shift() 方法删除数组第一个元素并返回该元素
const arr = [1,3,5]
const shiftArrLen = a.pop()

=> arr = [3,5]  shiftArrLen = 1

复制代码

concat() 方法

concat() 方法在一个数组后面拼接新的元素，可接收 n 个参数，参数能够是任意数据类型，若是是数组，则将数组跟原数组拼接，若是是其余数据类型，则将该元素添加到原数组后面

该方法不改变原数组，会返回拼接好的新数组，所以能够 执行 链式操做

const arr = [1,3,5]

const concatArr = arr.concat(2,4).concat(6,7,8).concat('hello world').concat(() => {}, [9,10,[11,12]])

=> arr = [1,3,5]
   concatArr = [1, 3, 5, 2, 4, 6, 7, 8, 'hello world', () => {}, 9, 10, [11, 12]]



复制代码

reverse() 方法

reverse() 方法将一个数组倒置，该方法返回新的数组，且会改变原数组

const arr = [1, 2, 3, 4]
const reverseArr = arr.reverse()

=> arr = [4, 3, 2, 1]  reverseArr = [4, 3, 2, 1]


复制代码

sort() 方法

sort() 方法用于将数组排序，能够接收一个函数做为参数，当不传递参数时，sort 将按照内部定义的生序的规则进行排序，该方法返回排序后的数组，原数组将被改变。

const arr = [[() => {}], [12], '4', [11], 123, 'hello', n => n + 1, () => {}, 1, []]

const sortArr = a.sort()

sortArr = [[], () => {}, [() => {}], 1, [11], [12], 123, '4', n => n + 1, 'hello']

默认的排序算法是调用每一个数组项的 toString() 转型方法，比较获得的字符串的编码大小，按照最小值在前面，最大值在后面的方式排序。也就是正序，与 

sortArr = arr.sort((c, d) => c - d)

等价，倒序为

sortArr = arr.sort((c, d) => d - c)

举例：

const arr = [
  { id: 4, name: 'michael' },
  { id: 2, name: 'kangkang' },
  { id: 3, name: 'meria' },
  { id: 1, name: 'jane' },
]

const newArr = arr.sort((a, b) => b.id - a.id)

=>
newArr = [
  { id: 4, name: 'michael' },
  { id: 3, name: 'meria' },
  { id: 2, name: 'kangkang' },
  { id: 1, name: 'jane' }
]


复制代码

join() 和 split()

join() 方法将数组的元素组起一个字符串，以separator为分隔符，省略的话则用默认用逗号为分隔符，该方法只接收一个参数：即分隔符，该方法返回拼接后的字符串，不改变原数组。

const arr = [1, 3, 'hello']

const newArr = arr.join('-')

=>  newArr = '1-3-hello'

经过join()方法能够实现重复字符串，只需传入字符串以及重复的次数，就能返回重复后的字符串

const repeatStr = (str, n) => new Array(n).join(str)

const newStr = repeatStr('hi', 3)

=>  newStr = 'hihihi'


split() 方法将一个字符串分割为数组，接收一个参数，以该参数为分割符

const str = 'charming javascript'

const strArr1 = str.split('')
const strArr2 = str.split('j')
      
=>  strArr1 = ["c", "h", "a", "r", "m", "i", "n", "g", " ", "j", "a", "v", "a", "s", "c", "r", "i", "p", "t"]
    strArr2 = ['charming ', 'avascript']


复制代码

every() 和 some()

every() 方法接收一个函数做为参数，判断数组中每一项都是否知足条件，只有全部项都知足条件，才会返回true。

const arr = [1,5,2,4,11]

const isBig = arr.every(item => item > 5)
const isSmall = arr.every(item => item < 20)

=> isBig = true  isSmall = false


some() 方法接收一个函数做为参数，数组中只要有一项知足条件，则返回 true，若是都不知足条件，则返回 false

const arr = [
	{ price: 10, name: 'apple' },
	{ price: 20, name: 'orange' },
	{ price: 15, name: 'banana' }
]

const isCheap = arr.some(item => item.price < 15)

const isExpensive = arr.some(item => item.price > 20)

=> isCheap = true  isExpensive = false


复制代码

indexOf() 和 lastIndexOf()

两个方法都用来查找索引，接收两个参数，第一个参数是要查找的元素，第二个参数是查找的起始位置(默认第一项和最后一项的位置)。都会返回该元素的正索引，不一样的是当有第二个参数时，indexOf() 只查找该元素以后的元素，lastIndexOf() 只查找该元素以前的元素。若找到该元素则返回索引，若找不到则返回 -1

const arr = [1, 3, 5, 7, 9]

const index = arr.indexOf(7, 0)
const lastIndex = arr.lastIndexOf(7, 2)

=> index = 3  lastIndex = -1


复制代码

slice()

slice(start, end) 接收两个参数，start < end，返回 [start, end) 区间之间的元素数组，不改变原数组

const arr = [1, 2, 3, 4, 5, 6, 7, 8]

const sliceArr = arr.slice(3, 5)

=>  sliceArr = [4, 5]

并且 slice() 能够接收负数做为参数， -1 为倒数第一个元素，-2 为倒数第二个元素，依此类推


复制代码

splice()

splice() 方法向/从数组中添加/删除项目，而后返回被删除的项目。该方法会改变原始数组。

splice(index, howmany, item1, item2...itemx)

const arr = [1, 2, 3, 4, 5]

const spliceArr = arr.splice(2, 3, 6, 7, 8)

=> arr = [1, 2, 6, 7, 8]  spliceArr = [3, 4, 5]


复制代码

reduce()

reduce() 方法...额，它能够搞定的东西...咱们一一举例

语法：	arr.reduce(callback, initialValue)

reduce 为数组中的每个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调用 reduce 的数组。也就是：

arr.reduce((prev, current, index, array) => {}, initialValue)

下面看一些 reduce 的应用

数组求和：
const arr = [1,2,3,4,5]
const sum = arr.reduce((prev, current) => prev + current, 0)		=> sum = 15

数组求积：
const arr = [1,2,3,4,5]
const pow = arr.reduce((prev, current) => prev * current, 1)		=>  pow = 120

数组去重：
const arr = [1,3,4,2,5,3,4]
const slimArr = arr.reduce((prev, current) => {
  if(prev.includes(current)) {
    return prev
  } else {
    return prev.concat(current)
  }
}, [])

求字符串的字节长度：
const str = 'charming javascript'
const byteLen = str.split('').map(item => item.charCodeAt() > 255 ? 2 : 1).reduce((prev, current) => prev + current, 0)

求对象里的数乘积再求和：
const fruitArr = [
 { name: 'apple', price: 10, quantity: 2 },
 { name: 'orange', price: 15, quantity: 4 },
 { name: 'banana', price: 5, quantity: 3 },
]
const totalPrice = fruitArr.reduce((prev, current) => {
 return prev + current.price * current.quantity
}, 0)


复制代码

github 求个 star，会陆续更新

数组方法总结