JavaScript数组常用方法介绍数组一些常用方法：slice、join、toString、concat、indexo

1.slice：截取数组

返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。

MDN：developer.mozilla.org/zh-CN/docs/…

用法：arr.slice(begin, end) ； begin：默认0，end：默认数组长度。

begin/end为负值时（如-n），表示数组的倒数第n个元素。

例子：

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]
console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]
console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]
console.log(animals.slice(-2));
// expected output: Array ["duck", "elephant"]
console.log(animals.slice(2, -1));
// expected output: Array ["camel", "duck"]
console.log(animals.slice());
// expected output: Array ["ant", "bison", "camel", "duck", "elephant"]

2.join：生成字符串

将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串。

MDN：developer.mozilla.org/zh-CN/docs/…

用法：arr.join(string)

string默认值：逗号（,）

例子：

const elements = ['Fire', 'Air', 'Water'];
console.log(elements.join());
// expected output: "Fire,Air,Water"
console.log(elements.join(''));
// expected output: "FireAirWater"
console.log(elements.join('-'));
// expected output: "Fire-Air-Water"

3.toString() 数组转字符串

对于数组对象，toString 方法连接数组并返回一个字符串，其中包含用逗号分隔的每个数组元素。

当一个数组被作为文本值或者进行字符串连接操作时，将会自动调用其 toString 方法。

MDN：developer.mozilla.org/zh-CN/docs/…

例子：

// 例1:
const arr1 = [1, 2, 3, 'abc', 4, 5]
arr1.toString()
// 结果：'1,2,3,abc,4,5'

// 例2:
let a = [1, 2, 3, {name:'zhangsan'}, 4]
a.toString()
// 结果：'1,2,3,[object Object],4'

4.concat：合并数组

合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组（源数组的浅拷贝）。

MDN：developer.mozilla.org/zh-CN/docs/…

用法：const arr = arr1.concat(arr2, arr3, ...)

concat中的参数可以是数组，也可以是值；但是调用concat的值必须是数组或者字符串，不能是数值、对象、布尔类型。

例子：

// 例1：
const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);
console.log(array3);
array1[1] = '111'
console.log('改变后', array1, array3)

// 例2：
const arr4 = [1,2,3]
let num = 9
const arr5 = num.concat(arr4)
console.log(arr5)
// 结果：num.concat is not a function

5.indexof：查找索引（第一个）

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

MDN：developer.mozilla.org/zh-CN/docs/…

用法：arr.indexof(searchEle, fromIndex)

searchEle：需要查找的元素； formIndex（可选）：起始索引，默认0

起始索引处的元素包含在内，若fromIndex为负值（-n），代表从倒数第n个元素开始向后查找。判断相等使用的是===。

例子：

var array = [2, 5, 9];
console.log(array.indexOf(2));     // 0
console.log(array.indexOf(7));     // -1
console.log(array.indexOf(9, 2));  // 2
console.log(array.indexOf(2, -1)); // -1
console.log(array.indexOf(2, -3)); // 0

6.lastIndexOf：查找索引（最后一个）

返回指定元素在数组中的最后一个的索引，如果不存在则返回 -1。

MDN：developer.mozilla.org/zh-CN/docs/…

用法：arr.lastIndexOf(searchEle, formIndex) searchEle：需要查找的元素； formIndex（可选）：起始索引，默认数组长度-1

从数组的后面向前查找!!!，从 fromIndex 处开始。核心思想：从fromIndex处往前找，找到即返回索引，否则返回-1。

例子：

let array = [2, 5, 9, 2];
console.log(array.lastIndexOf(2)); // 3
console.log(array.lastIndexOf(7)); // -1
console.log(array.lastIndexOf(2, 3)); // 3
console.log(array.lastIndexOf(2, 2)); // 0
console.log(array.lastIndexOf(2, -2)); // 0
console.log(array.lastIndexOf(2, -1)); // 3

7.includes：是否包含某元素

判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false

MDN：developer.mozilla.org/zh-CN/docs/…

用法：arr.includes(searchEle, fromIndex)

searchEle：需要查找的元素; fromIndex(可选)：起始索引，默认0

规则：从fromIndex开始往后搜索，起始索引处的元素包含在内，若fromIndex为负值（-n），代表从倒数第n个元素开始向后查找。判断相等使用的是===。

例子：

console.log([1, 2, 3].includes(2));     // true
console.log([1, 2, 3].includes(4));     // false
console.log([1, 2, 3].includes(3, 3));  // false
console.log([1, 2, 3].includes(3, -1)); // true
// 可判断NaN
console.log([1, 2, NaN].includes(NaN)); // true

8.forEach：对数组的每个元素执行一次给定的函数。

MDN：developer.mozilla.org/zh-CN/docs/… 用法：arr.forEach( callback(currentValue, index, array), thisArg] )

currentValue: 数组中正在处理的元素；
index(可选): 数组中正在处理的元素的索引；
array(可选): 正在操作的数组；
thisArg(可选): 执行callback时的this值；
不改变原数组，返回值是 undefined。

例子：

let arr = [1, 2, 3]
arr.forEach((item) => {
    if(item === 1) {
        arr.push(4)
    }
    console.log(arr)
    console.log(item)
})
console.log('arr', arr)

注意：

除了抛出异常以外，没有办法中止或跳出 forEach() 循环。如果你需要中止或跳出循环，forEach() 方法不是应当使用的工具。
对于空数组是不会执行回调函数的。
对于已在迭代过程中删除的元素，或者空元素会跳过回调函数。
遍历次数再第一次循环前就会确定，再添加到数组中的元素不会被遍历。
如果已经存在的值被改变，则传递给 callback 的值是遍历到他们那一刻的值。

9.every:元素测试

测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。

