JavaScript数组方法

前几天小哆啦总结了字符串常用的api，忽然小哆啦想到作为一名前端攻城狮数组的api必须得多多了解顺便就总结一下数组中常用的方法，如果有什么不对的地方期待大家批评指正。

参考资料：

（1）Array - JavaScript | MDN (mozilla.org)

（2）JavaScript Array 对象 | 菜鸟教程 (runoob.com)

（3）ECMAScript® 2024 Language Specification (tc39.es)

思维导图

yuque_diagram (1).png

大纲

序号	方法	含义	返回值	是否改变原数组	版本
1	`Array.from()`	接收伪数组,返回对应的真数组	对应的真数组返回一个数组	否	ES6
2	`Array.isArray()`	判断对象是否为数组。	返回布尔值	否	ES5
3	`Array.of()`	将一组值转换为数组。	返回一个新数组	否	ES6
4	`at()`	用于接收一个整数值并返回该索引对应的元素，允许正数和负数。负整数从数组中的最后一个元素开始倒数。	返回该索引对应的元素	否	ES6
5	`concat()`	连接两个或更多的数组，并返回结果。	返回一个新的数组	否	ES5
6	`copyWithin()`	从数组的指定位置拷贝元素到数组的另一个指定位置中。	返回一个新数组	是	ES6
7	`entries()`	返回数组的可迭代对象。	包含对象所有属性的数组	否	ES6
8	`every()`	检测数值元素的每个元素是否都符合条件。	返回布尔值	否	ES5
9	`fill()`	使用一个固定值来填充数组。	返回修改后的数组	是	ES6
10	`filter()`	检测数值元素，并返回符合条件所有元素的数组。	返回一个新数组	否	ES5
11	`find()`	返回符合传入测试（函数）条件的数组元素。	返回数组中满足测试条件的第一个元素	否	ES6
12	`findIndex()`	返回符合传入测试（函数）条件的数组元素索引。	返回数组中满足测试条件的第一个元素索引	否	ES6
13	`Array.flat()`	创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。	返回一个新数组	否	ES10
14	`Array.flatMap()`	使用映射函数映射每个元素，然后将结果压缩成一个新数组。	返回一个新数组	否	ES10
15	`forEach()`	数组每个元素都执行一次回调函数。	无	否	ES5
16	`includes()`	判断一个数组是否包含一个指定的值。	返回布尔值	否	ES6
17	`indexOf()`	搜索数组中的元素，并返回它所在的位置。	返回元素在数组中的第一个索引	否	ES5
18	`join()`	把数组的所有元素放入一个字符串。	返回字符串	否	ES3
19	`keys()`	返回数组的可迭代对象，包含原始数组的键(key)。	返回数组的键的可迭代对象	否	ES6
20	`lastIndexOf()`	搜索数组中的元素，并返回它最后出现的位置。	返回元素在数组中的最后一个索引	否	ES5
21	`map()`	通过指定函数处理数组的每个元素，并返回处理后的数组。	返回一个新数组	否	ES5
22	`pop()`	删除数组的最后一个元素并返回删除的元素。	返回被删除的元素	是	ES5
23	`push()`	向数组的末尾添加一个或更多元素，并返回新的长度。	返回新的数组长度	是	ES5
24	`reduce()`	将数组元素计算为一个值（从左到右）。	返回计算后的值	否	ES5
25	`reduceRight()`	将数组元素计算为一个值（从右到左）。	返回计算后的值	否	ES5
26	`reverse()`	反转数组的元素顺序。	返回反转后的数组	是	ES1
27	`shift()`	删除并返回数组的第一个元素。	返回被删除的元素	是	ES5
28	`slice()`	选取数组的一部分，并返回一个新数组。	返回新的数组	否	ES3
29	`some()`	检测数值元素的每个元素是否符合条件。	返回布尔值	否	ES5
30	`sort()`	对数组的元素进行排序。	返回排序后的数组	是	ES1
31	`splice()`	从数组中添加或删除元素。	返回被删除的元素组成的数组	是	ES5
32	`toLocaleString()`	返回一个字符串，该字符串是使用数组的特定元素的toLocaleString()方法得到的。	返回数组的toLocaleString结果	否	ES5
33	`toString()`	把数组转换为字符串，并返回结果。	返回数组的字符串表示	否	ES1
34	`unshift()`	向数组的开头添加一个或更多元素，并返回新的长度。	返回新的数组长度	是	ES4
35	`valueOf()`	返回数组对象的原始值。	返回数组对象本身	否	ES1

1、数组构造函数的属性

1.1 `length`

length数组的这个属性是反应数组长度的应该入门编程的同学都知道就不展开说啦。

let arr =  [1,2,3]
console.log(arr.length) //3

1.2`Array.from()`

Array.from(object, mapFunction, thisValue)

三个参数

参数	描述
`object`	必需，要转换为数组的对象。
`mapFunction`	可选，数组中每个元素要调用的函数。
`thisValue`	可选，映射函数(`mapFunction`)中的 this 对象。

功能: 将一个类数组对象或者可遍历对象转换成一个真正的数组

注意将一个类数组对象转换为一个真正的数组，必须具备以下条件：

1、该伪数组 / 类数组对象必须具有length属性，用于指定数组的长度。如果没有length属性，那么转换后的数组是一个空数组。 2、该伪数组 / 类数组对象的属性名必须为数值型或字符串型的数字

let obj = {  
    '0': 1,//'0':1中的'0'将转换为下标0,下面的key同理  
    '1': 2,  
    '2':3,  
    'length': 4,//length规定了转换的数组有多长
}
let newObj= Array.from(obj, item => {return item})
console.log(newObj); //输出:[ 1, 2, 3, undefined ]

还可以就是set对象或者map对象转换为数组

var setObj = new Set(["a", "b", "c"]);
var objArr = Array.from(setObj);
objArr[1] == "b";  // true

1.3`Array.isArray()`

Array.isArray() 方法用于判断一个对象是否为数组。

如果对象是数组返回 true，否则返回 false。

语法

Array.isArray(obj)

参数

参数	描述
obj	必需，要判断的对象。

