js 数组遍历
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.every 或 Array.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 数组遍历的更多相关文章
- 转→js数组遍历 千万不要使用for...in...
看到一篇内容还不错,但是排版实在糟糕, 逼死强迫症患者啊,直接拉下去找原文连接,找到了,但是已经消失了···500错误... 第一次因为实在看不下去一篇博客的排版, 为了排版而转载... 转载地址:h ...
- js数组遍历和对象遍历
针对js各种遍历作一个总结分析,从类型用处:分数组遍历和对象遍历:还有性能,优缺点等. JS数组遍历: 1,普通for循环,经常用的数组遍历 var arr = [1,2,0,3,9]; for ( ...
- 浅谈6种JS数组遍历方法的区别
本篇文章给大家介绍一下6种JS数组遍历方法:for.foreach.for in.for of.. each. ().each的区别.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. ...
- JS数组遍历方法
常用数组遍历方法: 1.原始for循环 var a = [1,2,3]; for(var i=0;i<a.length;i++){ console.log(a[i]); //结果依次为1,2,3 ...
- js数组遍历方法总结
数组遍历方法 1.for循环 使用临时变量,将长度缓存起来,避免重复获取数组长度,当数组较大时优化效果才会比较明显. 1 2 3 for(j = 0,len=arr.length; j < le ...
- js 数组遍历 对象遍历
一.数组遍历 1,普通for循环,经常用的数组遍历 var arr = [1,2,0,3,9]; for ( var i = 0; i <arr.length; i++){ console.lo ...
- JS数组遍历方法集合
就让我们在逆战中成长吧,加油武汉,加油自己 1.for循环 使用零时变量将长度存起来,当数组较大时优化效果才会比较明显. var ar1=[2,4,6,8] for(var i=0;i<ar1. ...
- js 数组遍历for..in弊端
//for..in在数组中的弊端 原则上数组Array对象是不能操作的,但是有些程序员开始不注意把Array的原型链上添加了方法就会出现意想不到的bug //例如 ,,]; Array.prototy ...
- js数组遍历(for in ,for of ,map,foreach,filter)的区别
一.for in 和for of 的区别 1.for in 遍历数组时,索引实际上是字符串类型的数字,不能进行运算,我们来输出一下: let arr = [1,3,5,4] for (let inde ...
随机推荐
- python--Pandas(一)
一.Pandas简介 1.Python Data Analysis Library 或 pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务而创建的.Pandas 纳入了大量库和一 ...
- 学习python第十二天,函数4 生成器generator和迭代器Iterator
在Python中,这种一边循环一边计算的机制,称为生成器:generator 要创建一个generator,有很多种方法.第一种方法很简单,只要把一个列表生成式的[]改成(),就创建了一个genera ...
- Diycode开源项目 如何解决InputMethodManager造成的内存泄漏问题
1.内存泄漏的状况及原因 1.1.利用LeakCanary查看内存泄漏的状况 1.2.内存泄漏怎么产生的呢? InputMethodManager.mServicedView持有一个最后聚焦View的 ...
- 3611: [Heoi2014]大工程
3611: [Heoi2014]大工程 链接 分析: 树形dp+虚树. 首先建立虚树,在虚树上dp. dp:sum[i]为i的子树中所有询问点之间的和.siz[i]为i的子树中有多少询问点,mn[i] ...
- Parameter 'limit' not found. Available parameters are [arg1, arg0, pa
mybatis代码报错,这是因为mapper识别不了limit,需要替换成 LIMIT #{arg0},#{arg1}
- Windows Server 2012 R2有哪些存储监控工具
[TechTarget中国原创] 大多数Windows管理员都知道,没有一种单一的方法可以用来监控存储或磁盘错误.虽然市场上有无数的管理工具可供你选择,但由于政策和规程的原因,企业之间的选择不尽相同. ...
- 初学JS——利用JS制作的别踩白块儿(街机模式) 小游戏
这个是上个星期5写的了,当时是突然想写个游戏,就想到了别踩白块儿,当时的想法是 可能普通模式的别踩白块儿因为他的“块儿”是滚动的向上这种,以我目前会的技术想不出怎么写, 但是如果是街机模式,通过你每按 ...
- 【非原创】tomcat 安装时出现 Failed to install Tomcat7 service
tomcat 安装时出现 Failed to install Tomcat7 service 今天在安装tomcat时提示 Failed to install Tomcat7 service了,花了大 ...
- 机器学习框架Tensorflow数字识别MNIST
SoftMax回归 http://ufldl.stanford.edu/wiki/index.php/Softmax%E5%9B%9E%E5%BD%92 我们的训练集由 个已标记的样本构成: ,其 ...
- NodeJS05
商品分类模块 分类model const mongoose = require('mongoose') const schema = new mongoose.Schema({ name: { typ ...