前几天小哆啦总结了字符串常用的
api
,忽然小哆啦想到作为一名前端攻城狮数组的api
必须得多多了解顺便就总结一下数组中常用的方法,如果有什么不对的地方期待大家批评指正。参考资料:
(1)Array - JavaScript | MDN (mozilla.org)
大纲
序号 | 方法 | 含义 | 返回值 | 是否改变原数组 | 版本 |
---|---|---|---|---|---|
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.2Array.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.3Array.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 在需要对象原始值的上下文中会自动调用它。