JavaScript中的各种迭代

2016-10-10  本文已影响287人  NadiaLiu

最近的迭代方式甚多，老夫好累。

语句迭代

下述都是语句，所以可以在其中使用break，continue。

for

不说了，最基本的。

while

迭代次数不定时常用,略过。

for...in...

常用于迭代一个对象的可枚举属性（包含原型链上的）
也可以用来迭代数组，但是并不推荐这么做。
主要是有以下情况

1.数组原型或是数组本身有其他自定义的属性，会一并输出。

Array.prototype.foo = 1;
var a = [1, 2, 3,];
for (var x in a){
   console.log(x)
}  // 0,1,2,foo

2.数组是分散赋值的，输出情况有误

var a = []; 
a[2] = 2;  

for (var i = 0; i < a.length; i++) {
    console.log(i,a[i])
} 
// 0 undefined
// 1 undefined
// 2 2
for (var x in a){ 
  console.log(x,a[x])
}
// 2 2

for...of...

for...of...是ES6的迭代语句，提供了一个统一的接口。可用于迭代Object, Array，Map，Set, 类数组对象string,arguments,DOM NodeList以及 Generator。
在ES6中，这些可迭代对象都有X.keys(), X.values(), X.entries(),返回的是一个Iterator对象，可用[...Result]的形式转为数组。
TIP 迭代的是自身的，不含继承的，可枚举键名键值和键值对

Object目前还没有这个接口，可用ES5的 Object.keys(obj)，Object.values(obj)，和Object.entries(obj)代替，(其中values和entries是正在实验中的属性)返回一个数组。已提上ES7法案。
建议目前还是使用for...in或for..of Object.keys()进行迭代(区别在于是否迭代原型链上的属性)

在for...of 迭代时，除了Map默认取entries(i是一个数组)Object，Array，Set都是默认取values(i是对应的值),

方法迭代

自带了一些迭代方法。
注意的是这些是函数，不能调用continue或break来跳出循环。
如果想实现continue效果，应该对函数内部return。
如果想实现break效果，可以利用throw错误提前结束循环，但不如使用some，any方法或是直接使用for...of...循环

forEach

X.forEach(callback(value,key,X),this)。
遍历每一项执行一次callback值。
最常用的方法，需要注意的是：

var s = ['a',undefined,'b','c',null];
for(var i of s){
    if(i == 'a') {
      delete s[3];
      s.push('d');  
      s[2] = 'bchange'
    }
    console.log(i) 
}
var  a= ['a',undefined,'b','c',null];
a.forEach((value,key)=>{
    if(key== 0){
        delete a[3];
        a.push('d');
        a[2] = 'bchange'
    };
    console.log(value,key)}
)
console.log(s,a)

输出：
a undefined bchange undefined null  d
a 0   undefined 1   bchange 2   null 4 
["a", undefined, "bchange", 4: null, 5: "d"] ["a", undefined, "bchange", 4: null, 5: "d"]

var m = [];
m[2] = 'value2';
for(var i of m){
    console.log(i)
}
m.forEach((value,key)=>{console.log(value,key)})

输出
undefined undefined value2
value 2

var s = new Set(['a',undefined,'b','c',null]);
for(var i of s){
    if(i == 'a') {
      s.delete('c');
      s.add('d');  
    }
    console.log(i) 
}
var  a= new Set(['a',undefined,'b','c',null]);
a.forEach((value,key)=>{
    if(key== 'a'){
        a.delete('c');
        a.add('d');
    };
    console.log(value)}
)
console.log([...s],[...a])

输出
a undefined b null  d
a undefined b null  d
["a", undefined, "b", null, "d"] ["a", undefined, "b", null, "d"]

every & some & filter & map

这两个都是针对Array的。

上一篇 下一篇

猜你喜欢

热点阅读