首页 > 编程语言 >高级开发人员知识:JavaScript 数组方法第 3 部分

高级开发人员知识:JavaScript 数组方法第 3 部分

时间:2022-09-01 00:15:44浏览次数:88  
标签:const log Ron 开发人员 JavaScript names 数组 方法

高级开发人员知识:JavaScript 数组方法第 3 部分

prisma

今天让我们来点高级的。这些数组方法总是遍历数组。基本上,您可以通过基本的 for 循环获得相同的功能。如果是这样,我们为什么要使用它们?让我们始终使用 for 循环(!)。使用数组方法有几个优点。在开发人员体验方面,它们更加简洁,已经优化,更易于阅读等。无需再次发明轮子。你需要好好利用你宝贵的时间。当您想打印 hello world 1000 次时。您不会将相同的代码编写 1000 次,对吧?

笔记:
第1部分:
https://medium.com/@the.soylemez/powerful-tools-javascript-array-methods-part-1-be1fe55ea29e _
第2部分:_ https://medium.com/@the.soylemez/do-you-really-know-javascript-array-methods-part2-8d3349e33986

Array.prototype.findIndex()

你还记得第 2 部分中的 find 方法吗?这两种方法非常相似。基本上,findIndex 方法接受一个返回条件的函数。数组中第一个满足条件的元素,将返回其索引。如果没有满足条件的元素,该方法将返回-1。

假设我们有一个充满名称的数组。我们想得到哈利的索引。

 const names = ['Hermione', 'Harry', 'Ron', 'Harry', 'Albus'];  
 const harryIndex = names.findIndex((element) => element === 'Harry');  
 console.log(harryIndex);

输出:

 1

Array.prototype.findLastIndex()

此方法与 findIndex 方法完全相同,只是有一个区别。与 findIndex 方法不同,此方法从最后一个元素开始。这意味着该方法将返回满足条件的最后一个元素。

让我们尝试上面的相同示例。但这一次我们要找到最后一个哈利。

 const names = ['Hermione', 'Harry', 'Ron', 'Harry', 'Albus'];  
 const lastHarryIndex = names.findLastIndex((element) => element === 'Harry');  
 控制台.log(lastHarryIndex);

输出

 3

Array.prototype.findLast()

就像 find 方法一样,但是这个方法是从最后一个索引开始的。 findLast 方法接受一个返回条件的函数参数。将返回数组中满足条件的最后一个元素。

让我们在给定的 numbers 数组中找到最后一个奇数元素。

 常量数 = [1, 2, 3, 4, 5, 6];  
 const lastOddNumber = numbers.findLast((element) => element % 2 !== 0);  
 控制台.log(lastOddNumber);

输出:

 5

Array.prototype.flat()

这个可能看起来很复杂。 flat 方法将数组中的子数组展平。如果您有嵌套数组。 flat 方法将帮助您将这些元素升级到给定的深度。接受一个论点。这个论点回答了你想要走多深和扁平化的问题。

假设我们有嵌套数组。我们希望这个数组只是一个包含所有值的数组。在下面的示例中,我们的数组有多深?好吧,我看到 1 个元素周围有 3 个方括号。所以我们需要深入 3 倍。

 常量嵌套 = [1,2,[3,4],[[[5,6,7]]]];  
 const flattened = nested.flat(3);  
 console.log(扁平化);

输出:

 [ 1、2、3、4、5、6、7]

注意:尝试给出 1 或 2 作为参数。查看结果。

Array.prototype.forEach()

顾名思义,forEach 方法遍历数组中的所有元素。并执行给定的函数参数。

假设我们要记录数组中的每个元素。

 const names = ['Hermione', 'Ron', 'Harry', 'Albus'];  
 names.forEach((element) => console.log(element));

输出:

 赫敏  
 罗恩  
 哈利  
 阿不思

Array.prototype.includes()

包含方法从给定的 startIndex 开始搜索数组作为第二个参数。如果匹配,则返回 true,否则返回 false。

 const names = ['Hermione', 'Ron', 'Harry', 'Albus'];  
 const isRonIn = names.includes('Ron');  
 const isRonInAfterSecondIndex = names.includes('Ron',2);  
 const isTomRiddleIn = names.includes('Tom Riddle');  
 控制台.log(isRonIn);  
 控制台.log(isRonInAfterSecondIndex);  
 console.log(isTomRiddleIn);

