复习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}`);

目录
相关文章
|
9月前
|
前端开发 JavaScript NoSQL
使用 Node.js、Express 和 React 构建强大的 API
本文详细介绍如何使用 Node.js、Express 和 React 构建强大且动态的 API。从开发环境搭建到集成 React 前端,再到利用 APIPost 高效测试 API,适合各水平开发者。内容涵盖 Node.js 运行时、Express 框架与 React 库的基础知识及协同工作方式,还涉及数据库连接和前后端数据交互。通过实际代码示例,助你快速上手并优化应用性能。
|
JavaScript 前端开发 API
Vue.js 3:探索组合式API带来的新变革
Vue.js 3:探索组合式API带来的新变革
403 84
|
10月前
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
JSON 缓存 JavaScript
深入浅出:使用Node.js构建RESTful API
在这个数字时代,API已成为软件开发的基石之一。本文旨在引导初学者通过Node.js和Express框架快速搭建一个功能完备的RESTful API。我们将从零开始,逐步深入,不仅涉及代码编写,还包括设计原则、最佳实践及调试技巧。无论你是初探后端开发,还是希望扩展你的技术栈,这篇文章都将是你的理想指南。
|
12月前
|
JavaScript 前端开发 安全
盘点原生JS中目前最没用的几个功能API
在JavaScript的发展历程中,许多功能与API曾风光无限,但随着技术进步和语言演化,部分功能逐渐被淘汰或被更高效的替代方案取代。例如,`with`语句使代码作用域复杂、可读性差;`void`操作符功能冗余且影响可读性;`eval`函数存在严重安全风险和性能问题;`unescape`和`escape`函数已被`decodeURIComponent`和`encodeURIComponent`取代;`arguments`对象则被ES6的剩余参数语法替代。这些变化体现了JavaScript不断优化的趋势,开发者应紧跟技术步伐,学习新技能,适应新技术环境。
230 10
|
10月前
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
用array.filter()来实现数据筛选、数据清洗和链式调用,相对于for循环更加清晰,语义化强,能显著提升代码的可读性和可维护性。博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
JSON JavaScript 前端开发
深入浅出Node.js:从零开始构建RESTful API
在数字化时代的浪潮中,后端开发作为连接用户与数据的桥梁,扮演着至关重要的角色。本文将引导您步入Node.js的奇妙世界,通过实践操作,掌握如何使用这一强大的JavaScript运行时环境构建高效、可扩展的RESTful API。我们将一同探索Express框架的使用,学习如何设计API端点,处理数据请求,并实现身份验证机制,最终部署我们的成果到云服务器上。无论您是初学者还是有一定基础的开发者,这篇文章都将为您打开一扇通往后端开发深层知识的大门。
314 12
|
JavaScript 前端开发 API
Vue.js 3:深入探索组合式API的实践与应用
Vue.js 3:深入探索组合式API的实践与应用
|
JavaScript NoSQL API
深入浅出Node.js:从零开始构建RESTful API
在数字化时代的浪潮中,后端开发如同一座灯塔,指引着数据的海洋。本文将带你航行在Node.js的海域,探索如何从一张白纸到完成一个功能完备的RESTful API。我们将一起学习如何搭建开发环境、设计API结构、处理数据请求与响应,以及实现数据库交互。准备好了吗?启航吧!
|
JSON JavaScript 前端开发
使用JavaScript和Node.js构建简单的RESTful API
使用JavaScript和Node.js构建简单的RESTful API