MDN：developer.mozilla.org/zh-CN/docs/…

用法：arr.every(callback(element, index, array), thisArg)；

index(可选)， array(可选)

例子：

function isBigEnough(element, index, array) {
    return element >= 10;
}
console.log([12, 5, 8, 130, 44].every(isBigEnough));   // false
console.log([12, 54, 18, 130, 44].every(isBigEnough)); // true

规则：

如果数组中检测到有一个元素不满足，则整个表达式返回 false，且剩余的元素不会再进行检测。
如果所有元素都满足条件，则返回 true。注意：
对于空数组是不会执行回调函数的
对于已在迭代过程中删除的元素，或者空元素会跳过回调函数
遍历次数再第一次循环前就会确定，再添加到数组中的元素不会被遍历。
如果已经存在的值被改变，则传递给 callback 的值是遍历到他们那一刻的值。

10.some：元素测试

测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值。

MDN：developer.mozilla.org/zh-CN/docs/…

用法：arr.some(callback(element, index, array), thisArg)；

index(可选)， array(可选)， thisArg(可选)

function isBiggerThan10(element, index, array) {
    return element > 10;
}
console.log([2, 5, 8, 1, 4].some(isBiggerThan10));  // false
console.log([12, 5, 8, 1, 4].some(isBiggerThan10)); // true

规则：

如果数组中检测到有一个元素满足，则整个表达式返回 true，且剩余的元素不会再进行检测。
如果所有元素都不满足条件，则返回 false。

注意：

对于空数组是不会执行回调函数的
对于已在迭代过程中删除的元素，或者空元素会跳过回调函数
遍历次数再第一次循环前就会确定，再添加到数组中的元素不会被遍历。
如果已经存在的值被改变，则传递给 callback 的值是遍历到他们那一刻的值。

11.filter：挑选元素组成新数组

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

MDN：developer.mozilla.org/zh-CN/docs/…

用法：arr.some(callback(element, index, array), thisArg)；

index(可选) array(可选) thisArg(可选)

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);
console.log(result);

规则：为数组中的每个元素调用一次 callback 函数，并利用所有使得 callback 返回 true 或等价于 true 的值的元素创建一个新数组。注意：

对于空数组是不会执行回调函数的
对于已在迭代过程中删除的元素，或者空元素会跳过回调函数
遍历次数再第一次循环前就会确定，再添加到数组中的元素不会被遍历。
如果已经存在的值被改变，则传递给 callback 的值是遍历到他们那一刻的值。

12.map：映射出一个新数组（原数组不变）

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

MDN：developer.mozilla.org/zh-CN/docs/…

用法：arr.map(callback(element, index, array), thisArg)；

index(可选)，array(可选)，thisArg(可选)

const array1 = [1, 4, 9, 16];
const map1 = array1.map(x => x * 2);
console.log(map1);
expected output: Array [2, 8, 18, 32]

注意：

对于空数组是不会执行回调函数的
对于已在迭代过程中删除的元素，或者空元素会跳过回调函数
遍历次数再第一次循环前就会确定，再添加到数组中的元素不会被遍历。
如果已经存在的值被改变，则传递给 callback 的值是遍历到他们那一刻的值。

13.reduce：

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

MDN：developer.mzilla.org/zh-CN/docs/…

用法：详见以上网址

14.reduceRight：

这个方法除了与reduce执行方向相反外，其他完全与其一致，请参考上述 reduce 方法介绍。

15.find：自定义规则查找元素

返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

MDN：developer.mozilla.org/zh-CN/docs/…

用法：arr.find(callback, thisArg)

callback:测试函数，thisArg:测试函数执行时的this

例子：

const array1 = [5, 12, 8, 130, 44];
const found = array1.find(element => element > 10);
console.log(found);
// expected output: 12

注意：

对于已在迭代过程中删除的元素，或者空元素会执行回调函数，传入undefined
遍历次数再第一次循环前就会确定，再添加到数组中的元素不会被遍历。
如果已经存在的值被改变，则传递给 callback 的值是遍历到他们那一刻的值。

16.findIndex:自定义规则查找元素索引

返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。

MDN：developer.mozilla.org/zh-CN/docs/…

用法：arr.findIndex(callback, thisArg)

例子：

const array1 = [5, 12, 8, 130, 44];
const isLargeNumber = (element) => element > 13;
console.log(array1.findIndex(isLargeNumber));
// expected output: 3

17.keys：获取索引集合数组

返回一个包含数组中每个索引键的Array Iterator对象。

MDN：developer.mozilla.org/zh-CN/docs/…

用法：arr.keys()

例子:

const array1 = ['a', 'b', 'c'];
const iterator = array1.keys();
for (const key of iterator) {
  console.log(key);
}
// 结果：
// 0
// 1
// 2

// 注意：索引迭代器会包含那些没有对应元素的索引
var arr = ["a", , "c"];
var sparseKeys = Object.keys(arr);
var denseKeys = [...arr.keys()];
console.log(sparseKeys); // ['0', '2']
console.log(denseKeys);  // [0, 1, 2]

18.values:

返回一个新的 Array Iterator 对象，该对象包含数组每个索引的值。

MDN：developer.mozilla.org/zh-CN/docs/…

用法：arr.values()

例子：

const array1 = ['a', 'b', 'c'];
const iterator = array1.values();
for (const value of iterator) {
  console.log(value);
}
// 结果：
// 'a'
// 'b'
// 'c'

19.entries:

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

MDN：developer.mozilla.org/zh-CN/docs/…

用法：arr.entries()

例子：

const array1 = ['a', 'b', 'c'];
const iterator1 = array1.entries();
console.log(iterator1.next().value);
console.log(iterator1.next().value);
// Array [0, "a"]
// Array [1, "b"]