JS中各种遍历方法

2019-01-28 本文已影响0人守护银河的河童

数组遍历方法

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等等，我们写的更少，更简洁。

JS中各种遍历方法

数组遍历方法

for循环（★★★☆☆）

forEach（★★★★☆）

map循环（★★★★☆）

filter (★★★★★)

for of （不能获取数组的index） (★★★★★)

every遍历 (★★★★☆)

some遍历(★★★★☆)

reduce（除了成绩计算外，还没有想到适用场景）

reduceRight（也是没想到适用场景）

find(★★★☆☆)

findIndex (★★★☆☆)

keys，values，entries (★★★★★)（敲喜欢这个的呢~~）

对象的遍历方法

for in 是专门设计为object遍历的方法（★★★★★）

Object.keys(),Object.values(),Object.entries() （★★★☆☆）

其余遍历方法

while （★★★★☆）

do/while 循环（★★★★☆）

猜你喜欢

热点阅读

JS中各种遍历方法

数组遍历方法

for循环 （★★★☆☆）

forEach（★★★★☆）

map循环（★★★★☆）

filter (★★★★★)

for of （不能获取数组的index） (★★★★★)

every遍历 (★★★★☆)

some遍历(★★★★☆)

reduce（除了成绩计算外，还没有想到适用场景）

reduceRight（也是没想到适用场景）

find(★★★☆☆)

findIndex (★★★☆☆)

keys，values，entries (★★★★★)（敲喜欢这个的呢~~）

对象的遍历方法

for in 是专门设计为object遍历的方法（★★★★★）

Object.keys(),Object.values(),Object.entries() （★★★☆☆）

其余遍历方法

while （★★★★☆）

do/while 循环 （★★★★☆）

猜你喜欢

热点阅读

for循环（★★★☆☆）

do/while 循环（★★★★☆）