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};//字典风格的创建方式