案例

function myFunction() {
    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    var x = document.getElementById("demo");
    x.innerHTML = Array.isArray(fruits);
}

1.4 `Array.of()`

用法

Array.of() 方法是 Array 构造函数的静态方法之一，用于创建一个新的数组实例，其中的元素是传入 Array.of() 的参数。

语法

const newArray = Array.of(element0, element1, ..., elementN);

element0, element1, ..., elementN： 要包含在数组中的元素。

返回值

Array.of() 方法返回一个新的数组实例，其中包含传入的参数作为元素。

示例

// 使用 Array.of 创建新数组
const newArray = Array.of(1, 2, 3, 'apple', 'orange');

console.log(newArray);
// 输出：[1, 2, 3, 'apple', 'orange']

在上述示例中，Array.of() 方法被用于创建一个包含数字和字符串的新数组 newArray。这个方法保证参数都会成为数组的元素，而不会像 Array 构造函数一样可能因参数数量不同而产生不同的行为。

注意事项

Array.of() 方法与 Array 构造函数的行为不同，后者在只有一个参数且参数是数字时，会创建一个具有指定长度的空数组，而不是包含该参数的数组。
Array.of() 可以确保传入的参数都成为数组的元素。

console.log(Array.of(3));      // 输出：[3]
console.log(Array.of(3, 4, 5)); // 输出：[3, 4, 5]
console.log(new Array(3));     // 输出：[undefined, undefined, undefined]
console.log(new Array(3, 4, 5)); // 输出：[3, 4, 5]

2、数组原型对象的属性

2.1 `at()`

定义和用法

at() 方法用于接收一个整数值并返回该索引对应的元素，允许正数和负数。负整数从数组中的最后一个元素开始倒数。

匹配给定索引的数组中的元素。如果找不到指定的索引，则返回 undefined。

在传递非负数时，at() 方法等价于括号表示法。例如，array[0] 和 array.at(0) 均返回第一个元素。但是，当你需要从数组的末端开始倒数时，则不能使用 Python 和 R 语言中支持的 array[-1]，因为方括号内的所有值都会被视为字符串属性，因此你最终读取的是 array["-1"]，这只是一个普通的字符串属性而不是数组索引。

通常的做法是访问 length 并将其减去从末端开始的相对索引。例如，array[array.length - 1]。at() 方法允许使用相对索引，因此上面的示例可以简化为 array.at(-1)。更正式地，当 index < 0 时，该方法将访问索引 index + array.length。

at() 方法是通用的。其仅期望 this 具有 length 属性和以整数为键的属性。

语法

at(index)

参数

参数	描述
index	要返回的数组元素的索引（位置）。当传递负数时，支持从数组末端开始的相对索引；也就是说，如果使用负数，返回的元素将从数组的末端开始倒数。

2.2 `concat()`

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

该方法不会改变现有的数组，而是返回一个新的数组。

语法

array1.concat(array2, array3,..., arrayX)

参数

`参数`	`描述`
`array2, array3,..., arrayX`	必需。需要连接的数组。

返回值

Type	描述
Array 对象	返回一个新的数组。该数组是通过把所有 `arrayX` 参数添加到 `arrayObject` 中生成的。如果要进行 `concat`() 操作的参数是数组，那么添加的是数组中的元素，而不是数组。

案例

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = ['g', 'h', 'i'];
const array4 = array1.concat(array2, array3);
 
console.log(array4);  // 输出：['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i']

注意：在数组的运算中concat()其实是可以和[...]es6扩展运算符互换

2.3 `copyWithin()`

定义和用法

copyWithin() 方法用于从数组的指定位置拷贝元素到数组的另一个指定位置中。

语法

array.copyWithin(target, start, end)

参数

参数	描述
target	必需。复制到指定目标索引位置。
start	可选。元素复制的起始位置。
end	可选。停止复制的索引位置 (默认为 `array.length`)。如果为负值，表示倒数。

案例

var fruits = ["Banana", "Orange", "Apple", "Mango", "Kiwi", "Papaya"];
fruits.copyWithin(2, 0, 2);

2.4 `entrys()`

其实这个不算是数组里面的方法，其实因为数组对象继承的是object对象这个属于object对象的属性方法这个方法是我在es语言规范网站看到的

Object.entries() 是一个用于获取对象自身可枚举属性的键值对数组的方法。它返回一个包含对象所有属性的数组，其中每个元素都是一个包含键值对的数组。

Object.entries() 函数接受一个对象作为参数，并返回一个包含该对象自身可枚举属性的键值对数组。下面是该函数的详细解释、代码示例以及使用场景：

语法

Object.entries(obj)

obj：要获取键值对的对象。

代码示例

const myObject = {
  key1: 'value1',
  key2: 'value2',
  key3: 'value3'
};

const entriesArray = Object.entries(myObject);

console.log(entriesArray);
//运行结果
[
  ['key1', 'value1'],
  ['key2', 'value2'],
  ['key3', 'value3']
]

使用场景

迭代对象属性：通过使用Object.entries()，可以更轻松地迭代对象的属性，特别是当你需要同时访问键和值时。

const myObject = {
  key1: 'value1',
  key2: 'value2',
  key3: 'value3'
};

for (const [key, value] of Object.entries(myObject)) {
  console.log(`${key}: ${value}`);
}

将对象转换为Map：Object.entries() 结果可以用于创建一个 Map 对象。

const myObject = {
  key1: 'value1',
  key2: 'value2',
  key3: 'value3'
};

const myMap = new Map(Object.entries(myObject));

console.log(myMap);

过滤属性：你可以使用 Object.entries() 结果来过滤对象的属性。

const myObject = {
  key1: 'value1',
  key2: 'value2',
  key3: 'value3'
};

const filteredEntries = Object.entries(myObject).filter(([key, value]) => key !== 'key2');

console.log(Object.fromEntries(filteredEntries));

2.5 `every（）`

定义和用法

every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。

every() 方法使用指定函数检测数组中的所有元素：

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

注意： every() 不会对空数组进行检测。

注意： every() 不会改变原始数组。

语法

