JavaScript数组的常用方法

简介: JavaScript数组的常用方法


1.内置的数组方法

JavaScript数组是一种常见的数据类型,它由多个元素组成。以下是一些常用的JavaScript数组方法:

方法名 描述
push() 在数组的末尾添加一个或多个元素,并返回新的长度。
pop() 从数组的末尾删除一个元素,并返回被删除的元素。
shift() 从数组的开头删除一个元素,并返回被删除的元素。
unshift() 在数组的开头添加一个或多个元素,并返回新的长度。
splice() 可以向数组中添加删除元素,并返回被删除的元素。
slice() 返回一个新的数组,包含从原始数组中选择的元素。
join() 将数组中的所有元素转换为一个字符串
indexOf() 返回指定元素在数组中第一次出现的索引,如果没有找到则`返回-1
includes() 判断一个数组是否包含一个指定的值,如果`包含则返回true否则返回false
forEach() 对数组中的每个元素执行给定的函数

这些方法可以方便地操作和处理JavaScript数组,可以根据实际需求选择使用。

下面是一些使用上述常用方法的 JavaScript 数组示例代码:

1.1 push() 方法:

const arr = ['apple', 'banana'];
 const newLength = arr.push('orange');
 console.log(arr); // 输出: ["apple", "banana", "orange"]
 console.log(newLength); // 输出: 3

1.2 pop() 方法

const arr = ['apple', 'banana', 'orange'];
 const lastElement = arr.pop();
 console.log(arr); // 输出: ["apple", "banana"]
 console.log(lastElement); // 输出: "orange"

1.3 shift() 方法:

const arr = ['apple', 'banana', 'orange'];
 const firstElement = arr.shift();
 console.log(arr); // 输出: ["banana", "orange"]
 console.log(firstElement); // 输出: "apple"

1.4 unshift() 方法:

const arr = ['apple', 'banana'];
 const newLength = arr.unshift('orange', 'pear');
 console.log(arr); // 输出: ["orange", "pear", "apple", "banana"]
 console.log(newLength); // 输出: 4

1.5 splice() 方法:

const arr = ['apple', 'banana', 'orange'];
 arr.splice(1, 1, 'kiwi', 'melon');
 console.log(arr); // 输出: ["apple", "kiwi", "melon", "orange"]

1.6 slice() 方法:

const arr = ['apple', 'banana', 'orange', 'kiwi', 'melon'];
 const slicedArray = arr.slice(1, 4);
 console.log(slicedArray); // 输出: ["banana", "orange", "kiwi"]

1.7 join() 方法

const arr = ['apple', 'banana', 'orange'];
 const joinedString = arr.join(', ');
 console.log(joinedString); // 输出: "apple, banana, orange"

1.8 indexOf() 方法:

const arr = ['apple', 'banana', 'orange'];
 const index = arr.indexOf('banana');
 console.log(index); // 输出: 1

1.9 includes() 方法

const arr = ['apple', 'banana', 'orange'];
 const includesApple = arr.includes('apple');
 console.log(includesApple); // 输出: true

1.10 forEach() 方法:

const arr = ['apple', 'banana', 'orange'];
 arr.forEach(function(element) {
   console.log(element);
 });
 // 输出:
 // "apple"
 // "banana"
 // "orange"

更多方法可以去MDN翻阅文档 MDN:Array - JavaScript | MDN (mozilla.org)

2. 改变数组元素顺序

JavaScript 中有以下几个常用的改变数组元素顺序的方法:

  1. reverse(): 反转数组元素的顺序。
  2. sort(): 按照升序或降序重新排列数组元素。
  3. splice(): 在数组中删除和/或添加元素,可以进行移动元素的操作。 下面分别简要介绍这些方法以及它们的使用:

2.1 reverse() 方法:

reverse() 方法将反转数组中所有元素的顺序。例如,当你调用 arr.reverse() 时,原来的数组 [1, 2, 3] 就被修改为 [3, 2, 1]

const arr = [1, 2, 3];
 arr.reverse();
 console.log(arr); // 输出: [3, 2, 1]

2.2 sort() 方法:

sort() 方法将根据 Unicode 值按升序降序对数组元素进行排序。默认情况下,sort() 会将数组视为字符串数组,并按字母顺序进行排序。如果想按照数字大小进行排序,则可以提供一个比较函数作为 sort() 的参数。

下面是一个简单的例子:

const arr = [4, 2, 3, 1];
 arr.sort((a, b) => a - b);
 console.log(arr); // 输出: [1, 2, 3, 4]

上面的代码将按照数值大小将数组元素排序。注意,sort() 函数通过修改原始数组来进行排序。

2.3 splice() 方法:

  1. splice() 方法:

splice() 方法可以在数组中删除和/或插入元素。第一个参数是要删除或插入的元素的起始索引,第二个参数是要删除的元素数量。随后的任意数量的参数都会按照它们在 splice() 函数中出现的顺序插入到数组中。

下面是一个简单的例子:

const arr = [1, 2, 3, 4];
 arr.splice(1, 2); // 删除从索引为 1 开始的 2 个元素
 console.log(arr); // 输出: [1, 4]
 
 arr.splice(1, 0, 2, 3); // 插入 2 和 3 到索引为 1 的位置
 console.log(arr); // 输出: [1, 2, 3, 4]

splice() 可以进行复杂的移动删除插入操作,可以根据需要进行调整。

3. 获取数组元素索引的方法

在 TypeScript 中,常用的获取数组元素索引的方法有以下三种:

3.1 indexOf() 方法

  1. indexOf() 方法:此方法会返回指定元素数组首次出现位置

ts

