ES6 数组函数forEach()、map()、filter()、find()、every()、some()、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

时间: 2024-10-07 00:40:03

ES6 数组函数forEach()、map()、filter()、find()、every()、some()、reduce()的相关文章

处理数组的forEach map filter的兼容性

处理数组的forEach 1 //forEach处理 2 if(!Array.prototype.forEach) { 3 Array.prototype.forEach = function (callback) { 4 for(var i=0,len=this.length;i<len;i++) { 5 callback(this[i], i); 6 } 7 } 8 } 处理数组的map 1 //处理map 2 if(!Array.prototype.map) { 3 Array.proto

forEach, map, filter方法区别

听说for循环已经成了菜鸟标配...? 瑟瑟发抖 赶紧找来资料补一补 1, forEach循环,循环数组中每一个元素并采取操作, 没有返回值, 可以不用知道数组长度 2, map函数,遍历数组每个元素,并回调操作,需要返回值,返回值组成新的数组,原数组不变 3,filter函数, 过滤通过条件的元素组成一个新数组, 原数组不变 4, some函数,遍历数组中是否有符合条件的元素,返回Boolean值 5,every函数, 遍历数组中是否每个元素都符合条件, 返回Boolean值 原文引用:htt

ES5中Array新增加的API接口 forEach map filter some every indexOf lastIndexOf reduce reduceRight

var array = [23,48,66,2]; forEach:循环.遍历数组:没有返回值.与for循环类似 array.forEach(function( value, index, array ) { console.log(value); return value * value; } ); map:映射的意思,映射返回一个新数组,有返回值;filterArr:返回一个新对象 var mapArr = array.map(function(value, index, array ){

函数作用域,匿名函数,map,filter,reduce---Python重新开始第五天

函数作用域 函数的作用域只跟函数声明时定义的作用域有关,跟函数的调用位置无任何关系 1 name='alex' 2 3 def foo(): 4 name='lhf' 5 def bar(): 6 name='wupeiqi' 7 print(name) 8 def tt(): 9 print(name) 10 return tt 11 return bar 12 13 # bar=foo() 14 # tt=bar() 15 # print(tt) 16 # tt() 17 r1 = foo(

数组那些事(slice,splice,forEach,map,filter等等)

周五,再过会要下班了,刚才把<javascript高级程序设计>数组这块又看了下,加深下记忆.今天来继续练练笔,嘿嘿!(写下自己印象不深的东西) 一.数组的定义(数组定义分为两种) 方法一:1 var color=new Array(num);//num为数字,(当然可写,可不写) 表示数组长度 var color=new Array("red","yellow");//直接定义数组内容 方法二: 2.var color=[];//当然也可以定义的时候直

js数组遍历some,foreach,map,filter,every对比

1. [...].some(ck)函数       ----      某个一个为true,则为true 对数组中每个元素执行一次ck函数,知道某个元素返回true,则直接返回true.如果都返回false,则返回false 检查整个数组中是否有满足ck函数的元素. var result = [1,5,3,6].some(  (v,i)  =>  (v>10) )      //所有元素都不满足,返回result = false var result = [10,5,30,60].some(

数组方法重写:forEach, map, filter

Array.prototype.myForEach = function(fn) { var arr = this, len = arr.length, arg2 = arguments[1] || window; for(var i = 0; i < len; i++) { fn.apply(arg2, [arr[i], i, arr]); } }; Array.prototype.myFilter = function(fn) { var arr = this, len = arr.leng

JS中some(),every(),forEach(),map(),filter()区别

map():返回一个新的Array,每个元素为调用func的结果 filter():返回一个符合func条件的元素数组 some():返回一个boolean,判断是否有元素是否符合func条件 every():返回一个boolean,判断每个元素是否符合func条件 forEach():没有返回值,只是针对每个元素调用func API的区别 function my_func(item) { if (item == 1) { console.log('t'); return true; } con

python基础:内置函数zip,map,filter

一.zip zip,就是把俩list,合并到一起,如果想同时循环2个list的时候,可以用zip,会帮你轮流循环两个list 比如: l1=[1,2,3,4,5] l2=['a','b','c','d','e'] for a,b in zip(l1,l2): print(a,b) #得到的结果就是1 a2 b3 c4 d5 e 如果两个list的长度不一致,则以长度小的为依据 比如: l1=[1,2,3,4] l2=['a','b','c','d','e'] for a,b in zip(l1,