前些天看到一张神图:是不是很形象?

一: 数组遍历

Array.prototype.map:(主要为了其返回值)

map() 方法创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。

const numList = [1,2,3]
// 对数组中的每一项都乘以 3, 然后返回新的数组
const resultLis = numList.map(item=> item * 3)
console.log('旧数组:',numList)
console.log('新数组:',resultLis)

Array.prototype.forEach:(不返回值,但会处理数组)

forEach() 方法对数组的每个元素执行一次给定的函数。

const numList = [1,2,3]
const newArray = []numList.forEach(item => {newArray.push(item + 1)console.log(item+1)
})
console.log(numList,newArray)

Array.prototype.filter:(过滤值,返回符合过滤条件的值的新数组)

filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

const list  = [1,2,3,4]
// 过滤大于2的值
const filtered = list.filter(item => item > 2)
console.log(list,filtered )

Array.prototype.some:(数组中只要有一个满足条件,就返回true,否则返回false)

some() 方法测试数组中是不是至少有1个元素通过了被提供的函数测试

const list = [1,2,3,4,5]
// 检测数组中的值是否有一个大于2
const result = list.some(item=> item > 2)
console.log(result)

Array.prototype.every:(数值中所有值都满足条件才会返回true,否则返回false)

every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试

const list = [2,3,4]
// 检测数组中的所有元素是否都大于3
const result = list.every(item=> item > 3)
console.log(result)

Array.prototype.reduce:(依次处理每个元素,返回处理后的结果)

reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)

个人感觉reduce()方法逼格更高一点

语法:

arr.reduce(callback,[initialValue])

reduce为数组中的每一个元素都执行回调函数(callback), callback可以接收4个参数:

callback:

1:previousValue(初始值) ===> 必须

2:currentValue(当前被处理的元素) ===> 必须

3:index(当前被处理元素在数组中的索引) ===>可选

4:array(调用reduce的数组) ===> 可选

initialValue:

注意:作为第一次调用 `callback`函数时的第一个参数的值。如果没有提供初始值，则将使用数组中的第一个元素。在没有初始值的空数组上调用 reduce 将报错。

例子1:(累加,无初始值)

const list = [1,2,3,4]
const result = list.reduce((pre,curr)=> pre + curr)
console.log(result,'--')

例子1_1:(累加,有初始值)

const list = [1,2,3,4]
const result = list.reduce((pre,curr)=> pre + curr,10)
console.log(result,'--')

列子2:(累加对象数组里的值,无初始值)

const list = [
{name:'super',age:18},
{name:'tiger',age:19},
]
const totalAge = list.reduce((pre,curr)=> pre.age + curr.age)console.log(totalAge)

列子2_1:(累加对象数组里的值,无初始值)

const list = [
{name:'super',age:18},
{name:'tiger',age:19},
]
const totalAge = list.reduce((pre,curr)=> pre.age + curr.age,20)console.log(totalAge)

例子3:(将二维数组转化一维,有点大材小用)

const list = [1,2,[3,4],['superTiger_Y','博客']]
const flattenedList = list.reduce((pre,curr)=> pre.concat(curr),[])
console.log(flattenedList )

例子4:(计算数组中每个元素出现的次数)

const names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice']const countNames = names.reduce((pre,curr)=> {curr in pre ? pre[curr]++ : pre[curr] = 1return pre
},{})console.log(countNames)

例子5:(按属性对object分类)

const people = [{name:'super',age:21},{name:'tiger',age:22},{name:'_Y',age:21},
]function groupBy(objectArray,property){return objectArray.reduce((pre,curr)=>{const key = curr[property]if(!pre[key]){pre[key] = []}pre[key].push(curr)return pre},{})}const result = groupBy(people ,'age')console.log(result)

例子6(对象数组元素合并)

const friends = [{name: 'Anna',books: ['Bible', 'Harry Potter'],age: 21
}, {name: 'Bob',books: ['War and peace', 'Romeo and Juliet'],age: 26
}, {name: 'Alice',books: ['The Lord of the Rings', 'The Shining'],age: 18
}];const allBooks = friends.reduce((pre,curr)=>{return [...pre,...curr.books]},['superTiger_y'])console.log(allBooks)

Array.prototype.reduceRight

用法和reduce一样,只是遍历顺序相反,reduce是从左往右,reduceRight是从右往左

Array.prototype.indexOf(查找元素,并返回第一次出现的位置,不存在则返回-1)

indexOf()方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。

const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];console.log(beasts.indexOf('bison'));

Array.prototype.lastIndexOf(查找元素,并返回最后一个的位置,不存在则返回-1)

lastIndexOf() 方法返回指定元素在数组中的最后一个的索引,如果不存在，则返回-1。

const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];console.log(beasts.lastIndexOf('bison'));

Array.prototype.find(返回满足条件第一个元素的值)

find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

const people = [{name:'super',age:20},{name:'tiger',age:19},{name:'_Y',age:22}
] const item= people.find(item => item.age === 19)
console.log('年龄等于19的元素:',item)const item1= people.find(item => item.age === 100)
console.log('年龄等于100的元素:',item1)

Array.prototype.findIndex (返回满足条件第一个元素的值的索引)

findIndex() 方法返回数组中满足提供的测试函数的第一个元素的值的索引。否则返回 -1

const people = [{name:'super',age:20},{name:'tiger',age:19},{name:'_Y',age:22}
] const index= people.findIndex(item => item.age === 19)
console.log('年龄等于19的元素的索引:',index)const index1= people.findIndex(item => item.age === 100)
console.log('年龄等于100的元素的索引:',index1)

看一遍都懂的数组遍历~确定不试试?相关推荐

