js常用循环方法小结

forEach

myArray.forEach(function(value){ console.log(value);});

实际上forEach有三个参数  分别为  值  下标  数组本身 于是我们有

[].forEach(function(value, index, array) {

});

forEach只是对数组中的每一项运行传入的函数,这个方法没有返回值,对原来数组也没有影响,但是我们可以自己通过数组的索引来修改原来的数组,本质上与for迭代数组一样。forEach不好用 你不能使用break语句中断循环,也不能使用return语句返回到外层函数。

兼容性写法:

/**

* forEach遍历数组

* @param callback [function] 回调函数;

* @param context [object] 上下文;

*/

Array.prototype.myForEach =functionmyForEach(callback,context){

        context = context || window;

        if('forEach'inArray.prototye) {

        this.forEach(callback,context);

        return;

        }

    //IE6-8下自己编写回调函数执行的逻辑

    for(vari = 0,len =this.length; i < len;i++) {

        callback && callback.call(context,this[i],i,this);

    }

}

map

varary = [12,23,24,42,1];

varres = ary.map(function(item,index,input) {

returnitem*10;

})

console.log(res);//-->[120,230,240,420,10];

console.log(ary);//-->[12,23,24,42,1]

map和forEach非常相似,都是用来遍历数组中的每一项值的,用来遍历数组中的每一项;

map的回调函数中支持return返回值;return的是啥,相当于把数组中的这一项变为啥(并不影响原来的数组,只是相当于把原数组克隆一份,把克隆的这一份的数组中的对应项改变了);

不管是forEach还是map 都支持第二个参数值,第二个参数的意思是把匿名回调函数中的this进行修改。

兼容性写法:

/**

* map遍历数组

* @param callback [function] 回调函数;

* @param context [object] 上下文;

*/

Array.prototype.myMap =functionmyMap(callback,context){

        context = context || window;

        if('map'inArray.prototye) {

        returnthis.map(callback,context);

    }

    //IE6-8下自己编写回调函数执行的逻辑

    varnewAry = [];

    for(vari = 0,len =this.length; i < len;i++) {

        if(typeofcallback ==='function') {

        varval = callback.call(context,this[i],i,this);

        newAry[newAry.length] = val;

        }

    }

returnnewAry;

}

filter():

语法:

varfilteredArray = array.filter(callback[, thisObject]);

参数说明:

callback: 要对每个数组元素执行的回调函数。

thisObject : 在执行回调函数时定义的this对象。

//过滤掉小于 10 的数组元素:

//代码:

function isBigEnough(element, index, array) {

return (element >= 10);

}

var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);

// 12, 130, 44

//结果:[12, 5, 8, 130, 44].filter(isBigEnough) : 12, 130, 44

功能说明:

对数组中的每个元素都执行一次指定的函数(callback),并且创建一个新的数组,该数组元素是所有回调函数执行时返回值为 true 的原数组元素。它只对数组中的非空元素执行指定的函数,没有赋值或者已经删除的元素将被忽略,同时,新创建的数组也不会包含这些元素。

回调函数可以有三个参数:当前元素,当前元素的索引和当前的数组对象。

如参数thisObject被传递进来,它将被当做回调函数(callback)内部的 this 对象,如果没有传递或者为null,那么将会使用全局对象。

filter 不会改变原有数组,记住:只有在回调函数执行前传入的数组元素才有效,在回调函数开始执行后才添加的元素将被忽略,而在回调函数开始执行到最后一个元素这一期间,数组元素被删除或者被更改的,将以回调函数访问到该元素的时间为准,被删除的元素将被忽略。

some():

对数组中的每个元素都执行一次指定的函数(callback),直到此函数返回true,如果发现这个元素,some 将返回true,如果回调函数对每个元素执行后都返回 false ,some 将返回false。它只对数组中的非空元素执行指定的函数,没有赋值或者已经删除的元素将被忽略。

//检查是否有数组元素大于等于10:

function isBigEnough(element, index, array) {

return (element >= 10);

}

var passed = [2, 5, 8, 1, 4].some(isBigEnough);

// passed is false

passed = [12, 5, 8, 1, 4].some(isBigEnough);

// passed is true

//结果:

//[2, 5, 8, 1, 4].some(isBigEnough) : false

//[12, 5, 8, 1, 4].some(isBigEnough) : true

every():

对数组中的每个元素都执行一次指定的函数(callback),直到此函数返回false,如果发现这个元素,every 将返回false,如果回调函数对每个元素执行后都返回 true ,every 将返回true。它只对数组中的非空元素执行指定的函数,没有赋值或者已经删除的元素将被忽略。

//测试是否所有数组元素都大于等于10:

function isBigEnough(element, index, array) {

return (element >= 10);

}

var passed = [12, 5, 8, 130, 44].every(isBigEnough);

// passed is false

passed = [12, 54, 18, 130, 44].every(isBigEnough);

// passed is true

//结果:

//[12, 5, 8, 130, 44].every(isBigEnough) 返回 : false

//[12, 54, 18, 130, 44].every(isBigEnough) 返回 : true

for...in...和for

数组既可以用for循环,也可以用for in循环(区别:for循环可以设置i的开始数字,可以从任何一个位置开始循环,但是for in循环不能设置,只能从第一个到最后一个进行循环)。

json只能用for in循环,因为json的下标是没有规律的字符串,没有length。

所以,一般数组就用for循环,json用for in循环。

循环遍历对象的key,是键值对前面的那一个哦

一般不推荐遍历数组,因为for in遍历后的不能保证顺序,而且原型链上的属性也会被遍历到,因此一般常用来遍历非数组的对象并且使用hasOwnProperty()方法去过滤掉原型链上的属性

var myArry =[1,2,3,4];

myArry.desc ='four';

for(var value in myArry){ //循环key

console.log(value)

}

//"0"

//"1"

//"2"

//"3"

//"desc" 注意这里添加上去的属性也被遍历出来了

for of遍历对象

循环遍历对象的值,是遍历键值对后面的那一个value哦 ,与for in遍历key相反

var myArry =[1,2,3,4];

myArry.desc ='four';

for(var value of myArry){

console.log(value)

}

//1

//2

//3

//4

这是最简洁、最直接的遍历数组元素的语法

这个方法避开了for-in循环的所有缺陷

与forEach()不同的是,它可以正确响应break、continue和return语句

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

推荐阅读更多精彩内容

  • Javascript有很多数组的方法,有的人有W3C的API,还可以去MDN上去找,但是我觉得API上说的不全,M...
    顽皮的雪狐七七阅读 4,046评论 0 6
  • 创建数组 arr.length--- title: js正则表达式categories: javascriptda...
    angelwgh阅读 1,382评论 0 2
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,316评论 0 2
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,152评论 0 1
  • 放眼寰球谁争先,金銮殿前属榜眼。 悟空一跃十八万,从此天宫坠凡间。 捷报频传心莫醉,盛世仍需再向前。 复请神女来做...
    垚君阅读 198评论 0 1