服务器之家:专注于VPS、云服务器配置技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|VB|R语言|JavaScript|易语言|vb.net|

服务器之家 - 编程语言 - 编程技术 - ES6新增语法—数组新增七种方法介绍

ES6新增语法—数组新增七种方法介绍

2021-08-02 22:17前端人 编程技术

数组(Array)是有序的元素序列。 若将有限个类型相同的变量的集合命名,那么这个名称为数组名。组成数组的各个变量称为数组的分量,也称为数组的元素,有时也称为下标变量。

ES6新增语法—数组新增七种方法介绍

forEach:遍历数组

 

foreach只是对数组进行遍历,并不会改变原来的数组。

示例:打印数组中的每个元素。

  1. let arr = ['a','b','c']; 
  2. arr.forEach(item=>{ 
  3.  console.log('当前元素',item) 
  4. }) 

上述使用了箭头函数,省略了括号,如果需要数组下标的时候,可以把标加上,改写成:

  1. let arr = ['a','b','c']; 
  2. arr.forEach((item,index)=>{ 
  3.  console.log('当前元素',item) 
  4.  console.log('当前元素下标',index
  5. }) 

如果是给同级的几个元素遍历设置背景颜色时,运行发现失败,代码如下:

  1. window.onload = function(){ 
  2.  let aDiv = document.getElementsByTagName('div'
  3.  aDiv.forEach(item=>{ 
  4.   item.style.background = "red" 
  5.  }) 

运行报错:Uncaught TypeError: aDiv.forEach is not a function at window.onload

报错主要是因为 aDiv 并不是一个真正的数组,它是一个类数组。此时我们需要借助from方法。

from:转换数组

 

from()方法把类数组转换成真正的数组。

使用语法:Array.from(类数组)

此时我们只需要借助from方法,把aDiv转换成真正的数组,就可以使用forEach遍历,给每个元素设置背景。代码如下:

  1. window.onload = function(){ 
  2.  let aDiv = document.getElementsByTagName('div'
  3.  Array.from(aDiv).forEach(item=>{ 
  4.   item.style.background = "red" 
  5.  }) 

map:映射

 

原数组被映射成一个新的数组。返回值是一个新数组,不改变原来的数组。

将一组成绩映射成是否及格的布尔值,判断大于60分就算及格,否则就不及格。代码如下:

  1. let grad = [55,66,77,88] 
  2. let arr2 = grad.map(function(item){ 
  3.  return item>=60 
  4. }) 
  5. console.log("arr2",arr2) 

filter:过滤

 

Filter过滤数组,进去一堆出来几个,返回过滤后的新数组。

比如去掉数组中的偶数,只保留奇数。

  1. let num = [1,2,3,4,5,6,7,8] 
  2. let odd = num.filter(function(item){ 
  3.  return item%2 
  4. }) 
  5. console.log("odd",odd) 

reduce:汇总

 

进去一堆数据,出来一个。比如求和或者求平均数。

以下是求平均数的一个实例:

  1. let num = [1,2,3,4,5,6,7,8] 
  2. let evr = num.reduce((tmp,item,index)=>{ 
  3.  if( index<num.length ){ 
  4.   return tmp+item 
  5.  }else
  6.   return (tmp+item)/num.length 
  7.  } 
  8. }) 

上述的tmp是中间的一个结果,最开始是第一个值。

find:查找

 

在数组中找到符合要求的对象,和filter的区别是找到符合要求的对象就停止搜索了,返回的是一个对象。

查找姓名叫王五的这个人,代码如下:

  1. let pers = [ 
  2.  { name:'倩倩',age:18 }, 
  3.  { name:'张三',age:25 }, 
  4.  { name:'王五',age:60 } 
  5. let per = pers.find(function(item){ 
  6.  return item.name === '王五' 
  7. }) 
  8. console.log('per',per)//per {name"王五", age: 60} 

erver()、some()

 

every目标数组中每一个对象都符合条件则返回true,否则返回false。

some目标数组中有一个或一个以上符合条件就会返回true,否则返回false。

  1. let pers = [ 
  2.  { name:'倩倩',age:18 }, 
  3.  { name:'张三',age:25 }, 
  4.  { name:'王五',age:60 } 
  5. //年龄是否都小于30 
  6. let isYoung = pers.every(item=>{ 
  7.  return item.age < 30 
  8. }) 
  9. //年龄有小于30的 
  10. let haveYoung = pers.some(item=>{ 
  11.  return item.age < 30 
  12. }) 
  13. console.log("isYoung",isYoung) // false 
  14. console.log("haveYoung",haveYoung) //true 

原文链接:https://www.toutiao.com/i6985044488829846049/

延伸 · 阅读

精彩推荐
  • 编程技术Delphi - Indy idMessage和idSMTP实现邮件的发送

    Delphi - Indy idMessage和idSMTP实现邮件的发送

    这篇文章主要介绍了Delphi - Indy idMessage和idSMTP实现邮件的发送,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下...

    JJ_JeremyWu6592020-09-22
  • 编程技术用户态 Tcpdump 如何实现抓到内核网络包的?

    用户态 Tcpdump 如何实现抓到内核网络包的?

    在网络包的发送和接收过程中,绝大部分的工作都是在内核态完成的。那么问题来了,我们常用的运行在用户态的程序 tcpdump 是那如何实现抓到内核态的包...

    开发内功修炼11612021-09-08
  • 编程技术真正聪明的程序员,总有办法不加班

    真正聪明的程序员,总有办法不加班

    工作效率提升了,就可以少加班了,聪明的程序员,总会有一堆可以提升编码效率的工具?当一种工具满足不了工作需求,就去探索新的,今天纬小创就给...

    今日头条12482021-03-04
  • 编程技术让开发效率倍增的 VS Code 插件

    让开发效率倍增的 VS Code 插件

    今天来分享一些提升开发效率的实用 VS Code 插件!Better Comments 扩展可以帮助我们在代码中创建更人性化的注释,有不同形式和颜色的注释供我们选择。 ...

    前端充电宝7132022-04-21
  • 编程技术简单、好懂的Svelte实现原理

    简单、好懂的Svelte实现原理

    本文会围绕一张流程图和两个Demo讲解,正确的食用方式是用电脑打开本文,跟着流程图、Demo一边看、一边敲、一边学...

    魔术师卡颂4822021-11-10
  • 编程技术从Context源码实现谈React性能优化

    从Context源码实现谈React性能优化

    这篇文章主要介绍Context的实现原理,源码层面掌握React组件的render时机,从而写出高性能的React组件,源码层面了解shouldComponentUpdate、React.memo、PureComponen...

    魔术师卡颂5312020-12-20
  • 编程技术2021年值得关注的React PDF 库

    2021年值得关注的React PDF 库

    今天,许多网络应用程序为其用户提供内置的PDF浏览选项。然而,选择一个并不容易,因为它们的功能远远超过显示PDF。在这篇文章中,我将评估5个React的...

    TianTianUp5232021-06-21
  • 编程技术AIOps,SRE工程师手中的利器

    AIOps,SRE工程师手中的利器

    AIOps开始成为一种极为重要的站点可靠性工程工具。它能够高效吸纳观察数据、参与数据以及来自第三方工具的数据,判断系统运行状态并保证其处于最佳...

    至顶网5972021-03-08