一、 会改变原数组的方法 (Mutator Methods)
这些方法会修改调用它们的数组本身。
-
push()-
作用：在数组的末尾添加一个或多个元素。
-
返回值：数组新的
length。 -
示例：
let arr = [1, 2]; let newLength = arr.push(3, 4); console.log(arr); // [1, 2, 3, 4] console.log(newLength); // 4
-
-
pop()-
作用：删除并返回数组的最后一个元素。
-
返回值：被删除的元素。如果数组为空则返回
undefined。 -
示例：
let arr = [1, 2, 3]; let lastElement = arr.pop(); console.log(arr); // [1, 2] console.log(lastElement); // 3
-
-
unshift()-
作用：在数组的开头添加一个或多个元素。
-
返回值：数组新的
length。 -
示例：
let arr = [3, 4]; let newLength = arr.unshift(1, 2); console.log(arr); // [1, 2, 3, 4] console.log(newLength); // 4
-
-
shift()-
作用：删除并返回数组的第一个元素。
-
返回值：被删除的元素。如果数组为空则返回
undefined。 -
示例：
let arr = [1, 2, 3]; let firstElement = arr.shift(); console.log(arr); // [2, 3] console.log(firstElement); // 1
-
-
splice()- 功能最强大的数组修改方法-
作用：通过删除、替换现有元素或添加新元素来修改数组。
-
参数：
start(起始索引),deleteCount(要删除的元素个数),item1, item2, ...(要添加的元素)。 -
返回值：由被删除的元素组成的数组。
-
示例：
let arr = ['a', 'b', 'c', 'd']; // 删除：从索引1开始，删除2个元素 let removed = arr.splice(1, 2); console.log(arr); // ['a', 'd'] console.log(removed); // ['b', 'c'] // 添加：从索引1开始，删除0个元素，添加'x', 'y' arr.splice(1, 0, 'x', 'y'); console.log(arr); // ['a', 'x', 'y', 'd'] // 替换：从索引1开始，删除2个元素，添加'z' arr.splice(1, 2, 'z'); console.log(arr); // ['a', 'z', 'd']
-
-
reverse()-
作用：将数组中元素的位置颠倒。
-
返回值：颠倒后的原数组（引用）。
-
示例：
let arr = [1, 2, 3]; arr.reverse(); console.log(arr); // [3, 2, 1]
-
-
sort()-
作用：对数组的元素进行排序（默认按字符串Unicode码点）。
-
参数：
compareFunction(可选，定义排序顺序的函数)。 -
返回值：排序后的原数组（引用）。
-
示例：
let arr = [3, 1, 4, 1, 5]; arr.sort(); // 默认排序 console.log(arr); // [1, 1, 3, 4, 5] // 数字升序排序 arr.sort((a, b) => a - b); console.log(arr); // [1, 1, 3, 4, 5] // 数字降序排序 arr.sort((a, b) => b - a); console.log(arr); // [5, 4, 3, 1, 1]
-
-
copyWithin()(ES6)-
作用：浅复制数组的一部分到同一数组中的另一个位置。
-
参数：
target(复制到的目标起始索引),start(复制源的起始索引，默认为0),end(复制源的结束索引，默认为数组长度)。 -
返回值：改变后的数组。
-
示例：
let arr = [1, 2, 3, 4, 5]; arr.copyWithin(0, 3); // 将索引3到末尾的元素，复制到索引0 console.log(arr); // [4, 5, 3, 4, 5]
-
-
fill()(ES6)-
作用：用一个固定值填充数组中从起始索引到终止索引内的全部元素。
-
参数：
value(填充值),start(起始索引，可选),end(结束索引，可选)。 -
返回值：修改后的数组。
-
示例：
let arr = new Array(3); // [empty × 3] arr.fill(1); console.log(arr); // [1, 1, 1] let arr2 = [1, 2, 3, 4]; arr2.fill(0, 1, 3); // 用0填充索引1到3（不包括3） console.log(arr2); // [1, 0, 0, 4]
-
二、 不会改变原数组的方法 (Accessor Methods)
这些方法不会修改原数组，而是返回一个新的数组或其他值。
-
concat()-
作用：合并两个或多个数组。
-
返回值：一个新的合并后的数组。
-
示例：
let arr1 = [1, 2]; let arr2 = [3, 4]; let newArr = arr1.concat(arr2, [5, 6]); console.log(newArr); // [1, 2, 3, 4, 5, 6] console.log(arr1); // [1, 2] (原数组未改变)
-
-
join()-
作用：将数组的所有元素连接成一个字符串。
-
参数：
separator(分隔符，默认为逗号,)。 -
返回值：连接后的字符串。
-
示例：
let arr = ['Hello', 'World']; let str = arr.join(' '); console.log(str); // "Hello World"
-
-
slice()-
作用：返回数组的一个浅拷贝的一部分。
-
参数：
start(起始索引),end(结束索引，不包括该索引的元素)。 -
返回值：一个新的数组，包含从
start到end（不包括end）的元素。 -
示例：
let arr = [1, 2, 3, 4, 5]; let part1 = arr.slice(1, 3); // 从索引1开始，到索引3（不包括3） console.log(part1); // [2, 3] let part2 = arr.slice(2); // 从索引2开始到末尾 console.log(part2); // [3, 4, 5] let copy = arr.slice(); // 无参数，复制整个数组（浅拷贝） console.log(copy); // [1, 2, 3, 4, 5]
-
-
indexOf()-
作用：返回在数组中可以找到给定元素的第一个索引，如果不存在，则返回 -1。
-
参数：
searchElement(要查找的元素),fromIndex(开始查找的位置，可选)。 -
返回值：首个被找到的元素的索引，或 -1。
-
示例：
let arr = [1, 2, 3, 2, 1]; console.log(arr.indexOf(2)); // 1 console.log(arr.indexOf(2, 2)); // 3 (从索引2开始找) console.log(arr.indexOf(4)); // -1
-
-
lastIndexOf()-
作用：返回指定元素在数组中的最后一个的索引，如果不存在则返回 -1。从数组的后面向前查找。
-
参数：同上。
-
返回值：最后一个被找到的元素的索引，或 -1。
-
示例：
let arr = [1, 2, 3, 2, 1]; console.log(arr.lastIndexOf(2)); // 3 console.log(arr.lastIndexOf(1)); // 4
-
-
includes()(ES7)-
作用：判断一个数组是否包含一个指定的值。
-
参数：
valueToFind(需要查找的元素值),fromIndex(可选)。 -
返回值：布尔值 (
true或false)。 -
示例：
let arr = [1, 2, 3]; console.log(arr.includes(2)); // true console.log(arr.includes(4)); // false console.log(arr.includes(2, 2)); // false (从索引2开始找，找不到2)
-
-
toString()&toLocaleString()-
作用：返回一个表示数组中所有元素的字符串。
-
返回值：字符串。
-
示例：
let arr = [1, 2, 3, 'a', 'b']; console.log(arr.toString()); // "1,2,3,a,b"
-
三、 迭代方法 (Iteration Methods)
这些方法用于遍历数组元素，并对每个元素执行提供的函数。
-
forEach()-
作用：对数组的每个元素执行一次给定的函数。
-
返回值：
undefined。 -
示例：
let arr = [1, 2, 3]; arr.forEach((item, index, array) => { console.log(item * 2, index); }); // 输出: // 2 0 // 4 1 // 6 2
-
-
map()-
作用：创建一个新数组，其结果是该数组中的每个元素都调用一次提供的函数后的返回值。
-
返回值：一个新的由函数返回值组成的数组。
-
示例：
let arr = [1, 2, 3]; let doubled = arr.map(item => item * 2); console.log(doubled); // [2, 4, 6] console.log(arr); // [1, 2, 3] (原数组不变)
-
-
filter()-
作用：创建一个新数组，其包含通过所提供函数实现的测试的所有元素。
-
返回值：一个新的通过测试的元素组成的数组。
-
示例：
let arr = [1, 2, 3, 4, 5, 6]; let evens = arr.filter(item => item % 2 === 0); console.log(evens); // [2, 4, 6]
-
-
find()(ES6)-
作用：返回数组中满足提供的测试函数的第一个元素的值。
-
返回值：第一个匹配的元素，否则返回
undefined。 -
示例：
let users = [ { id: 1, name: 'John' }, { id: 2, name: 'Jane' } ]; let user = users.find(user => user.id === 2); console.log(user); // { id: 2, name: 'Jane' }
-
-
findIndex()(ES6)-
作用：返回数组中满足提供的测试函数的第一个元素的索引。
-
返回值：第一个匹配元素的索引，否则返回 -1。
-
示例：
let arr = [5, 12, 8, 130, 44]; let index = arr.findIndex(item => item > 10); console.log(index); // 1 (12的索引)
-
-
some()-
作用：测试数组中是不是至少有一个元素通过了提供的函数的测试。
-
返回值：布尔值。只要有一个元素通过测试即为
true。 -
示例：
let arr = [1, 2, 3, 4, 5]; let hasEven = arr.some(item => item % 2 === 0); console.log(hasEven); // true
-
-
every()-
作用：测试数组中的所有元素是否都通过了提供的函数的测试。
-
返回值：布尔值。所有元素都通过测试才为
true。 -
示例：
let arr = [2, 4, 6, 8]; let allEven = arr.every(item => item % 2 === 0); console.log(allEven); // true let arr2 = [2, 4, 5, 8]; console.log(arr2.every(item => item % 2 === 0)); // false
-
-
reduce()-
作用：对数组中的每个元素执行一个由您提供的 reducer 函数，将其结果汇总为单个返回值。
-
参数：
callback(accumulator, currentValue, index, array),initialValue(初始值，可选)。 -
返回值：累积处理后的最终结果。
-
示例：
let arr = [1, 2, 3, 4]; let sum = arr.reduce((acc, current) => acc + current, 0); console.log(sum); // 10 // 计算元素出现次数 let fruits = ['apple', 'banana', 'orange', 'apple']; let count = fruits.reduce((acc, fruit) => { acc[fruit] = (acc[fruit] || 0) + 1; return acc; }, {}); console.log(count); // { apple: 2, banana: 1, orange: 1 }
-
-
reduceRight()- 作用：与
reduce()相同，但从右向左执行。
- 作用：与
四、 其他方法
-
Array.isArray()(静态方法)-
作用：用于确定传递的值是否是一个
Array。 -
返回值：布尔值。
-
示例：
console.log(Array.isArray([1, 2, 3])); // true console.log(Array.isArray({})); // false console.log(Array.isArray('hello')); // false
-
-
Array.from()(静态方法，ES6)-
作用：从一个类似数组或可迭代对象创建一个新的、浅拷贝的数组实例。
-
示例：
// 从字符串创建 console.log(Array.from('foo')); // ['f', 'o', 'o'] // 从Set创建 console.log(Array.from(new Set([1, 2, 1]))); // [1, 2] // 从类数组对象（如arguments）创建 function f() { return Array.from(arguments); } console.log(f(1, 2, 3)); // [1, 2, 3]
-
-
Array.of()(静态方法，ES6)-
作用：创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。与
new Array()的行为不同。 -
示例：
let arr1 = Array.of(7); // 创建一个包含单个元素7的数组 console.log(arr1); // [7] let arr2 = Array.of(1, 2, 3); console.log(arr2); // [1, 2, 3] // 对比 new Array() let arr3 = new Array(7); // 创建一个长度为7的空数组 console.log(arr3); // [empty × 7]
-
-
flat()(ES2019)-
作用：按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
-
参数：
depth(指定要提取嵌套数组的结构深度，默认值为 1)。 -
返回值：一个新的扁平化后的数组。
-
示例：
let arr1 = [1, 2, [3, 4]]; console.log(arr1.flat()); // [1, 2, 3, 4] let arr2 = [1, 2, [3, 4, [5, 6]]]; console.log(arr2.flat()); // [1, 2, 3, 4, [5, 6]] (默认深度1) console.log(arr2.flat(2)); // [1, 2, 3, 4, 5, 6] (深度2)
-
-
flatMap()(ES2019)-
作用：首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。相当于
map()后紧接着flat()（深度为1）。 -
返回值：一个新的数组。
-
示例：
let arr = [1, 2, 3]; let result = arr.flatMap(x => [x * 2]); console.log(result); // [2, 4, 6] // 相当于 [[2], [4], [6]].flat() let arr2 = ["今天天气很好", "", "早上好"]; let words = arr2.flatMap(sentence => sentence.split(' ')); console.log(words); // ['今天天气很好', '', '早上好'] (自动去除了空字符串分割后的空数组)
-
总结表格
| 方法 | 改变原数组？ | 返回值 | 类别 |
|---|---|---|---|
push | ✅ | 新 length | 修改 |
pop | ✅ | 被删除的元素 | 修改 |
unshift | ✅ | 新 length | 修改 |
shift | ✅ | 被删除的元素 | 修改 |
splice | ✅ | 被删除元素组成的数组 | 修改 |
reverse | ✅ | 颠倒后的原数组 | 修改 |
sort | ✅ | 排序后的原数组 | 修改 |
copyWithin | ✅ | 改变后的数组 | 修改 |
fill | ✅ | 修改后的数组 | 修改 |
concat | ❌ | 新数组 | 访问 |
join | ❌ | 字符串 | 访问 |
slice | ❌ | 新数组（浅拷贝） | 访问 |
indexOf | ❌ | 索引/-1 | 访问 |
lastIndexOf | ❌ | 索引/-1 | 访问 |
includes | ❌ | 布尔值 | 访问 |
toString | ❌ | 字符串 | 访问 |
forEach | ❌ | undefined | 迭代 |
map | ❌ | 新数组 | 迭代 |
filter | ❌ | 新数组 | 迭代 |
find | ❌ | 元素/undefined | 迭代 |
findIndex | ❌ | 索引/-1 | 迭代 |
some | ❌ | 布尔值 | 迭代 |
every | ❌ | 布尔值 | 迭代 |
reduce | ❌ | 累积值 | 迭代 |
reduceRight | ❌ | 累积值 | 迭代 |
Array.isArray | - | 布尔值 | 静态 |
Array.from | - | 新数组 | 静态 |
Array.of | - | 新数组 | 静态 |
flat | ❌ | 新数组 | 其他 |
flatMap | ❌ | 新数组 | 其他 |
希望这份详细的总结对你有帮助！
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