const arr: number[] = [1, 2, 3, 4, 5];
 console.log(arr.indexOf(3)); // 输出: 2
 console.log(arr.indexOf(6)); // 输出: -1

3.2 findIndex() 方法

  1. findIndex() 方法:此方法返回第一个满足条件元素索引。如果没有找到,则返回 -1

ts

const arr: number[] = [1, 2, 3, 4, 5];
 console.log(arr.findIndex((element) => element % 2 === 0)); // 输出: 1
 console.log(arr.findIndex((element) => element > 5)); // 输出: -1

3.3 forEach() 方法

  1. forEach() 方法:使用 forEach() 方法可以遍历数组,同时访问每个元素值和索引

ts

const arr: number[] = [1, 2, 3, 4, 5];
 arr.forEach((element, index) => {
   console.log(`Index ${index} has value ${element}`);
 });
 // 输出:
 // Index 0 has value 1
 // Index 1 has value 2
 // Index 2 has value 3
 // Index 3 has value 4
 // Index 4 has value 5

4. 数组转换为字符串

4.1 join 方法

在 TypeScript 中,可以使用数组的 join() 方法将数组转换为字符串。下面是一个简单的示例代码:

ts

const arr: string[] = ['apple', 'banana', 'orange'];
 const str: string = arr.join(', ');
 console.log(str); // 输出: "apple, banana, orange"

在上面的代码中,我们首先定义了一个由字符串组成的数组 arr,然后使用 join() 方法将数组转换为以逗号和空格作为分隔符的字符串,并将其赋值给变量 str。最后,我们使用 console.log() 将转换后的字符串输出到控制台。

需要注意的是,join() 方法不会修改原始数组,它返回的是一个新字符串,因此我们需要将其赋值给一个新变量或重用现有变量。

5. 数组的其他方法

5.1 fill() 方法

fill()方法可以根据指定的值,填充一个数组中从起始索引终止索引内所有元素,用法如下:

const arr = [1, 2, 3, 4, 5];
 arr.fill(0, 2, 4); // [1, 2, 0, 0, 5]

上述例子中,我们将覆盖数组 arr 的 2-4 位置的元素,用数字 0 进行填充。

5.2 slice() 方法

slice()方法可以返回一个新的数组,其中包含原始数组中选择的元素,原始数组不会改变,用法如下:

const arr1 = [1, 2, 3, 4, 5];
 const arr2 = arr1.slice(1, 4); // [2, 3, 4]

上述例子中,我们选取 arr1 数组的第 1 个位置到第 4 个位置之间的元素,用于构造新的数组 arr2

5.3 concat() 方法

concat()方法可以将两个或多个数组合并为一个新的数组,用法如下:

const arr1 = [1, 2, 3];
 const arr2 = [4, 5, 6];
 const arr3 = arr1.concat(arr2); // [1, 2, 3, 4, 5, 6]

上述例子中,我们将 arr1arr2 数组合并成一个新的数组,并将其赋值给 arr3


目录
相关文章
|
3天前
|
人工智能 JavaScript 网络安全
ToB项目身份认证AD集成(三完):利用ldap.js实现与windows AD对接实现用户搜索、认证、密码修改等功能 - 以及针对中文转义问题的补丁方法
本文详细介绍了如何使用 `ldapjs` 库在 Node.js 中实现与 Windows AD 的交互,包括用户搜索、身份验证、密码修改和重置等功能。通过创建 `LdapService` 类,提供了与 AD 服务器通信的完整解决方案,同时解决了中文字段在 LDAP 操作中被转义的问题。
|
5天前
|
自然语言处理 前端开发 JavaScript
🛠️ JavaScript数组操作指南:20个精通必备技巧🚀
本文详细介绍了 JavaScript 中的 20 个高效数组操作技巧,涵盖了从基本的添加、移除元素,到数组转换和去重等高级操作。强调了不可变性的重要性,提供了清晰的代码示例,帮助开发者编写更整洁和高效的代码。无论是新手还是经验丰富的开发者,这些技巧都将显著提升您的编码能力,使您在项目中更具竞争力。
14 2
|
4天前
|
存储 JavaScript 前端开发
JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法
JavaScript 数据类型分为基本数据类型和引用数据类型。基本数据类型(如 string、number 等)具有不可变性,按值访问,存储在栈内存中。引用数据类型(如 Object、Array 等)存储在堆内存中,按引用访问,值是可变的。本文深入探讨了这两种数据类型的特性、存储方式、以及检测数据类型的两种常用方法——typeof 和 instanceof,帮助开发者更好地理解 JavaScript 内存模型和类型检测机制。
10 0
JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法
|
9天前
|
JavaScript 前端开发 测试技术
JS都有哪些操作数组的方法
JS都有哪些操作数组的方法
15 3
|
9天前
|
缓存 JavaScript 前端开发
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
20 1
|
10天前
|
存储 JavaScript 前端开发
js中函数、方法、对象的区别
js中函数、方法、对象的区别
11 2
|
4天前
|
存储 JavaScript 前端开发
JavaScript数组去重的八种方法详解及性能对比
在JavaScript开发中,数组去重是一个常见的操作。本文详细介绍了八种实现数组去重的方法,从基础的双重循环和 indexOf() 方法,到较为高级的 Set 和 Map 实现。同时,分析了每种方法的原理和适用场景,并指出了使用 Set 和 Map 是目前最优的解决方案。通过本文,读者可以深入理解每种方法的优缺点,并选择最合适的数组去重方式。
9 0
|
5天前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
35 0
|
5天前
|
JavaScript
深入解析:JS与Vue中事件委托(事件代理)的高效实现方法
深入解析:JS与Vue中事件委托(事件代理)的高效实现方法
13 0
|
5天前
|
JavaScript 前端开发 大数据
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
6 0