Javascript数组研究03_手写实现_fill_filter_find_findIndex_findLast_findLastIndex

6 Array.fill()

6.1 基本介绍

fill() 方法用一个固定值填充一个数组中从起始索引（默认为 0）到终止索引（默认为 array.length）内的全部元素。它返回修改后的数组。

fill(value)
fill(value, start)
fill(value, start, end)

输入参数：

  • value：用来填充数组元素的值。
  • start（可选）：开始填充的位置，默认值为 0，索引处理方法和copyWithin一致。
  • end（可选）：停止填充的位置（不包含该位置），默认值为 this.length，索引处理方法和copyWithin方法一致。

输出：修改后的原数组。

注意事项：

  • 该方法会改变原数组，是修改方法。
  • 对于稀疏数组，空槽也会被value填充。
  • 是通用的方法
  • 在空数组上不会有任何处理
  • 如果value值为对象的时候，会使填充的所有内容都是执行同一对象
6.2 手写实现
MyArray.prototype.fill = function(value, start = 0, end = this.length) {const length = this.length;// 转换为整数let relativeStart = Number(start);let relativeEnd = Number(end);// 处理 NaNif (isNaN(relativeStart)) relativeStart = 0;if (isNaN(relativeEnd)) relativeEnd = length;// 转换为整数，向零方向取整let to = relativeEnd < 0 ? Math.max(length + relativeEnd, 0) : Math.min(relativeEnd, length);let from = relativeStart < 0 ? Math.max(length + relativeStart, 0) : Math.min(relativeStart, length);if (from >= length || to <= from) return this;for (let i = from; i < to; i++) {this[i] = value;}return this;
};let arr_1 = new MyArray(1, 2, 3)
console.log(arr_1.fill(4)); // [4, 4, 4]
arr_1 = new MyArray(1, 2, 3)
console.log(arr_1.fill(4, 1)); // [1, 4, 4]
arr_1 = new MyArray(1, 2, 3)
console.log(arr_1.fill(4, 1, 2)); // [1, 4, 3]
arr_1 = new MyArray(1, 2, 3)
console.log(arr_1.fill(4, 1, 1)); // [1, 2, 3]
arr_1 = new MyArray(1, 2, 3)
console.log(arr_1.fill(4, 3, 3)); // [1, 2, 3]
arr_1 = new MyArray(1, 2, 3)
console.log(arr_1.fill(4, -3, -2)); // [4, 2, 3]
arr_1 = new MyArray(1, 2, 3)
console.log(arr_1.fill(4, NaN, NaN)); // [1, 2, 3]
arr_1 = new MyArray(1, 2, 3)
console.log(arr_1.fill(4, 3, 5)); // [1, 2, 3]
arr_1 = new MyArray(1, 2, 3)
console.log(new MyArray(3).fill(4)); // [4, 4, 4]// 一个简单的对象，被数组的每个空槽所引用
const arr = new MyArray(3).fill({}); // [{}, {}, {}]
arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }]
console.log(arr)

难点总结：

  • 处理索引：start 和 end 可以使用统一的方法处理索引，然后进行边界判断。
  • 正确判断NaN：当start和end为NaN时需要重新处理为默认值

7 Array.filter()

7.1 基本介绍

filter() 方法创建给定数组一部分的浅拷贝，其包含通过所提供函数实现的测试的所有元素。语法如下：

filter(callbackFn)
filter(callbackFn, thisArg)

输入参数：

  • callbackFn(element, index, array)：用于测试每个元素的函数，返回 true 保留元素，返回 false 不保留。
  • thisArg（可选）：执行 callbackFn 时使用的 this 值。

输出：一个新的数组，包含通过测试的元素。

注意事项：

  • filter() 不会改变原数组，他是一个复制方法。
  • 对于稀疏数组，callbackFn 不会针对空槽调用，空槽也不会出现在新数组中。
  • 如果 callbackFn 改变了数组，则会影响后续的遍历。