看一遍就懂，详解java多线程——volatile
多线程一直以来都是面试必考点,而volatile.synchronized也是必问点,这里我试图用容易理解的方式来解释一下volatile. 来看一下它的最大特点和作用: 一使变量在多个线程间可见 ...
[**奇文共赏**参考理解] 据说看五遍能懂的人智商 200
转自琉璃鸟,下面是他的理解李鱼我被明明所救,至今已满千年.一千年前,明明从狐狸口中救下我时,我不过是条小蛇.她传我****之法,令我能幻化成人,赋我新生.从此,我便称呼她为"母亲&quo ...
[**奇文共赏**补充问题] 据说看五遍能懂的人智商 200
Question: (1)陈东吃了什么不该吃的东西? (2)陈东看到了什么不该看到的东西? (3)五星连珠意味着什么? (4)季胜为什么在信中说"我当见你" (5)"赠君 ...
Electron 基础入门简单明了，看完啥都懂了
什么是 Electron? 介绍使用 JavaScript, HTML 和 CSS 构建跨平台(Windows.MacOs.Linux)的桌面应用--这是Electron官网的简介最初被GitHu ...
控制工程留数法（看一遍就懂了）
js 数组遍历方法详解（map、filter、find、findIndex、reduce）
目录前言 map map是什么 map方法的结构及入参语法糖 map一般不改变原数组 filter 说明例子 find 和 findIndex 说明例子 reduce 说明例子尾言前言 ...
【Day4】ES5（循环别名，数组，数组遍历，数组排序，二维数组）
日期:2月3日 1. 循环的别名别名: for () { } 别名: while() { } break 结束掉离他最近的循环 break 别名: 结束掉指定的循环 2. 循环的别名的使用场景 ...
云终端linux,云终端详细介绍，看完你就都懂了
原标题:云终端详细介绍,看完你就都懂了随着云计算技术的不断成熟和发展,云桌面被越来越多的人所熟知和使用,我们知道云桌面主要有云终端和服务器这两大硬件所组成.而今天我们要说的就是这个只有手机大小的云终 ...
爸爸！再不陪我，我就长大了！推荐每个爸爸都看一遍！
http://mp.weixin.qq.com/s?__biz=MjM5ODQ2MTE2Mw==&mid=200272738&idx=7&sn=d18690ef0f63b16b ...

看一遍都懂的数组遍历~确定不试试?

前些天看到一张神图:是不是很形象?

一: 数组遍历

Array.prototype.map:(主要为了其返回值)

Array.prototype.forEach:(不返回值,但会处理数组)

Array.prototype.filter:(过滤值,返回符合过滤条件的值的新数组)

Array.prototype.some:(数组中只要有一个满足条件,就返回true,否则返回false)

Array.prototype.every:(数值中所有值都满足条件才会返回true,否则返回false)

Array.prototype.reduce:(依次处理每个元素,返回处理后的结果)

语法:

callback:

initialValue:

注意:作为第一次调用 `callback`函数时的第一个参数的值。如果没有提供初始值，则将使用数组中的第一个元素。在没有初始值的空数组上调用 reduce 将报错。

例子1:(累加,无初始值)

例子1_1:(累加,有初始值)

列子2:(累加对象数组里的值,无初始值)

列子2_1:(累加对象数组里的值,无初始值)

例子3:(将二维数组转化一维,有点大材小用)

例子4:(计算数组中每个元素出现的次数)

例子5:(按属性对object分类)

例子6(对象数组元素合并)

Array.prototype.reduceRight

用法和reduce一样,只是遍历顺序相反,reduce是从左往右,reduceRight是从右往左

Array.prototype.indexOf(查找元素,并返回第一次出现的位置,不存在则返回-1)

Array.prototype.lastIndexOf(查找元素,并返回最后一个的位置,不存在则返回-1)

Array.prototype.find(返回满足条件第一个元素的值)

Array.prototype.findIndex (返回满足条件第一个元素的值的索引)

看一遍都懂的数组遍历~确定不试试?相关推荐

最新文章

热门文章

看一遍都懂的数组遍历~确定不试试?

前些天看到一张神图:是不是很形象?

一: 数组遍历

Array.prototype.map:(主要为了其返回值)

Array.prototype.forEach:(不返回值,但会处理数组)

Array.prototype.filter:(过滤值,返回符合过滤条件的值的新数组)

Array.prototype.some:(数组中只要有一个满足条件,就返回true,否则返回false)

Array.prototype.every:(数值中所有值都满足条件才会返回true,否则返回false)

Array.prototype.reduce:(依次处理每个元素,返回处理后的结果)

语法:

callback:

initialValue:

注意:作为第一次调用 callback函数时的第一个参数的值。 如果没有提供初始值，则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。

例子1:(累加,无初始值)

例子1_1:(累加,有初始值)

列子2:(累加对象数组里的值,无初始值)

列子2_1:(累加对象数组里的值,无初始值)

例子3:(将二维数组转化一维,有点大材小用)

例子4:(计算数组中每个元素出现的次数)

例子5:(按属性对object分类)

例子6(对象数组元素合并)

Array.prototype.reduceRight

用法和reduce一样,只是遍历顺序相反,reduce是从左往右,reduceRight是从右往左

Array.prototype.indexOf(查找元素,并返回第一次出现的位置,不存在则返回-1)

Array.prototype.lastIndexOf(查找元素,并返回最后一个的位置,不存在则返回-1)

Array.prototype.find(返回满足条件第一个元素的值)

Array.prototype.findIndex (返回满足条件第一个元素的值的索引)

看一遍都懂的数组遍历~确定不试试?相关推荐

最新文章

热门文章

注意:作为第一次调用 `callback`函数时的第一个参数的值。如果没有提供初始值，则将使用数组中的第一个元素。在没有初始值的空数组上调用 reduce 将报错。