array.every(function(currentValue,index,arr), thisValue)

参数说明

参数	描述
`function(currentValue, index,arr)`	必须。函数，数组中的每个元素都会执行这个函数函数参数: 参数描述`currentValue`必须。当前元素的值index可选。当前元素的索引值`arr`可选。当前元素属于的数组对象
`thisValue`	可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。如果省略了 `thisValue` ，"`this`" 的值为 "`undefined`"

技术细节

返回值：	布尔值。如果所有元素都通过检测返回 true，否则返回 false。

案例

// 检查数组中的所有元素是否都是偶数
const numbers = [2, 4, 6, 8, 10];

const allEven = numbers.every(function(number) {
  return number % 2 === 0;
});

console.log(allEven); // 输出 true，因为所有元素都是偶数

2.6 `fill()`

2.7 `filter()`

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

注意： filter() 不会对空数组进行检测。

注意： filter() 不会改变原始数组。

语法

array.filter(function(currentValue,index,arr), thisValue)

参数说明

参数	描述
`function(currentValue, index,arr)`	必须。函数，数组中的每个元素都会执行这个函数函数参数: 参数描述`currentValue`必须。当前元素的值index可选。当前元素的索引值`arr`可选。当前元素属于的数组对象
`thisValue`	可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。如果省略了 `thisValue` ，"this" 的值为 "`undefined`"

案例

// 从数组中筛选出年龄大于等于18岁的人
const persons = [
  { name: '小明', age: 25 },
  { name: '小红', age: 17 },
  { name: '小刚', age: 20 },
  { name: '小丽', age: 16 }
];

const adults = persons.filter(function(person) {
  return person.age >= 18; // 保留年龄大于等于18岁的人
});

console.log(adults);

2.8 `find()`

定义和用法

find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。

find() 方法为数组中的每个元素都调用一次函数执行：

当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。
如果没有符合条件的元素返回 undefined

注意: find() 对于空数组，函数是不会执行的。

注意: find() 并没有改变数组的原始值。

返回值：返回符合测试条件的第一个数组元素值，如果没有符合条件的则返回 undefined

语法

array.find(function(currentValue, index, arr),thisValue)

参数

参数	描述
`function(currentValue, index,arr)`	必需。数组每个元素需要执行的函数。函数参数:参数描述`currentValue`必需。当前元素index可选。当前元素的索引值`arr`可选。当前元素所属的数组对象
`thisValue`	可选。传递给函数的值一般用 "this" 值。如果这个参数为空， "undefined" 会传递给 "this" 值

案例

// 查找数组中第一个满足条件的元素
const numbers = [1, 3, 5, 7, 9, 2, 4, 6, 8, 10];

const foundNumber = numbers.find(function(number) {
  return number > 5; // 找到第一个大于5的元素
});

console.log(foundNumber);

2.9 `findIndex()`

定义和用法

findIndex() 方法返回通过测试（函数内判断）的数组的第一个元素的索引。

findIndex() 方法为数组中的每个元素都调用一次函数执行：

当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引，之后的值不会再调用执行函数。
如果没有符合条件的元素返回 -1。

注意: findIndex() 对于空数组，函数是不会执行的。

注意: findIndex() 并没有改变数组的原始值。

返回值：返回符合测试条件的第一个数组元素的索引，如果没有符合条件的则返回 -1

语法

array.findIndex(function(currentValue, index, arr), thisValue)

参数

参数	描述
`function(currentValue, index,arr)`	必需。数组每个元素需要执行的函数。函数参数:参数描述`currentValue`必需。当前元素index可选。当前元素的索引值`arr`可选。当前元素所属的数组对象
`thisValue`	可选。传递给函数的值一般用 "this" 值。如果这个参数为空， "undefined" 会传递给 "this" 值

案例

// 查找数组中第一个满足条件的元素的索引
const numbers = [1, 3, 5, 7, 9, 2, 4, 6, 8, 10];

const foundIndex = numbers.findIndex(function(number) {
  return number > 5; // 找到第一个大于5的元素的索引
});

console.log(foundIndex);

在这个例子中，findIndex() 方法用于查找数组 numbers 中第一个大于5的元素，并返回该元素的索引。因为第一个大于5的元素是 7，它在数组中的索引是 3，所以 foundIndex 的值将是 3。

2.10 `findLast()`

findLast() 方法反向迭代数组，并返回满足提供的测试函数的第一个元素的值。如果没有找到对应元素，则返回 undefined

其实就是从后遍历取值

案例

const inventory = [
  { name: "apples", quantity: 2 },
  { name: "bananas", quantity: 0 },
  { name: "fish", quantity: 1 },
  { name: "cherries", quantity: 5 },
];

// 库存低时返回 true
function isNotEnough(item) {
  return item.quantity < 2;
}

console.log(inventory.findLast(isNotEnough));
// { name: "fish", quantity: 1 }

2.11 `findLastIndex()`

这个返回的是索引值

2.12 `flat()`

定义和用法

flat() 方法用于将嵌套的数组拉平，使其变为一个新的一维数组。默认情况下，flat() 只会拉平一层。

注意： flat() 不会改变原始数组，而是返回一个新的数组。

返回值： 返回一个新的一维数组。

语法

array.flat(depth)

参数

depth（可选）： 指定拉平的深度，默认为 1。如果需要完全拉平，可以传入 Infinity。

案例

// 将嵌套数组拉平一层
const nestedArray = [1, [2, [3, 4], 5]];

const flatArray = nestedArray.flat();

console.log(flatArray);
// 输出：[1, 2, [3, 4], 5]

// 将嵌套数组完全拉平
const deeplyNestedArray = [1, [2, [3, [4, 5]]]];

const fullyFlatArray = deeplyNestedArray.flat(Infinity);

console.log(fullyFlatArray);
// 输出：[1, 2, 3, 4, 5]

在上面的例子中，flat() 方法被用于将嵌套数组 nestedArray 拉平一层，以及将深度嵌套数组 deeplyNestedArray 完全拉平。传入 depth 参数可以指定拉平的深度，如果不传，默认为 1。

2.13 `flatMap()`

