数组遍历方法
-
for循环 （★★★☆☆）
使用临时变量，将长度缓存起来，避免重复获取数组长度，当数组较大时优化效果才会比较明显。
1.能被break
2.会改变原数据
3.对象及数组都适用
var arr = [
{id:1,value:'yoy'},
{id:2,value:'cher'},
{id:3,value:'nothing'}
]
for(var j = 0; j < arr.length; j++) {
console.log(j,arr[j])
}
-
forEach（★★★★☆）
最多可以接受三个参数的函数，ie8及以下不支持
1.有兼容问题（现在可忽略不计）
2.callback必填
3.仅适用数组
4.不能break，可以放进try模块
var arr = [
{id:1,value:'yoy'},
{id:2,value:'cher'},
{id:3,value:'nothing'}
]
arr.forEach(function(v,key,arr){
console.log(v,key,arr)
})
forEach无法在所有元素都传递给调用的函数之前终止（而for循环却有break方法），如果要提前终止，必须把forEach放在try块中，并能抛出一个异常。如果forEach()调用的函数抛出foreach.break异常，循环会提前终止
function foreach(a,b,c){
try{
a.forEach(b,c);
}catch(e){
if(e===foreach.break)return;
else throw e;
}
}
foreach.break=new Error("StopIteration");
}
-
map循环（★★★★☆）
有返回值，可以return出来，map的回调函数中支持return返回值；
map会根据index遍历，返回的新数组由return 后的表达式改变，
（并不影响原来的数组，只是相当于把原数组克隆一份，把克隆的这一份的数组中的对应项改变了）；
1.有兼容问题（现在可忽略不计），与forEach一致有三个参数
2.callback必填
3.仅适用数组
var arr = [
{id:1,value:'yoyo'},
{id:2,value:'cher'},
{id:3,value:'nothing'}
]
var res = arr.map(function (item,index,ary ) {
return item.value='new';
})
console.log(res);//--> ["new", "new", "new"]; 原数组拷贝了一份，并进行了修改
console.log(arr);//-->[ {id: 1, value: "new"},{id: 2, value: "new"},{id: 3, value: "new"}]； 原数组并未发生变化
-
filter (★★★★★)
filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
1.ie8及以下有兼容问题（现在可忽略不计）
2.filter() 不会对空数组进行检测
3.filter() 不会改变原始数组
var arr = [
{id:1,value:'yoyo'},
{id:2,value:'cher'},
{id:3,value:'nothing'}
]
console.log(arr.filter(item => item.value = 'new')) //[{id: 1, value: "new"},{id: 2, value: "new"},{id: 3, value: "new"}]
-
for of （不能获取数组的index） (★★★★★)
for of 为es6的遍历方法
虽然for of 适用数组
1.有兼容问题
2.可以break ,continue,return
3.相比较 for循环，写法便捷
4.支持类似数组的对象，甚至字符串
5.不适用于处理原有的原生对象
var arr = [
{id:1,value:'yoyo'},
{id:2,value:'cher'},
{id:3,value:'nothing'}
]
var str ='fdsagrewhfdadfwre'
for(let item of str){
console.log(item) //f d s a g r e w h f d a d f w r e
}
for(let item of arr){
console.log(item) //{id: 1, value: "yoyo"}, {id: 2, value: "cher"}, {id: 3, value: "nothing"}
}
-
every遍历 (★★★★☆)
方法用于检测数组所有元素是否都符合指定条件
对数组中的每一项运行给定函数，如果该函数对每一项返回true,则返回true
1.如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测
2.如果所有元素都满足条件，则返回 true
3.与字符串的indexOf方法相反用法，适用于数组。
4.ie8及以下不适用
var arr = [
{id:1,value:'yoyo'},
{id:2,value:'cher'},
{id:3,value:'nothing'}
]
var res = arr.every(function(item,index,ary){
return item.value !== 'uo'
})
console.log(res) // true
-
some遍历(★★★★☆)
对数组中每一项运行指定函数，如果该函数对任一项返回true，则返回true
1.如果数组中检测到有一个元素满足，则整个表达式返回 true，且剩余的元素不会再进行检测
2.与字符串的indexOf方法类似用法，适用于数组。
3.ie8及以下不适用
var arr = [
{id:1,value:'yoyo'},
{id:2,value:'cher'},
{id:3,value:'nothing'}
]
var res = arr.some(function(item,index,ary){
return item.value == 'yoyo'
})
console.log(res) // true
-
reduce（除了成绩计算外，还没有想到适用场景）
接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值
1.对于空数组是不会执行回调函数的
2.ie8及以下不适用
3.reduce接受一个函数，函数有四个参数，分别是：上一次的值，当前值，当前值的索引，数组
[0, 1, 2, 3, 4].reduce(function(previousValue, currentValue, index, array){
return previousValue + currentValue;
});
4.reduce还有第二个参数，我们可以把这个参数作为第一次调用callback时的第一个参数，上面这个例子因为没有第二个参数，所以直接从数组的第二项开始，如果我们给了第二个参数为5，那么结果就是这样的：
[0, 1, 2, 3, 4].reduce(function(previousValue, currentValue, index, array){
return previousValue + currentValue;
},5);
-
reduceRight（也是没想到适用场景）
reduceRight()方法的功能和reduce()功能是一样的，不同的是reduceRight()从数组的末尾向前将数组中的数组项做累加。
reduceRight()首次调用回调函数callbackfn时，prevValue 和 curValue 可以是两个值之一。如果调用 reduceRight() 时提供了 initialValue 参数，则 prevValue 等于 initialValue，curValue 等于数组中的最后一个值。如果没有提供 initialValue 参数，则 prevValue 等于数组最后一个值， curValue 等于数组中倒数第二个值。
-
find(★★★☆☆)
返回数组中符合测试函数条件的第一个元素。否则返回undefined
1.当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数
2.IE 11 及更早版本不支持 find() 方法
3.如果没有符合条件的元素返回 undefined
4.对于空数组，函数是不会执行的
5.并没有改变数组的原始值
var arr= [
{id:1,value:'yoyo'},
{id:2,value:'cher'},
{id:3,value:'nothing'},
]
var res = arr.find(function(item,index,ary){
return item.value ==='yoyo'
})
console.log(res) //{id: 1, value: "yoyo"}
-
findIndex (★★★☆☆)
方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置
1.当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数
2.IE 11 及更早版本不支持 find() 方法
3.如果没有符合条件的元素返回 -1
4.findIndex() 对于空数组，函数是不会执行的。
5.findIndex() 并没有改变数组的原始值
-
keys，values，entries (★★★★★)（敲喜欢这个的呢~~）
ES6 提供三个新的方法 —— entries()，keys()和values() —— 用于遍历数组。它们都返回一个遍历器对象，可以用for...of循环进行遍历，唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历
1.IE 11 及更早版本不支持 find() 方法
2.keys返回的是数组的index，不是键值对的key
3.values返回的是每项值
4.entries返回的是index 与值
var arr= [
{id:9,value:'yoyo'},
{id:2,value:'cher'},
{id:3,value:'nothing'},
]
for (let index of arr.keys()) {
console.log(index);
}
// 0
// 1
// 2
for (let elem of arr.values()) {
console.log(elem);
}
// {id: 9, value: "yoyo"}
// {id: 2, value: "cher"}
// {id: 3, value: "nothing"}
for (let [index, elem] of arr.entries()) {
console.log(index, elem);
}
//0 {id: 9, value: "yoyo"}
//1 {id:2,value:'cher'}
//2 {id:3,value:'nothing'}
对象的遍历方法
其中for循环与数组中介绍的使用方法一致，以下只贴demo
-
for in 是专门设计为object遍历的方法（★★★★★）
var obj= {
id:1,
value:'yoyo',
target:'js'
}
for (var item in obj){
console.log(item)
}
-
Object.keys(),Object.values(),Object.entries() （★★★☆☆）
这三个方法可以分别得到键名，值，重组为数组
建议配合for 方法使用，单独使用场景不多
var obj= {
id:1,
value:'yoyo',
target:'js'
}
console.log(Object.keys(obj)) // ["id", "value", "target"]
console.log(Object.values(obj)) //[1, "yoyo", "js"]
console.log(Object.entries(obj)) // [["id", 1],["value", "yoyo"], ["target", "js"]]
console.log(...Object.entries(obj)) // ["id", 1],["value", "yoyo"], ["target", "js"]
其余遍历方法
-
while （★★★★☆）
只要指定条件为 true，循环就可以一直执行代码
while (i<5)
{
x=x + "The number is " + i + "<br>";
i++;
}
-
do/while 循环 （★★★★☆）
do
{
x=x + "The number is " + i + "<br>";
i++;
}
while (i<5);
do/while 循环是 while 循环的变体。
该循环至少会执行一次，即使条件是 false，隐藏代码块会在条件被测试前执行
别忘记增加条件中所用变量的值，否则循环永远不会结束
比起一开始的for循环，现在我们更多用的是含有迭代器的遍历方法，例如map、filter、包括keys、values、entries等等，我们写的更少，更简洁。
