百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程字典 > 正文

ES6新增语法(三)——数组新增 7 种方法介绍

toyiye 2024-06-28 10:10 26 浏览 0 评论

forEach:遍历数组

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

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

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

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

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

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

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

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

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

from:转换数组

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

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

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

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

map:映射

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

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

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

filter:过滤

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

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

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

reduce:汇总

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

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

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

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

find:查找

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

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

let pers = [
 { name:'倩倩',age:18 },
 { name:'张三',age:25 },
 { name:'王五',age:60 }
]
let per = pers.find(function(item){
 return item.name === '王五'
})
console.log('per',per)//per {name: "王五", age: 60}

erver()、some()

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

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

let pers = [
 { name:'倩倩',age:18 },
 { name:'张三',age:25 },
 { name:'王五',age:60 }
]
//年龄是否都小于30
let isYoung = pers.every(item=>{
 return item.age < 30
})
//年龄有小于30的
let haveYoung = pers.some(item=>{
 return item.age < 30
})
console.log("isYoung",isYoung) // false
console.log("haveYoung",haveYoung) //true

相关推荐

「编程」Java GUI 基础(java编程语言基础)

图形化学习是外功,内功外功配合才能所向披靡。一、JFrameJAVASWING导入包importjavax.swing.*导入包importjava.awt.*JFrameframe=new...

这六个Java技术当年是多么风光,而现在又有几个人用过

嗨,雷猴啊,今天我给大家分享下我的开发历程中,我知道的那些被淘汰的技术或者框架。不知道你们都知道吗?也不知道你们都有没有用过,但是它们之前都是风靡一时,让我们再来了解一次吧。偷偷告诉大家有些我甚至都没...

开发第一个Swing程序(开发第一个java程序实验报告)

packagecom.web.www;importjavax.swing.*;/**第一个Swing程序*/publicclassSwing1extendsJFrame{publicSw...

Java课程设计项目实例《远程屏幕分享监视》第2部分

Java课程设计项目实例《远程屏幕分享监视》第2部分1、服务器端ScreenMonitoringServer程序类及相关的功能方法的编程实现(1)创建出服务器端的ScreenMonitoringSer...

新手学Java编程语言怎么入门?知识点都帮你整理好了

新手学Java编程语言怎么入门?下面和千锋广州小编一起来看看吧!掌握语言基础是第一步,了解Java基础知识,Java关键字、核心概念或者基本编码技术。掌握操作符、控制执行流程、访问权限控制、复用类、多...

Java Swing组件“HelloWorld”程序演示实例

Java源代码:/*首先导入Swing需要的包*/importjavax.swing.*;importjavax.swing.UIManager;importjava.awt.*;import...

新年Java小游戏之「年兽大作战」祝您笑口常开

这个游戏加上编写文章,上班摸鱼时间加上回家的空闲时间,大概花了三天多。java写这玩应真的很痛苦,各种状态位,各种图片和逻辑判断,脑袋都快炸了。而且肯定没有前端的精致,效果一般,偶尔会有卡顿,各位就图...

10分钟掌握 JMeter接口测试的基础入门

嘿。大家好,我是4U:...

JMeter 的简单安装说明(jmeter安装配置)

最近在做一组性能测试,接触到了JMeter这个测试工具,在这里记录一下JMeter的介绍以及简单安装过程。JMeter简介...

Jmeter压测实例分享——新手儿也能一学就会!

JMeter是Apache组织开发的基于Java的压力测试工具。用于对软件做压力测试,它最初被设计用于Web应用测试,但后来扩展到其他测试领域。它可以用于测试静态和动态资源,例如静态文件、Java...

过年必备Java动态烟花教程如何用Canvas和Timer实现炫酷烟花动画

烟花是一种常见的庆祝活动和节日的方式,它们在夜空中绽放出各种颜色和形状,给人们带来美丽和欢乐。你是否想过用Java编程来模拟烟花的效果呢?如果你对此感兴趣,那么这篇教程就是为你准备的。在这篇教程中,你...

全程软件测试(九十五):Jmeter技能基础—读书笔记

jmeter是一款优秀的开源性能测试工具,目前最新版本3.0版本,官网文档地址:http://jmeter.apache.org/usermanual/index.html一、优点...

原创 JAVA Swing JFrame窗口的建立

importjava.awt.*;importjavax.swing.*;publicclassExample1extendsJFrame{//定义一个类继承JFrame类public...

Java Swing组件下的JComboBox组件实例

运行成功的界面:java源代码:一定要注意:执行环境(JRE)javaSE-1.8/*首先导入JButtontest所需要的包*/importjavax.swing.*;importjavax.s...

Java引包的几种方法(java 引用)

第一种方法可以在Superclass这里输入javax.swing.JFrame进行引包也可以在类体外面输入importjavax.swing.JFrame;进行引包还可以点击JFrame然后点击I...

取消回复欢迎 发表评论:

请填写验证码