重学JS：数组

时间 2019-11-05

原文原文链接

除了Object类型以外，Array类型恐怕是js中最经常使用的类型了，而且随着js的发展进步，数组中提供的方法也愈来愈来，对数组的处理也出现了各类骚操做，此篇文章将会带你从新学习数组中的实例方法前端

数组转换

一、join()方法接收一个字符串做为分隔符，并返回用分隔符链接的数组项字符串
参数：分隔符字符串

const arr = [1, 2, 3]
console.log(arr.join('|')) // '1|2|3'
复制代码

二、toString()方法返回数组中每一个值的字符串形式拼接而成的一个以逗号分隔的字符串
参数：无

const arr = [1, 2, 3]
console.log(arr.toString()) // '1,2,3'
复制代码

栈方法

一、push()方法接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后的数组长度
参数： item...（多个数组项）

let arr = ['a', 'b', 'c']
const count = arr.push('d')
console.log(count) // 4
console.log(arr) // [ 'a', 'b', 'c', 'd' ]
复制代码

二、pop()方法从数组末尾移除最后一项，减小数组的length，返回移除的项
参数：无

let arr = ['a', 'b', 'c']
const item = arr.pop()
console.log(item) // 'c'
console.log(arr) // [ 'a', 'b' ]
复制代码

队列方法

一、shift()方法移除数组中的第一项，并返回该项，同时数组长度减1
参数：无

let arr = ['a', 'b', 'c']
const item = arr.shift()
console.log(item) // 'a'
console.log(arr) // [ 'b', 'c' ]
复制代码

二、unshit()方法在数组前端添加任意个项，并返回新数组的长度
参数：item...(多个数组项)

let arr = ['a', 'b', 'c']
const count = arr.unshift('d', 'e')
console.log(count) // 5
console.log(arr) // [ 'd', 'e', 'a', 'b', 'c' ]
复制代码

排序方法

一、reverse()方法用于反转数组中每一项，并返回反转后的数组
参数：无

let arr = ['a', 'b', 'c']
console.log(arr.reverse()) // [ 'c', 'b', 'a' ]
复制代码

二、sort()方法用将数组排序，并返回排序后的数组
参数：compareFunction(可选)
- 若不传compareFunction，sort()方法回调用每一个数组项的toString()方法，而后比较获得的字符串
```
let arr = [2, 3, 10]
arr.sort()
console.log(arr) // [ 10, 2, 3 ]
复制代码
```
'10'位于'2'以前
- 若传compareFunction(a,b)，若是返回值小于0，则a位于b以前，若是返回值等于0则位置不变，若是返回值大于，则b位于a以前
```
let arr = [2, 5, 3, 1]
arr.sort((a, b) => {
  if (a < b) {
    return -1
  } else if (a > b) {
    return 1
  } else {
    return 0
  }
})
console.log(arr) // [ 1, 2, 3, 5 ]
复制代码
```

操做方法

一、concat()方法建立当前数组一个副本，而后将接收到的参数添加到这个副本末尾，最后返回新构建的数组
参数：item...(能够是数组项，也能够是数组)

let arr = [1, 2, 3]
let newArr = arr.concat(4, 5, [6, 7])
console.log(newArr) // [ 1, 2, 3, 4, 5, 6, 7 ]
复制代码

2.slice()方法基于当前数组中的一或多个项建立一个新数组
参数: start(起始位置),end(结束位置，可选)

let arr = [1, 2, 3, 4]
let newArr = arr.slice(1, 3)
console.log(newArr) // [ 2, 3 ]
复制代码

tip: 若是slice方法的参数中有一个负数，则用数组长度加上该数来肯定相应的位置数组

三、splice()方法用法有多种，根据不一样的用法须要传递的参数也不同
- 删除：能够删除任意数量的项，指定两个参数：删除的第一项位置和删除的数量
- 插入：能够向指定位置插入任意数量的项，第一个参数：插入的位置，第二个参数0（删除0），第三个参数之后要插入的项
- 替换：能够将指定位置的项替换，第一个参数要替换项的位置，第二个替换项个数，第三个参数之后新的项

let arr = [1, 2, 3, 4, 5]
arr.splice(0, 1)
console.log(arr) // [ 2, 3, 4, 5 ]
arr.splice(1, 0, 'hello', 'world')
console.log(arr) // [ 2, 'hello', 'world', 3, 4, 5 ]
arr.splice(3, 1, 'js')
console.log(arr) // [ 2, 'hello', 'world', 'js', 4, 5 ]
复制代码

位置方法

一、indexOf()方法从头开始查找指定项，找到返回对应数组下标，没找到返回-1
参数：item(要查找的数组项),index(指定开始查找的位置，可选)

let arr = [1, 2, 3, 4, 5]
console.log(arr.indexOf(3)) // 2
console.log(arr.indexOf(3, 3)) // -1
复制代码

二、lastIndexOf()方法用法和indexOf基本一致，只是从数组尾部开始查找

迭代方法

一、every()方法对数组中每一项运行给定函数，若是该函数对每一项都返回true，则返回true
参数：callback(item, index, arr)函数

let arr = [3, 4, 5, 6]
let result = arr.every((item) => item > 2)
console.log(result) // true
复制代码

二、some()方法对数组中任意一项运行给定函数，若是该函数对任意一项返回true，则返回true
参数：callback(item, index, arr)

let arr = [1, 2, 3, 4]
let result = arr.some((item) => item > 3)
console.log(result) // true
复制代码

三、map()方法对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组
参数：callback(item, index, arr)

let arr = [1, 2, 3]
let result = arr.map(item =>  item * 2)
console.log(result) // [ 2, 4, 6 ]
复制代码

