【刷题必备】整理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 中的所有元素连接成一个字符串，每个元素之间用逗号和空格分隔开。

相关推荐
ZJ_.几秒前
WPSJS：让 WPS 办公与 JavaScript 完美联动
开发语言·前端·javascript·vscode·ecmascript·wps
XiaoLeisj12 分钟前
【递归，搜索与回溯算法 & 综合练习】深入理解暴搜决策树：递归，搜索与回溯算法综合小专题（二）
数据结构·算法·leetcode·决策树·深度优先·剪枝
Jasmine_llq31 分钟前
《 火星人 》
算法·青少年编程·c#
gb421528736 分钟前
springboot中Jackson库和jsonpath库的区别和联系。
java·spring boot·后端
joan_8536 分钟前
layui表格templet图片渲染--模板字符串和字符串拼接
前端·javascript·layui
程序猿进阶37 分钟前
深入解析 Spring WebFlux：原理与应用
java·开发语言·后端·spring·面试·架构·springboot
闻缺陷则喜何志丹42 分钟前
【C++动态规划 图论】3243. 新增道路查询后的最短距离 I|1567
c++·算法·动态规划·力扣·图论·最短路·路径
还是大剑师兰特1 小时前
什么是尾调用，使用尾调用有什么好处？
javascript·大剑师·尾调用
热门推荐
01〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04DisplayPort AltMode On Type-c协议_Ver2.0(学习笔记)05校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站06Docker 夺命连环 15 问076个主流的工业3D管道设计软件08基于大语言模型（LLM）的合成数据生成、策展和评估的综述09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10红米手机使用google play