forEach() map()— —更新数组 filter()、includes()、find()、findIndex()— —筛选(删除)数组 some()、every()— 判断数组 reduce
forEach()
map()— —更新数组
filter()、includes()、find()、findIndex()— —筛选(删除)数组
some()、every()— —判断数组
reduce()— —叠加数组
arr.forEach()
遍历数组全部元素,利用回调函数对数组进行操作,自动遍历数组.length次数,且无法break中途跳出循环
因此不可控
不支持return操作输出,return只用于控制循环是否跳出当前循环
因此难操作成新数组,新值,故不作多分析
示例:
var arr = [1,2,3,4,5,] ;
arr.forEach(function(item,index){console.log(item);
});
arr.map()— —更新数组
1、创建新数组
2、不改变原数组
3、输出的是return什么就输出什么新数组
4、回调函数参数,item(数组元素)、index(序列)、arr(数组本身)
5、使用return操作输出,会循环数组每一项,并在回调函数中操作
示例:
let arr = [1,2,3,4,5] ;
let newArr = arr.map(function(item,index){return item*2; //操作更新数组
})
console.log(newArr); //打印新数组
console.log(arr); //打印原数组,map()没有改变原数组
let newArr2 = newArr.map(function(item,index){return `<li>${item}</li>` ;//ES6语法,模版字符串,波浪号键,变量使用${}//["<li>NaN</li>", "<li>NaN</li>", "<li>NaN</li>", "<li>NaN</li>", "<li>NaN</li>"]
})
console.log(newArr2.join('')); //数组.join(),把数组每一项连接起来,形成字符串string
console.log(newArr); //打印数组,map()没有改变原数组
arr.filter()、includes()、find()、findIndex()— —筛选数组
一、arr.filter()
1、创建新数组
2、不改变原数组
3、输出的是判断为true的数组元素形成的新数组
4、回调函数参数,item(数组元素)、index(序列)、arr(数组本身)
5、使用return操作输出,会循环数组每一项,并在回调函数中操作
示例:
var arr = [1,2,3,4,5] ;
var newArr = arr.filter(function(item,index){return item>2&&item<5 ; //根据判断为true来遍历循环添加进新数组
})
console.log(newArr); //打印新数组
console.log(arr); //打印原数组,map()没有改变原数组
二、arr.includes()
只是判断数组是否含有某值,不用return,不用回调函数,输出一个true或false
无用
示例:
//include():
var arr = [1,2,3,4,5] ;
var new1 = arr.includes(5); //不用回调函数,且是完全匹配才行如原数组是55则flase(实用性不如正则)
console.log(new1);
console.log(arr);
三、arr.find()
1、不创建新数组
2、不改变原数组
3、输出的是一旦判断为true则跳出循环输出符合条件的数组元素
4、回调函数参数,item(数组元素)、index(序列)、arr(数组本身)
5、使用return操作输出,会循环数组每一项,并在回调函数中操作
示例:
var arr = [1,2,3,4,5] ;
var new1 = arr.find(function(item,index){return item>2&&item<5 ; //当遍历循环到判断到一个为true则跳出循环,输出当前数组元素,不再循环
})
var new2 = arr.find(function(item,index){return item.toString().indexOf(5)>-1 ; //把当前数组元素转为字符串,则可index()>-1判断是否含有某字符
})
console.log(new1); //打印操作后的结果
console.log(new2) //打印是否含有某字符(用正则会更好,这里学习使用一下)
console.log(arr); //打印原数组,find()没有改变原数组
四、arr.findIndex()— — 与find()相同
1、不创建新数组
2、不改变原数组
3、输出的是一旦判断为true则跳出循环输出符合条件的数组元素序列
4、回调函数参数,item(数组元素)、index(序列)、arr(数组本身)
5、使用return操作输出,会循环数组每一项,并在回调函数中操作
(较无用)
示例:
var arr = [1,2,3,4,5] ;
var new1 = arr.findIndex(function(item,index){return item>2&&item<5 ; //当遍历循环到判断到一个为true则跳出循环,输出当前数组元素序列,不再循环
})
var new2 = arr.findIndex(function(item,index){return item.toString().indexOf(5)>-1 ; //把当前数组元素转为字符串,则可index()>-1判断是否含有某字符
})
console.log(new1); //打印操作后的结果
console.log(new2) //打印是否含有某字符(用正则会更好,这里学习使用一下)
console.log(arr); //打印原数组,findIndex()没有改变原数组
arr.some()、every()— —判断数组
一、some() 一真即真
1、不创建新数组
2、不改变原数组
3、输出的是判断为true则马上跳出循环并return成true
4、回调函数参数,item(数组元素)、index(序列)、arr(数组本身)
5、使用return操作输出,会循环数组每一项,并在回调函数中操作
示例:
//arr.some()
var arr = [1,2,3,4,5] ;
var new1 = arr.some(function(item,index){return item>2&&item<5 ; //判断出一个符合条件则跳出循环并输出true
})
var new2 = arr.some(function(item,index){return item>5 ; //判断出数组全部元素都不符合条件则输出flase
})
console.log(new1);
console.log(new2);
console.log(arr);
一、every()— —与some相反 一假即假
1、不创建新数组
2、不改变原数组
3、输出的是判断为false则马上跳出循环并return成false
4、回调函数参数,item(数组元素)、index(序列)、arr(数组本身)
5、使用return操作输出,会循环数组每一项,并在回调函数中操作
示例:
//arr.every()
var arr = [1,2,3,4,5] ;
var new1 = arr.every(function(item,index){return item>2&&item<5 ; //判断出一个不符合条件则跳出循环并输出flase
})
var new2 = arr.every(function(item,index){return item<10 ; //判断出数组全部元素都符合条件则输出true
})
console.log(new1);
console.log(new2);
console.log(arr);
reduce()— —叠加数组
不一定在数学意义上的叠加计算,这里叠加指:可以利用前遍历操作的结果到下一次遍历使用,重复叠加使用下去
1、创建新数组
2、不改变原数组
3、输出的是return叠加什么就输出什么 新数组
4、回调函数参数
pre(第一次为数组第一项,之后为上一操作的结果)
next(数组的下一项)
index(next项的序列)
arr(数组本身)
回调函数后的改变第一项参数。(不影响原数组)
5、使用return操作输出,会循环数组每一项,并在回调函数中操作
示例:
//reduce():
//求和计算
var arr1 = [1,2,3,4,5] ;
var new1 = arr1.reduce(function(sum,next,index){return sum+next ; /**第一次:pre-->1 next-->2 index-->1*遍历计算return得结果为pre+next=1+2=3*第二次:pre-->3 next-->3 index-->2*遍历计算return得结果为pre+next=3+3=6*第三次:pre-->6 next-->4 index-->3*遍历计算return得结果为pre+next=6+4=10*第四次:pre-->10 next-->5 index-->4*遍历计算return得结果为pre+next=10+5=15*/
})//扁平化数组
var arr2 = [[1,2,3],[4,5],[6,7]] ;
var new2 = arr2.reduce(function(pre,next,index){return pre.concat(next); //前数组拼接后数组 .concat()
})//对象数组叠加计算
var arr3 = [{price:10,count:1},{price:15,count:2},{price:10,count:3}];
var new3 = arr3.reduce(function(pre,next,index){return pre+next.price*next.count;//当需要对第一项进行操作时,后面pre使用上一项操作结果,不再需要操作//所以当需要操作第一项的时候,利用reduce(callbreak(){},往数组第一项前添加一项,如:0)
},0) //在原数组第一项添加为0,不改变原数组,则可不操作第一项console.log(new1);
console.log(new2);
console.log(new3);console.log(arr1); //普通数组
console.log(arr2); //多重数组
console.log(arr3); //对象数组
转载于:https://www.cnblogs.com/CMing/p/10315973.html
相关资源:es6filter()数组过滤方法总结_es6过滤filter-其它代码类资源-CSDN…
forEach() map()— —更新数组 filter()、includes()、find()、findIndex()— —筛选(删除)数组 some()、every()— 判断数组 reduce相关推荐
- es6 forEach/map循环中断
1.for循环在循环的时候 通过continue中断当次循环 通过break中断整个循环 通过retrun中断函数执行 2.es6的forEach/map循环只能通过return中断当次循环 //目的 ...
- js函数判断服务器文件是否为空,Js 判断数组是否为空或是否含有某个值
今天来说一下在前端的 JS 中关于数组的判断操作.比如 JS 判断数组是否为空,JS 判断数据中是否含有某个值.下面就来具体的说一下判断的方法吧. JS 判断数组是否为空 JS 判断数组是否为空,只要 ...
- js数组中indexOf/filter/forEach/map/reduce详解
今天在网上看到一篇帖子,如题: 出处:前端开发博客 (http://caibaojian.com/5-array-methods.html) 在ES5中一共有9个Array方法,分别是: Array. ...
- 【修真院web小课堂】对一个数组 FILTER、SOME、MAP、FOREACH的操作分别有什么作用?
大家好,我是IT修真院武汉分院web第16期的学员孟晨,一枚正直纯洁善良的web程序员 今天给大家分享一下,修真院官网js(职业)任务四,深度思考中的知识点--对一个数组 FILTER.SOME.MA ...
- ES6 数组的includes和find、findindex
ES6 数组的includes和find.findindex ES6 数组的includes和find.findindex ES5的indexOf ES6中includes() includes()函 ...
- Java8 Stream接口流式方法:map操作、filter操作以及flatMap操作
点击关注公众号,利用碎片时间学习 关于stream 流式操作,在rt.jar 包里面,ReferencePipeline管道方式操作数据 下面集成所有操作方法,利用这些流,处理大数据的方式,效率提升明 ...
- ES6数组方法find()、findIndex()的总结
本文主要讲解ES6数组方法find()与findIndex(),关于JS的更多数组方法,可参考以下: ①JavaScript 内置对象之-Array ②ES5新增数组方法(例:map().indexO ...
- swift 数组 filter reduce sort 等方法
数组的常用方法 swift 数组有很多的操作方法,但是用的时候用常常想不起来,就列出来看看 map 和 flatMap 对数组中的元素进行变形操作 filter 主要对数组进行过滤 reduce 主要 ...
- js中数组filter过滤奇偶数_js--数组的filter()过滤方法的使用
前言 你还在通过for循环遍历数组吗?你还在遍历之后一项一项的通过if判断过滤你需要的数据吗?你还在写着一大堆代码实现一个简单的过滤数据功能吗?那么,今天他来了.他就是这里要介绍的es6中数组filt ...
- js循环(for/for in/forEach/map/for of)详解
1. 基础循环 for for (var i = 0; i < list.length; i++) {//循环体 } 复制代码 最基础的循环也有优化的空间:整个循环中数组的长度是不会改变的 fo ...
最新文章
- struts2配置详解
- Linux服务名重命名
- Android数据库高手秘籍(二):创建表和LitePal的基本用法
- 百度绿色底座亮相 AI原生云低碳前行
- 在BurpSuite中安装Jython环境
- 各個瀏覽器CSS樣式控制
- (41)Xilinx MMCM IP核配置(二)(第9天)
- tomcat报错:This is very likely to create a memory leak问题解决
- [转载] python int类数据的内存大小
- Web服务器的部署地点
- zmap扫描mysql_45分钟扫遍全网:最快的互联网扫描工具ZMap
- LSB算法的扩展延伸
- 搭建kettle 源码工程报[ui/spoon.xul]找不到错误的解决方案
- 1:n的冗余备份_备份与冗余:有什么区别?
- java中的subtract_【java】Java.math.BigDecimal.subtract()方法实例
- 一台电脑可以登录多个微信的脚本
- html设置长宽高代码_html设置高等于宽
- 用C语言写俄罗斯方块
- 安卓开发之基本UI设计
- 有哪些适合年轻人的挣钱项目