【刷题必备】整理JavaScript中涉及“数组操作”时常用的一些方法

C4rTryn思诚2023-11-10 12:03

添加和删除元素

  1. push() 和 pop()
  • push() 方法用于在数组的末尾添加一个或多个元素。
js 复制代码 
// 创建一个空数组
let fruits = [];

// 使用 push() 方法向数组末尾添加元素
fruits.push('apple'); // ['apple']
fruits.push('banana'); // ['apple', 'banana']
fruits.push('orange'); // ['apple', 'banana', 'orange']

// 打印最终的数组内容
console.log(fruits); // 输出：['apple', 'banana', 'orange']

在以上示例中，我们首先创建了一个空数组 fruits，然后使用 push() 方法向数组中添加了三种水果。每次调用 push() 方法都会把新的元素添加到数组的末尾。

  • pop() 方法用于从数组的末尾移除最后一个元素。
js 复制代码 
// 定义一个数组
let fruits = ['apple', 'banana', 'orange'];

// 使用 pop() 方法移除数组末尾的元素
let removedFruit = fruits.pop(); // 'orange'，fruits变为 ['apple', 'banana']

// 打印移除的元素和最终的数组内容
console.log(removedFruit); // 输出：'orange'
console.log(fruits); // 输出：['apple', 'banana']

在上述示例中，我们首先定义了一个包含三种水果的数组 fruits，然后使用 pop() 方法移除了数组末尾的元素，并将被移除的元素赋值给了 removedFruit 变量。

  1. unshift() 和 shift()
  • unshift() 方法用于在数组的开头添加一个或多个元素。
js 复制代码 
// 创建一个空数组
let fruits = [];

// 使用 unshift() 方法向数组开头添加元素
fruits.unshift('orange'); // ['orange']
fruits.unshift('banana'); // ['banana', 'orange']
fruits.unshift('apple'); // ['apple', 'banana', 'orange']

// 打印最终的数组内容
console.log(fruits); // 输出：['apple', 'banana', 'orange']

在以上示例中，我们首先创建了一个空数组 fruits，然后使用 unshift() 方法向数组开头添加了三种水果。每次调用 unshift() 方法都会把新的元素添加到数组的开头。

  • shift() 方法用于移除数组的第一个元素。
js 复制代码 
// 定义一个数组
let fruits = ['apple', 'banana', 'orange'];

// 使用 shift() 方法移除数组开头的元素
let removedFruit = fruits.shift(); // 'apple'，fruits变为 ['banana', 'orange']

// 打印移除的元素和最终的数组内容
console.log(removedFruit); // 输出：'apple'
console.log(fruits); // 输出：['banana', 'orange']

在上述示例中，我们首先定义了一个包含三种水果的数组 fruits，然后使用 shift() 方法移除了数组开头的元素，并将被移除的元素赋值给了 removedFruit 变量。

查找和遍历元素

  1. forEach()
  • forEach() 方法对数组的每个元素执行提供的函数一次。
js 复制代码 
// 定义一个包含水果的数组
let fruits = ['apple', 'banana', 'orange', 'grape'];

// 使用 forEach() 方法遍历数组并打印每个元素的值
fruits.forEach(function(fruit) {
  console.log(fruit);
});

在上述示例中，我们首先定义了一个包含四种水果的数组 fruits，然后使用 forEach() 方法遍历整个数组。在 forEach() 方法的参数中，我们传入了一个匿名函数，该函数接受一个参数 fruit，代表数组中的每个元素。在匿名函数的主体部分，我们调用了 console.log() 方法来打印每个水果的值。运行代码后，会将数组中每个水果的值打印出来。 2. filter()

  • filter() 方法创建一个新数组，其中包含所有通过提供函数实现的测试的元素。
js 复制代码 
// 定义一个包含数字的数组
let numbers = [3, 8, 12, 4, 7, 2, 10];

// 使用 filter() 方法筛选出大于等于 5 的元素
let filteredNumbers = numbers.filter(function(number) {
  return number >= 5;
});

// 打印筛选后的数组内容
console.log(filteredNumbers); // 输出：[8, 12, 7, 10]

在上述示例中，我们首先定义了一个包含数字的数组 numbers，然后使用 filter() 方法筛选出了大于等于 5 的元素，并将结果保存在 filteredNumbers 变量中。在 filter() 方法的参数中，我们传入了一个匿名函数，该函数接受一个参数 number，代表数组中的每个元素。在匿名函数的主体部分，我们使用条件 number >= 5 来筛选出大于等于 5 的元素。我们运行以上代码，在控制台中可以看到筛选出的符合条件的元素组成的新数组被打印出来。

  1. find() 和 findIndex()
  • find() 方法返回数组中符合提供的测试函数的第一个元素的值。
js 复制代码 
// 定义一个包含学生信息的数组
let students = [
  { name: 'Alice', score: 85 },
  { name: 'Bob', score: 76 },
  { name: 'Cathy', score: 92 },
  { name: 'David', score: 88 }
];