定义和用法

flatMap() 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。它与 map() 和 flat() 的组合相似，但在一步内完成。

注意： flatMap() 不会改变原始数组，而是返回一个新的数组。

返回值： 返回一个新的一维数组。

语法

array.flatMap(callback(currentValue, index, array), thisArg)

callback： 用于映射每个元素的函数。函数参数包括当前元素 currentValue、当前元素的索引 index 和调用 flatMap 的数组 array。
thisArg（可选）： 执行回调时使用的 this 值。

案例

// 使用 flatMap 将数组中的每个元素乘以2并且展开一层
const numbers = [1, 2, 3, 4];

const doubledArray = numbers.flatMap(function(number) {
  return [number * 2];
});

console.log(doubledArray);
// 输出：[2, 4, 6, 8]

在上面的例子中，flatMap() 方法被用于将数组 numbers 中的每个元素乘以2，并将结果展开一层。flatMap() 接受一个回调函数，该回调函数将应用于数组中的每个元素，然后将结果展开成一个新数组。

flatMap() 在处理数组时非常实用，特别是在需要映射和展开的场景下。

简化映射和展平： 如果你有一个嵌套数组，想要对每个元素进行某种操作，并且最后得到一个一维数组，flatMap() 是一个非常方便的选择。
减少代码量： 使用 flatMap() 可以减少编写嵌套 map() 和 flat() 的代码。它在一步内完成了这两个操作。

// 使用 flatMap 处理多维数组
const nestedArray = [[1, 2], [3, 4], [5, 6]];

const flattenedArray = nestedArray.flatMap(function(innerArray) {
  return innerArray.map(function(element) {
    return element * 2;
  });
});

console.log(flattenedArray);
// 输出：[2, 4, 6, 8, 10, 12]

在这个示例中，flatMap() 将嵌套数组 nestedArray 中的每个内部数组进行映射（使用 map()），然后将映射结果展平成一个新数组。这减少了代码量，并更清晰地表达了对每个元素进行的操作。

2.14 `forEach`

用法

forEach 函数是用于遍历数组的工具，它接受一个数组和一个回调函数作为参数。回调函数将被应用于数组的每个元素，依次传入当前元素、索引和数组本身作为参数。

语法

forEach(array, callback(element, index, array), thisArg)

array： 要遍历的数组。
callback： 用于对每个元素执行的回调函数。回调函数的参数包括当前元素 element、当前元素的索引 index 和调用 forEach 的数组 array。
thisArg（可选）： 执行回调时使用的 this 值。

返回值

forEach 函数没有明确的返回值，它会对数组的每个元素应用回调函数，但不会返回新的数组。

注意事项

原地修改： forEach 函数是原地修改数组的，它不返回新的数组，而是在原数组上直接执行操作。
无法中断： forEach 无法中断循环。即使在回调函数中使用 break 语句，也无法停止遍历。如果需要中断循环，可以考虑使用 for...of 循环或 some 方法。

示例

// 使用 forEach 打印每个元素的平方
const numbers = [1, 2, 3, 4];

forEach(numbers, function(element, index, array) {
  console.log(`Element at index ${index}: ${element * element}`);
});

// 输出：
// Element at index 0: 1
// Element at index 1: 4
// Element at index 2: 9
// Element at index 3: 16

在上述示例中，forEach 函数遍历数组 numbers，对每个元素应用回调函数，将当前元素的平方打印出来。

2.15 `includes()`

用法

includes 函数用于检查数组是否包含指定的元素，返回一个布尔值。

语法


includes(array, searchElement, fromIndex)

array： 要检查的数组。
searchElement： 要查找的元素。
fromIndex（可选）： 开始查找的索引位置。如果省略，默认为 0。

返回值

includes 函数返回一个布尔值，表示数组是否包含指定的元素。

注意事项

严格相等性： includes 使用严格相等运算符（===）来比较元素。因此，如果查找的元素与数组中的某个元素在值和类型上都相等，则返回 true。
不会改变数组： includes 函数不会改变原始数组，它只是进行查找操作。

示例

// 使用 includes 检查数组是否包含指定元素
const numbers = [1, 2, 3, 4];

const hasNumberTwo = includes(numbers, 2);
const hasNumberFive = includes(numbers, 5);

console.log(hasNumberTwo); // 输出：true
console.log(hasNumberFive); // 输出：false

在上述示例中，includes 函数被用于检查数组 numbers 是否包含元素 2 和 5。结果分别存储在 hasNumberTwo 和 hasNumberFive 中，并通过 console.log 打印出来。

2.16 `indexof()`

用法

indexOf 函数用于在数组中查找指定元素的索引位置，如果找到则返回第一次出现的索引，如果未找到则返回 -1。

语法

indexOf(array, searchElement, fromIndex)

array： 要查找的数组。
searchElement： 要查找的元素。
fromIndex（可选）： 开始查找的索引位置。如果省略，默认为 0。

返回值

indexOf 函数返回一个整数，表示指定元素在数组中的索引位置。如果未找到该元素，则返回 -1。

注意事项

严格相等性： indexOf 使用严格相等运算符（===）来比较元素。因此，如果查找的元素与数组中的某个元素在值和类型上都相等，则返回该元素的索引。
不会改变数组： indexOf 函数不会改变原始数组，它只是进行查找操作。

示例

// 使用 indexOf 查找数组中的元素索引
const numbers = [1, 2, 3, 4, 2];

const indexTwo = indexOf(numbers, 2);
const indexFive = indexOf(numbers, 5);

console.log(indexTwo); // 输出：1 (第一次出现的索引)
console.log(indexFive); // 输出：-1 (未找到元素)

在上述示例中，indexOf 函数被用于查找数组 numbers 中元素 2 和 5 的索引位置。结果分别存储在 indexTwo 和 indexFive 中，并通过 console.log 打印出来。

2.17 `join()`

用法

join 函数用于将数组中的所有元素连接成一个字符串，并返回该字符串。可以指定一个可选的分隔符，用于在连接元素之间插入。

语法

join(array, separator)

