js-数组方法

1. 增

1.1. push()

push() 方法可向数组的末尾添加一个或多个元素

• 语法：array.push(item1, item2, ..., itemX)
• 修改原数组：是
• 返回值：数组的新长度

;['Banana', 'Orange', 'Apple', 'Mango'].push('coco')
// -> [Banana, Orange, Apple, Mango, coco]

1.2. unshift()

unshift() 方法可向数组的开头添加一个或更多元素

• 语法：array.unshift(item1,item2, ..., itemX)
• 修改原数组：是
• 返回值：数组的新长度

;['Banana', 'Orange', 'Apple', 'Mango'].unshift('Lemon', 'Pineapple')
// -> [Lemon, Pineapple, Banana, Orange, Apple, Mango]

1.3 splice()

• 功能强大：添加、删除、获取修改的内容
  splice() 方法用于添加或删除数组中的元素，并以数组形式返回被修改的内容

• 语法：array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

• 参数：

  参数	描述
  start	指定修改的开始位置
  deleteCount	可选，表示要移除的数组元素的个数
  item1, item2, ...	可选，要添加进数组的元素

• 修改原数组：是

• 返回值：由被删除的元素组成的一个数组

;['Banana', 'Orange', 'Apple', 'Mango'].splice(2, 0, 'Lemon', 'Kiwi')
// ->  ['Banana', 'Orange', 'Lemon', 'Kiwi', 'Apple', 'Mango']

2. 删

2.1 pop()

移除最后一个数组元素

• 语法：array.pop()
• 修改原数组：是
• 返回值：从数组中删除的元素(当数组为空时返回 undefined)

;['Banana', 'Orange', 'Apple', 'Mango'].pop()
// -> [Banana, Orange, Apple]

2.2 shift()

删除数组的第一个元素。

• 语法：array.shift()
• 修改原数组：是
• 返回值：从数组中删除的元素(当数组为空时返回 undefined)

;['Banana', 'Orange', 'Apple', 'Mango'].shift()
// -> [Orange, Apple, Mango]

3. 查

3.1. includes()

includes() 方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则 false

• 语法：array.includes(valueToFind[, fromIndex])
• 参数：

  参数	描述
  searchElement	必须。需要查找的元素值。
  fromIndex	可选。从该索引处开始查找 searchElement。如果为负值，则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。

• 修改原数组：否
• 返回值：布尔值

;['Banana', 'Orange', 'Apple', 'Mango'].shift()
// -> [Orange, Apple, Mango]

3.2. indexOf()

indexOf() 方法可返回数组中某个指定的元素位置

• 语法：array.includes(valueToFind[, fromIndex])
• 参数：

  参数	描述
  searchElement	必须。需要查找的元素值。
  fromIndex	可选。从该索引处开始查找 searchElement。如果为负值，则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。

• 修改原数组：否
• 返回值：布尔值

;['Banana', 'Orange', 'Apple', 'Mango'].shift()
// -> [Orange, Apple, Mango]

3.3. lastIndexOf()

lastIndexOf() 方法可返回一个指定的元素在数组中最后出现的位置，从该字符串的后面向前查找

• 语法：array.lastIndexOf()
• 修改原数组：否
• 返回值：索引

;['Banana', 'Orange', 'Apple', 'Mango'].lastIndexOf('Apple')
// ->  2

3.4. slice()

slice() 方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括 end）

• 语法：array.slice([begin[, end]])

• 参数：

  参数	描述
  begin	提取起始处的索引
  end	可选，提取终止处的索引（不包含）

• 修改原数组：否

• 返回值：一个含有被提取元素的新数组

;['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'].slice(1, 3)
// ->  ['Orange',  'Lemon']

3.5. keys()

keys() 方法用于从数组创建一个包含数组键的可迭代对象

• 语法：array.keys()
• 修改原数组：否
• 返回值：一个新的 Array 迭代对象。

;['Banana', 'Orange', 'Apple', 'Mango'].keys()

3.6. values()

values() 方法返回一个新的 Array Iterator 对象，该对象包含数组每个索引的值

• 语法：array.values()
• 修改原数组：否
• 返回值：一个新的 Array 迭代对象。

;['Banana', 'Orange', 'Apple', 'Mango'].values()

3.7. entries()

entries() 方法返回一个新的 Array Iterator 对象，该对象包含数组中每个索引的键/值对。

• 语法：array.entries()
• 修改原数组：否
• 返回值：一个新的 Array 迭代对象。

;['Banana', 'Orange', 'Apple', 'Mango'].entries()

4. 改

4.1. fill()

fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

• 语法：array.fill(value[, start[, end]])
• 参数：

  参数	描述
  value	用来填充数组元素的值
  start	可选。起始索引
  end	可选。终止索引

• 修改原数组：是
• 返回值：修改后的数组

;['Banana', 'Orange', 'Apple', 'Mango'].fill('coco')
// -> ["coco", "coco", "coco", "coco"]

4.2. concat()

concat() 方法用于连接两个或多个数组

• 语法：array1.concat(array2,array3,...,arrayX)
• 修改原数组：否
• 返回值：被连接数组的副本

const hege = ['Cecilie', 'Lone']
const stale = ['Emil', 'Tobias', 'Linus']
const kai = ['Robin']
const children = hege.concat(stale, kai)
// -> ['Cecilie', 'Lone', 'Emil', 'Tobias', 'Linus', 'Robin']

4.3. join()

join() 方法将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目，那么将返回该项目而不使用分隔符。

• 语法：array.join([separator])
• 参数：separator 可选
  指定一个字符串来分隔数组的每个元素。如果需要，将分隔符转换为字符串。如果缺省该值，数组元素用逗号（,）分隔。如果 separator 是空字符串("")，则所有元素之间都没有任何字符。