首先,我们询问“Ron”是否在数组中。其次,我们询问“Ron”是否在从第二个索引开始的数组范围内。最后我们询问“Tom Riddle”是否在数组中。

输出:

 真的  
 错误的  
 错误的

Array.prototype.indexOf()

indexOf 方法与 include 方法非常相似。不同之处在于 indexOf 方法返回找到的元素的索引。 indexOf 方法有 2 个参数(searchElement、startIndex)。如果 searchElement 在数组的给定范围内,则返回它的索引,否则返回 -1。 startIndex 参数的默认值为 0。

让我们尝试上面的相同示例,看看有什么不同。

 const names = ['Hermione', 'Ron', 'Harry', 'Albus'];  
 const isRonIn = names.indexOf('Ron');  
 const isRonInAfterSecondIndex = names.indexOf('Ron',2);  
 const isTomRiddleIn = names.indexOf('汤姆谜语');  
 控制台.log(isRonIn);  
 控制台.log(isRonInAfterSecondIndex);  
 console.log(isTomRiddleIn);

输出:

 1  
 -1  
 -1

恭喜!你有更多的知识

 you.includes('知识')

输出:

 真的

我的领英账户: https://www.linkedin.com/in/musabsoylemez/

资源:

https://developer.mozilla.org/

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明

本文链接:https://www.qanswer.top/5758/58113123

标签:const,log,Ron,开发人员,JavaScript,names,数组,方法
From: https://www.cnblogs.com/amboke/p/16645021.html

相关文章

  • 获取数组元素
    这里有一个数组叫a1,数组内容为'red','green','yellow'。如果想直接获取'yellow',可通过他们的标号来获取,因为每一个值都是有标号的,从0开始,0,1,2,3……数组内容的标号......
  • perl 数组嵌套入哈希内
    这里是指数组作为hash的value,即一个key对应多个值这里利用perl中的特殊句柄DATA做示例用以备忘{perl数据结构一旦复杂点,可读性急剧下降,坑......
  • JavaScript之数组常用API
    这篇文章主要帮助大家简单理解数组的一些常用API用法,许多小伙伴常用方法记不住?别急,看完下面的介绍您一定就会明白各个方法是如何用的了......
  • 稀疏数组
    基本介绍当一个数组中大部分元素为0,或者为同一个值的数组时,可以使用稀疏数组来保存该数组。稀疏数组的处理方法是:1、记录数组一共有几行几列,有多少个不同的值2......
  • 稀疏数组
    基本介绍当一个数组中大部分元素为0,或者为同一个值的数组时,可以使用稀疏数组来保存该数组。稀疏数组的处理方法:1.记录数组一共有几行几列,有多少不同的值2.......
  • 有序数组的平方
    有序数组的平方给你一个按非递减顺序排序的整数数组nums,返回每个数字的平方组成的新数组,要求也按非递减顺序排序。示例1:输入:nums=[-4,-1,0,3,10]输出:[0,1,9,......
  • 稀疏数组详细讲解
    稀疏数组的应用场景稀疏sparsearray数组稀疏:从字面意思理解就是为了压缩重复冗余的数据基本介绍:当一个数组中大部分元素为0,或者为同一个值的数组时,可以使用稀疏数......
  • 谜一样的牛(树状数组上倍增/rope)
    题意:一个1~n的排列,给出每个数前面比它大的数的个数,试还原该排列。n<=1e5.题解:例如n=5,01210的答案是24531我们需要一个数据结构,支持单点修改和查询指定前缀和......
  • # JavaScript中的数组
    目录JavaScript中的数组数组的概念创建数组1.利用new创建数组2.利用数组字面量创建数组获取数组中的元素数组的索引数组遍历数组新增元素冒泡排序JavaScript中的数组数组......
  • IOS下无法获取到WebViewJavascriptBridge的问题排查
    问题描述在安卓下正常获取到WebViewJavascriptBridge,在IOS下一直无法获取到WebViewJavascriptBridge官网的示例如下:接手项目时已有的桥接代码:可以发现src不同,一个......