array： 要连接的数组。
separator（可选）： 指定用于分隔元素的字符串。如果省略，默认使用逗号 , 作为分隔符。

返回值

join 函数返回一个字符串，其中包含数组中所有元素连接起来的结果。

注意事项

不会改变数组： join 函数不会改变原始数组，它只是返回一个新的字符串。

示例

// 使用 join 将数组中的元素连接成字符串
const fruits = ['apple', 'banana', 'orange'];

const resultWithComma = join(fruits);
const resultWithHyphen = join(fruits, '-');

console.log(resultWithComma); // 输出：'apple,banana,orange'
console.log(resultWithHyphen); // 输出：'apple-banana-orange'

在上述示例中，join 函数被用于将数组 fruits 中的元素连接成字符串。两次调用分别使用逗号和连字符作为分隔符，结果分别存储在 resultWithComma 和 resultWithHyphen 中，并通过 console.log 打印出来。

2.18 `keys()`

用法

keys 方法是数组对象的内置方法之一，用于获取一个包含数组索引的迭代器对象。

语法

const array = ['a', 'b', 'c'];
const iterator = array.keys();

array： 要获取索引的数组。

返回值

keys 方法返回一个迭代器对象，该对象包含数组中每个元素的索引。

注意事项

不包括稀疏数组的空缺索引： 如果数组是稀疏数组（包含空缺索引的数组），keys 方法不会返回这些空缺索引。

示例

const array = ['a', 'b', 'c'];
const iterator = array.keys();

for (const index of iterator) {
  console.log(index);
}
// 输出：
// 0
// 1
// 2

在上述示例中，keys 方法被用于获取数组 array 的索引迭代器。然后，通过 for...of 循环遍历迭代器，打印出每个元素的索引。

请注意，keys 方法返回的是一个迭代器对象，如果需要将其转换为数组，可以使用 Array.from(iterator) 或者使用扩展运算符 [...iterator]。

2.19 `lastIndexOf()`

用法

lastIndexOf 函数用于在数组中从后向前查找指定元素的索引位置，如果找到则返回最后一次出现的索引，如果未找到则返回 -1。

语法


lastIndexOf(array, searchElement, fromIndex)

array： 要查找的数组。
searchElement： 要查找的元素。
fromIndex（可选）： 开始查找的索引位置。如果省略，默认为数组的末尾。

返回值

lastIndexOf 函数返回一个整数，表示指定元素在数组中的最后一次出现的索引位置。如果未找到该元素，则返回 -1。

注意事项

严格相等性： lastIndexOf 使用严格相等运算符（===）来比较元素。因此，如果查找的元素与数组中的某个元素在值和类型上都相等，则返回最后一次出现的该元素的索引。
不会改变数组： lastIndexOf 函数不会改变原始数组，它只是进行查找操作。

示例

// 使用 lastIndexOf 查找数组中元素的最后一次出现的索引
const numbers = [1, 2, 3, 4, 2];

const lastIndexTwo = lastIndexOf(numbers, 2);
const lastIndexFive = lastIndexOf(numbers, 5);

console.log(lastIndexTwo); // 输出：4 (最后一次出现的索引)
console.log(lastIndexFive); // 输出：-1 (未找到元素)

在上述示例中，lastIndexOf 函数被用于查找数组 numbers 中元素 2 和 5 的最后一次出现的索引位置。结果分别存储在 lastIndexTwo 和 lastIndexFive 中，并通过 console.log 打印出来

2.20 `map ()`

用法

map 函数是数组对象的内置方法之一，用于创建一个新数组，其元素是原数组中每个元素调用回调函数的结果。

语法

const newArray = array.map(callback(element, index, array), thisArg);

array： 要进行映射的数组。
callback： 用于映射每个元素的回调函数。函数参数包括当前元素 element、当前元素的索引 index 和调用 map 的数组 array。
thisArg（可选）： 在执行回调时使用的 this 值。

返回值

map 函数返回一个新数组，其中包含原数组中每个元素调用回调函数的结果。

注意事项

不改变原数组： map 函数不会修改原数组，而是返回一个新的映射后的数组。
不处理稀疏数组的空缺元素： 如果数组是稀疏数组（包含空缺元素的数组），map 不会调用回调函数处理这些空缺元素。

示例

// 使用 map 将数组中的每个元素加倍
const numbers = [1, 2, 3, 4];

const doubledArray = numbers.map(function(element) {
  return element * 2;
});

console.log(doubledArray);
// 输出：[2, 4, 6, 8]

在上述示例中，map 函数被用于将数组 numbers 中的每个元素加倍，结果存储在 doubledArray 中，并通过 console.log 打印出来。

2.21 `pop ()`

用法

pop 方法是数组对象的内置方法之一，用于删除并返回数组的最后一个元素。

语法

const removedElement = array.pop();

array： 要从中删除元素的数组。

返回值

pop 方法返回被删除的元素。如果数组为空，则返回 undefined。

注意事项

修改原数组： pop 方法会直接修改调用它的数组，将数组的最后一个元素删除。
空数组返回 undefined： 如果数组为空，调用 pop 方法会返回 undefined。
不处理稀疏数组的空缺元素： 如果数组是稀疏数组（包含空缺元素的数组），pop 不会处理这些空缺元素。

示例

// 使用 pop 删除数组的最后一个元素
const fruits = ['apple', 'banana', 'orange'];

const removedFruit = fruits.pop();

console.log(removedFruit); // 输出：'orange'
console.log(fruits);
// 输出：['apple', 'banana']

在上述示例中，pop 方法被用于删除数组 fruits 的最后一个元素，被删除的元素 'orange' 存储在 removedFruit 中，并通过 console.log 打印出来。最后，fruits 数组变为 ['apple', 'banana']。

2.22 `push()`

用法

push 方法是数组对象的内置方法之一，用于将一个或多个元素添加到数组的末尾。

语法

const newLength = array.push(element1, element2, ..., elementN);

array： 要向其添加元素的数组。
element1, element2, ..., elementN： 要添加到数组末尾的一个或多个元素。

返回值

push 方法返回修改后数组的新长度。

注意事项

