【ES6】数组新增的四个方法 map reduce filter forEach

news/2024/7/10 23:11:03 标签: javascript, es6

map 映射,一个对一个

map( ) 方法按照原始数组元素顺序依次处理元素,返回一个新数组,数组中的元素为原始数组调用函数处理后的值。不改变原始数组。

javascript">    let arr = [10,20,30,40]  
    let newArr = arr.map((item, index, args) => { //当前元素、位置、原始数组本身
        console.log(item, index, args) //会执行 arr.length 次
        return item * 2
    })
    console.log(newArr) //[20, 40, 60, 80]

实例1、分数映射是否及格

javascript">    let arr = [59,60,89,40]
    let result = arr.map(item => item >= 60 ? '及格' : '不及格')
    alert(result) //[不及格,及格,及格,不及格]

reduce 汇总,一堆出来一个

javascript">    let arr = [59,60,89,40]
    let result = arr.reduce(function(totle, item, index, args){
        console.log(totle, item, index, args) //相加中间值、当前值、当前次数、数组本身
        return totle + item
    })
    console.log(result) //248

实例1、求平均值

javascript">    let arr = [890, 657, 987, 90]
    let result = arr.reduce(function(totle, item, index){
        if(index == arr.length - 1){ //表示最后一次
            return (totle + item) / arr.length
        }else{
            return totle + item
        }
    })
    console.log(result) //248

filter 过滤器

filter( ) 创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。

javascript">    let arr = [13, 28, 87, 65, 99, 9]
    let result = arr.filter(function(item, index, args){
        console.log(item, index, args) //当前元素、元素位置、原始数组
        return item % 3 == 0
    })
    console.log(result) //[87,99,9]

实例1、json数组

javascript">    let arr = [
        {name: '男鞋', price: 200},
        {name: '女鞋', price: 18700},
        {name: '男包', price: 100},
        {name: '女包', price: 20000},
    ]
    let result = arr.filter(item => item.price > 10000)
    console.log(result) //[{name: "女鞋", price: 18700},{name: "女包", price: 20000}]

forEach 循环

javascript">    let arr = [21, 34, 56, 88, 90]
    arr.forEach((item, index, args) =>{
        console.log(index + ":" + item, args)
    })

forEach 的操作会改变原数组,这是和 map 的区别。


http://www.niftyadmin.cn/n/497349.html

相关文章

帝国cms 中子栏目循环标签listsonclass调用文章位置不同如何同时循环如下

图1是现在实现的效果,图2是那一块不知道如何调用,因为必须要让图3这一个div里面循环求助各位,解决之后财富不是问题 各位实现为:图1中图片正常打开,简介也正常显示以及超链接! __你可以用灵动标签。 -----…

Java-idea-安装配置优化等

1.属性配置 使用版本,winzip解压版,开发工具安装目录下idea.properties文件,自定义配置路径 # idea.config.path${user.home}/.IntelliJIdea/configidea.config.pathD:/developToool/idea-config/ideaIU-2017.1.win/config # idea.plugins.pa…

Mysql   for windows (MySQL开发)

数据库的安装启动系列:1,将Mysql启动路径配置在windows环境变量里,在环境变量path里的头行输入mysql的bin路径,C:\program files\mysql\bin;2,mysql的启动:net start mysql mysql -uroot -p123 -h127.…

【ES6】字符串新增的一些内容以及应用

新增两个新方法 stratsWith( ) 检测字符串是否以指定的前缀开始 endsWith( ) 检测字符串是否以指定的后缀结尾 startsWith let str http://www.baidu.comif(str.startsWith(https://)){console.log(加密网址)}else if(str.startsWith(http://)){console.log(普通网址) //普通网…

vue.js中$emit的理解

官网介绍比较简单 例子&#xff1a;$emit(increment1,[12,kkk])&#xff0c;直接看是懵逼的有没有&#xff0c;可以先告诉你&#xff0c;就是触发自定义事件increment1(或者函数名吧)&#xff0c;[]为参数 上案例 <!DOCTYPE html> <html><head><meta char…

【git】clone 指定分支 的代码

git clone -b 版本号 项目地址

slimScroll的应用(一)

本类文章依旧是针对初学者来说的&#xff0c;希望大家看到后觉得有用的能给个赞~~ 什么是slimScroll? 一、官网介绍&#xff1a; slimScroll is a small (4.6KB) jQuery plugin that transforms any div into a scrollable area with a nice scrollbar.slimScroll doesn’t oc…

【JS】map批量修改对象数组的键名

map 实例 let arr [{name: xiaoWang,number: 01},{name: xiaoZhao,number: 02}]let newArr arr.map(item > {return {label: item.name,value: item.number}})console.log(newArr)// [{// label: "xiaoWang",// value: "01"// }, {// la…