本文详细解析JavaScript中Array数组的常用操作方法，涵盖push、pop、unshift、shift等增删元素方法，以及forEach遍历、slice截取、splice修改、concat连接、join转换、reverse反转和sort排序等核心功能，帮助开发者掌握数组处理技巧。
数组操作方法概述
1. push() 方法用于添加元素
- 该函数可向数组追加一个或多个元素，并返回更新后的数组长度
- 可通过方法参数传递要添加的元素
- 新插入的元素会被自动放置于数组末尾
- 此函数的返回值即为数组更新后的长度值
var arr = ["孙悟空", "猪八戒", "沙和尚"];
var result = arr.push("唐僧", "蜘蛛精", "白骨精", "玉兔精");
console.log(arr);
console.log("result = " + result);
2. pop() 方法用于删除元素
该函数移除数组最后一个元素，并返回被移除的元素值
var arr = ["孙悟空", "猪八戒", "沙和尚"];
var result = arr.pop();
console.log("result = " + result);
console.log(arr);
3. unshift() 方法用于添加元素
- 该函数向数组头部插入一个或多个元素，并返回新数组长度
- 插入操作后，原有元素的索引值将依次递增调整
var arr = ["孙悟空", "猪八戒", "沙和尚"];
console.log(arr);
arr.unshift("牛魔王", "二郎神");
console.log(arr);
4. shift() 方法用于删除元素
该函数移除数组第一个元素，并返回被移除的元素值
var arr = ["孙悟空", "猪八戒", "沙和尚"];
var result = arr.shift();
console.log(arr);
console.log("result = " + result);
5. forEach() 方法用于遍历数组
1) 功能说明
- JavaScript 提供了此方法以遍历数组元素
- 此功能仅支持 IE8 及以上版本浏览器
- IE8 及以下版本浏览器不支持此方法，若需兼容 IE8 则不应使用
- 建议改用 for 循环进行遍历操作
2) 调用方式
- forEach() 函数接收一个回调函数作为参数
- 此类由用户定义但由系统调用的函数被称为回调函数
- 数组元素数量决定函数执行次数，每次执行时浏览器传入遍历到的元素
- 通过实参形式传入数据，可定义形参以接收这些内容
- 浏览器会在回调函数中传递三个参数
- 第一个参数代表当前遍历的元素值
- 第二个参数代表当前遍历元素的索引值
- 第三个参数代表当前正在遍历的数组对象
var arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧", "白骨精"];
arr.forEach(function (value, index, obj) {
console.log(value);
});
6. slice() 方法用于截取数组
- 该函数用于从数组中提取指定范围的元素
- 原数组保持不变，截取出的元素封装为新数组返回
- 参数说明：
- 指定截取起始位置，包含该索引对应的元素
- 指定截取结束位置，不包含该索引对应的元素
第二个参数可选，省略时截取至数组末尾；索引可为负数，表示从后向前计算
- -1 代表倒数第一个元素
- -2 代表倒数第二个元素
var arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧", "白骨精"];
var result = arr.slice(1, 4);
console.log(result);
result = arr.slice(3);
console.log(result);
result = arr.slice(1, -2);
console.log(result);
7. splice() 方法用于删除或插入元素
- 该函数用于删除数组中指定位置的元素
- 使用 splice 会修改原数组，从原宿主中移除指定元素
- 被删除的元素以数组形式返回
- 参数说明：
- 第一个参数指定起始位置的索引
- 第二个参数指定删除的元素数量
- 第三个及后续参数为新增元素，将自动插入到起始索引之前
var arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧", "白骨精"];
var result = arr.splice(1, 0, "牛魔王", "铁扇公主", "红孩儿");
console.log(arr);
console.log(result);
8. concat() 方法用于连接数组
- 该函数可合并两个或多个数组，并返回新数组
- 原数组不受此操作影响
var arr = ["孙悟空", "猪八戒", "沙和尚"];
var arr2 = ["白骨精", "玉兔精", "蜘蛛精"];
var arr3 = ["二郎神", "太上老君", "玉皇大帝"];
var result = arr.concat(arr2, arr3, "牛魔王", "铁扇公主");9. join() 方法用于转换字符串
- 该函数将数组元素转换为一个字符串
- 原数组保持不变，返回转换后的字符串结果
- 在 join() 中可指定字符串作为参数，该字符串将作为元素连接符
- 未指定分隔符时，默认使用逗号作为连接符
var arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧"];
var result = arr.join("@-@");10. reverse() 方法用于反转数组
- 该函数用于反转数组顺序（首尾互换）
- 此操作直接修改原数组内容
var arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧"];
arr.reverse();
console.log(arr);
11. sort() 方法用于排序数组
1) 基础用法
- 该函数用于对数组元素进行排序操作
- 原数组会被修改，默认按 Unicode 编码值排序
var arr = ["b", "d", "e", "a", "c"];
arr.sort();2) 自定义排序规则
- 即使对纯数字数组使用 sort()，也会按 Unicode 编码排序
- 因此直接排序纯数字数组可能产生非预期结果
- 可在 sort() 中传入回调函数以指定排序逻辑
- 回调函数需定义两个形参
- 浏览器会使用数组元素作为实参调用回调函数
- 具体调用顺序不确定，但保证数组中 a 在 b 之前
- 浏览器依据回调函数返回值决定元素顺序
- 若返回值大于 0，则交换元素位置
- 若返回值小于 0，则保持元素位置不变
- 若返回值为 0，则认为两元素相等，不交换位置
- 排序逻辑
- 如需升序排列，应返回 a-b
- 如需降序排列，应返回 b-a
var arr = [5, 4, 2, 1, 3, 6, 8, 7];
arr.sort();
arr.sort(function (a, b) {
//前边的大
/* if(a> b){
return -1;
}else if(a < b){
return 1;
}else{
return 0;
} */
//升序排列
//return a-b;
//降序排列
return b - a;
});
console.log(arr);
至此关于 JavaScript Array 数组方法的详解介绍完毕，更多相关内容请查阅本站往期文章或继续浏览后续文章，感谢支持！