0

0

ES6数组新增方法知识点总结

WBOY

WBOY

发布时间:2022-08-08 11:18:00

|

2045人浏览过

|

来源于CSDN

转载

本篇文章给大家带来了关于javascript的相关知识,其中主要介绍了es6数组新增方法的相关问题,包括了迭代方法和归并方法等等内容,下面一起来看一下,希望对大家有帮助。

ES6数组新增方法知识点总结

【相关推荐:javascript视频教程web前端

迭代方法:

ECMAScript为数组定义了5个迭代方法。每个方法接收两个参数:以每一项为参数运行的函数,以及可选的作为函数运行上下文的作用域对象(影响函数中this的值)。传给每个方法的函数接收3个参数:数组元素、元素索引和数组本身。因具体方法而异,这个函数的执行结果可能会也可能不会影响方法的返回值。数组的5个迭代方法如下。

一、map方法:对数组每一项都运行传入的函数,返回由每次函数调用的结果构成的数组

也可以理解为:给数组中的每一个元素进行特殊处理后,返回一个新的数组。

例如:价格数组

简化前:

let prices=[50,80,90]
prices=prices.map((item,index)=>{
     return item+"元"
})
console.log(prices)

简写后:

let price=[50,80,120]
//在单价后面添加上"元"
price=price.map(item=>item+"元")
console.log(price)//输出为['50元', '80元', '90元']

它的应用场景例如:微信小程序   豆瓣影评

用map方法把xxx替换成www

replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。

        let movies=[{id:1,name:"肖申克的救赎",imgUrl:"http://xxx.douban.com/1.jpg"},{id:2,name:"肖申克的救赎",imgUrl:"http://xxx.douban.com/2.jpg"},{id:3,name:"肖申克的救赎",imgUrl:"http://xxx.douban.com/1.jpg"}]
        movies=movies.map(item=>{
            item.imgUrl=item.imgUrl.replace("xxx","www")
            return item
        })
        console.log(movies)

二、filter方法:对数组每一项都运行传入的函数,函数返回true的项会组成数组之后返回。

也可以理解为:过滤出数组中符合要求的元素,返回一个新数组

        let scores=[80,59,10,55,90,88]
        let arr=scores.filter(item=>{
			if(item>60){
				return true
			}
		})
		console.log(arr)//输出如下图:

 输出如下图  把小于60的数组过滤掉

 简写后:

let scores=[80,59,10,55,90,88]
let arr=scores.filter(item=>item>=60)
console.log(arr)//(3) [80, 90, 88]

它的应用场景,可以放置城市名的数组 然后搜索关键字  ,只针对数据较小的时候,关于例子后面我会出一个 图书管理系统的应用场景  里面会包含关键字搜索   可以参考一下。

三和四、some和every方法

some 英语翻译为一些,every翻译为所有,每个,所以some方法 只要其中一个为true 就会返回true的,相反,every()方法必须所有都返回true才会返回true,哪怕有一个false,就会返回false

在数组的判断过程中,判断整体的每一个元素是否全部都符合一项基本要求

some方法: 一真及真, 只要有一个符合就返回,true 
every方法: 一假即假, 只要其中有一个不符合要求就返回,false

//let一个班的所有学生的成绩  看看是否所有人都及格了
         let scores=[80,49,12,50,69]
         let result=scores.every(item=>item>=60)
         console.log(result)//返回false  所有并不是都及格了

使用场景:前端校验器
提交AJAX请求前 ,通常需要所有的校验都通过时才能去发送,关于代码例子后续文章会单独出一个前端数据校验器。

网梦购物系统
网梦购物系统

一套功能完善、性能稳定的经典网上购物系统,掌握了一整套从算法,数据结构到产品安全性方面的领先技术,使程序无论在安全性、负载能力方面均获得了成功,新版购物系统集成多种在线支付方式,全后台操作管理,并集成了Ewebedit编辑器,即使只有电脑基础知识的人也能够轻松操作和管理部分新增功能:集成多种网上支付形式,后台灵活切换增加Ewebedit编辑器,添加信息更容易!简洁、明快、新颖的界面,给人以美的感觉