修改原数组： push 方法会直接修改调用它的数组，在数组末尾添加新元素。
返回新数组长度： 返回的是数组添加新元素后的长度，而不是新数组本身。

示例

// 使用 push 向数组末尾添加元素
const fruits = ['apple', 'banana'];

const newLength = fruits.push('orange', 'grape');

console.log(newLength); // 输出：4
console.log(fruits);
// 输出：['apple', 'banana', 'orange', 'grape']

在上述示例中，push 方法被用于向数组 fruits 的末尾添加两个新元素 'orange' 和 'grape'。newLength 记录了新数组的长度，而 fruits 数组变为 ['apple', 'banana', 'orange', 'grape']。

2.23 `reduce()`

用法

reduce 方法是数组对象的内置方法之一，用于对数组中的每个元素执行一个提供的回调函数，将数组缩减为单个值。

语法

const result = array.reduce(callback(accumulator, currentValue, currentIndex, array), initialValue);

array： 要进行缩减操作的数组。
callback： 对数组中的每个元素执行的回调函数，函数参数包括累加器 accumulator、当前元素 currentValue、当前元素的索引 currentIndex 和调用 reduce 的数组 array。
accumulator： 累加器，保存回调函数的返回值，也可以设置初始值。
initialValue（可选）： 初始值，作为第一次调用回调函数时的 accumulator 的值。如果省略，则使用数组的第一个元素作为初始值。

返回值

reduce 方法返回累加器的最终值。

注意事项

修改原数组： reduce 方法不会修改原数组。
需要提供回调函数： reduce 方法必须接收一个回调函数作为参数。
适用于累加等操作： 适用于累加、累乘等需要将数组缩减为单个值的场景。

示例

// 使用 reduce 计算数组元素的总和
const numbers = [1, 2, 3, 4];

const sum = numbers.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);

console.log(sum); // 输出：10

在上述示例中，reduce 方法被用于计算数组 numbers 中元素的总和。回调函数依次将数组中的每个元素加到累加器上，最终返回的 sum 是数组元素的总和。

2.24 `reduceRight`()

用法

reduceRight 方法是数组对象的内置方法之一，与 reduce 方法类似，不同之处在于它是从数组的最后一个元素开始向前执行回调函数，逐步将数组缩减为单一值。

语法

const result = array.reduceRight(callback(accumulator, currentValue, currentIndex, array), initialValue);

array： 要进行缩减操作的数组。
callback： 对数组中的每个元素执行的回调函数，函数参数包括累加器 accumulator、当前元素 currentValue、当前元素的索引 currentIndex 和调用 reduceRight 的数组 array。
accumulator： 累加器，保存回调函数的返回值，也可以设置初始值。
initialValue（可选）： 初始值，作为第一次调用回调函数时的 accumulator 的值。如果省略，则使用数组的最后一个元素作为初始值。

返回值

reduceRight 方法返回累加器的最终值。

注意事项

修改原数组： reduceRight 方法不会修改原数组。
需要提供回调函数： reduceRight 方法必须接收一个回调函数作为参数。
适用于从右到左的累加操作： 适用于需要从数组的末尾开始执行的累加操作。

示例

// 使用 reduceRight 计算数组元素的连接字符串
const words = ['Hello', ' ', 'World', '!'];

const sentence = words.reduceRight(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, '');

console.log(sentence); // 输出："!World Hello"

在上述示例中，reduceRight 方法被用于将数组 words 中的元素连接成一个字符串。回调函数依次将数组中的每个元素与累加器连接，从右到左执行。最终结果是字符串 "!World Hello"。

2.25 `reverse()`

用法

reverse 方法是数组对象的内置方法之一，用于颠倒数组中元素的顺序，将数组元素从后向前重新排列。

语法

array.reverse();

array： 要进行颠倒顺序的数组。

返回值

reverse 方法返回颠倒顺序后的数组。注意，它会直接修改原数组，而不是返回一个新数组。

注意事项

修改原数组： reverse 方法会直接修改调用它的数组，颠倒数组元素的顺序。
不生成新数组： 与一些数组方法不同，reverse 不会生成一个新的数组，而是直接修改原数组。

示例

// 使用 reverse 颠倒数组的顺序
const fruits = ['apple', 'banana', 'orange'];

fruits.reverse();

console.log(fruits);
// 输出：['orange', 'banana', 'apple']

在上述示例中，reverse 方法被用于颠倒数组 fruits 中元素的顺序，最终结果是 ['orange', 'banana', 'apple']。这样，数组中的元素从后向前重新排列。

2.26 `shift()`

用法

shift 方法是数组对象的内置方法之一，用于移除数组的第一个元素，并返回被移除的元素。

语法

const removedElement = array.shift();

array： 要从中移除元素的数组。

返回值

shift 方法返回被移除的第一个元素。如果数组为空，则返回 undefined。

注意事项

修改原数组： shift 方法会直接修改调用它的数组，移除数组的第一个元素。
空数组返回 undefined： 如果数组为空，调用 shift 方法会返回 undefined。

示例

// 使用 shift 移除数组的第一个元素
const fruits = ['apple', 'banana', 'orange'];

const removedFruit = fruits.shift();

console.log(removedFruit); // 输出：'apple'
console.log(fruits);
// 输出：['banana', 'orange']

在上述示例中，shift 方法被用于移除数组 fruits 的第一个元素，被移除的元素 'apple' 存储在 removedFruit 中，并通过 console.log 打印出来。最后，fruits 数组变为 ['banana', 'orange']。

2.27 `slice()`

用法

slice 方法是数组对象的内置方法之一，用于从数组中提取一部分元素，返回一个新的数组，而不会修改原始数组。

语法

const newArray = array.slice(start, end);

array： 要提取元素的数组。
start（可选）： 提取起始位置的索引（包含在提取的范围内）。如果省略，则默认从索引 0 开始。
end（可选）： 提取结束位置的索引（不包含在提取的范围内）。如果省略，则默认提取到数组的末尾。

返回值

slice 方法返回一个新的数组，其中包含从原始数组中提取的元素。

示例

