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;提升用户体验。本文将详细介绍如何在微信小程序中配置分包加载和预下载。 步骤一&#xff1a;配置分包加载 修改app.json文件&#x…
阅读更多...
Dijkstra算法，动态规划和滑动窗口

Dijkstra算法，动态规划和滑动窗口

一&#xff1a;最小花费 题目链接&#xff1a;1928. 规定时间内到达终点的最小花费 - 力扣&#xff08;LeetCode&#xff09; &#xff08;1&#xff09;Dijkstra算法 理解问题&#xff1a;首先&#xff0c;我们需要理解问题的核心是找到一条从城市 0 到城市 n-1 的路径&…
阅读更多...
数据结构双向链表和循环链表

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

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

web笔记

<form method"POST" action"{{ url_for(register) }}"><label for"username">用户名:</label><input type"text" id"username" name"username" required><br><label for"p…
阅读更多...
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;如下&…
阅读更多...
[深度学习]基于YOLO高质量项目源码+模型+GUI界面汇总

[深度学习]基于YOLO高质量项目源码+模型+GUI界面汇总

以下项目全部是本人亲自编写代码&#xff0c;项目汇总如下&#xff1a; 序号项目名称下载地址1基于yolov8的辣椒缺陷检测系统python源码onnx模型评估指标曲线精美GUI界面.zip点我下载2基于yolov8的海上红外目标系统python源码onnx模型评估指标曲线精美GUI界面.zip点我下载3基于…
阅读更多...
计算机视觉与深度学习 | 读取、处理和写入激光雷达点云数据（附matlab代码）

计算机视觉与深度学习 | 读取、处理和写入激光雷达点云数据（附matlab代码）

===================================================== github：https://github.com/MichaelBeechan CSDN：https://blog.csdn.net/u011344545 ===================================================== 激光雷达点云数据 1、读取和显示点云2、选择所需的一组点3、将所选点写…
阅读更多...
如何高效删除 MySQL 日志表中的历史数据？实战指南

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

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

ES索引备份

#!/usr/bin/env python # -*- coding:utf-8 -*-""" /************************************************************** **************************************************************/ 获取ES中所有的文档数据 filename data_es.py python3 ""&q…
阅读更多...
【LeetCode HOT 100】详细题解之二叉树篇

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

【LeetCode HOT 100】详细题解之二叉树篇 94 二叉树的中序遍历方法一&#xff1a;递归方法二&#xff1a;迭代 104 二叉树的最大深度方法一&#xff1a;递归方法二&#xff1a;迭代 226 翻转二叉树方法一&#xff1a;递归方法二&#xff1a;迭代 101 对称二叉树方法一&#xff…
阅读更多...
iview Form Input组件按下回车键搜索和禁止触发表单默认事件

iview Form Input组件按下回车键搜索和禁止触发表单默认事件

在进行表单搜索功能开发的过程中&#xff0c;经常会有这样的需求&#xff0c;要求Input输入完成以后&#xff0c;按下回车键进行查询。实现这个功能只需要在Input组件上增加keyup.enter事件即可 代码如下&#xff1a; <Input v-model"searchWords" keyup.enter&q…
阅读更多...
小程序-使用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简介 核心功能有三个&…
阅读更多...
docker export/import 和 docker save/load 的区别

docker export/import 和 docker save/load 的区别

Docker export/import 和 docker save/load 都是用于容器和镜像的备份和迁移&#xff0c;但它们有一些关键的区别&#xff1a; docker export/import: export 作用于容器&#xff0c;import 创建镜像导出的是容器的文件系统&#xff0c;不包含镜像的元数据丢失了镜像的层级结构…
阅读更多...
Webpack模式-Resolve-本地服务器

Webpack模式-Resolve-本地服务器

目录 ResolveMode配置搭本地服务器区分环境配置 Resolve 前面学习时使用了各种各样的模块依赖&#xff0c;这些模块可能来自于自己编写的代码&#xff0c;也可能来自第三方库&#xff0c;在 Webpack 中&#xff0c;resolve 是用于解析模块依赖的配置项&#xff0c;它决定了 We…
阅读更多...
最新文章

Copyright @ 2022~2023