7.2 手写实现
MyArray.prototype.filter = function(callFn, thisArg){if(typeof callFn !== "function"){throw new TypeError(callFn + "is not a callback function")}let res;if(Array.isArray(this)){const C = getConstructor(this)res = new C()}else{res = new Array()}for(let i = 0; i < this.length; i ++){if(!(i in this)) continueif(callFn.call(thisArg, this[i], i, this)){res.push(this[i])}}return res
}function isBigEnough(value) {return value >= 10;
}const arr_2 = new MyArray(12, 5, 8, 130, 44)
const filtered = arr_2.filter(isBigEnough);
console.log(filtered)
// filtered is [12, 130, 44]console.log(MyArray.prototype.filter.call([1, , undefined], (x) => x === undefined)); // [undefined]const arrayLike = {length: 3,0: "a",1: "b",2: "c",};console.log(MyArray.prototype.filter.call(arrayLike, (x) => x <= "b"));// [ 'a', 'b' ]

难点总结：

  • 处理空槽：使用 in 操作符检查索引是否存在，跳过空槽。
  • 创建新数组：如何获取正确的对应的构造函数从而返回一致的类型的实例对象是个难点。

8 Array.find()

8.1 基本介绍

find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。语法如下：

find(callbackFn)
find(callbackFn, thisArg)

输入参数：

  • callbackFn(element, index, array)：用于测试每个元素的函数。
  • thisArg（可选）：执行 callbackFn 时使用的 this 值。

输出：满足测试函数的第一个元素的值，或 undefined。

注意事项：

  • 一旦找到满足条件的元素，方法立即返回，不会继续遍历。
  • 对于稀疏数组，空槽的行为和undefined表现一致。
  • 如果在遍历过程中修改了数组，可能会影响结果。
  • find方法是通用的
8.2 手写实现
  MyArray.prototype.find = function(callFn, thisArg){if(typeof callFn !== "function"){throw new TypeError(callFn + "is not a function")}for(let i = 0; i < this.length; i++){if(callFn.call(thisArg, this[i], i, this)) return this[i]}return undefined}const inventory = new MyArray({ name: "apples", quantity: 2 },{ name: "bananas", quantity: 0 },{ name: "cherries", quantity: 5 },)const result = inventory.find(({ name }) => name === "cherries");console.log(result); // { name: 'cherries', quantity: 5 }const arrayLike_2 = {length: 3,0: 2,1: 7.3,2: 4,};console.log(MyArray.prototype.find.call(arrayLike_2, (x) => !Number.isInteger(x)));// 7.3

难点总结：

  • 提前终止遍历：找到满足条件的元素后立即返回。
  • 处理空槽：和已经学习过的every、filter行为有差异，会对空槽执行回调函数，空槽被视为undefined

9 Array.findIndex()

9.1 基本介绍

findIndex() 方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回 -1。语法如下：

findIndex(callbackFn)
findIndex(callbackFn, thisArg)

输入参数：

  • callbackFn(element, index, array)：用于测试每个元素的函数。
  • thisArg（可选）：执行 callbackFn 时使用的 this 值。

输出：满足测试函数的第一个元素的索引，或 -1。

注意事项：

  • 一旦找到满足条件的元素，方法立即返回索引，不会继续遍历。
  • 对于稀疏数组，空槽行为和undefined一致。
  • 数组在遍历过程中被修改，可能会影响结果。
    -** 通用的**方法
9.2 手写实现
MyArray.prototype.findIndex = function(callbackFn, thisArg) {if (typeof callbackFn !== "function") {throw new TypeError(callbackFn + ' is not a function');}for (let i = 0; i < this.length; i++) {if (callbackFn.call(thisArg, this[i], i, this)) {return i;}}return -1;
};console.log(MyArray.prototype.findIndex.call([1, , 3],(x) => x === undefined)) // 1
const arrayLike_3 = {length: 3,0: 2,1: 7.3,2: 4,};console.log(MyArray.prototype.findIndex.call(arrayLike_3, (x) => !Number.isInteger(x)),); // 1

难点总结：

  • 返回索引：与 find() 方法不同，findIndex() 返回索引。
  • 处理空槽：find和findIndex处理空槽行为一致，都会视为undefined进行处理。

10 Array.findLast()

10.1 基本介绍

