复习JavaScript中的数组API

简介: 这段代码介绍了JavaScript数组的几种实用方法:`fill`用于用固定值覆盖指定范围内的元素;`find`查找符合条件的第一个元素;`findIndex`获取该元素的索引;`sort`对数组排序,需提供比较函数以正确排序数字;结合`slice`与`sort`可在不改动原数组的情况下进行排序;`reverse`反转数组元素;利用`map`可创建新数组并替换其中的特定元素,同时保持原数组不变。

1. fill 方法

fill 方法用一个固定值替换数组中从 start 索引到 end 索引(不包括 end)的所有元素,返回修改后的数组。

// 使用 `fill` 方法填充数组
const arr = [1, 2, 3, 4, 5, 6];
arr.fill(0, 1, 4); // 从索引1开始到索引3结束,填充值为0
console.log(arr); // 输出: [1, 0, 0, 0, 5, 6]

2. find 方法

find 方法返回数组中满足提供的测试函数的第一个元素的值。如果没有找到,返回 undefined

// 使用 `find` 方法查找数组中的元素
const users = [{
    id: 1, name: "Alice" }, {
    id: 2, name: "Bob" }];
const user = users.find(user => user.id === 2);
console.log(user); // 输出: { id: 2, name: "Bob" }

3. findIndex 方法

findIndex 方法返回数组中满足提供的测试函数的第一个元素的索引,如果没有找到,返回 -1

// 使用 `findIndex` 方法找到数组中元素的索引
const numbers = [10, 20, 30, 40];
const index = numbers.findIndex(number => number > 25);
console.log(index); // 输出: 2

4. sort 方法

sort 方法对数组元素进行排序,并返回排序后的数组。默认排序是按照字符串顺序,对于数字需要提供比较函数。

// 使用 `sort` 方法对数字数组排序
const numbers = [4, 1, 3, 2];
numbers.sort((a, b) => a - b); // 提供比较函数按升序排序
console.log(numbers); // 输出: [1, 2, 3, 4]

5. slicesort 组合使用

要排序数组而不改变原始数组,可以使用 slice 方法先复制数组,然后对副本进行排序。

// 使用 `slice` 和 `sort` 组合对数组进行排序而不改变原始数组
const numbers = [4, 1, 3, 2];
const sortedNumbers = numbers.slice().sort((a, b) => a - b);
console.log(`原始数组: ${
     numbers}, 排序后的数组: ${
     sortedNumbers}`);

6. reverse 方法

reverse 方法将数组中的元素顺序颠倒,并返回修改后的数组。要保留原始数组,可以先使用 slice 方法复制数组。

// 使用 `reverse` 方法反转数组
const numbers = [1, 2, 3, 4];
const reversedNumbers = numbers.slice().reverse();
console.log(`原始数组: ${
     numbers}, 反转后的数组: ${
     reversedNumbers}`);

7. map 方法

要替换数组中的特定元素而不改变原始数组,可以使用 map 方法创建一个新数组。

// 使用 `map` 方法替换数组中的元素
const numbers = [1, 2, 3, 4];
const modifiedNumbers = numbers.map((number, index) => index === 1 ? 0 : number);
console.log(`原始数组: ${
     numbers}, 修改后的数组: ${
     modifiedNumbers}`);

目录
相关文章
|
4天前
|
JavaScript
js 解析 byte数组 成字符串
js 解析 byte数组 成字符串
|
12天前
|
缓存 JavaScript 前端开发
深入浅出:使用Node.js构建RESTful API
【9月更文挑战第3天】在数字化浪潮中,后端开发如同搭建一座连接用户与数据的桥梁。本文将带领读者从零开始,一步步用Node.js搭建一个功能完备的RESTful API。我们将探索如何设计API的结构、处理HTTP请求以及实现数据的CRUD操作,最终通过一个简单的实例,展示如何在真实世界中应用这些知识。无论你是初学者还是有一定经验的开发者,这篇文章都会为你揭示后端开发的奥秘,让你轻松入门并掌握这一技能。
33 3
|
13天前
|
JavaScript 前端开发
JavaScript基础知识-数组的遍历
关于JavaScript数组遍历基础知识的文章。
25 2
JavaScript基础知识-数组的遍历
|
13天前
|
JavaScript 前端开发
JavaScript基础知识-数组的练习
关于JavaScript基础知识中数组操作的练习,主要介绍了如何从一个包含Person对象的数组中过滤出成年人(年龄达到18岁及以上)并将他们放入一个新的数组中。
25 1
JavaScript基础知识-数组的练习
|
13天前
|
JavaScript 前端开发
JavaScript基础知识-数组的常用方法
关于JavaScript基础知识-数组的常用方法。
14 1
JavaScript基础知识-数组的常用方法
|
13天前
|
JavaScript 前端开发 索引
JavaScript基础知识-数组基于索引访问
关于JavaScript数组基于索引访问的基础知识介绍。
13 1
JavaScript基础知识-数组基于索引访问
|
13天前
|
JavaScript 前端开发
JavaScript基础知识-数组的定义方式
本文介绍了JavaScript中数组的多种定义方式。
11 1
JavaScript基础知识-数组的定义方式
|
3天前
|
JavaScript
js 循环数组取值
js 循环数组取值
|
9天前
|
存储 JavaScript 前端开发
JS中的数组有哪些常用操作函数和属性
【9月更文挑战第7天】JS中的数组有哪些常用操作函数和属性
9 1
|
16天前
|
JavaScript NoSQL API
深入浅出:使用Node.js构建RESTful API
【8月更文挑战第31天】本文将引导读者了解如何利用Node.js搭建一个高效、易于扩展的RESTful API。通过简单易懂的语言和逐步深入的内容组织,我们将一起探索Node.js在后端开发中的实际应用,包括环境配置、路由设计、数据处理与连接数据库等关键步骤。文章末尾,你将获得完整的项目代码示例,助你快速启动自己的API项目。