Xu•thus Blog

Array 类型方法大合集

数组是JavaScript中最常用的类型之一,JavaScript封装了很多原生的操作数组的方法,掌握它们可以提高我们的开发效率

数组检测

instanceof方法

arr instanceof Array 返回一个布尔值,在一个网页包含多个框架(页面包含子页面)的时候会出现问题,没有使用过多个框架,不太清楚

Array.isArray()方法

这是ES5新增的检测数组的方法
Array.isArray(arr) 也是返回一个布尔值

转换方法

Array.prototype.toString 返回一个字符串

1
2
const arr = ['red', 'blue', 'green']
console.log(arr.toString()) // "red,blue,green"

Array.prototype.valueOf 返回 Array 对象的原始值

1
2
const arr = ['red', 'blue', 'green']
console.log(arr.valueOf()) // ['red', 'blue', 'green']

Array.prototype.toLocaleString 返回一个字符串表示数组中的元素,和toString类似,不过每个元素都会调用自己的toLocaleString进行转换

1
2
const arr = [122, new Date(), "foo"];
console.log(arr.toLocaleString()) // "122,2017/7/5 下午9:02:05,foo"

Array.prototype.join 将数组(或一个类数组对象)的所有元素连接到一个字符串中,不会改变原数组

1
2
const arr = ['red', 'blue', 'green']
console.log(arr.join('|')) // "red|blue|green"

栈方法

Array.prototype.push 将一个或多个元素添加到数组的末尾,并返回数组的新长度

1
2
3
const arr = ['red', 'blue', 'green']
arr.push('white')
console.log(arr) // ["red", "blue", "green", "white"]

Array.prototype.pop 删除数组中最后一个元素,并返回该元素的值。此方法会更改原数组

1
2
3
4
const arr = ['red', 'blue', 'green']
const item = arr.pop()
console.log(item) // "green"
console.log(arr.length) // 2

队列方法

Array.prototype.shift 删除数组中第一个元素,并返回该元素的值。此方法会更改原数组

1
2
3
4
const arr = ['red', 'blue', 'green']
const item = arr.shift()
console.log(item) // “red”
console.log(arr.length) // 2

Array.prototype.unshift 将一个或多个元素添加到数组的开头,并返回新数组的长度

1
2
3
4
const arr = ['red', 'blue']
const count = arr.unshift('green')
console.log(count) // 3
console.log(arr) // ["green", "red", "blue"]

重排序方法

Array.prototype.reverse 将数组中元素的位置颠倒

1
2
3
const arr = [1, 2, 3, 4, 5]
arr.reverse()
console.log(arr) // [5, 4, 3, 2, 1]

Array.prototype.sort 在适当的位置对数组的元素进行排序,并返回数组

使用该方法会调用每个数组项的toString()转型方法,然后比较字符串,所以在进行数字排序的时候需要额外处理

1
2
3
const arr = [0, 1, 5, 10, 15, 5]
arr.sort((n1, n2) => n1 > n2 ? 1 : -1) // 升序,降序改变符号即可
console.log(arr) // [0, 1, 5, 5, 10, 15]

操作方法

Array.prototype.concat 用于合并两个或多个数组,此方法不会更改现有数组,而是返回一个新数组

1
2
3
4
5
6
7
8
const arr = ['red', 'blue', 'green']
const arr1 = ['white', 'black']
const newArr = arr.concat(arr1)
console.log(arr) // ["red", "blue", "green"]
console.log(newArr) // ["red", "blue", "green", "white", "black"]
//还可以使用ES6扩展运算符
console.log([...arr, arr1])

Array.prototype.slice 方法返回一个从开始到结束(不包括结束)选择的数组的一部分浅拷贝到一个新数组对象, 原数组不会修改

1
2
3
4
5
const arr = ['red', 'blue', 'green', 'white']
const arr1 = arr.slice(1) // 为一个参数的时候,返回从这个位置开始一直到末尾的所有项
const arr2 = arr.slice(1, 3)
console.log(arr1) // ["blue", "green", "white"]
console.log(arr2) // ["blue", "green"]

Array.prototype.splice通过删除现有元素和/或添加新元素来更改一个数组的内容

  • 删除: 指定两个参数,要删除的第一项位置和要删除的项数

    1
    2
    3
    4
    const arr = ['red', 'blue', 'green', 'white']
    // 从第1个位置(起始位置为0)开始,删除两项
    arr.splice(1, 2)
    console.log(arr) // ["red", "white"]
  • 插入: 可以向制定位置插入任意数量的项,最少三个参数,起始位置、0(要删除的项)和要插入的项(可以为多个)

    1
    2
    3
    4
    const arr = ['red', 'blue', 'green', 'white']
    // 从第二个位置开始插入两项
    arr.splice(2, 0, 'black', 'orange')
    console.log(arr) // ["red", "blue", "black", "orange", "green", "white"]
  • 替换: 三个参数,起始位置,要删除的项和要插入的项

    1
    2
    3
    4
    const arr = ['red', 'blue', 'green', 'white']
    // 从第二个位置开始,删除两项,插入两项
    arr.splice(2, 2, 'black', 'orange')
    console.log(arr) // ["red", "blue", "black", "orange"]

位置方法

Array.prototype.indexOf 返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1

1
2
3
4
5
6
7
const arr = ['red', 'blue', 'blue', 'green', 'white']
console.log(arr.indexOf('blue'))
// 在使用操作的时候,每次比较的时候都会使用全等,意味着当元素为对象的时候, 直接使用这个方法不能查找出来
const color = {name: 'red'}
const arr = [{name: 'red'}]
console.log(arr.indexOf(color)) // -1