findLast() 方法从数组末尾开始遍历，返回第一个满足提供的测试函数的元素的值。否则返回 undefined。语法如下：

findLast(callbackFn)
findLast(callbackFn, thisArg)

输入参数：

  • callbackFn(element, index, array)：用于测试每个元素的函数。
  • thisArg（可选）：执行 callbackFn 时使用的 this 值。

输出：满足测试函数的第一个元素的值（从后向前），或 undefined。

注意事项：

  • 从数组的末尾开始遍历。
  • 对于稀疏数组，空槽行为和undefined一致。
  • 如果在遍历过程中修改了数组，可能会影响结果。
10.2 手写实现
MyArray.prototype.findLast = function(callbackFn, thisArg) {if (typeof callbackFn !== "function") {throw new TypeError(callbackFn + ' is not a function');}for (let i = this.length - 1; i >= 0; i--) {let element = this[i];if (callbackFn.call(thisArg, element, i, this)) {return element;}}return undefined;
};

难点总结：

  • 处理空槽：findLast和findIndex以及find处理空槽的行为一致。

11 Array.findLastIndex()

11.1 基本介绍

findLastIndex() 方法从数组末尾开始遍历，返回第一个满足提供的测试函数的元素的索引。否则返回 -1。语法如下：

findLastIndex(callbackFn)
findLastIndex(callbackFn, thisArg)

输入参数：

  • callbackFn(element, index, array)：用于测试每个元素的函数。
  • thisArg（可选）：执行 callbackFn 时使用的 this 值。

输出：满足测试函数的第一个元素的索引（从后向前），或 -1。

注意事项：

  • 从数组的末尾开始遍历。
  • 对于稀疏数组，空槽行为和undefined一致。。
  • 数组在遍历过程中被修改，可能会影响结果。
  • 该方法是通用方法
11.2 手写实现
MyArray.prototype.findLastIndex = function(callbackFn, thisArg) {if (typeof callbackFn !== "function") {throw new TypeError(callbackFn + ' is not a function');}for (let i = this.length - 1; i >= 0; i--) {if (callbackFn.call(thisArg, this[i], i, this)) {return i;}}return -1;
};

难点总结：

  • 处理空槽：find和findLast和findIndex和findLastIndex处理行为一致，都是把空槽当作undefined处理。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/880940.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【本地免费】SimpleTex 图像识别latex公式

【本地免费】SimpleTex 图像识别latex公式

文章目录 相关教程相关文献安装教程 由于mathpix开始收费了&#xff0c;于是本文将介绍一款目前本地免费的SimpleTex工具 相关教程 【超详细安装教程】LaTeX-OCR 图像识别latex公式&#xff08;开源免费&#xff09;_latex图片识别-CSDN博客 相关文献 SimpleTex主页——致力…
阅读更多...
数据结构双向链表和循环链表

数据结构双向链表和循环链表

目录 一、循环链表二、双向链表三、循环双向链表 一、循环链表 循环链表就是首尾相接的的链表&#xff0c;就是尾节点的指针域指向头节点使整个链表形成一个循环&#xff0c;这就弥补了以前单链表无法在后面某个节点找到前面的节点&#xff0c;可以从任意一个节点找到目标节点…
阅读更多...
5.3 克拉默法则、逆矩阵和体积

5.3 克拉默法则、逆矩阵和体积

本节是使用代数而不是消元法来求解 A x b A\boldsymbol x\boldsymbol b Axb 和 A − 1 A^{-1} A−1。所有的公式都会除以 det ⁡ A \det A detA&#xff0c; A − 1 A^{-1} A−1 和 A − 1 b A^{-1}\boldsymbol b A−1b 中的每个元素都是一个行列式除以 A A A 的行列式。…
阅读更多...
C（十一）scanf、getchar（第三弹）

C（十一）scanf、getchar（第三弹）

问题引入&#xff1a;如何实现输入一串密码&#xff0c;如&#xff1a;“123 xxxx” &#xff0c;然后读取并确认&#xff0c;是 -- Y&#xff1b;否 -- N。 自然的&#xff0c;我们想到用scanf&#xff0c;但是在使用过程中你是否遇到跟我一样的困惑呢&#xff1f;如下&…
阅读更多...
如何高效删除 MySQL 日志表中的历史数据？实战指南

