请选择 进入手机版 | 继续访问电脑版

马上加入IBC程序猿 各种源码随意下,各种教程随便看! 注册 每日签到 加入编程讨论群

C#教程 ASP.NET教程 C#视频教程程序源码享受不尽 C#技术求助 ASP.NET技术求助

【源码下载】 社群合作 申请版主 程序开发 【远程协助】 每天乐一乐 每日签到 【承接外包项目】 面试-葵花宝典下载

官方一群:

官方二群:

JavaScript数组的常用操作方法

[复制链接]
查看1052 | 回复2 | 2023-11-1 17:25:44 | 显示全部楼层 |阅读模式
本帖最后由 YunduanCode 于 2023-11-1 17:44 编辑

JavaScript中的数组是一种强大而常用的数据结构,它提供了许多有用的方法来操作和处理数据。本文将介绍JavaScript数组的常用方法,包括添加、删除、修改和查询数组元素的方法,以及处理数组的高阶方法。
一、 创建数组
在JavaScript中创建数组的方式有多种,以下是几种常见的方法:
使用字面量创建数组:
[JavaScript] 纯文本查看 复制代码
let array = [];                           // 创建一个空数组
let numbers = [1, 2, 3, 4, 5];             // 创建一个带有初始值的数组
let fruits = ['apple', 'banana', 'orange'];// 创建一个字符串数组

使用Array构造函数创建数组:
[JavaScript] 纯文本查看 复制代码
let array = new Array();                   // 创建一个空数组
let numbers = new Array(1, 2, 3, 4, 5);     // 创建一个带有初始值的数组


二、添加和删除元素
2.1 添加元素
向数组中添加元素的常用方法如下:
[color=rgba(51, 51, 51, 0.8)]push()将一个或多个元素添加到数组的末尾。
[JavaScript] 纯文本查看 复制代码
let array = [1, 2, 3];
array.push(4);                
cosncole.log(array)
unshift():方法用于在数组的第一个位置添加元素,并返回添加新元素后的数组长度。
[AppleScript] 纯文本查看 复制代码
let array = ['apple', 'banana', 'cherry'];
    
array.unshift('lemon'); // 4
console.log(array) // ['lemon', 'apple', 'banana', 'cherry']
    
// unshift方法可以接受多个参数,这些参数都会添加到目标数组头部
let array2 = ['apple', 'banana', 'cherry'];
    
array2.unshift('lemon', 'mango'); // 5
console.log(array2) // ['lemon', 'mango', 'apple', 'banana', 'cherry']
concat(): 创建一个新数组,将当前数组与其他数组或值连接起来。
[JavaScript] 纯文本查看 复制代码
let array1 = [1, 2, 3];
let array2 = [4, 5];
let newArray = array1.concat(array2);  // [1, 2, 3, 4, 5]
2.2 删除元素
从数组中删除元素的常用方法如下:
pop(): 移除并返回数组的最后一个元素。
[JavaScript] 纯文本查看 复制代码
let array = [1, 2, 3];[/align][align=left]let removedElement = array.pop();     // [1, 2],removedElement = 3


shift(): 移除并返回数组的第一个元素。
[JavaScript] 纯文本查看 复制代码
let array = [1, 2, 3];
let removedElement = array.shift();   // [2, 3],removedElement = 1


