原生JS forEach()和map()遍历,jQuery$.each()和$.map()遍历

一、原生JS forEach()和map()遍历

共同点:

1.都是循环遍历数组中的每一项。 
2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项item,当前项的索引index,原始数组input。 
3.匿名函数中的this都是指Window。 
4.只能遍历数组。

1.forEach()

没有返回值,修改的是原数组。

var ary = [12,23,24,42,1];
    var res = ary.forEach(function (item,index,input) {
           input[index] = item*10;
    })
    console.log(res);//-->undefined;
    console.log(ary);//-->[ 120, 230, 240, 420, 10 ];

2.map()

有返回值,可以return 出来。不修改原数组。

var ary = [12,23,24,42,1];
var res = ary.map(function (item,index,input) {
    return item*10;
})
console.log(res);//-->[120,230,240,420,10];
console.log(ary);//-->[12,23,24,42,1]; 

二、jQuery .each()和.map()遍历

共同点:

即可遍历数组,又可遍历对象。

1.$.each()

没有返回值。$.each()里面的匿名函数支持2个参数:当前项的索引i,数组中的当前项n。如果遍历的是对象,k 是键,n 是值。

$.each( ["a","b","c"], function(i, n){
  console.log( i + ": " + n );
});
  // 0: a
  // 1: b
  // 2: c
 $.each( { name: "John", lang: "JS" }, function(k, n){
        console.log( "Name: " + k + ", Value: " + n );
    });
     //Name: name, Value: John
    // Name: lang, Value: JS

2.$.map()

有返回值,可以return 出来。.map()里面的匿名函数支持2个参数和.each()里的参数位置相反:数组中的当前项n,当前项的索引i。如果遍历的是对象,i 是值,n 是键。如果是("span").map()形式,参数顺序和.each() ,$(“span”).each()一样。

var arr=$.map( [0,1,2], function(n,i){
         return n+i;
    });
    console.log(arr);
    //[ 0, 2, 4 ]

$.map({"name":"Jim","age":17},function(n,i){
     console.log(n+":"+i);
 });
    //Jim:name
    //17:age


原文地址:https://www.cnblogs.com/chiangyibo/p/8278642.html

时间: 2024-10-14 06:42:48

原生JS forEach()和map()遍历,jQuery$.each()和$.map()遍历的相关文章

原生JS forEach()和map()遍历的区别以及兼容写法

一.原生JS forEach()和map()遍历 共同点: 1.都是循环遍历数组中的每一项. 2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项item,当前项的索引index,原始数组input. 3.匿名函数中的this都是指Window. 4.只能遍历数组. 1.forEach() 没有返回值. arr[].forEach(function(value,index,array){ //do something }) 参数:value数组中的当前项,

放弃jQuery,使用原生js吧!

转自:http://itakeo.com/blog/2015/07/28/nojq/ 随着IE6.7.8的逐渐淘汰,HTML5的兴起,以及侧重点放在了移动端,jQuery可能变的不在那么重要,原生一样很好用.下面介绍几个原生替换jq的方法. 获取元素 JQuery $('.xxx'); //class获取 $('#xxx'); //id获取 $('.xxx.ccc'); //同时包含xxx和ccc $('.xxx,.zzz'); //多选 $('.xxx div'); //子类 $('.xxx

原生js使用forEach()与jquery使用each遍历数组,return false 的区别

原生js使用forEach()与jquery使用each()遍历数组,return false 的区别: 1.使用each()遍历数组a,如下: var a=[20,21,22,23,24]; $.each(a, function(index,val) { console.log('index='+index); if(index==2){ return false; } console.log('val='+val); }); 结果如下: 从运行的效果可以看出,return 相当于循环中的br

关于js foreach map

  forEach是ECMA5中Array新方法中最基本的一个,就是遍历,循环.例如下面这个例子: [1, 2 ,3, 4].forEach(alert); 等同于下面这个for循环 ? 1 2 3 4 var array = [1, 2, 3, 4]; for (var k = 0, length = array.length; k < length; k++) {  alert(array[k]); } Array在ES5新增的方法中,参数都是function类型,默认有传参,forEach

使用原生js代替jQuery

jQuery目前已经成为最流行的JavaScript库,它可以让开发者“write less, do more(写得更少,做得更多)”,这也是它的核心理念. 通过它,用户可以更方便地处理HTML documents.events,更轻松地实现动画效果.AJAX交互等. 尽管jQuery帮助开发者节省了大量的工作,但是并不是所有的产品都适合使用jQuery.jQuery 2.0.3版本有236KB,压缩版也有81KB, 这意味着你的Web产品需要额外的加载时间和带宽,而在移动设备上则需要更多. 如

【前端性能】必须要掌握的原生JS实现JQuery

很多时候,我们经常听见有人说jquery有多快多快.在这个各种类库满天飞的时候,不得不说的是,能有原生JS快吗? 是的,明显原生JS要更快,因为诸如JQuery这样的库必须要兼容各种浏览器和低版本和许多其他的东西,考虑通用性必然会导致性能的损耗. 当然,我不是提倡写代码纯用原生JS实现,我记得淘宝玉伯曾经说的一句话“框架能够让我们走的更快,但只有了解原生的JS才能让我们走的更远”. 一些感(fei)想(hua): 1.原生的js,好比全真教的武功,一步步从基础开始(先练气再御剑),很长一段时间内

原生 JS 中对象相关 API 合集

https://juejin.im/entry/58f8a705a0bb9f0065a4cb20 原文链接:https://microzz.com/2017/04/20/jsobject/ 原生 JavaScript 中对象相关 API 合集 - 对象篇.现在 jQuery 已经没有那么有优势了,原生 JS 赶紧学起来... -- 由microzz分享 Microzz [email protected] 主页 文章 标签 GitHub 关于我 掘金专栏 SegmentFault Vue音乐播放器

原生JS:Array对象详解

Array对象 创建数组: 数组字面量:var arr1 = [1,2,3]; Array构造函数1:var arr2 = new Array(1,2,3);  //[1,2,3] Array构造函数2:var arr3 = new Array(3);  var arr3 = new Array(‘3’);  var arr3 = new Array('ol'); 错误写法:var arr3 = new Array(3.2);  var arr3 = new Array(-3); 例:var a

原生js仿jquery一些常用方法

原生js仿jquery一些常用方法 下面小编就为大家带来一篇原生js仿jquery一些常用方法(必看篇).小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧 最近迷上了原生js,能不用jquery等框架的情况都会手写一些js方法,记得刚接触前端的时候为了选择器而使用jquery...现在利用扩展原型的方法实现一些jquery函数: 1.显示/隐藏 //hide() Object.prototype.hide = function(){ this.style.displa