// 使用 find() 方法查找分数大于等于 90 的学生信息
let topStudent = students.find(function(student) {
  return student.score >= 90;
});

// 打印查找到的学生信息
console.log(topStudent); // 输出：{ name: 'Cathy', score: 92 }

在以上示例中，我们定义了一个包含学生信息的数组 students，然后使用 find() 方法查找出分数大于等于 90 的学生信息，并将结果保存在 topStudent 变量中。在 find() 方法的参数中，我们传入了一个匿名函数，该函数接受一个参数 student，代表数组中的每个元素。在匿名函数的主体部分，我们使用条件 student.score >= 90 来查找分数大于等于 90 的学生信息。运行以上代码，我们可以在控制台中看到输出结果，即找到的分数大于等于 90 的学生信息被打印出来。

  • findIndex() 方法返回数组中符合提供的测试函数的第一个元素的索引。
js 复制代码 
// 定义一个包含学生信息的数组
let students = [
  { name: 'Alice', score: 85 },
  { name: 'Bob', score: 76 },
  { name: 'Cathy', score: 92 },
  { name: 'David', score: 88 }
];

// 使用 findIndex() 方法查找分数大于等于 90 的学生所在的索引
let topStudentIndex = students.findIndex(function(student) {
  return student.score >= 90;
});

// 打印查找到的学生的索引
console.log(topStudentIndex); // 输出：2

在上述示例中，我们同样定义了一个包含学生信息的数组 students，然后使用 findIndex() 方法查找出分数大于等于 90 的学生所在的索引，并将结果保存在 topStudentIndex 变量中。在 findIndex() 方法的参数中，我们同样传入了一个匿名函数，该函数接受一个参数 student，代表数组中的每个元素。在匿名函数的主体部分，我们使用条件 student.score >= 90 来查找分数大于等于 90 的学生所在的索引。运行以上代码，我们可以在控制台中看到输出结果，即找到的分数大于等于 90 的学生所在的索引被打印出来。

数组内容变换

  1. map()
  • map() 方法创建一个新数组，其结果是该数组中的每个元素调用一个提供的函数后返回的结果。
js 复制代码 
// 定义一个包含数字的数组
let numbers = [1, 2, 3, 4, 5];

// 使用 map() 方法将数组中的每个元素都加倍
let doubledNumbers = numbers.map(function(number) {
  return number * 2;
});

// 打印加倍后的数组内容
console.log(doubledNumbers); // 输出：[2, 4, 6, 8, 10]

在上面的示例中，我们定义了一个包含数字的数组 numbers，然后使用 map() 方法将数组中的每个元素都加倍，并将结果保存在 doubledNumbers 变量中。在 map() 方法的参数中，我们传入了一个匿名函数，该函数接受一个参数 number，代表数组中的每个元素。在匿名函数的主体部分，我们使用表达式 number * 2 来对数组中的每个元素进行加倍操作。

  1. sort()
  • sort() 方法用原地算法对数组的元素进行排序，并返回数组。默认排序顺序是根据字符串Unicode码点。
js 复制代码 
// 定义一个无序的数字数组
let unorderedNumbers = [5, 2, 8, 1, 4];

// 使用 sort() 方法对数组进行升序排序
let sortedNumbers = unorderedNumbers.sort(function(a, b) {
  return a - b;
});

// 打印排序后的数组内容
console.log(sortedNumbers); // 输出：[1, 2, 4, 5, 8]

在上述示例中，我们定义了一个无序的数字数组 unorderedNumbers，然后使用 sort() 方法对数组进行升序排序，并将结果保存在 sortedNumbers 变量中。在 sort() 方法的比较函数中，我们使用 a - b 的方式来指定按照升序排序。

  1. splice()
  • splice() 方法通过删除现有元素和/或添加新元素来更改一个数组的内容。
js 复制代码 
// 定义一个包含数字的数组
let numbers = [1, 2, 3, 4, 5];

// 使用 splice() 方法删除数组中的第二个元素
let removedElements = numbers.splice(1, 1);

// 打印删除后的数组内容和被删除的元素
console.log(numbers); // 输出：[1, 3, 4, 5]
console.log(removedElements); // 输出：[2]

在这个示例中，我们使用 splice() 方法删除了数组 numbers 中的第二个元素，并将被删除的元素保存在 removedElements 变量中。splice() 方法的第一个参数是起始索引，第二个参数是要删除的元素个数。

数组内容检测

  1. includes()
  • includes() 方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则返回 false。
js 复制代码 
// 定义一个包含数字的数组
let numbers = [1, 2, 3, 4, 5];

// 使用 includes() 方法判断数组中是否包含特定的元素
let includesThree = numbers.includes(3);
let includesTen = numbers.includes(10);

// 打印判断结果
console.log(includesThree); // 输出：true
console.log(includesTen); // 输出：false