• 修改原数组：否
• 返回值：一个所有数组元素连接的字符串。如果 array.length 为 0，则返回空字符串。

['Fire', 'Water'].join('-')
// -> 'Fire-Water'

4.4. reverse()

reverse() 方法将数组中元素的位置颠倒，并返回该数组

• 语法：array.reverse()
• 修改原数组：是
• 返回值：颠倒后的数组

;['Banana', 'Orange', 'Apple', 'Mango'].reverse()
// -> ['Mango', 'Apple', 'Orange', 'Banana']

4.5. flat()

flat() 方法会按照一个可指定的深度递归遍历数组

• 语法：array.flat([depth])
• 参数：depth 可选
  指定要提取嵌套数组的结构深度，默认值为 1，可使用 Infinity（无限）
• 修改原数组：否
• 返回值：一个包含将数组与子数组中所有元素的新数组。

;[0, 1, 2, [[[3, 4]]]].flat(2)
// -> [0, 1, 2, [3, 4]]

5. 遍历方法

5.1. forEach()

forEach() 方法按升序为数组中含有效值的每一项执行一次 callback 函数，那些已删除或者未初始化的项将被跳过

• 语法：arr.forEach(callback(currentValue [, index [, array]])[, thisArg])
• 参数：

  参数	描述
  callback	为数组中每个元素执行的函数，该函数接收一至三个参数
  currentValue	当前元素
  index	可选。当前元素的索引
  array	可选。数组对象本身
  thisArg	可选。用作 this 的值

• 修改原数组：否
• 返回值：undefined

const array = [1, 2, 3]
console.log(array.forEach((element) => console.log(element)))
// 1
// 2
// 3
// undefined

5.2. every()

every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试

• 语法：arr.every(callback(element[, index[, array]])[, thisArg])
• 参数：

  参数	描述
  callback	为数组中每个元素执行的函数，该函数接收一至三个参数
  element	当前元素
  index	可选。当前元素的索引
  array	可选。数组对象本身
  thisArg	可选。用作 this 的值

• 修改原数组：否
• 返回值：如果回调函数的每一次返回都为 truthy 值，返回 true ，否则返回 false。

const array = [1, 2, 3]
console.log(array.every((element) => element > 0))
// true
const array = [1, 2, 3]
console.log(array.every((element) => element > 2))
// false

5.3. some()

some() 方法测试数组中是不是至少有 1 个元素通过了被提供的函数测试

• 语法：arr.some(callback(element[, index[, array]])[, thisArg])
• 参数：

  参数	描述
  callback	为数组中每个元素执行的函数，该函数接收一至三个参数
  element	当前元素
  index	可选。当前元素的索引
  array	可选。数组对象本身
  thisArg	可选。用作 this 的值

• 修改原数组：否
• 返回值：数组中有至少一个元素通过回调函数的测试就会返回 true；所有元素都没有通过回调函数的测试返回值才会为 false。

const array = [1, 2, 3]
console.log(array.some((element) => element > 2))
// true

5.4. find()

find() 方法返回数组中满足提供的测试函数的第一个元素的值

• 语法：array.find(callback[, thisArg])
• 参数：

  参数	描述
  callback	为数组中每个元素执行的函数，该函数接收一至三个参数
  element	当前元素
  index	可选。当前元素的索引
  array	可选。数组对象本身
  thisArg	可选。用作 this 的值

• 修改原数组：否
• 返回值：数组中第一个满足所提供测试函数的元素的值，否则返回 undefined。

const array = [1, 2, 3]
console.log(array.find((element) => element > 2))
// 3

5.5. filter()

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

• 语法：array.filter(callback(element[, index[, array]])[, thisArg])
• 参数：

  参数	描述
  callback	为数组中每个元素执行的函数，该函数接收一至三个参数
  element	当前元素
  index	可选。当前元素的索引
  array	可选。数组对象本身
  thisArg	可选。用作 this 的值

• 修改原数组：否
• 返回值：一个新的、由通过测试的元素组成的数组，如果没有任何数组元素通过测试，则返回空数组。

const array = ['1', '12', '123', '1234', '12345', '123456']
console.log(array.filter((element) => element.length > 3))
//['1234', '12345', '123456']

5.6. reduce()

reduce() 方法对数组中的每个元素按序执行一个由您提供的 reducer 函数，每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。

• 语法：array.reduce(function(previousValue, currentValue, currentIndex, array) { /* ... */ }, initialValue)
• 参数：

  参数	描述
  callback	为数组中每个元素执行的函数
  previousValue	上一次调用 callbackFn 时的返回值
  currentValue	当前元素
  currentIndex	当前元素的索引
  array	当前数组
  initialValue	作为第一次调用 callback 函数时参数 previousValue 的值

• 修改原数组：否
• 返回值：使用 “reducer” 回调函数遍历整个数组后的结果

const array = [1, 2, 3]
console.log(array.reduce((prev, cur, index, array) => prev + cur, 0))
// 6

5.7. map()

map() 方法创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。

• 语法： arr.map(function callback(currentValue[, index[, array]]) { // Return element for new_array }[, thisArg])
• 参数：

  参数	描述
  callback	为数组中每个元素执行的函数，该函数接收一至三个参数
  currentValue	当前元素
  index	当前元素的索引
  array	当前数组
  thisArg	可选。用作 this 的值

• 修改原数组：否
• 返回值：一个由原数组每个元素执行回调函数的结果组成的新数组

const array = [1, 2, 3]
console.log(array.map((element) => element + 1))
// [2, 3, 4]