splice(): 根据索引位置删除指定数量的元素。
[JavaScript] 纯文本查看 复制代码
let array = [1, 2, 3, 4, 5];
array.splice(1, 2);                    // [1, 4, 5]
三、 修改元素
修改数组中元素的常用方法如下:
通过索引位置直接赋值。
[JavaScript] 纯文本查看 复制代码
let array = ['apple', 'banana', 'cherry'];
array[1] = 'orange';                   // ['apple', 'orange', 'cherry']
使用splice()替换指定索引位置的元素。
[JavaScript] 纯文本查看 复制代码
let array = ['apple', 'banana', 'cherry'];
array.splice(1, 1, 'orange');           // ['apple', 'orange', 'cherry']
四、查询元素
查询数组中元素的常用方法如下:
[color=rgba(51, 51, 51, 0.8)]indexOf() 返回指定元素的第一个索引位置。
[JavaScript] 纯文本查看 复制代码
let array = ['apple', 'banana', 'cherry'];
let index = array.indexOf('banana');   // 1
lastIndexOf(): 返回指定元素的最后一个索引位置。
[JavaScript] 纯文本查看 复制代码
let array = ['apple', 'banana', 'cherry', 'banana'];
let index = array.lastIndexOf('banana');// 3
五、 数组的高阶方法
JavaScript提供了一些功能强大的高阶方法,用于处理和操作数组。
[color=rgba(51, 51, 51, 0.8)]map() 遍历数组并对每个元素执行指定的操作,返回一个新数组。
[JavaScript] 纯文本查看 复制代码
let numbers = [1, 2, 3, 4];
let doubledNumbers = numbers.map(num => num * 2);   // [2, 4, 6, 8]
filter(): 过滤出符合条件的元素,返回一个新数组。
[JavaScript] 纯文本查看 复制代码
let numbers = [1, 2, 3, 4, 5];
let evenNumbers = numbers.filter(num => num % 2 === 0);   // [2, 4]
reduce(): 对数组中的每个元素执行指定的归约操作,返回一个累计结果。
[JavaScript] 纯文本查看 复制代码
let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce((acc, num) => acc + num, 0);      // 15
forEach(): 遍历数组并对每个元素执行指定的操作,没有返回值。
[JavaScript] 纯文本查看 复制代码
let numbers = [1, 2, 3, 4];
numbers.forEach(num => console.log(num));   // 输出1, 2, 3, 4
六、数组的排序和反转
JavaScript提供了对数组进行排序和反转的方法。
sort(): 对数组进行原地排序,默认按照Unicode编码排序。
[JavaScript] 纯文本查看 复制代码
let array = [5, 2, 10, 1];
array.sort();              // [1, 10, 2, 5]
reverse(): 反转数组的顺序。
[JavaScript] 纯文本查看 复制代码
let array = [1, 2, 3, 4];
array.reverse();           // [4, 3, 2, 1]
七、数组的切片和拼接
对数组进行切片和拼接的方法如下:
slice(): 返回一个新数组,包含原数组中指定的部分。
[JavaScript] 纯文本查看 复制代码
let array = [1, 2, 3, 4, 5];
let slicedArray = array.slice(1, 4);        // [2, 3, 4]
join(): 将数组的所有元素转换为字符串,并用指定的分隔符连接起来。
[JavaScript] 纯文本查看 复制代码
let array = ['apple', 'banana', 'cherry'];
let joinedString = array.join(', ');        // 'apple, banana, cherry'
八、 其他常用方法
除了上述操作方法外,还有一些其他常用的数组方法:
length: 数组的长度属性,即数组的元素个数。
[JavaScript] 纯文本查看 复制代码
let array = [1, 2, 3, 4, 5];
let length = array.length;                  // 5
includes(): 判断数组是否包含指定元素,返回布尔值。
[JavaScript] 纯文本查看 复制代码
let array = [1, 2, 3, 4, 5];
let hasElement = array.includes(3);         // true
isArray(): 判断给定的值是否为数组,返回布尔值。
[JavaScript] 纯文本查看 复制代码
let array = [1, 2, 3, 4, 5];
let isArr = Array.isArray(array);            // true
通过深入理解和实践这些常用方法,您将能够更加灵活地处理和操作JavaScript中的数组。
结论
本文详细介绍了JavaScript数组的各种操作方法,包括创建数组、添加和删除元素、修改元素、查询元素、高阶方法、排序和反转、切片和拼接以及其他常用方法等。同时,给出了每种方法的解析和实际示例,帮助您更好地理解和应用这些方法。通过熟练掌握这些数组方法,您可以更加高效地处理和操作JavaScript中的数据。

ibcadmin | 2023-11-2 15:55:18 | 显示全部楼层
+1


C#论坛 www.ibcibc.com IBC编程社区
C#
C#论坛
IBC编程社区
*滑块验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则