如何高效删除 MySQL 日志表中的历史数据？实战指南

在处理高并发的物联网平台或者其他日志密集型应用时&#xff0c;数据库中的日志表往往会迅速增长&#xff0c;数据量庞大到数百GB甚至更高&#xff0c;严重影响数据库性能。如何有效管理这些庞大的日志数据&#xff0c;特别是在不影响在线业务的情况下&#xff0c;成为了一项技…
阅读更多...
【LeetCode HOT 100】详细题解之二叉树篇

【LeetCode HOT 100】详细题解之二叉树篇

【LeetCode HOT 100】详细题解之二叉树篇 94 二叉树的中序遍历方法一&#xff1a;递归方法二&#xff1a;迭代 104 二叉树的最大深度方法一&#xff1a;递归方法二&#xff1a;迭代 226 翻转二叉树方法一&#xff1a;递归方法二&#xff1a;迭代 101 对称二叉树方法一&#xff…
阅读更多...
小程序-使用npm包

小程序-使用npm包

目录 Vant Weapp 安装 Vant 组件库 使用 Vant 组件 定制全局主题样式 API Promise化 1. 基于回调函数的异步 API 的缺点 2. 什么是 API Promise 化 3. 实现 API Promise 化 4.调用 Promise 化之后的异步 API 小程序对 npm 的支持与限制 目前&#xff0c;小程序中已经…
阅读更多...
Java 之深入理解 String、StringBuilder、StringBuffer

Java 之深入理解 String、StringBuilder、StringBuffer

前言 由于发现 String、StringBuilder、StringBuffer 面试的时候会经常问到&#xff0c;这里就顺便总结一下&#xff1a;本文重点会以这三个字符串类的性能、线程安全、存储结构这三个方面进行分析 ✨上期回顾&#xff1a;Java 哈希表 ✨目录 前言 String 介绍 String 的不可变…
阅读更多...
全局安装cnpm并设置其使用淘宝镜像的仓库地址（地址最新版）

全局安装cnpm并设置其使用淘宝镜像的仓库地址（地址最新版）

npm、cnpm和pnpm基本概念 首先介绍一下npm和cnpm是什么&#xff0c;顺便说一下pnpm。 npm npm&#xff08;Node Package Manager&#xff09;是Node.js的默认包管理器&#xff0c;用于安装、管理和分享JavaScript代码包。它是全球最大的开源库生态系统之一&#xff0c;提供了数…
阅读更多...
如何使用ssm实现基于HTML的中国传统面食介绍网站的搭建+vue

如何使用ssm实现基于HTML的中国传统面食介绍网站的搭建+vue

TOC ssm758基于HTML的中国传统面食介绍网站的搭建vue 第1章 绪论 1.1选题动因 当前的网络技术&#xff0c;软件技术等都具备成熟的理论基础&#xff0c;市场上也出现各种技术开发的软件&#xff0c;这些软件都被用于各个领域&#xff0c;包括生活和工作的领域。随着电脑和笔…
阅读更多...
微服务SpringGateway解析部署使用全流程

微服务SpringGateway解析部署使用全流程

官网地址&#xff1a; Spring Cloud Gateway 目录 1、SpringGateway简介 1、什么是网关 2、为什么用网关【为了转发】 2、应用&#xff1a; 1.启动nacos 2.创建网关项目 3.网关配置1 4.网关配置2【了解】 5.过滤器配置【了解】 1、SpringGateway简介 核心功能有三个&…
阅读更多...
Webpack模式-Resolve-本地服务器

Webpack模式-Resolve-本地服务器

目录 ResolveMode配置搭本地服务器区分环境配置 Resolve 前面学习时使用了各种各样的模块依赖&#xff0c;这些模块可能来自于自己编写的代码&#xff0c;也可能来自第三方库&#xff0c;在 Webpack 中&#xff0c;resolve 是用于解析模块依赖的配置项&#xff0c;它决定了 We…
阅读更多...
每日OJ题_牛客_DP13[NOIP2002 普及组]过河卒_路径dp_C++_Java