// 使用 slice 提取数组的一部分
const fruits = ['apple', 'banana', 'orange', 'grape', 'kiwi'];

const selectedFruits = fruits.slice(1, 4);

console.log(selectedFruits);
// 输出：['banana', 'orange', 'grape']

在上述示例中，slice 方法被用于从数组 fruits 中提取索引 1 到索引 3（不包含索引 4）的元素，生成一个新的数组 selectedFruits。

注意事项

slice 方法不会修改原始数组，而是返回一个新的数组。
start 和 end 参数可以是负数，表示从数组末尾开始计算的索引。
slice 方法不包含 end 索引对应的元素，即提取的范围为 [start, end)。如果省略 end，则提取到数组的末尾。

2.28 `some()`

用法

some 方法是数组对象的内置方法之一，用于检测数组中是否至少有一个元素满足指定的测试函数。

语法

const result = array.some(callback(currentValue, index, array));

array： 要进行测试的数组。
callback： 对数组中的每个元素执行的测试函数。函数参数包括当前元素 currentValue、当前元素的索引 index 和调用 some 的数组 array。

返回值

some 方法返回一个布尔值，表示数组中是否至少有一个元素满足测试条件。

示例

// 使用 some 判断数组中是否存在偶数
const numbers = [1, 3, 5, 7, 8, 9];

const hasEvenNumber = numbers.some(function(number) {
  return number % 2 === 0;
});

console.log(hasEvenNumber); // 输出：true

在上述示例中，some 方法被用于判断数组 numbers 中是否存在偶数。由于数组中包含数字 8，因此 hasEvenNumber 的值为 true。

注意事项

some 方法会在找到第一个满足条件的元素后就停止遍历，不会对数组中的所有元素进行测试。
如果数组为空，则 some 方法始终返回 false。
some 方法对数组的每个元素调用一次提供的测试函数，直到找到一个使测试函数返回 true 的元素。
some 方法可以被用于测试各种条件，例如查找包含特定字符串、满足某种条件的数字等。

2.29 `sort()`

用法

sort 方法是数组对象的内置方法之一，用于对数组元素进行排序。默认情况下，sort 方法按照字符串 Unicode 码点的顺序进行排序。

语法

array.sort(compareFunction);

array： 要排序的数组。
compareFunction（可选）： 用于指定排序顺序的比较函数。如果省略，元素将按照转换为字符串的 Unicode 码点进行排序。

返回值

sort 方法会直接修改原始数组，并返回排序后的数组。注意，原始数组被修改，而不是返回一个新的数组。

示例

// 使用 sort 对数组进行升序排序
const numbers = [5, 2, 8, 1, 4];

numbers.sort(function(a, b) {
  return a - b;
});

console.log(numbers);
// 输出：[1, 2, 4, 5, 8]

在上述示例中，sort 方法被用于对数组 numbers 进行升序排序。比较函数 (a, b) => a - b 指定了升序排序的规则，最终结果是 [1, 2, 4, 5, 8]。

注意事项

如果省略 compareFunction，sort 方法会将元素转换为字符串并按照 Unicode 码点进行排序。这可能导致不符合期望的排序结果。
比较函数 compareFunction 接受两个参数 a 和 b，返回一个负数表示 a 应该在 b 前面，返回零表示 a 和 b 相等，返回正数表示 a 应该在 b 后面。
比较函数可以自定义排序规则，例如升序、降序，或者按照特定条件排序。
注意，sort 方法直接修改原始数组，而不是返回一个新的数组。如果需要保留原数组，可以在排序前先创建数组的副本。

2.30 `splice()`

用法

splice 方法是数组对象的内置方法之一，用于在指定位置添加或删除元素，同时返回被删除的元素组成的数组。

语法

const removedElements = array.splice(start, deleteCount, item1, item2, ...);

array： 要进行操作的数组。
start： 指定开始操作的索引位置。
deleteCount： 要删除的元素数量。如果设置为 0，则不删除元素。
item1, item2, ...（可选）： 要添加到数组的元素。

返回值

splice 方法返回一个包含被删除元素的数组。如果没有删除任何元素，则返回空数组。

示例

// 使用 splice 删除数组中的元素
const numbers = [1, 2, 3, 4, 5];

const removedElements = numbers.splice(2, 2, 6, 7);

console.log(removedElements); // 输出：[3, 4]
console.log(numbers);
// 输出：[1, 2, 6, 7, 5]

在上述示例中，splice 方法被用于从数组 numbers 的索引 2 开始删除 2 个元素，并同时在该位置插入 6 和 7。被删除的元素 [3, 4] 存储在 removedElements 中，而修改后的数组为 [1, 2, 6, 7, 5]。

注意事项

splice 方法会直接修改原始数组。
可以通过设置 deleteCount 为 0 来实现在指定位置插入元素而不删除任何元素。
如果省略 deleteCount，则从 start 索引开始删除数组中的所有元素。
splice 方法可以用于删除、插入和替换数组中的元素。

2.31 `toLocaleString()`

用法

toLocaleString 方法是数组对象的内置方法之一，用于返回一个字符串，该字符串表示数组中的元素。该方法会根据当前环境的语言和区域设置，将数字进行本地化处理，包括数字的分组、小数点符号等。

语法

const localizedString = array.toLocaleString(locale, options);

array： 要进行本地化处理的数组。
locale（可选）： 一个字符串，表示要使用的语言环境（例如 "en-US" 或 "fr-FR"）。如果省略，则使用运行时环境的默认语言环境。
options（可选）： 一个包含配置选项的对象，用于自定义本地化输出的格式。

返回值

toLocaleString 方法返回一个表示数组元素的本地化字符串。

示例

// 使用 toLocaleString 将数组元素本地化
const numbers = [12345.6789, 9876.5432, 123.4567];

const localizedString = numbers.toLocaleString('en-US', {
  style: 'currency',
  currency: 'USD'
});

console.log(localizedString);
// 输出："$12,345.68, $9,876.54, $123.46"

在上述示例中，toLocaleString 方法被用于将数组 numbers 中的数字转换为本地化字符串，使用美国英语 ("en-US") 语言环境，并设置货币格式。最终输出的字符串表示为 "$12,345.68, $9,876.54, $123.46"。

