JavaScript 内置对象 Array 的常用方法-一一网

这是我参与8月更文挑战的第10天，活动详情查看：8月更文挑战

`pop()`

用途：删除并返回数组最后一个元素。
语法：arr.pop()
当数组为空的时候，返回 undefined
参考：Array.prototype.pop()
示例：

var books = ['红楼梦', '水浒传', '三国演义', '西游记']
console.log(books.pop())  // 西游记
复制代码

记忆：pop() 比较短，所以是删除，push() 比较长，所以是添加。同理，shift() 比较短，也是删除，而 unshift() 比较长，所以是添加。

`push()`

用途：向数组添加一个或多个元素，返回数组的新长度。
语法：arr.push(element1, ..., elementN)
参考：Array.prototype.push()
示例：

var books = ['红楼梦', '水浒传', '三国演义', '西游记']
var len = books.push('唐诗三百首', '如来神掌')
console.log(len)  // 6
console.log(books)  // Array(6) [ "红楼梦", "水浒传", "三国演义", "西游记", "唐诗三百首", "如来神掌" ]
复制代码

`shift()`

用途：删除并返回数组的第一个元素。
语法：arr.shift()
参考：Array.prototype.shift()
示例：

var books = ['红楼梦', '水浒传', '三国演义', '西游记']
books.shift()  // '红楼梦'
复制代码

`unshift()`

用途：将一个或者多个元素添加到数组开头，并返回该数组的新长度。
语法：arr.unshift(element1, ..., elementN)
参考：Array.prototype.unshift()
示例：

var books = ['红楼梦', '水浒传', '三国演义', '西游记']
var len = books.unshift('唐诗三百首', '如来神掌')
console.log(len)  // 6
console.log(books)  // Array(6) [ "唐诗三百首", "如来神掌", "红楼梦", "水浒传", "三国演义", "西游记" ]
复制代码

`reverse()`

用途：将原数组逆序并返回
会更改原数组，类似 Python 中列表的 reverse() 方法
语法：arr.reverse()
参考：Array.prototype.reverse()
示例：

let nums = [1, 2, 3]
nums.reverse()
console.log(nums)  // Array(3) [ 3, 2, 1 ]
复制代码

`sort()`

用途：对数组排序并返回排序后的数组
语法：arr.sort([compareFunction])
compareFunction(firstEl, secondEl) 是比较函数，类似 Python 2 中列表的比较函数。
注意：默认排序规则是将元素转化成字符串，然后对它们的 unicode 编码进行排序，所以 [2, 11] 排序的结果是 [11, 2]，并不是想象中的升序排序结果。如果要实现升序排序，必须自定义比较函数，可以使用箭头函数。
参考：Array.prototype.sort()
示例：

let letters = ['b', 'a', 'c']
letters.sort()
console.log(letters)  // Array(3) [ "a", "b", "c" ]

// 使用比较函数，进行升序排序
let nums = [2, 11]
nums.sort()
console.log(nums)  // Array [ 11, 2 ]
nums.sort((a, b) => a - b)
console.log(nums)  // Array [ 2, 11 ]
复制代码

`splice()`

用途：删除并替换数组中的元素，以数组的形式返回被删除的内容。这个方法会改变原数组。
语法：array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
start 是开始删除的索引，deleteCount 是删除多少个，后面的 item 是删除后要添加的元素
参考：Array.prototype.splice()
示例：

// 从索引 1 开始，删除 1 个元素，并把后面的元素添加进去
let arr = ['我', '和', '你']
arr.splice(1, 1, 'And')  // 返回值：Array [ "和" ]
console.log(arr)  // Array(3) [ "我", "And", "你" ]
复制代码

`concat()`

用途：合并两个或者多个数组，返回新数组。本方法不改变原数组。
语法：var new_array = old_array.concat(value1[, value2[, ...[, valueN]]])
如果不带参数调用，则相当于获取原数组的一份浅拷贝。
参考：Array.prototype.concat()
示例：