四、filter()方法对数组中的每一项运行给定函数，返回该函数调用会返回true的项组成的数组 参数：callback(item, index, arr)

let arr = [1, 2, 3, 4, 5]
let result = arr.filter(item => item > 2)
console.log(result) // [3, 4, 5]
复制代码

五、forEach()方法对数组中的每一项都运行给定函数，没有返回值
参数：callback(item, index, arr)

let arr = [1, 2, 3, 4, 5]
arr.forEach(item => {
  console.log(item) // 1 2 3 4 5
})
复制代码

tip: 修改item的不会影响遍历的数组项学习

缩小方法

一、reduce()方法对数组中的每一项执行一个reducer函数(升序执行)，并将结果汇总为单个返回值
参数：callback(accumulator(累计器累计回调的返回值)，currentValue(数组中正在处理的元素)，currentIndex(数组中正在处理的元素的索引，若是提供了initialValue，则起始索引号为0，不然为1，可选)，array(调用reducer的数组)), initialValue(做为第一次调用callback函数时的第一个参数的值。若是没有提供初始值，则将使用数组中的第一个元素。在没有初始值的空数组上调用 reduce 将报错，可选)

let arr = [1, 2, 3, 4, 5]
let result = arr.reduce((accumulator, current, index, array) => {
  return accumulator + current
})
console.log(result) // 15 1+2+3+4+5
复制代码

let arr = [1, 2, 3, 4, 5]
let result = arr.reduce((accumulator, current, index, array) => {
  return accumulator + current
}, 10)
console.log(result) // 25 10+1+2+3+4+5
复制代码

二、reduceRight()方法用法与reduce()方法一致，只是redeceRight()方法调用从数组尾部开始，向前遍历

ES6新增方法

一、from()方法将相似数组的对象和可遍历的对象转化为数组
参数：arrayLike(想要转换成数组的伪数组对象或可迭代对象)，mapFn(若是指定了该参数，新组数中的每一个元素会执行此回调函数，可选)，thisArg(执行回调函数时this对象，可选)

let arrayLike = {
  0: 1,
  1: 2,
  2: 3,
  length: 3
}
console.log(Array.from(arrayLike)) // [1, 2, 3]
复制代码

let arrayLike = {
  0: 1,
  1: 2,
  2: 3,
  length: 3
}
console.log(Array.from(arrayLike, (item) => item * 2)) // [2, 4, 6]
复制代码

在实际应用中更多应用于Dom操做返回的集合以及函数内部的arguments对象ui

二、of()方法建立一个具备可变数量参数的新数组实例，而不考虑参数的数量或类型
参数：item...(任意个参数，将按顺序返回数组中的元素)

let result = Array.of(2, 3, 4)
console.log(result) // [ 2, 3, 4 ]
复制代码

三、copyWithin()方法，在当前数组内部，将指定位置的成员复制到其余位置(会覆盖原有位置成员)，返回当前数组
参数：target(从该位置开始替换数据)，start(从该位置开始读取数据，默认为0，若是为负值表示倒数，可选)，end(到该位置前，中止读取数据，默认为数组长度，若是为负值，表示倒数)

let arr = [1, 2, 3, 4, 5]
arr.copyWithin(0, 3, 5)
console.log(arr) // [ 4, 5, 3, 4, 5 ]
复制代码

四、find()方法用于找出第一个符合条件的数组成员，若没有符合条件的，返回undefined
参数：callback(item, index, arr)

let arr = [1, 2, 3, 4, 5]
let result = arr.find(item => item > 3)
console.log(result) // 4
复制代码

五、findIndex()方法用法与find()方法类似，返回第一个符合条件的成员的位置，若没有符合条件的，返回-1
六、fill()方法用一个固定值填充一个数组中从起始索引到终止索引内的所有元素，不包括终止索引
参数：value(填充数组元素的值)，start(起始索引，可选)，end(终止索引，可选)

let arr = [1, 2, 3, 4, 5]
arr.fill(6, 2, 5)
console.log(arr) // [ 1, 2, 6, 6, 6 ]
复制代码

七、entries()、keys()、values() , 三个数组遍历方法，返回一个遍历器对象，entries()键值对的遍历，keys()键名的遍历，values()键值的遍历
参数：无

let arr = ['a', 'b', 'c']
for (let idx of arr.keys()) {
  console.log(idx) // 0 1 2
}
for (let item of arr.values()) {
  console.log(item) // 'a' 'b' 'c'
}
for (let [idx, item] of arr.entries()) {
  console.log(idx + '---' + item) // '0---a' '1---b' '2---c'
}
复制代码

八、includes()方法用来判断一个数组是否包含一个指定的值，若是包含返回true，不然返回false 参数：value(要查找的元素)，start(开始查找的位置，可选)

let arr = ['a', 'b', 'c']
console.log(arr.includes('a')) // true
console.log(arr.includes('d')) // false
复制代码

九、flat()方法会按照一个指定的深度递归遍历数组，并将全部元素与遍历到的子数组中的元素和并到一个新数组中返回 参数：depth(要提取数组的嵌套结构深度，默认为1，可选)

let arr = ['a', 'b', ['c', 'd']]
let result = arr.flat() // ["a", "b", "c", "d"]
let arr1 = ['a', ['b', ['c']]]
//使用 Infinity 做为深度，展开任意深度的嵌套数组
let result1 = arr1.flat(Infinity) // ["a", "b", "c"]
复制代码

总结

此篇文章记录了JS中数组经常使用的方法，毕竟数组的实例方法有那么多，好记性不如烂笔头，写下此篇文章加深记忆，同时但愿对你们也能有所帮助。
若是有错误或不严谨的地方，欢迎批评指正，若是喜欢，欢迎点赞this