数组遍历方法
-
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等等,我们写的更少,更简洁。
网友评论