js中关于循环的那些API

数组循环

针对数组,for循环完全OK,此处略过不表,只说一说为方便我们开发而那些内置的方法:

  • forEach

    就是for循环的简化,将每个值取出去做我们想做的事儿

    var arr=[1,2,3,4];
    arr.forEach(function(value,index){
        console.log(index+':'+value+'\n')
    })
    

    缺点是不能中断循环,没有break/continue方法。

    当然有时也可以使用some或者every方法在条件符合时退出循环,其使用方法和forEach无异,但他们常被用来确定数组的所有成员是否满足指定的测试。

    //some 方法在return值为true时终止遍历
    var arr=["java","lua","go","ruby"];
    arr.some(function(value,index){
        console.log(index+" : "+value)
        return value==="go"
    })
    //打印结果
    //0 : java
    //1 : lua
    //2 : go
    //true
    
    //every方法是当return返回值为false时退出循环
    arr.every(function(value,index){
        console.log(index+" : "+value)
        return value.length>3
    })
    //打印结果
    //0 : java
    //1 : lua
    //false
    
  • map

    对数组每个元素调用通用的映射方法。
    (对于下面的纯函数,我们就使用箭头函数了)

    let arr=[1,3,5,7]
    
    let newArr=arr.map(x=>0.5*x+3)
    
    
  • filter

    返回符合要求的元素

    //取出数组中大于10的数
    let arr=[1,5,17,23,9,12,10]
    let newArr=arr.filter(ele=>ele>10)
    //print result:
    //newArr=[17,23,12]
    
  • reduce方法

    reduce()接受一个方法作为回调,是一个数组逐项处理方法

    arr.reduce(callback[previousValue,currentValue],initialValue)
    

    其中initialValue作为第一次调用时传给previousValue的值

    previousValue 为上一次callback的返回值,所以适用于递归

    let arr=[1,2,3,4]
    let sum=arr.reduce((pre,cur)=>pre+cur ) 
    //10
    
    let multiplicative=arr.reduce((pre,cur)=>pre*cur)
    //24
    
    let max=arr.reduce((pre,cur)=>pre>cur?pre:cur)
    //4
    
    

对象循环

  • for - in

    for - in 是专门用来循环带有字符串key的可枚举对象的方法

    let obj = {a:1, b:2, c:3};
    for(let key in obj){
        console.log(key+" : "+obj[key])
    }
    //a : 1
    //b : 2
    //c : 3
    

ES6:for-of循环

这是ES6新提出的循环方法,可以用来循环除了适用于for-in的可枚举对象之外的任何东西。

  • 数组

    let arr=["java","lua","go","ruby"];
    for(let ele of arr){
        console.log(ele)
    }
    
  • 字符串

    let str="minelab"
    for(let char of str){
        console.log(char)
    }
    
  • Map

    let myMap = new Map([["a", 1], ["b", 2], ["c", 3]])
    for(let [key,value] of myMap){
        console.log(key+" : "+value)
    }
    //a : 1
    //b : 2
    //c : 3 
    
  • Set

    words=["ruby","java","ruby","java"]
    let uniqueWords=new Set(words)
    for(let word of uniqueWords){
        console.log(word)
    }
    //ruby
    //java
    

还有Dom Collection这样的类数组、生成器等等。

咦,说好的能够终止循环的功能呢?

let words=["ruby","java","ruby","java"]
for(let word of words){
    if (word=='java') {
        break
    }
    console.log(word)
}
//ruby

嗯,是可以终止,可是如果我想要 index 呢?

for(let word of words.keys()){
    console.log(word)
}
// 0 1 2 3

那我想同时得到 index 和 value 呢?

for(let [index,word] of words.entries()){
    if (word=='java') {
        break
    }
    console.log(index,word)
}
//0 "ruby"

注意 let [index, word] of不能丢掉中括号。


说了这么多关于数组的API,就再写个常见的应用案例吧

扁平化多维数组

//题目意思是有
var arr= [1,3,4,5,[6,[0,1,5],9],[2,5,[1,5]],[5]];
//使其成为
[1, 3, 4, 5, 6, 0, 1, 5, 9, 2, 5, 1, 5, 5]

方法1:

//手动迭代
function unfold(arr) {
    var result=[];
    arr.forEach(function(item){
        if (Array.isArray(item)) {
            unfold(item)
        }else{
            result.push(item)
        }
    })
    return result
}

unfold(arr);

方法2:

//使用reduce方法实现递归
const flatten=arr=>arr.reduce((pre,cur)=>pre.concat(Array.isArray(cur)?flatten(cur):cur),[])
//reduce 方法中给了初始值一个空数组,是为了能顺利执行concat方法
let result=flatten(arr)

方法3:

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

推荐阅读更多精彩内容