下载

归并方法:

五、reduce方法:ECMAScript为数组提供了两个归并方法:reduce()和reduceRight()。这两个方法都会迭代数组的所有项,并在此基础上构建一个最终返回值。reduce()方法从数组第一项开始遍历到最后一项。而reduceRight()从最后一项开始遍历至第一项。也可以简单理解为:将数组中的元素整合,返回一个新的内容。

这两个方法都接收两个参数:对每一项都会运行的归并函数,以及可选的以之为归并起点的初始值。传给reduce()和reduceRight()的函数接收4个参数:上一个归并值、当前项、当前项的索引和数组本身。这个函数返回的任何值都会作为下一次调用同一个函数的第一个参数。如果没有给这两个方法传入可选的第二个参数(作为归并起点值),则第一次迭代将从数组的第二项开始,因此传给归并函数的第一个参数是数组的第一项,第二个参数是数组的第二项。

先通过下代码理解一下概念:

下面的代码里4个参数的意思:

  • prev:上一次操作返回的结果 

  • item: 本次操作的元素

  • index:本次操作元素的索引值

  • array:当前操作的数组

        let arr=[20,40,50,21]
        let values=arr.reduce((prev,item,index,array)=>{
            console.log("prev"+prev)
            console.log("item"+item)
            console.log("index"+index)
            console.log("array"+array)
            console.log("__________________________")
        })

输出为:

为什么只循环了三次?prev因为可以设置默认值,如果不设置默认值,那么第一个元素就作为第一个prev 
为什么第二次循环和第三次循环时prev拿到undefined呢?在第二次循环时 得拿到第一次循环的return值  因为第一次没有设置return 所以拿到undefined 以此类推 

如果上面的理解了,那么我们就开始实现数组求和:

        let arr=[20,40,50,21]
        let values=arr.reduce((prev,item,index,array)=>{
            console.log("prev"+prev)
            return prev+item
 //给个return 循环四次 第一次输出prev是20,第二次40+20是60,第三次是110 最后一次输出131
        })
        console.log(values)  //131

什么时候必须设置prev的默认值呢?

