[笔记]JavaSceipt 数组常用遍历方法,ES6新增数组遍历方法

一,ES5中常用数组遍历方式:
首先定义一个数组

let arr = [7,9,12,16,3,20,8,5,6]

1.for 循环

for(let i = 0;i<arr.length;i++){

console.log(arr[i])

}

2.forEach()遍历

arr.forEach((item=>{

console.log(item)

}))

注意:forEach只做循环遍历,不做值返回

3.map()遍历,返回新的数组,数组中的每一个元素为调用func的结果,不对原数组做修改

let result = arr.map(item=>item+1)

console.log(result)        //  [8, 10, 13, 17, 4, 21, 9, 6, 7]

4.filter() 根据函数设定的条件过滤,返回符合func条件的元素

let result = arr.filter(item=>item%2 ==0)

console.log(result)  //  [12, 16, 20, 8, 6]


5.reduce(Fn(prev,cur,index,arr)=>{},value) 接收一个函数做累加器, 并传入一个初始值
例1,求和

let sum = arr.reduce((prev,cur)=>{

return prev+cur

},0)

console.log(sum)        //86

例2 ,获取数组中最大值

let sum = arr.reduce((prev,cur)=>{

return Math.max(prev,cur)

},0)

console.log(sum)  //20

例3,数组去重

let arr1 = [1,2,3,4,2,1]

let sum = arr1.reduce((prev, cur) => {

prev.indexOf(cur) == -1 && prev.push(cur)

return prev

}, [ ])

console.log(sum)            // [1, 2, 3, 4]

5.some()返回布尔值,判断是否有元素符合func条件

let result = arr.some(item=>item==12)

console.log(result)     // true    


6.every()返回布尔值,判断是否每一个元素都符合func条件

let result = arr.some(item=>item==12)

console.log(result)     // false


7.for in (存在问题)

Array.prototype.foo = function(){

console.log('foo')

}

for(let i in arr){

console.log(arr[i])        //7  9  12  16  3  20  8  5  6   f (){ console.log('foo') }

]

}

注意:for in ,在Array的原型中添加一个func,此时再循环数组,原型下的方法,将被遍历出来

二,ES6中新增数组遍历方式:
首先定义一个数组

let arr = [1,2,3,4,5,6,2,3]

1.find() 遍历数组并找到数组中第一个与返回符合条件的值

let res = arr.find(item=>item==2)

console.log(res)  //2

2.findIndex() 遍历数组并找到数组中第一个与返回符合条件的值的下标

let res = arr.findIndex(item=>item==2)

console.log(res)  // 1 

3.for of , values() keys() entries()

for(let item of arr){                                //直接使用for of 等同于  values()  输出每一个元素的值

console.log(item)            // 1  2  3  4  5  6  2  3

}

1.values() 输出每一个元素的值

for(let item of arr.values()){                    

console.log(item)            // 1  2  3  4  5  6  2  3

}
  1. keys() 输出每一个元素的索引
for(let item of arr.keys()){                          

console.log(item)            //0 1 2 3 4 5 6 7

}

3.entries() 输出每一个元素的索引与值

for(let [index,item] of arr.entries()){                //.entries(  输出每一个元素的索引与值

console.log('索引',index,‘值’,item)        

}

//输出结果:

// 索引 0 值 1

//索引 1 值 2

//索引 2 值 3

//索引 3 值 4

//索引 4 值 5

//索引 5 值 6

//索引 6 值 2

//索引 7 值 3
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,294评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,493评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,790评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,595评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,718评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,906评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,053评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,797评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,250评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,570评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,711评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,388评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,018评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,796评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,023评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,461评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,595评论 2 350