postpass js中的遍历方法 – 个人博客

js中的遍历方法

for循环

for(i = 0; i< arr.length; i++){
       // (1)break; 跳出for循环
       // (2)continue; 跳出当前的遍历,开始循环的一次新迭代
       // (3)return; 返回空,跳出循环
 }

forEach:(可以三个参数,第一个是value,第二个是index,第三个是数组体)

var array = [1,2,3,4,5,6,7];
 
array.forEach(e=>{
  console.log(e);
});

优点:简洁、效率高

缺点:不能使用 break 、continue语句跳出循环,return: 只会跳出当前的遍历,开始循环一次新的迭代,类似for中的continue

for in:(它大部分用于遍历对象)

for (const key in object) {
    //hasOwnProperty:查找一个对象是否有某个属性,但是不会去查找它的原型链。
    if (object.hasOwnProperty(key)) {
        const element = object[key];
    }
}

优点:遍历对象属性简洁方便,可以使用return、break、continue等

缺点:开销比较大,key为string类型

for of:(可遍历map,object,array,set string等)

let arr = ['China', 'America', 'Korea']
for (let o of arr) {
    console.log(o) //China, America, Korea
}

Symbol.iteratoer属性

  • 数组 Array
  • Map
  • Set
  • String
  • arguments对象
  • Nodelist对象, 就是获取的dom列表集合

优点:避免了for in的所有缺点,可以使用break,continue和return,不仅支持 数组的遍历,还可以遍历类似数组的对象,支持字符串的遍历,支持map和Set对象遍历

缺点:不能直接遍历对象

//使用 Object.keys() 获取对象的 key值集合后,再使用 for of
let obj = {a: '1', b: '2', c: '3', d: '4'}
for (let o of Object.keys(obj)) {
    console.log(o) // a,b,c,d
}

//或者使用内置的Object.values()方法获取对象的value值集合再使用for of
let obj = {a: '1', b: '2', c: '3', d: '4'}
for (let o of Object.values(obj)) {
    console.log(o) // 1,2,3,4
}

总之:forEach用于简单的数组遍历,for-in用于遍历对象,for-of用于复杂的数组和类数组的遍历

array.filter()

filter()提供一个函数并返回一个新的数组(不修改原数组),filter()返回的数组包含了满足函数条件的所有元素

let arr = [1,2,3,4,5,6,7,8,9]

let filter_arr=  arr.filter((item)=>{
    return item%3==0 || (item-3)%10==0
})
console.log(filter_arr);  //[3,6,9]

array.map()

map()方法调用一个函数,将函数应用在数组中每个元素上,然后创建并返回一个新数组(不会修改原数组 。

let arr = [1,2,3,4,5,6,7,8,9]

let map_arr= arr.map((item)=>{
    return item+1
})
console.log(map_arr); //[2,3,4,5,6,7,8,9,10]

array.some()

some()是对数组中每一项遍历,只要有一项返回true,则返回true,即:有true为true

var arr = [ 1, 2, 3, 4, 5, 6 ]; 
let some_arr = arr.some((item,index,array)=>{ 
    console.log(item);
    return item > 3; 
})

console.log(some_arr);

//1
//2
//3
//4
//true

打印结果为:1,2,3,4 函数返回true,遍历到第四次的时候遇到了一个符合表达式的之后跳出循环,整体结果返回true

array.every()

every()是对数组中每一项遍历,每一项返回true,则返回true。如果有一项为false,则整体为false,即:全true为true

var arr = [ 1, 2, 3, 4, 5, 6 ]; 
let every_arr = arr.every((item,index,array)=>{ 
    console.log(item);
    return item > 3; 
})

console.log(every_arr);

//1
//false

标签

发表评论