Array.prototype.lastIndexOf 和indexOf功能类似,只是从数组的后面向前查找

迭代方法

迭代方法可接收两个参数:一个函数和运行该函数的作用域对象(可选,一般不用),回调函数可接受三个参数:数组项的值、该项在数组中的位置和数组对象本身,一般在使用第一个参数就可以解决大部分问题

Array.prototype.forEach 对数组的每个元素执行一次提供的函数

1
2
3
4
const numbers = [2, 6, 5, 8]
numbers.forEach((num, index, array) => {
console.log(num * 2)
}) // 4 12 10 16

Array.prototype.map 对数组的每个元素执行一次提供的函数,返回每次函数调用的结果组成的数组。与forEach类似,不同的是会返回新的数组

1
2
3
const numbers = [2, 6, 5, 8]
const result = numbers.map(num => num * 2)
console.log(result) // [4, 12, 10, 16]

Array.prototype.every 对数组中的每一项运行给定函数,如果该函数对每一项都返回true, 则返回true

1
2
3
4
5
6
7
const numbers = [3, 6, 5, 8]
const result = numbers.every(num => num > 2)
console.log(result) // true
const numbers = [2, 6, 5, 8]
const result = numbers.every(num => num > 2)
console.log(result) // false

Array.prototype.some 对数组中的每一项运行给定函数,如果该函数对任意一项返回true,则返回true

1
2
3
const numbers = [3, 6, 5, 8]
const result = numbers.some(num => num > 6)
console.log(result) // true

Array.prototype.filter 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素

1
2
3
const numbers = [3, 6, 5, 8]
const result = numbers.filter(num => num > 5)
console.log(result) // [6, 8]

归并方法

这类方法会迭代数组的所有项,然后构建一个最终值返回。接收两个参数,一个函数和一个可选的最为归并基础的初始值,函数可接收四个参数:前一个值,当前值,项的索引和数组对象

Array.prototype.reduce 方法对累加器和数组中的每个元素 (从左到右)应用一个函数,将其减少为单个值,

1
2
3
4
const numbers = [3, 6, 5, 8]
// 求和
const result = numbers.reduce((pre, cur) => pre + cur)
console.log(result) // 22

Array.prototype.reduceRightreduce类似,只是方向相反,从右边往左

ES6新增方法

Array.from 可将数组的对象和可遍历的对象转换成真正的数组

类数组常见的是NodeList和argumens

1
2
3
4
5
const divs = document.querySelectorAll('div')
console.log(Array.from(divs)) // [div, div, div]
// 当然还可以使用扩展运算符来转换
console.log([...divs]) // [div, div, div]

可遍历对象,即部署了Iterator接口,包括字符串,set,map等

1
2
3
4
5
const string = 'string'
console.log(Array.from(string)) // ["s", "t", "r", "i", "n", "g"]
// 或者
console.log([...string]) // ["s", "t", "r", "i", "n", "g"]

Array.of方法用于将一组值,转换为数组

1
console.log(Array.of(1,2,3)) // [1, 2, 3]

Array.prototype.copyWithin 方法浅复制数组的一部分到同一数组中的另一个位置,并返回它

接受三个参数:

  • target(必需):从该位置开始替换数据。
  • start(可选):从该位置开始读取数据,默认为0。如果为负值,表示倒数。
  • end(可选):到该位置前停止读取数据,默认等于数组长度。如果为负值,表示倒数。
    1
    2
    3
    const arr = [1, 2, 3, 4, 5]
    // 复制从第三个位置开始一直到末尾的项,然后放在位置1
    console.log(arr.copyWithin(1, 3)) // [1, 4, 5, 4, 5]

Array.prototype.find 方法返回数组中满足提供的测试函数的第一个元素的值,否则返回 undefined

和迭代方法可接受的参数一致

1
2
const arr = [1, 2, 3, 4]
console.log(arr.find(n => n > 2)) // 3

Array.prototype.findIndex 与find方法类似,方法返回数组中满足提供的测试函数的第一个元素的索引,否则返回-1

Array.prototype.fill 法使用给定值,填充一个数组

可接受三个参数,第二个和第三个参数,用于指定填充的起始位置和结束位置

1
2
3
4
5
const arr = [1, 2, 3, 4]
console.log(arr.fill(2)) // [2, 2, 2, 2]
// 在第二个位置填入
console.log(arr.fill(2, 2, 3)) // [1, 2, 2, 4]

Array.prototype.includes 方法用来判断一个数组是否包含一个指定的值,如果是返回true,没有返回false

1
2
const arr = [1, 2, 3]
arr.includes(2) // true

Array.prototype.entries、keys和 values这三个方法用于遍历数组,都返回一个遍历器对象

可以用for…of循环进行遍历,唯一的区别是keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
for (let index of ['a', 'b'].keys()) {
console.log(index);
}
// 0
// 1
for (let elem of ['a', 'b'].values()) {
console.log(elem);
}
// 'a'
// 'b'
for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem);
}
// 0 "a"
// 1 "b"
// 不使用for...of的话,key(),value()类似
const letter = ['a', 'b', 'c'];
const entries = letter.entries();
console.log(entries.next().value); // [0, 'a']
console.log(entries.next().value); // [1, 'b']
console.log(entries.next().value); // [2, 'c']