map、filter、forEach、every、some

http://www.runoob.com/jsref/jsref-obj-array.html

1、在字符串中使用 map

在一个String上使用 map 方法获取字符串中每个字符所对应的 ASCII 码组成的数组:

var map = Array.prototype.map
var a = map.call("Hello World", function(x) { return x.charCodeAt(0); })
// a的值为[72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]

2、JavaScript中 map 函数和 filter 的区别

  • filter 检测数值元素,并返回符合条件所有元素的数组。(对原数组的过滤)
  • map 通过指定函数处理数组的每个元素,并返回处理后的数组。(对原数组的加工)
var arr = [1, 2, 3, 4];
var newArr = arr.filter(function(item) { 
if (item % 2 !== 0) {
return item;
}
});
console.log(newArr); //[1, 3]
console.log(arr); //[1, 2, 3, 4] var newArr = arr.map(function(item) {
if (item % 2 !== 0) {
return item;
}
});
console.log(newArr);//[1, undefined, 3, undefined]
var arr = [1, 2, 3, 4];
var newArr = arr.map(function(item) {
return item * 2;
});
console.log(newArr);//[2, 4, 6, 8]
console.log(arr);//[1, 2, 3, 4]

3、易犯错误

通常情况下,map 方法中的 callback 函数只需要接受一个参数(很多时候,自定义的函数形参只有一个),就是正在被遍历的数组元素本身。

但这并不意味着 map 只给 callback 传了一个参数(会传递3个参数)。这个思维惯性可能会让我们犯一个很容易犯的错误

// 下面的语句返回什么呢:
["1", "2", "3"].map(parseInt);
// 你可能觉的会是[1, 2, 3]
// 但实际的结果是 [1, NaN, NaN] // 通常使用parseInt时,只需要传递一个参数.但实际上,parseInt可以有两个参数.第二个参数是进制数.可以通过语句"alert(parseInt.length)===2"来验证.
// map方法在调用callback函数时,会给它传递三个参数:当前正在遍历的元素, 元素索引, 原数组本身.
// 第三个参数parseInt会忽视, 但第二个参数不会,也就是说,parseInt把传过来的索引值当成进制数来使用.从而返回了NaN.
/*
//应该使用如下的用户函数returnInt function returnInt(element){
return parseInt(element,10);
} ["1", "2", "3"].map(returnInt);
// 返回[1,2,3]
*/

forEach 无法跳出循环,可使用 Array.everyArray.some

[1,2,3].some(function(i) {
if(i == 2) return true;
console.log(i);
});

4、NodeList不是数组

inStorageDateArr.some is not a function

verifyBillingDate: function() {
var billingDateValue=new Date(document.querySelector("#billingDate").value);
var inStorageDateArr=document.querySelectorAll(".inStorageDate");
billingDateMore=inStorageDateArr.some(function(currentValue,index){
return $.dateDiff("d",new Date(currentValue),billingDateValue)>=0
});
} // 用for循环
var inStorageDateList=document.querySelectorAll(".inStorageDate");
for(var i = 0; i < inStorageDateList.length; i++){
inStorageDateList[i].style.border="1px solid #f30";
}

for in 和 for of

for in (es5)遍历的是数组的索引(即键名)

for of (es6)遍历的是数组元素值

for in适合遍历对象,但是Array也是对象

Array是数组,也是Dictionary,也是Stack

var dict=new Array();//作为Dictionary使用

dict['我']='wo';

dict['爱']='ai';

dict['你']='ni';

alert(dict['我']); //通过键值调用

alert(dict.爱); //像调用属性一样调用(动态语言的特性)

for(var k in dict){ //js中的遍历
alert(k); //'我','爱','你'-->打印出的是key
} for(var k of dict){ //js中的遍历
alert(k); //'wo','ai','ni'-->打印出的是value
} var arr = [1,2,3,4,5];//Array的简化创建方式 var arr = {"irving":21,"cloud":20};//字典风格的创建方式

