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 ...
随机推荐
- 在ubuntu上安装subline
Sublime Text is a most popular, lightweight and smart cross-platform text and source code editor wit ...
- JZOJ 5922. sequence
5922. [NOIP2018模拟10.23]sequence (File IO): input:sequence.in output:sequence.out Time Limits: 1000 m ...
- P1582倒水 位运算
题目描述 一天,CC买了N个容量可以认为是无限大的瓶子,开始时每个瓶子里有1升水.接着~~CC发现瓶子实在太多了,于是他决定保留不超过K个瓶子.每次他选择两个当前含水量相同的瓶子,把一个瓶子的水全部倒 ...
- Windows Server 2008 R2 可能会碰到任务计划无法自动运行的解决办法
在做Windows Server 2008R2系统的计划任务时使用到了bat脚本,手动启动没问题,自动执行缺失败,代码:0x2. 将“操作”的“起始于”进行设置了bat脚本的目录即可.
- lambda & 三元运算
lambda & 三元运算 lambda: 1 >>> def add(x,y): #定义一个加法函数 2 return x+y ...
- contest0 from codechef
A CodeChef - KSPHERES 中文题意 Mandarin Chinese Eugene has a sequence of upper hemispheres and another ...
- Keil如何生成bin文件【Keil生成Bin文件的方法】
使用过Keil的同鞋都知道,现在Keil中默认可以输出.axf的调试文件和可以通过钩选输出的.hex可执行文件,没有bin(二进制)文件的输出选项.可是偏偏某些时候需要或者习惯性的使用.bin文件来进 ...
- EVALUation mode running with code size limit:2k keil进行仿真过程中出现的报错
EVALUation mode running with code size limit:2k 如果keil软件未破解,会限制程序的存储大小.第一是你的软件没有破解,不能编译2K以上的程序:这种情况下 ...
- Apache Spark 2.2.0 中文文档
Apache Spark 2.2.0 中文文档 - 快速入门 | ApacheCN Geekhoo 关注 2017.09.20 13:55* 字数 2062 阅读 13评论 0喜欢 1 快速入门 使用 ...
- 《Cracking the Coding Interview》——第9章:递归和动态规划——题目2
2014-03-20 02:55 题目:从(0, 0)走到(x, y),其中x.y都是非负整数.每次只能向x或y轴的正方向走一格,那么总共有多少种走法.如果有些地方被障碍挡住不能走呢? 解法1:如果没 ...