1. Array构造函数方法
Array.isArray(arr)
Array.isArray(arr)
是 JavaScript 中用于检查一个值是否是数组的方法。它返回一个布尔值,如果给定的值是数组,则返回 true
,否则返回 false
。
语法:
Array.isArray(value);
value
:要检查的值。
返回值:
- 如果
value
是数组,则返回true
;否则返回false
。
示例:
const numbers = [1, 2, 3];
// 检查是否是数组
console.log(Array.isArray(numbers)); // 输出: true
const notAnArray = 'Hello';
// 检查是否是数组
console.log(Array.isArray(notAnArray)); // 输出: false
在上述示例中,Array.isArray(numbers)
返回 true
,因为 numbers
是一个数组。而 Array.isArray(notAnArray)
返回 false
,因为 notAnArray
不是数组。
2.原地修改数组方法(不会返回新数组)
arr.push()
arr.push()
是 JavaScript 中用于向数组末尾添加一个或多个元素的方法。该方法会修改原始数组,返回修改后的数组的长度。 注意:添加多个元素要用展开语法 arr.push(...[1,2,3])
语法:
arr.push(element1, ..., elementN);
element1, ..., elementN
:要添加到数组末尾的元素。
返回值:
- 如果
value
是数组,则返回true
;否则返回false
。
示例:
const fruits = ['apple', 'orange', 'banana'];
// 向数组末尾添加一个元素
const newLength = fruits.push('grape');
console.log(fruits); // 输出: ['apple', 'orange', 'banana', 'grape']
console.log(newLength); // 输出: 4
// 向数组末尾添加多个元素
fruits.push('pineapple', 'kiwi');
console.log(fruits); // 输出: ['apple', 'orange', 'banana', 'grape', 'pineapple', 'kiwi']
在上述示例中,fruits.push('grape')
向 fruits
数组末尾添加了一个元素 'grape'
,并返回新的数组长度。后续的 fruits.push('pineapple', 'kiwi')
添加了多个元素,同样修改了原始数组。
arr.pop()
arr.pop()
是 JavaScript 中用于从数组末尾移除并返回一个元素的方法。该方法会修改原始数组,返回被移除的元素。(简单的说就是:弹出末尾元素,并返回它)
语法:
const poppedElement = arr.pop();
poppedElement
:被移除的元素。
示例:
const fruits = ['apple', 'orange', 'banana'];
// 从数组末尾移除一个元素
const removedElement = fruits.pop();
console.log(fruits); // 输出: ['apple', 'orange']
console.log(removedElement); // 输出: 'banana'
在上述示例中,fruits.pop()
从 fruits
数组末尾移除了一个元素,并返回被移除的元素 'banana'
。原始数组被修改,仅包含 'apple'
和 'orange'
两个元素。
arr.reverse()
arr.reverse()
是 JavaScript 中用于颠倒数组元素顺序的方法。该方法会修改原始数组,并返回颠倒后的数组。(简单的说就是:反转数组)
语法:
arr.reverse();
示例:
const fruits = ['apple', 'orange', 'banana'];
// 颠倒数组元素顺序
fruits.reverse();
console.log(fruits); // 输出: ['banana', 'orange', 'apple']
在上述示例中,fruits.reverse()
将 fruits
数组中的元素顺序颠倒,原始数组被修改成 ['banana', 'orange', 'apple']
。请注意,该方法会直接修改原始数组,而不会创建一个新的数组。
arr.sort()
arr.sort()
是 JavaScript 中用于对数组元素进行排序的方法。该方法会修改原始数组,并返回排序后的数组。
语法:
arr.sort([compareFunction]);
compareFunction
(可选):用于指定排序顺序的比较函数。如果不提供该参数,则元素按照转换为字符串的各个字符的 Unicode 位点进行排序。
示例:
const numbers = [5, 2, 9, 1];
// 默认排序(按字符的 Unicode 位点)
numbers.sort();
console.log(numbers); // 输出: [1, 2, 5, 9]
// 使用比较函数进行数字排序
numbers.sort((a, b) => a - b);
console.log(numbers); // 输出: [1, 2, 5, 9]
numbers.sort((a, b) => b - a);
console.log(numbers); // 输出: [9, 5, 2, 1]
//如果不提供比较函数,默认的 numbers.sort() 会将数组元素都转换为字符串,然后按照字符的 Unicode 位点进行排序,对于数字,这样的排序方式可能会导致不符合数字顺序的结果。
const numbersTwo = [3, 10, 2, 1];
// 默认排序(按字符的 Unicode 位点)
numbersTwo.sort();
console.log(numbersTwo); // 输出: [1, 10, 2, 3]
// 使用比较函数进行数字排序
numbersTwo.sort((a, b) => a - b);
console.log(numbersTwo); // 输出: [1, 2, 3, 10]
在上述示例中,numbers.sort()
默认按字符的 Unicode 位点对数组元素进行排序,结果是 [1, 2, 5, 9]
。为了实现数字排序,我们提供了一个比较函数 (a, b) => a - b
,它按升序排列数字。numbersTwo.sort()
将数组元素 [3, 10, 2, 1]
转换为字符串后,按字符的 Unicode 位点进行排序,结果是 [1, 10, 2, 3]
。这是因为字符 "1" 在 Unicode 中的位点小于字符 "2",所以 "10" 排在 "2" 前面。
注意事项:
- 如果省略
compareFunction
,sort
方法会将数组元素都转换为字符串进行比较。这可能导致不符合数字顺序的结果。 - 提供
compareFunction
函数时,它应该返回负值、零或正值,分别表示a
应该在b
前面、相等或在b
后面。
arr.shift()
arr.shift()
是 JavaScript 中用于从数组的开头移除并返回一个元素的方法。该方法会修改原始数组,并返回被移除的元素。(简单的说就是:删除并返回第一个元素)
语法:
const shiftedElement = arr.shift();
shiftedElement
:被移除的元素。
示例:
const fruits = ['apple', 'orange', 'banana'];
// 从数组开头移除一个元素
const removedElement = fruits.shift();
console.log(fruits); // 输出: ['orange', 'banana']
console.log(removedElement); // 输出: 'apple'
在上述示例中,fruits.shift()
从 fruits
数组开头移除了一个元素,并返回被移除的元素 'apple'
。原始数组被修改,仅包含 'orange'
和 'banana'
两个元素。
arr.splice(index, howmany, item1, item2, item3)
arr.splice(index, howmany, item1, item2, ..., itemN)
是 JavaScript 中用于修改数组的方法,它可以删除元素、添加元素或替换元素。起始位置由index决定,多少个由howmany决定,item是要增加或替换成的元素。
参数:
index
:必需,指定要开始修改的位置(索引)。howmany
:可选,表示要删除的元素数量。如果为 0,则不删除元素。item1, item2, ..., itemN
:可选,要添加到数组的新元素。
返回值:
- 该方法返回被删除的元素组成的数组。
示例:
const fruits = ['apple', 'orange', 'banana', 'grape'];
// 删除元素
const removedElements = fruits.splice(1, 2);
console.log(fruits); // 输出: ['apple', 'grape']
console.log(removedElements); // 输出: ['orange', 'banana']
// 添加元素
fruits.splice(1, 0, 'kiwi', 'melon');
console.log(fruits); // 输出: ['apple', 'kiwi', 'melon', 'grape']
// 替换元素
fruits.splice(2, 1, 'cherry');
console.log(fruits); // 输出: ['apple', 'kiwi', 'cherry', 'grape']
在上述示例中:
fruits.splice(1, 2)
从索引 1 开始删除 2 个元素,返回被删除的元素数组['orange', 'banana']
。fruits.splice(1, 0, 'kiwi', 'melon')
从索引 1 开始不删除元素,但在该位置添加了'kiwi'
和'melon'
。fruits.splice(2, 1, 'cherry')
从索引 2 开始删除 1 个元素('cherry'
用于替代),返回被删除的元素数组['melon']
。
arr.unshift()
arr.unshift()
是 JavaScript 中用于向数组的开头添加一个或多个元素的方法。该方法会修改原始数组,并返回修改后的数组的长度。(简单的说就是:在数组开头增加一个或多个元素,并返回新长度)
语法:
const newLength = arr.unshift(element1, ..., elementN);
element1, ..., elementN
:要添加到数组开头的元素。
返回值:
- 返回添加元素后数组的新长度。
示例:
const fruits = ['orange', 'banana'];
// 向数组开头添加一个元素
const newLength = fruits.unshift('apple');
console.log(fruits); // 输出: ['apple', 'orange', 'banana']
console.log(newLength); // 输出: 3
// 向数组开头添加多个元素
fruits.unshift('kiwi', 'melon');
console.log(fruits); // 输出: ['kiwi', 'melon', 'apple', 'orange', 'banana']
在上述示例中,fruits.unshift('apple')
向 fruits
数组开头添加了一个元素 'apple'
,并返回新的数组长度 3
。后续的 fruits.unshift('kiwi', 'melon')
向开头添加了多个元素,同样修改了原始数组。
arr.fill(value, start, end)
arr.fill(value, start, end)
是 JavaScript 中用于填充数组元素的方法。该方法会修改原始数组,并返回修改后的数组。(简单的说就是:以value填充[start,end]区间)
参数:
value
:要用于填充数组的值。start
(可选):起始索引,默认为0
。end
(可选):结束索引(不包含),默认为数组的长度
返回值:
- 修改后的原始数组。
示例:
const numbers = [1, 2, 3, 4, 5];
// 用 0 填充整个数组
numbers.fill(0);
console.log(numbers); // 输出: [0, 0, 0, 0, 0]
// 用 9 填充索引 1 到索引 3(不包含)的元素
numbers.fill(9, 1, 3);
console.log(numbers); // 输出: [0, 9, 9, 0, 0]
在上述示例中,numbers.fill(0)
将整个数组填充为 0
,而 numbers.fill(9, 1, 3)
则用 9
填充了索引 1 到索引 3(不包含)的元素。最终得到的数组为 [0, 9, 9, 0, 0]
。
3.返回新数组的方法
arr.concat(otherArr)
arr.concat(otherArr)
是 JavaScript 中用于合并数组的方法。它创建一个新数组,包含调用该方法的数组的元素,后跟一个或多个数组或值。(简单的说就是:合并其他数组)
参数:
otherArr
:要连接到调用数组之后的数组或值。
返回值:
- 一个新的数组,包含合并后的元素。
示例:
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [7, 8, 9];
// 合并三个数组
const mergedArray = arr1.concat(arr2, arr3);
console.log(mergedArray); // 输出: [1, 2, 3, 4, 5, 6, 7, 8, 9]
在上述示例中,arr1.concat(arr2, arr3)
将 arr1
数组与 arr2
和 arr3
数组合并成一个新数组 [1, 2, 3, 4, 5, 6, 7, 8, 9]
。原始数组 arr1
并未被修改。
arr.join()
arr.join()
是 JavaScript 中用于将数组的所有元素连接成一个字符串的方法,它使用默认的逗号 ,
作为分隔符。(简单的说就是:以某种连接符拼接数组元素为字符串)
语法:
const resultString = arr.join();
返回值:
- 一个包含数组所有元素的字符串。
示例:
const fruits = ['apple', 'orange', 'banana'];
// 使用默认逗号连接数组元素
const resultString = fruits.join();
console.log(resultString); // 输出: 'apple,orange,banana'
// 使用空格连接数组元素
const resultString = fruits.join(' ');
console.log(resultString); // 输出: 'apple orange banana'
// 使用连字符 - 连接数组元素
const resultString = fruits.join('-');
console.log(resultString); // 输出: 'apple-orange-banana'
在上述示例中,fruits.join('-')
将 fruits
数组的元素用连字符 -
连接起来,生成字符串 'apple-orange-banana'
。注意,原始数组 fruits
并未被修改。
arr.slice(start, end)
arr.slice(start, end)
是 JavaScript 中用于提取数组的一部分,创建一个新数组的方法。(简单的说就是:截取数组区间)
参数:
start
:起始索引,包含在提取的部分中。end
:可选,结束索引(不包含在提取的部分中)。如果省略,将提取从start
到数组末尾的所有元素。
返回值:
- 一个包含提取元素的新数组。
示例:
const numbers = [1, 2, 3, 4, 5];
// 提取索引 1 到索引 3(不包含)的元素
const slicedArray = numbers.slice(1, 3);
console.log(slicedArray); // 输出: [2, 3]
在上述示例中,numbers.slice(1, 3)
提取了从索引 1 到索引 2(不包含)的元素,生成新数组 [2, 3]
。原始数组 numbers
保持不变。如果省略 end
参数,将提取从 start
到数组末尾的所有元素。
4. 遍历方法
arr.map()
arr.map()
是 JavaScript 中用于创建一个新数组,其元素是原始数组中每个元素调用回调函数的结果。它不会修改原始数组,而是返回一个新的映射后的数组。
注意:传入函数,可以对数组中的每个元素进行对应操作,最后返回操作好的新数组,要注意传入map的函数必须有return值,否则所有映射项都为undefined.
语法:
const newArray = arr.map(callback(currentValue[, index[, array]])[, thisArg]);
callback
:生成新数组元素的函数。currentValue
:当前处理的数组元素。index
:可选,当前处理元素的索引。array
:可选,调用map
方法的数组。
thisArg
:可选,执行回调函数时用作this
的值。
返回值:
- 一个新的数组,包含对原始数组每个元素应用回调函数后的结果。
示例:
const numbers = [1, 2, 3, 4, 5];
// 将数组中的每个元素平方
const squaredNumbers = numbers.map(number => number ** 2);
console.log(squaredNumbers); // 输出: [1, 4, 9, 16, 25]
const numbersTwo = [1, 2, 3, 4, 5];
// 回调函数没有明确的 return 语句
const newArray = numbersTwo.map(numberTwo => {
// 没有 return 语句
// 这里相当于 return undefined;
});
console.log(newArray); // 输出: [undefined, undefined, undefined, undefined, undefined]
在上述示例中,numbers.map(number => number ** 2)
将 numbers
数组中的每个元素都平方,生成新数组 [1, 4, 9, 16, 25]
。原始数组 numbers
保持不变。 numbers.map
的回调函数并没有显式的 return
语句,因此它默认返回 undefined
。新数组 newArray
中的每个位置都包含 undefined
值。
arr.forEach()
arr.forEach()
是 JavaScript 中用于对数组的每个元素执行一次提供的函数的方法。这个方法不会创建新的数组,而是在原始数组上进行操作。(简单的说就是:遍历元素值或索引值,有局限性,不能continue或break)
语法:
arr.forEach(callback(currentValue[, index[, array]])[, thisArg]);
callback
:在数组的每个元素上执行的函数。currentValue
:当前处理的数组元素。index
:可选,当前处理元素的索引。array
:可选,调用forEach
方法的数组。
thisArg
:可选,执行回调函数时用作this
的值。
返回值:
undefined
。forEach
方法不返回新数组,它只是在每个元素上执行回调函数
示例:
const numbers = [1, 2, 3, 4, 5];
// 打印数组的每个元素的平方
numbers.forEach((number, index) => {
console.log(`Element at index ${index}: ${number ** 2}`);
});
//Element at index 0: 1
//Element at index 1: 4
//Element at index 2: 9
//Element at index 3: 16
//Element at index 4: 25
在上述示例中,numbers.forEach
遍历数组 numbers
的每个元素,对每个元素执行回调函数,打印出元素的平方。请注意,forEach
方法不会创建新数组,而是在原始数组上进行操作。
for(let index in arr)
当使用 for...in
循环遍历数组时,index
表示数组元素的索引,但需要注意的是,index
是一个字符串,而不是数字。此外,for...in
也会遍历数组的原型链上的属性,因此通常更适用于遍历对象的属性。
示例:
const numbers = [1, 2, 3, 4, 5];
for (let index in numbers) {
console.log(`Element at index ${index}: ${numbers[index]}`);
}
//Element at index 0: 1
//Element at index 1: 2
//Element at index 2: 3
//Element at index 3: 4
//Element at index 4: 5
在这个示例中,for...in
循环遍历数组 numbers
的索引,并打印出每个索引对应的元素。然而,需要注意的是,index
是一个字符串,不是数字。虽然 for...in
在某些情况下可以用于遍历数组,但更常见的是使用 for...of
或 forEach
,因为它们提供更直观且不会受到原型链影响的数组遍历方式。
for(let value of arr)
使用 for...of
循环遍历数组时,value
表示数组的元素值,而不是索引。这是一种更直观的数组遍历方式,相较于 for...in
更适用于遍历数组。
示例:
const numbers = [1, 2, 3, 4, 5];
for (let value of numbers) {
console.log(`Element value: ${value}`);
}
//Element value: 1
//Element value: 2
//Element value: 3
//Element value: 4
//Element value: 5
在这个示例中,for...of
循环遍历数组 numbers
的元素值,并打印出每个元素的值。相对于 for...in
,for...of
更易读且不会受到原型链影响,因此通常更适用于遍历数组。
5. 获得索引方法
arr.indexOf()
arr.indexOf()
是 JavaScript 中用于查找数组中指定元素第一次出现的索引的方法。如果数组中不存在该元素,则返回 -1
。
语法:
const index = arr.indexOf(searchElement[, fromIndex]);
searchElement
:要查找的元素。fromIndex
:可选,指定开始查找的索引位置。如果省略,将从数组的开头开始查找。
返回值:
- 如果找到了指定元素,返回该元素在数组中第一次出现的索引;否则返回
-1
。
示例:
const numbers = [1, 2, 3, 4, 5, 2];
// 查找元素 2 第一次出现的索引
const index = numbers.indexOf(2);
console.log(index); // 输出: 1
在上述示例中,numbers.indexOf(2)
查找数组 numbers
中元素 2
第一次出现的索引,结果是 1
。如果元素不在数组中,返回值将是 -1
。
arr.lastIndexOf()
arr.lastIndexOf()
是 JavaScript 中用于查找数组中指定元素最后一次出现的索引的方法。如果数组中不存在该元素,则返回 -1
。
语法:
const lastIndex = arr.lastIndexOf(searchElement[, fromIndex]);
searchElement
:要查找的元素。fromIndex
:可选,指定开始查找的索引位置。如果省略,将从数组的末尾开始向前查找。
返回值:
- 如果找到了指定元素,返回该元素在数组中最后一次出现的索引;否则返回
-1
。
示例:
const numbers = [1, 2, 3, 4, 5, 2];
// 查找元素 2 最后一次出现的索引
const lastIndex = numbers.lastIndexOf(2);
console.log(lastIndex); // 输出: 5
在上述示例中,numbers.lastIndexOf(2)
查找数组 numbers
中元素 2
最后一次出现的索引,结果是 5
。如果元素不在数组中,返回值将是 -1
。
arr.includes(val)
arr.includes(val)
是 JavaScript 中用于检查数组是否包含特定元素的方法。它返回一个布尔值,如果数组包含指定的元素,则返回 true
,否则返回 false
。
语法:
const isIncludes = arr.includes(value);
value
:要检查是否存在于数组中的元素。
返回值:
- 如果数组包含指定元素,返回
true
;否则返回false
。
示例:
const numbers = [1, 2, 3, 4, 5];
// 检查数组是否包含元素 3
const includesThree = numbers.includes(3);
console.log(includesThree); // 输出: true
// 检查数组是否包含元素 6
const includesSix = numbers.includes(6);
console.log(includesSix); // 输出: false
在上述示例中,numbers.includes(3)
返回 true
,因为数组 numbers
包含元素 3
。而 numbers.includes(6)
返回 false
,因为数组不包含元素 6
。