js 数组遍历的更多相关文章

  1. 转→js数组遍历 千万不要使用for...in...

    看到一篇内容还不错,但是排版实在糟糕, 逼死强迫症患者啊,直接拉下去找原文连接,找到了,但是已经消失了···500错误... 第一次因为实在看不下去一篇博客的排版, 为了排版而转载... 转载地址:h ...

  2. js数组遍历和对象遍历

    针对js各种遍历作一个总结分析,从类型用处:分数组遍历和对象遍历:还有性能,优缺点等. JS数组遍历: 1,普通for循环,经常用的数组遍历 var arr = [1,2,0,3,9]; for ( ...

  3. 浅谈6种JS数组遍历方法的区别

    本篇文章给大家介绍一下6种JS数组遍历方法:for.foreach.for in.for of.. each. ().each的区别.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. ...

  4. JS数组遍历方法

    常用数组遍历方法: 1.原始for循环 var a = [1,2,3]; for(var i=0;i<a.length;i++){ console.log(a[i]); //结果依次为1,2,3 ...

  5. js数组遍历方法总结

    数组遍历方法 1.for循环 使用临时变量,将长度缓存起来,避免重复获取数组长度,当数组较大时优化效果才会比较明显. 1 2 3 for(j = 0,len=arr.length; j < le ...

  6. js 数组遍历 对象遍历

    一.数组遍历 1,普通for循环,经常用的数组遍历 var arr = [1,2,0,3,9]; for ( var i = 0; i <arr.length; i++){ console.lo ...

  7. JS数组遍历方法集合

    就让我们在逆战中成长吧,加油武汉,加油自己 1.for循环 使用零时变量将长度存起来,当数组较大时优化效果才会比较明显. var ar1=[2,4,6,8] for(var i=0;i<ar1. ...

  8. js 数组遍历for..in弊端

    //for..in在数组中的弊端 原则上数组Array对象是不能操作的,但是有些程序员开始不注意把Array的原型链上添加了方法就会出现意想不到的bug //例如 ,,]; Array.prototy ...

  9. js数组遍历(for in ,for of ,map,foreach,filter)的区别

    一.for in 和for of 的区别 1.for in 遍历数组时,索引实际上是字符串类型的数字,不能进行运算,我们来输出一下: let arr = [1,3,5,4] for (let inde ...

随机推荐

  1. python--Pandas(一)

    一.Pandas简介 1.Python Data Analysis Library 或 pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务而创建的.Pandas 纳入了大量库和一 ...

  2. 学习python第十二天,函数4 生成器generator和迭代器Iterator

    在Python中,这种一边循环一边计算的机制,称为生成器:generator 要创建一个generator,有很多种方法.第一种方法很简单,只要把一个列表生成式的[]改成(),就创建了一个genera ...

  3. Diycode开源项目 如何解决InputMethodManager造成的内存泄漏问题

    1.内存泄漏的状况及原因 1.1.利用LeakCanary查看内存泄漏的状况 1.2.内存泄漏怎么产生的呢? InputMethodManager.mServicedView持有一个最后聚焦View的 ...

  4. 3611: [Heoi2014]大工程

    3611: [Heoi2014]大工程 链接 分析: 树形dp+虚树. 首先建立虚树,在虚树上dp. dp:sum[i]为i的子树中所有询问点之间的和.siz[i]为i的子树中有多少询问点,mn[i] ...

  5. Parameter 'limit' not found. Available parameters are [arg1, arg0, pa

    mybatis代码报错,这是因为mapper识别不了limit,需要替换成 LIMIT #{arg0},#{arg1}

  6. Windows Server 2012 R2有哪些存储监控工具

    [TechTarget中国原创] 大多数Windows管理员都知道,没有一种单一的方法可以用来监控存储或磁盘错误.虽然市场上有无数的管理工具可供你选择,但由于政策和规程的原因,企业之间的选择不尽相同. ...

  7. 初学JS——利用JS制作的别踩白块儿(街机模式) 小游戏

    这个是上个星期5写的了,当时是突然想写个游戏,就想到了别踩白块儿,当时的想法是 可能普通模式的别踩白块儿因为他的“块儿”是滚动的向上这种,以我目前会的技术想不出怎么写, 但是如果是街机模式,通过你每按 ...

  8. 【非原创】tomcat 安装时出现 Failed to install Tomcat7 service

    tomcat 安装时出现 Failed to install Tomcat7 service 今天在安装tomcat时提示 Failed to install Tomcat7 service了,花了大 ...

  9. 机器学习框架Tensorflow数字识别MNIST

    SoftMax回归  http://ufldl.stanford.edu/wiki/index.php/Softmax%E5%9B%9E%E5%BD%92 我们的训练集由  个已标记的样本构成: ,其 ...

  10. NodeJS05

    商品分类模块 分类model const mongoose = require('mongoose') const schema = new mongoose.Schema({ name: { typ ...