let arr1 = [1, 2, 3]
let arr2 = [4, 5]
let arr3 = [6]
// 注意：这里 arr1 多拼接了一次，原因是参数中有 arr1
let arr = arr1.concat(arr1, arr2, arr3)
console.log(arr)  // Array(9) [ 1, 2, 3, 1, 2, 3, 4, 5, 6 ]
复制代码

`includes()`

用途：判断当前数组是否包含给定元素，返回布尔值。
语法：arr.includes(valueToFind[, fromIndex])
参考：Array.prototype.includes()
示例：

let people = ['张三', '李四']
console.log(people.includes('王五'))  // false
复制代码

`join()`

用途：使用分隔符连接数组的所有元素，返回拼接后的字符串
语法：arr.join([separator])
分隔符默认为 ,。本方法在功能上类似 Python 中字符串的 separator.join(iterable)。
参考：Array.prototype.join()
示例：

let nums = [1, 2, 3]
nums.join('*')  // "1*2*3"
复制代码

`slice()`

用途：返回原数组左闭右开区间的浅拷贝
语法：arr.slice([begin[, end]])
有点类似 Python 当中的切片语法
参考：Array.prototype.slice()
示例：

let nums = [1, 2, 3, 4, 5]
let nums2 = nums.slice(2, 4)
console.log(nums2)  // Array [ 3, 4 ]
复制代码

`indexOf()`

用途：返回当前数组中给定元素第一次出现的索引，如果找不到则返回 -1
语法：arr.indexOf(searchElement[, fromIndex])
参考：Array.prototype.indexOf()
示例：

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

`lastIndexOf()`

用途：从后向前，返回当前数组中给定元素第一次出现的索引，如果找不到则返回 -1
语法：arr.lastIndexOf(searchElement[, fromIndex])
fromIndex 是起始查找位置，如果不写，默认为 arr.length - 1
参考：Array.prototype.lastIndexOf()
示例：

let arr = [1, 3, 5, 7]
console.log(arr.lastIndexOf(3))  // 1
复制代码

`filter()`

用途：返回使用指定函数过滤后的新数组
语法：var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])
callback 是用于进行过滤的回调函数，element 是当前传入的元素，index 是元素在数组中的索引，array 是原数组，thisArg 用于指定 callback 中的 this
参考：Array.prototype.filter()
示例：

let nums = [1, 2, 3, 4, 5, 6, 7]

// 过滤所有偶数
let even = nums.filter(el => !(el % 2))
console.log(even)  // Array(3) [ 2, 4, 6 ]
复制代码

`map()`

用途：返回使用给定函数处理过的新数组
语法：

var new_array = arr.map(function callback(currentValue[, index[, array]]) {
 // Return element for new_array 
}[, thisArg])
复制代码

callback 的参数意义与 filter() 方法中的回调函数差不多
参考：Array.prototype.map()
示例：

let nums = [1, 2, 3]

// 将数组中的所有元素乘以 2
let two = nums.map(el => 2 * el)
console.log(two)
// Array(3) [ 2, 4, 6 ]
复制代码

`reduce()`

用途：化简数组，返回单个值。
语法：arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])
callback 会对数组中的每一个值调用一次
accumulator 为上次调用回调函数的返回值，或者为 initialValue
currentValue 为正在处理的元素
index 为正在处理的元素的索引。如果提供了 initialValue，则起始索引号为 0，否则从索引 1 起始。
array 为调用 reduce() 的数组
initialValue 为第一次调用 callback 时 accumulator 的值，如果没提供，则使用数组第一个元素。在没有 initialValue 的空数组上调用 reduce 将报错。
参考：Array.prototype.reduce()
示例：

let nums = [1, 2, 3, 4]

// 累加
let sum = nums.reduce((pre, cur) => pre + cur)
console.log(sum)  // 10

// 累乘
let product = nums.reduce((pre, cur) => pre * cur)
console.log(product)  // 24
复制代码