第一次在掘金文章，总结一下 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，会陆续更新