注意事项

toLocaleString 方法主要用于对数字进行本地化处理，例如格式化成货币、百分比等形式。
locale 参数表示语言环境，可以是 BCP 47 格式的字符串。
options 参数是一个包含配置选项的对象，可以用于自定义输出的格式，例如设置货币代码、小数位数等。不同语言环境下的默认配置可能有所不同。

2.32 `toString`

在 JavaScript 中，toString 是对象的一个方法，用于将对象转换为字符串形式。对于数组对象，toString 方法会返回一个包含数组中所有元素的字符串，元素之间用逗号分隔。

语法

array.toString()

示例

const fruits = ['apple', 'banana', 'orange'];

const fruitsString = fruits.toString();

console.log(fruitsString);
// 输出："apple,banana,orange"

在上述示例中，toString 方法被用于将数组 fruits 转换为字符串。默认情况下，数组元素会以逗号分隔的形式拼接成一个字符串。

注意事项

toString 方法不会改变原始数组，而是返回一个新的表示数组的字符串。
如果数组的元素是对象，将调用对象的 toString 方法进行转换。
toString 方法是 Object 原型上的方法，因此所有的 JavaScript 对象都继承了这个方法。

需要注意的是，toString 方法不是数组的唯一表示为字符串的方法。其他方法如 join 也可以用于将数组转换为字符串，且具有更多的定制选项。

2.33 `unshift()`

unshift 是 JavaScript 数组对象的一个方法，用于在数组的开头添加一个或多个元素，并返回修改后的数组的新长度。

语法

array.unshift(element1, element2, ..., elementN)

array： 要操作的数组。
element1, element2, ..., elementN： 要添加到数组开头的元素。

返回值

unshift 方法返回一个表示修改后的数组的新长度。

示例

const numbers = [3, 4, 5];

const newLength = numbers.unshift(1, 2);

console.log(newLength); // 输出：5
console.log(numbers);   // 输出：[1, 2, 3, 4, 5]

在上述示例中，unshift 方法被用于在数组 numbers 的开头添加元素 1 和 2，并返回新的数组长度 5。数组变成 [1, 2, 3, 4, 5]。

注意事项

unshift 方法会直接修改原始数组，而不是返回一个新的数组。
可以一次添加多个元素到数组的开头。
添加的元素按照参数的顺序依次排在数组的开头。

unshift 方法通常用于在数组的前端插入新的元素，与 push 方法不同，unshift 在数组的前端添加元素，而 push 在数组的末尾添加元素。

2.34 `valueOf()`

在 JavaScript 中，valueOf 是对象的一个方法，用于返回对象的原始值。对于数组对象，valueOf 方法返回数组对象本身。

语法

array.valueOf()

示例

const fruits = ['apple', 'banana', 'orange'];

const arrayValue = fruits.valueOf();

console.log(arrayValue);
// 输出：["apple", "banana", "orange"]

在上述示例中，valueOf 方法被用于获取数组 fruits 的原始值，即数组本身。

注意事项

valueOf 方法通常由 JavaScript 在需要原始值的上下文中调用。例如，当将对象用于字符串拼接时，JavaScript 会首先尝试调用对象的 valueOf 方法，然后再尝试调用 toString 方法。

const fruits = ['apple', 'banana', 'orange'];

console.log('Array: ' + fruits);
// 输出：Array: apple,banana,orange

在这个例子中，字符串拼接时，JavaScript 首先调用了数组的 valueOf 方法，然后再调用了数组的 toString 方法。由于数组的 valueOf 方法返回数组本身，所以最终输出了数组的字符串形式。

如果需要明确将数组转换为字符串，通常更常用的是直接调用数组的 toString 方法或使用 join 方法。

const fruits = ['apple', 'banana', 'orange'];

console.log(fruits.toString());
// 输出：apple,banana,orange
console.log(fruits.join(', '));
// 输出：apple, banana, orange

总体来说，在大多数情况下，我们不需要直接调用 valueOf 方法，因为 JavaScript 在需要对象原始值的上下文中会自动调用它。

深入学习数组API

JavaScript数组方法

思维导图

大纲

1、数组构造函数的属性

1.1 length

1.2Array.from()

1.3Array.isArray()

1.4 Array.of()

2、数组原型对象的属性

2.1 at()

2.2 concat()

2.3 copyWithin()

2.4 entrys()

2.5 every（）

2.6 fill()

2.7 filter()

2.8 find()

2.9 findIndex()

2.10 findLast()

2.11 findLastIndex()

2.12 flat()

2.13 flatMap()

2.14 forEach

2.15 includes()

2.16 indexof()

2.17 join()

2.18 keys()

2.19 lastIndexOf()

2.20 map ()

2.21 pop ()

2.22 push()

2.23 reduce()

2.24 reduceRight()

2.25 reverse()

2.26 shift()

2.27 slice()

2.28 some()

2.29 sort()

2.30 splice()

2.31 toLocaleString()

2.32 toString

2.33 unshift()

2.34 valueOf()

1.1 `length`

1.2`Array.from()`

1.3`Array.isArray()`

1.4 `Array.of()`

2.1 `at()`

2.2 `concat()`

2.3 `copyWithin()`

2.4 `entrys()`

2.5 `every（）`

2.6 `fill()`

2.7 `filter()`

2.8 `find()`

2.9 `findIndex()`

2.10 `findLast()`

2.11 `findLastIndex()`

2.12 `flat()`

2.13 `flatMap()`

2.14 `forEach`

2.15 `includes()`

2.16 `indexof()`

2.17 `join()`

2.18 `keys()`

2.19 `lastIndexOf()`

2.20 `map ()`

2.21 `pop ()`

2.22 `push()`

2.23 `reduce()`

2.24 `reduceRight`()

2.25 `reverse()`

2.26 `shift()`

2.27 `slice()`

2.28 `some()`

2.29 `sort()`

2.30 `splice()`

2.31 `toLocaleString()`

2.32 `toString`

2.33 `unshift()`

2.34 `valueOf()`