给每一个数组元素添加 

  •  
  • let arr=["陈奕迅","杨千嬅","古巨基","李克勤"]
    //给prev设置默认值:作用1.所有元素参加循环  作用2.确定返回内容
    let result=arr.reduce((prev,item)=>{
          //console.log(prev)
          return prev+"
  • "+item+"
  • " },"")//加一个空字符串 console.log(result)//
  • 陈奕迅
  • 杨千嬅
  • 古巨基
  • 李克勤
  • 再来个案例:

    利用reduce实现数组去重,创建一个空数组,把原有数组依次遍历,空数组没有的就插入进去,有的就不再插入了

            let arr=["张三","李四","李四","王二","李四","麻子","张三"]
            let result=arr.reduce((prev,item)=>{
                //includes判断是有具有指定元素 有返回t 没有返回f
                if(!prev.includes(item)){
                    prev.push(item)  //.push()向数组添加一个新项目
                }
                return prev
            },[])//设置一个默认空数组
            console.log(result)//(4) ['张三', '李四', '王二', '麻子']

    再来个案例:(reduce方法可以做很多事情)

    统计字符的出现次数:见下码

            let arr=["a","b","a","c","b","a","c"]
            //返回一个对象 统计每一个字符的出现次数 {a:2,w:3}
            let result=arr.reduce((prev,item)=>{
                //  //判断对象 是否存在对应的属性 
                 if(item in prev){
                     //找到对应属性值 ++  
                     prev[item]++ 
                     //如果将来要设置或者获取对象属性时,这个属性由变量表示的时候用中括号的形式[]++,如果直接是.属性名称用.的形式
                 }else{
                     prev[item]=1
                 }
                 return prev
            },{})
            console.log(result)//{a: 3, b: 2, c: 2}

    【相关推荐:javascript视频教程web前端

    相关专题

    更多
    Golang gRPC 服务开发与Protobuf实战
    Golang gRPC 服务开发与Protobuf实战

    本专题系统讲解 Golang 在 gRPC 服务开发中的完整实践,涵盖 Protobuf 定义与代码生成、gRPC 服务端与客户端实现、流式 RPC(Unary/Server/Client/Bidirectional)、错误处理、拦截器、中间件以及与 HTTP/REST 的对接方案。通过实际案例,帮助学习者掌握 使用 Go 构建高性能、强类型、可扩展的 RPC 服务体系,适用于微服务与内部系统通信场景。

    6

    2026.01.15

    公务员递补名单公布时间 公务员递补要求
    公务员递补名单公布时间 公务员递补要求

    公务员递补名单公布时间不固定,通常在面试前,由招录单位(如国家知识产权局、海关等)发布,依据是原入围考生放弃资格,会按笔试成绩从高到低递补,递补考生需按公告要求限时确认并提交材料,及时参加面试/体检等后续环节。要求核心是按招录单位公告及时响应、提交材料(确认书、资格复审材料)并准时参加面试。

    37

    2026.01.15

    公务员调剂条件 2026调剂公告时间
    公务员调剂条件 2026调剂公告时间

    (一)符合拟调剂职位所要求的资格条件。 (二)公共科目笔试成绩同时达到拟调剂职位和原报考职位的合格分数线,且考试类别相同。 拟调剂职位设置了专业科目笔试条件的,专业科目笔试成绩还须同时达到合格分数线,且考试类别相同。 (三)未进入原报考职位面试人员名单。

    51

    2026.01.15

    国考成绩查询入口 国考分数公布时间2026
    国考成绩查询入口 国考分数公布时间2026

    笔试成绩查询入口已开通,考生可登录国家公务员局中央机关及其直属机构2026年度考试录用公务员专题网站http://bm.scs.gov.cn/pp/gkweb/core/web/ui/business/examResult/written_result.html,查询笔试成绩和合格分数线,点击“笔试成绩查询”按钮,凭借身份证及准考证进行查询。

    8

    2026.01.15

    Java 桌面应用开发(JavaFX 实战)
    Java 桌面应用开发(JavaFX 实战)

    本专题系统讲解 Java 在桌面应用开发领域的实战应用,重点围绕 JavaFX 框架,涵盖界面布局、控件使用、事件处理、FXML、样式美化(CSS)、多线程与UI响应优化,以及桌面应用的打包与发布。通过完整示例项目,帮助学习者掌握 使用 Java 构建现代化、跨平台桌面应用程序的核心能力。

    65

    2026.01.14

    php与html混编教程大全
    php与html混编教程大全

    本专题整合了php和html混编相关教程,阅读专题下面的文章了解更多详细内容。

    36

    2026.01.13

    PHP 高性能
    PHP 高性能

    本专题整合了PHP高性能相关教程大全,阅读专题下面的文章了解更多详细内容。

    75

    2026.01.13

    MySQL数据库报错常见问题及解决方法大全
    MySQL数据库报错常见问题及解决方法大全

    本专题整合了MySQL数据库报错常见问题及解决方法,阅读专题下面的文章了解更多详细内容。

    21

    2026.01.13

    PHP 文件上传
    PHP 文件上传

    本专题整合了PHP实现文件上传相关教程,阅读专题下面的文章了解更多详细内容。

    34

    2026.01.13

    热门下载

    更多
    网站特效
    /
    网站源码
    /
    网站素材
    /
    前端模板

    相关下载

    更多

    精品课程

    更多
    相关推荐
    /
    热门推荐
    /
    最新课程
    ECMAScript6 / ES6---十天技能课堂
    ECMAScript6 / ES6---十天技能课堂

    共25课时 | 1.9万人学习

    HTML5/CSS3/JavaScript/ES6入门课程
    HTML5/CSS3/JavaScript/ES6入门课程

    共102课时 | 6.7万人学习

    HTML+CSS基础与实战
    HTML+CSS基础与实战

    共132课时 | 9.5万人学习

    关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送

    Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号