JavaScript 数组方法：改变原数组 vs 不改变原数组

最新推荐文章于 2025-10-24 13:22:35 发布

原创最新推荐文章于 2025-10-24 13:22:35 发布 · 1.1k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

JavaScript 专栏收录该内容

3 篇文章

订阅专栏

                    
                        
                    
                    一、改变原数组的方法
1.1 pop()
语法：Array.pop()
作用：删除数组最后一项
返回值：返回被删除的元素
示例：let arr = ["apple", "banana", "cherry", "date"];
let res = arr.pop();
console.log(arr); // ["apple", "banana", "cherry"]
console.log(res); // "date"


1.2 push()
语法：Array.push(元素)
作用：在数组末尾添加一个或多个元素
返回值：返回数组的新长度
示例：let arr = ["apple", "banana", "cherry", "date"];
let res = arr.push("elderberry");
console.log(arr); // ["apple", "banana", "cherry", "date", "elderberry"]
console.log(res); // 5


1.3 shift()
语法：Array.shift()
作用：删除数组第一项
返回值：返回被删除的元素
示例：let arr = ["apple", "banana", "cherry", "date"];
let res = arr.shift();
console.log(arr); // ["banana", "cherry", "date"]
console.log(res); // "apple"


1.4 unshift()
语法：Array.unshift(元素)
作用：在数组开头添加一个或多个元素
返回值：返回数组的新长度
示例：let arr = ["apple", "banana", "cherry", "date"];
let res = arr.unshift("fig", "grape");
console.log(arr); // ["fig", "grape", "apple", "banana", "cherry", "date"]
console.log(res); // 6


1.5 splice()
语法：Array.splice(起始索引, 删除个数, 插入的元素)
作用：删除、插入或替换数组元素
返回值：返回被删除的元素组成的数组
示例：let arr = ["apple", "banana", "cherry", "date"];
let removed = arr.splice(1, 2, "kiwi", "lemon");
console.log(arr); // ["apple", "kiwi", "lemon", "date"]
console.log(removed); // ["banana", "cherry"]


1.6 sort()
语法：Array.sort(比较函数)
作用：对数组元素进行排序
返回值：返回排序后的数组（原数组被修改）
示例：let arr = [3, 1, 4, 2];
arr.sort((a, b) => a - b);
console.log(arr); // [1, 2, 3, 4]


1.7 reverse()
语法：Array.reverse()
作用：反转数组元素的顺序
返回值：返回反转后的数组（原数组被修改）
示例：let arr = [1, 2, 3, 4, 5];
arr.reverse();
console.log(arr); // [5, 4, 3, 2, 1]


二、不改变原数组的方法
2.1 join()
语法：Array.join(分隔符)
作用：将数组元素连接成一个字符串，元素之间用指定的分隔符隔开
返回值：返回连接后的字符串
示例：let arr = [1, 2, 3, 4, 5];
let str = arr.join(", ");
console.log(str); // "1, 2, 3, 4, 5"
console.log(arr); // [1, 2, 3, 4, 5]


2.2 slice()
语法：Array.slice(起始索引, 结束索引)
作用：提取子数组，不修改原数组
返回值：返回提取的子数组
示例：let arr = [1, 2, 3, 4, 5];
let newArr = arr.slice(1, 4);
console.log(newArr); // [2, 3, 4]
console.log(arr); // [1, 2, 3, 4, 5]


2.3 concat()
语法：Array.concat(数组1, 数组2, ...)
作用：合并数组，不修改原数组
返回值：返回合并后的新数组
示例：let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let newArr = arr1.concat(arr2);
console.log(newArr); // [1, 2, 3, 4, 5, 6]
console.log(arr1); // [1, 2, 3]


2.4 map()
语法：Array.map(回调函数)
作用：对数组中每个元素执行回调函数并返回新数组
返回值：返回映射后的新数组
示例：let arr = [1, 2, 3, 4, 5];
let newArr = arr.map(item => item * 2);
console.log(newArr); // [2, 4, 6, 8, 10]
console.log(arr); // [1, 2, 3, 4, 5]


2.5 filter()
语法：Array.filter(回调函数)
作用：过滤数组中满足条件的元素并返回新数组
返回值：返回过滤后的新数组
示例：let arr = [1, 2, 3, 4, 5];
let newArr = arr.filter(item => item > 3);
console.log(newArr); // [4, 5]
console.log(arr); // [1, 2, 3, 4, 5]


2.6 reduce()
语法：Array.reduce(回调函数, 初始值)
作用：对数组元素进行累计操作
返回值：返回累计的结果
示例：let arr = [1, 2, 3, 4, 5];
let sum = arr.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 15
console.log(arr); // [1, 2, 3, 4, 5]


2.7 forEach()
语法：Array.forEach(回调函数)
作用：遍历数组并对每个元素执行回调函数
返回值：无返回值
示例：let arr = [1, 2, 3, 4, 5];
arr.forEach(item => console.log(item));
// 输出：
// 1
// 2
// 3
// 4
// 5
console.log(arr); // [1, 2, 3, 4, 5]


2.8 indexOf()
语法：Array.indexOf(元素)
作用：查找元素在数组中的索引（第一个匹配项）
返回值：返回索引值或 -1
示例：let arr = [1, 2, 3, 4, 5];
let index = arr.indexOf(3);
console.log(index); // 2
console.log(arr); // [1, 2, 3, 4, 5]


2.9 find()
语法：Array.find(回调函数)
作用：查找满足条件的第一个元素
返回值：返回满足条件的元素或 undefined
示例：let arr = [1, 2, 3, 4, 5];
let result = arr.find(item => item > 3);
console.log(result); // 4
console.log(arr); // [1, 2, 3, 4, 5]


2.10 includes()
语法：Array.includes(元素)
作用：检查数组是否包含指定元素
返回值：返回布尔值
示例：let arr = [1, 2, 3, 4, 5];
let hasThree = arr.includes(3);
console.log(hasThree); // true
console.log(arr); // [1, 2, 3, 4, 5]


2.11 flat()
语法：Array.flat(深度)
作用：将多维数组扁平化为一维数组
返回值：返回扁平化后的新数组
示例：let arr = [1, [2, [3, 4]]];
let newArr = arr.flat(2);
console.log(newArr); // [1, 2, 3, 4]
console.log(arr); // [1, [2, [3, 4]]]


2.12 flatMap()
语法：Array.flatMap(回调函数)
作用：对数组进行映射和扁平化操作
返回值：返回处理后的新数组
示例：let arr = [1, 2, 3];
let newArr = arr.flatMap(item => [item, item * 2]);
console.log(newArr); // [1, 2, 2, 4, 3, 6]
console.log(arr); // [1, 2, 3]


三、总结
3.1 改变原数组的方法
pop()：删除最后一项
push()：添加元素到末尾
shift()：删除第一项
unshift()：添加元素到开头
splice()：分割/修改数组
sort()：排序数组
reverse()：反转数组

3.2 不改变原数组的方法
join()：将数组元素连接成字符串
slice()：提取子数组
concat()：合并数组
map()：映射数组
filter()：过滤数组
reduce()：数组归并
forEach()：遍历数组
indexOf()：查找元素索引
find()：查找满足条件的元素
includes()：检查元素是否存在
flat()：扁平化数组
flatMap()：扁平化+映射数组



                