在上述示例中，我们定义了一个包含数字的数组 numbers，然后使用 includes() 方法来判断数组中是否包含特定的元素（例如 3 和 10）。includes() 方法会返回布尔值，表示数组中是否包含指定的元素。

  1. indexOf() 和 lastIndexOf()
  • indexOf() 方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在则返回 -1。
js 复制代码 
// 定义一个包含字符串的数组
let fruits = ['apple', 'banana', 'orange', 'apple', 'grape'];

// 使用 indexOf() 方法寻找数组中特定元素的索引
let indexOfApple = fruits.indexOf('apple');
let indexOfCherry = fruits.indexOf('cherry');

// 打印查找结果
console.log(indexOfApple); // 输出：0
console.log(indexOfCherry); // 输出：-1

在以上示例中，我们定义了一个包含字符串的数组 fruits，然后使用 indexOf() 方法分别查找数组中 "apple" 和 "cherry" 的索引。indexOf() 方法会返回第一次出现的指定元素的索引，如果不存在，则返回 -1。

  • lastIndexOf() 方法返回在数组中可以找到一个给定元素的最后一个索引，如果不存在则返回 -1。
js 复制代码 
// 定义一个包含字符串的数组
let fruits = ['apple', 'banana', 'orange', 'apple', 'grape'];

// 使用 lastIndexOf() 方法寻找数组中特定元素最后一次出现的索引
let lastIndexOfApple = fruits.lastIndexOf('apple');
let lastIndexOfCherry = fruits.lastIndexOf('cherry');

// 打印查找结果
console.log(lastIndexOfApple); // 输出：3
console.log(lastIndexOfCherry); // 输出：-1

在上述示例中，我们同样使用 lastIndexOf() 方法分别查找数组中 "apple" 和 "cherry" 最后一次出现的索引。lastIndexOf() 方法会返回数组中最后一次出现的指定元素的索引，如果不存在，则返回 -1。

其他常用方法

  1. concat()
  • concat() 方法用于合并两个或多个数组。
js 复制代码 
// 定义两个数组
let array1 = [1, 2, 3];
let array2 = [4, 5, 6];

// 使用 concat() 方法合并两个数组
let concatenatedArray = array1.concat(array2);

// 打印合并后的数组内容
console.log(concatenatedArray); // 输出：[1, 2, 3, 4, 5, 6]

在上述示例中，我们定义了两个数组 array1 和 array2，然后使用 concat() 方法将它们合并成一个新的数组 concatenatedArray。

  1. slice()
  • slice() 方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝。
js 复制代码 
// 定义一个包含数字的数组
let numbers = [1, 2, 3, 4, 5];

// 使用 slice() 方法提取数组的一部分元素
let slicedArray = numbers.slice(1, 4);

// 打印提取后的数组内容
console.log(slicedArray); // 输出：[2, 3, 4]

在上面的示例中，我们使用 slice() 方法从 numbers 数组中提取索引 1 到 4 之间的元素（不包括索引 4），并将结果保存在 slicedArray 中。

  1. join()
  • join() 方法将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串。
js 复制代码 
// 定义一个包含字符串的数组
let fruits = ['apple', 'banana', 'orange'];

// 使用 join() 方法将数组的元素连接成一个字符串
let fruitsString = fruits.join(', ');

// 打印连接后的字符串
console.log(fruitsString); // 输出："apple, banana, orange"

在以上示例中，我们使用 join() 方法将数组 fruits 中的所有元素连接成一个字符串，每个元素之间用逗号和空格分隔开。

相关推荐
XINGTECODE5 分钟前
海盗王集成网关和商城服务端功能golang版
开发语言·后端·golang
alphaTao8 分钟前
LeetCode 每日一题 2024/11/18-2024/11/24
算法·leetcode
程序猿进阶11 分钟前
堆外内存泄露排查经历
java·jvm·后端·面试·性能优化·oom·内存泄露
FIN技术铺16 分钟前
Spring Boot框架Starter组件整理
java·spring boot·后端
kitesxian17 分钟前
Leetcode448. 找到所有数组中消失的数字(HOT100)+Leetcode139. 单词拆分(HOT100)
数据结构·算法·leetcode
前端百草阁20 分钟前
【TS简单上手，快速入门教程】————适合零基础
javascript·typescript
彭世瑜20 分钟前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
Backstroke fish22 分钟前
Token刷新机制
前端·javascript·vue.js·typescript·vue
zwjapple22 分钟前
typescript里面正则的使用
开发语言·javascript·正则表达式
小五Five23 分钟前
TypeScript项目中Axios的封装
开发语言·前端·javascript
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04玄机平台应急响应—webshell查杀05Coze扣子平台完整体验和实践（附国内和国际版对比）06Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO07【目标跟踪】相机运动补偿08Unity中PICO实现 隔空取物 和 接触抓取物体09RAG 实践- Ollama+RagFlow 部署本地知识库10量化方法怎么选？如何评估量化后的大模型LLM？