每日OJ题_牛客_DP13[NOIP2002 普及组]过河卒_路径dp_C++_Java

目录 牛客_DP13[NOIP2002 普及组]过河卒_路径dp 题目解析 C代码1 C代码2 Java代码 牛客_DP13[NOIP2002 普及组]过河卒_路径dp [NOIP2002 普及组] 过河卒_牛客题霸_牛客网 (nowcoder.com) 描述&#xff1a; 棋盘上 A点有一个过河卒&#xff0c;需要走到目标 B点。卒行走的…
阅读更多...
业务封装与映射 -- 业务映射路径

业务封装与映射 -- 业务映射路径

为什么需要封装映射 OTN网络客户业务种类繁多&#xff08;例如SDH、以太网、视频&#xff09;&#xff0c;且业务大小不一&#xff08;例如STM-1、STM-4、STM-16&#xff09;&#xff0c;为了便于传输、管理客户业务&#xff0c;保证设备间互联互通&#xff0c;ITU-T定义了OTN接…
阅读更多...
《深度学习》OpenCV 角点检测、特征提取SIFT 原理及案例解析

《深度学习》OpenCV 角点检测、特征提取SIFT 原理及案例解析

目录 一、角点检测 1、什么是角点检测 2、检测流程 1&#xff09;输入图像 2&#xff09;图像预处理 3&#xff09;特征提取 4&#xff09;角点检测 5&#xff09;角点定位和标记 6&#xff09;角点筛选或后处理&#xff08;可选&#xff09; 7&#xff09;输出结果 3、邻域…
阅读更多...
物联网智能项目全面解析

物联网智能项目全面解析

目录 引言 一、物联网概述 1.1 什么是物联网 1.2 物联网的历史与发展 二、物联网智能项目分类 三、关键组件与技术 3.1 传感器和执行器 3.2 连接技术 3.3 数据处理与分析 3.4 用户界面 四、物联网智能项目案例分析 4.1 智能家居 4.2 智慧城市 4.3 工业物联网 4.4…
阅读更多...
前端编程艺术（2）----CSS

前端编程艺术（2）----CSS

目录 1.CSS 2.CSS引入 3.选择器 1.标签选择器 2.类选择器 3.id选择器 4.属性选择器 5.后代选择器 5.直接子元素选择器 6.伪类选择器 链接相关 动态伪类 结构化伪类 否定伪类 其他伪类 UI元素状态伪类 4.字体 1.font-family 2.font-size 3.font-style 4.fo…
阅读更多...
C++之多线程

C++之多线程

前言 多线程和多进程是并发编程的两个核心概念，它们在现代计算中都非常重要，尤其是在需要处理大量数据、提高程序性能和响应能力的场景中。 多线程的重要性： 资源利用率：多线程可以在单个进程中同时执行多个任务，这可以更有效地利用CPU资源，特别是在多核处理器上。 性…
阅读更多...
奔驰EQS450suv升级增强AR抬头显示HUD案例分享

奔驰EQS450suv升级增强AR抬头显示HUD案例分享

以下是奔驰 EQS450 SUV 升级增强版 AR 抬头显示的一般改装案例步骤及相关信息&#xff1a; 配件&#xff1a;通常包括显示屏、仪表模块、饰板等。 安装步骤&#xff1a; 1. 拆下中控的仪表。 2. 在仪表上预留位置切割出合适的孔位&#xff0c;用于安装显示器。 3. 将显示器…
阅读更多...
（IDEA）spring项目导入本地jar包方法和项目打包时找不到引入本地jar包的问题解决方案

（IDEA）spring项目导入本地jar包方法和项目打包时找不到引入本地jar包的问题解决方案

系列文章目录 文章目录 系列文章目录一、&#xff08;IDEA&#xff09;spring项目导入本地jar包方法和项目打包时找不到引入本地jar包的问题解决方案1.资料 一、&#xff08;IDEA&#xff09;spring项目导入本地jar包方法和项目打包时找不到引入本地jar包的问题解决方案 1.资料…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023