详解js循环和ES6的iterator

epeppanda

发布于 2021-4-27 10:47

浏览

0收藏

一、js循环

1.一般for循环

    var array = [1,2,3,4,5,6,7];  
    for (var i = 0; i < array.length; i++) {  
        console.log(i,array[i]);  
    }  1.
2.
3.
4.

2.for...in

let array = [2, 4, 6, 8, 9];
for(let index in array) {  
        console.log(index+"---"+array[index]);  
    };  //0---2 1---4 ...1.
2.
3.
4.

index遍历的是数组或字符串的下标，或者对象的键名。

可枚举的都可以用for...in遍历。

注意：fo…in循环一般用于对象的遍历，但是这里有一个坑需要注意：

任何对象都继承了Object对象，或者其它对象，继承的类的属性是默认不可遍历的，for... in循环遍历的时候会跳过，但是这个属性是可以更改为可以遍历的，那么就会造成遍历到不属于自身的属性。

举例来说，对象都继承了toString属性，但是for...in循环不会遍历到这个属性。

var obj = {};// toString 属性是存在的obj.toString 
// toString() { [native code] }
for (var p in obj) { 
     console.log(p);
} // 没有任何输出

//这里obj有length属性，但是length不是可遍历的。1.
2.
3.
4.
5.
6.
7.

如果继承的属性是可遍历的，那么就会被for...in循环遍历到。但如果只想遍历自身的属性，使用for...in的时候，应该结合使用hasOwnProperty方法，在循环内部判断一下，某个属性是否为对象自身的属性。否则就可以产生遍历失真的情况。

var person = { name: '老张' };
for (var key in person) {  
    if (person.hasOwnProperty(key)) {   
         console.log(key);
      }
}// name1.
2.
3.
4.
5.
6.

3.for...of

for...of是ES6新增的，可以直接遍历该对象的值。

let v = [1,2,3]
for(let v of array) {  
    console.log(v);  
}; // 1 2 3
let s = "hello";  
for(let c of s) {  
    console.log(c); 
} // h e l l o1.
2.
3.
4.
5.
6.
7.
8.

注意：for...of只能用于iterator对象，所以只能用于数组和字符串，不能用于对象。

4.forEach

array.forEach(calllback(currentValue, index, arr), thisValue)

callback

为数组中每个元素执行的函数，该函数接收三个参数：

currentValue数组中正在处理的当前元素。
index 可选数组中正在处理的当前元素的索引。
array 可选forEach() 方法正在操作的数组。
thisArg 可选可选参数。当执行回调函数 callback 时，用作 this 的值。
返回值 undefined

var array1 = [1,2,3,4,5];
array1.forEach((value,index,arr)=>{
    console.log(value+"--"+index);//1--0 2--1 ...  
    console.log(arr); // [1,2,3,4,5]
}); 1.
2.
3.
4.
5.

注意：除了抛出异常以外，没有办法中止或跳出 forEach() 循环。如果你需要中止或跳出循环，forEach() 方法不是应当使用的工具。

forEach() 为每个数组元素执行一次 callback 函数；与 map() 或者 reduce() 不同的是，它总是返回 undefined 值，并且不可链式调用。

5.map()循环：

map方法将数组的所有成员依次传入参数函数，然后把每一次的执行结果组成一个新数组返回。

注意：是返回一个新数组，而不会改变原数组。

var numbers = [1, 2, 3];

numbers.map(function (n) { 
     return n + 1; 
}); 
// [2, 3, 4] 

numbers // [1, 2, 3]1.
2.
3.
4.
5.
6.
7.
8.

map方法接受一个函数作为参数。该函数调用时，map方法向它传入三个参数：当前成员、当前位置和数组本身。

[1, 2, 3].map(function(elem, index, arr) { 
    return elem * index; 
}); 
// [0, 2, 6]1.
2.
3.
4.

此外，map()循环还可以接受第二个参数，用来绑定回调函数内部的this变量，将回调函数内部的this对象，指向第二个参数，间接操作这个参数（一般是数组）。

var arr = ['a', 'b', 'c'];

[1, 2].map(function (e) {
    return this[e];
}, arr)
 // ['b', 'c']1.
2.
3.
4.
5.
6.

总结：forEach和map的差别是，forEach返回值为空，map则返回函数执行结果的数组。

6.filter()过滤循环

filter方法用于过滤数组成员，满足条件的成员组成一个新数组返回。它的参数是一个函数，所有数组成员依次执行该函数，返回结果为true的成员组成一个新数组返回。该方法不会改变原数组。

[1, 2, 3, 4, 5].filter(function (elem) {
     return (elem > 3); 
}) // [4, 5]

// 上面代码将大于3的数组成员，作为一个新数组返回。

var arr = [0, 1, 'a', false]; 
arr.filter(Boolean) // [1, "a"]1.
2.
3.
4.
5.
6.
7.
8.

filter方法的参数函数也可以接受三个参数：当前成员，当前位置和整个数组。

[1, 2, 3, 4, 5].filter(function (elem, index, arr) { 
    return index % 2 === 0; 
}); // [1, 3, 5]

//filter方法也可以接受第二个参数，用来绑定参数函数内部的this变量。
var obj = { MAX: 3 }; 
var myFilter = function (item) {
     if (item > this.MAX) return true; 
}; 
var arr = [2, 8, 3, 4, 1, 3, 2, 9]; 
arr.filter(myFilter, obj) // [8, 4, 9]1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

上面代码中，过滤器myFilter内部有this变量，它可以被filter方法的第二个参数obj绑定，返回大于3的成员。

7.some()，every()循环遍历

这两个方法类似“断言”（assert），返回一个布尔值，表示判断数组成员是否符合某种条件。

它们接受一个函数作为参数，所有数组成员依次执行该函数。该函数接受三个参数：当前成员、当前位置和整个数组，然后返回一个布尔值。

some方法是只要一个成员的返回值是true，则整个some方法的返回值就是true，否则返回false。

var arr = [1, 2, 3, 4, 5];
arr.some(function (elem, index, arr) {
  return elem >= 3;
});
// true1.
2.
3.
4.
5.

而every方法则相反，所有成员的返回值都是true，整个every方法才返回true，否则返回false。两相比较，some()只要有一个是true，便返回true；而every()只要有一个是false，便返回false.

var arr = [1, 2, 3, 4, 5];
arr.every(function (elem, index, arr) {
  return elem >= 3;
});
// false1.
2.
3.
4.
5.

这两个方法在实际开发中，大有可用之处。比如在判定用户是否勾选了不可操作的数据，或者是否勾选了一条可以操作的数据可以使用这两个方法遍历循环数组。

8.reduce()，reduceRight()

reduce方法和reduceRight方法依次处理数组的每个成员，最终累计为一个值。它们的差别是，reduce是从左到右处理（从第一个成员到最后一个成员），reduceRight则是从右到左（从最后一个成员到第一个成员），其他完全一样。

[1, 2, 3, 4, 5].reduce(function (a, b) {
  console.log(a, b);
  return a + b;
})
// 1 2
// 3 3
// 6 4
// 10 5
//最后结果：151.
2.
3.
4.
5.
6.
7.
8.
9.

reduce方法和reduceRight方法的第一个参数都是一个函数。该函数接受以下四个参数。

累积变量，默认为数组的第一个成员
当前变量，默认为数组的第二个成员
当前位置（从0开始）
原数组
这四个参数之中，只有前两个是必须的，后两个则是可选的。

如果要对累积变量指定初值，可以把它放在reduce方法和reduceRight方法的第二个参数。

[1, 2, 3, 4, 5].reduce(function (a, b) {
  return a + b;
}, 10);
// 251.
2.
3.
4.

上面的第二个参数相当于设定了默认值，处理空数组时尤其有用，可避免一些空指针异常。

由于这两个方法会遍历数组，所以实际上还可以用来做一些遍历相关的操作。

作用：找出字符长度最长的数组成员。

function findLongest(entries) {
  return entries.reduce(function (longest, entry) {
    return entry.length > longest.length ? entry : longest;
  }, '');
}

findLongest(['aaa', 'bb', 'c']) // "aaa"1.
2.
3.
4.
5.
6.
7.

上面代码中，reduce的参数函数会将字符长度较长的那个数组成员，作为累积值。这导致遍历所有成员之后，累积值就是字符长度最长的那个成员。

9.Object,keys遍历对象的属性

object.keys方法的参数是一个对象，返回一个数组。该数组的成员都是该对象自身的（而不是继承的）所有属性名，且只返回可枚举（enumerable）的属性。

var obj = {
  p1: 123,
  p2: 456
};

Object.keys(obj) // ["p1", "p2"]1.
2.
3.
4.
5.
6.

10.Object.getOwnPropertyNames()遍历对象的属性

Object.getOwnPropertyNames方法与Object.keys类似，也是接受一个对象作为参数，返回一个数组，包含了该对象自身的所有属性名。但它能返回不可枚举的属性。

var a = ['Hello', 'World'];

Object.keys(a) // ["0", "1"]
Object.getOwnPropertyNames(a) // ["0", "1", "length"]1.
2.
3.
4.

上面代码中，数组的length属性是不可枚举的属性，所以只出现在Object.getOwnPropertyNames方法的返回结果中。

由于 JavaScript 没有提供计算对象属性个数的方法，所以可以用这两个方法代替。

var obj = {
  p1: 123,
  p2: 456
};
Object.keys(obj).length // 2
Object.getOwnPropertyNames(obj).length // 21.
2.
3.
4.
5.
6.

11.总结

以上循环特征（相同与不同）：

一：map()，foreach，filter循环的共同之处：

foreach，map，filter循环中途是无法停止的，总是会将所有成员遍历完。
他们都可以接受第二个参数，用来绑定回调函数内部的this变量，将回调函数内部的this对象，指向第二个参数，间接操作这个参数（一般是数组）。

二：map()循环和forEach循环的不同：

forEach循环没有返回值；map，filter循环有返回值。

三：map循环和filter()循环都会跳过空位，for和while不会

var f = function (n) { 
    return 'a' 
}; 

[1, undefined, 2].map(f) // ["a", "a", "a"] 
[1, null, 2].map(f) // ["a", "a", "a"]
[1, , 2].map(f) // ["a", , "a"] 1.
2.
3.
4.
5.
6.
7.

上面代码中，map方法不会跳过undefined和null，但是会跳过空位。forEach方法也会跳过数组的空位，这里就不举例了。

四：some()和every():

some()只要有一个是true，便返回true；而every()只要有一个是false，便返回false.

五：reduce()，reduceRight()：

reduce是从左到右处理（从第一个成员到最后一个成员），reduceRight则是从右到左（从最后一个成员到第一个成员）。

六：Object对象的两个遍历Object.keys与Object.getOwnPropertyNames：

他们都是遍历对象的属性，也是接受一个对象作为参数，返回一个数组，包含了该对象自身的所有属性名。但Object.keys不能返回不可枚举的属性；Object.getOwnPropertyNames能返回不可枚举的属性。

七：for...in和for...of

以数组为例，JavaScript 提供多种遍历语法。最原始的写法就是for循环。

for (var index = 0; index < myArray.length; index++) {
  console.log(myArray[index]);
}1.
2.
3.

这种写法比较麻烦，因此数组提供内置的forEach方法。

myArray.forEach(function (value) {
  console.log(value);
});1.
2.
3.

这种写法的问题在于，无法中途跳出forEach循环，break命令或return命令都不能奏效。

for...in循环可以遍历数组的键名。

for (var index in myArray) {
  console.log(myArray[index]);
}1.
2.
3.

for...in循环有几个缺点。

数组的键名是数字，但是for...in循环是以字符串作为键名“0”、“1”、“2”等等。
for...in循环不仅遍历数字键名，还会遍历手动添加的其他键，甚至包括原型链上的键。
某些情况下，for...in循环会以任意顺序遍历键名。
总之，for...in循环主要是为遍历对象而设计的，不适用于遍历数组。

for...of循环相比上面几种做法，有一些显著的优点

for (let value of myArray) {
  console.log(value);
}1.
2.
3.

有着同for...in一样的简洁语法，但是没有for...in那些缺点。
不同于forEach方法，它可以与break、continue和return配合使用。
提供了遍历所有数据结构的统一操作接口。

下面是一个使用 break 语句，跳出for...of循环的例子。

for (var n of fibonacci) {
  if (n > 1000)
    break;
  console.log(n);
}1.
2.
3.
4.
5.

上面的例子，会输出斐波纳契数列小于等于 1000 的项。如果当前项大于 1000，就会使用break语句跳出for...of循环。

二、iterator迭代器

2.1 使用iterator遍历

并不是所有类似数组的对象都具有 Iterator 接口，一个简便的解决方法，就是使用Array.from方法将其转为数组。

let arrayLike = { length: 2, 0: 'a', 1: 'b' };

// 报错
for (let x of arrayLike) {
  console.log(x);
}

// 正确
for (let x of Array.from(arrayLike)) {
  console.log(x);
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

2.2 iterator遍历拓展

有些数据结构是在现有数据结构的基础上，计算生成的。比如，ES6 的数组、Set、Map 都部署了以下三个方法，调用后都返回遍历器对象。

entries() 返回一个遍历器对象，用来遍历[键名, 键值]组成的数组。对于数组，键名就是索引值；对于 Set，键名与键值相同。Map 结构的 Iterator 接口，默认就是调用entries方法。
keys() 返回一个遍历器对象，用来遍历所有的键名。
values() 返回一个遍历器对象，用来遍历所有的键值。
这三个方法调用后生成的遍历器对象，所遍历的都是计算生成的数据结构。
```
let arr = ['a', 'b', 'c'];
for (let pair of arr.entries()) {
  console.log(pair);
}
// [0, 'a']
// [1, 'b']
// [2, 'c']1.
2.
3.
4.
5.
6.
7.
```

注意：

1、数组、Set、Map的三个方法返回的就是迭代器对象Iterator，SetIterator {"Gecko", "Trident", "Webkit"}。

这和对象的Object.keys()等方法不一样！！对象这三个方法，返回就是一个数组！

例子：

let es6 = {
  edition: 6,
  committee: "TC39",
  standard: "ECMA-262"
};
let ite =  Object.entries(es6)[Symbol.iterator]()
// Array Iterator {}1.
2.
3.
4.
5.
6.
7.

2、for...of循环时，数组和Set默认使用 keys()，而Map默认使用entries()。
3、直接用for...of循环一个迭代器对象也是一样的效果！

eg.

let arr=[3,6,9]
for(let i of arr){
    console.log(i)
 }

for(let i of arr[Symbol.iterator]()){
    console.log(i)}
//两个返回相同 3 6 91.
2.
3.
4.
5.
6.
7.
8.

2.3 调用 Iterator 接口的场合

除了for...of循环，还有几个别的场合，默认调用 Iterator 接口（即Symbol.iterator方法）。

（1）解构赋值

对数组和 Set 结构进行解构赋值时，会默认调用Symbol.iterator方法。

let set = new Set().add('a').add('b').add('c');

let [x,y] = set;
// x='a'; y='b'

let [first, ...rest] = set;
// first='a'; rest=['b','c'];1.
2.
3.
4.
5.
6.
7.

（2）扩展运算符

扩展运算符（...）也会调用默认的 Iterator 接口。

// 例一
var str = 'hello';
[...str] //  ['h','e','l','l','o']

// 例二
let arr = ['b', 'c'];
['a', ...arr, 'd']
// ['a', 'b', 'c', 'd']1.
2.
3.
4.
5.
6.
7.
8.

上面代码的扩展运算符内部就调用 Iterator 接口。

实际上，这提供了一种简便机制，可以将任何部署了 Iterator 接口的数据结构，转为数组。也就是说，只要某个数据结构部署了 Iterator 接口，就可以对它使用扩展运算符，将其转为数组。

let arr = [...iterable];1.

（3）yield*

yield*后面跟的是一个可遍历的结构，它会调用该结构的遍历器接口。

let generator = function* () {
  yield 1;
  yield* [2,3,4];
  yield 5;
};

var iterator = generator();

iterator.next() // { value: 1, done: false }
iterator.next() // { value: 2, done: false }
iterator.next() // { value: 3, done: false }
iterator.next() // { value: 4, done: false }
iterator.next() // { value: 5, done: false }
iterator.next() // { value: undefined, done: true }1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

（4）其他场合

由于数组的遍历会调用遍历器接口，所以任何接受数组作为参数的场合，其实都调用了遍历器接口。下面是一些例子。

for...of
Array.from()
Map(), Set(), WeakMap(), WeakSet()（比如new Map([['a',1],['b',2]])）
Promise.all()
Promise.race()

2.4 与其他遍历语法的比较

以数组为例，JavaScript 提供多种遍历语法。最原始的写法就是for循环。

for (var index = 0; index < myArray.length; index++) {
  console.log(myArray[index]);
}1.
2.
3.

这种写法比较麻烦，因此数组提供内置的forEach方法。

myArray.forEach(function (value) {
  console.log(value);
});1.
2.
3.

这种写法的问题在于，无法中途跳出forEach循环，break命令或return命令都不能奏效。

for...in循环可以遍历数组的键名

for (var index in myArray) {
  console.log(myArray[index]);
}1.
2.
3.

for...in循环有几个缺点。

数组的键名是数字，但是for...in循环是以字符串作为键名“0”、“1”、“2”等等。
for...in循环不仅遍历数字键名，还会遍历手动添加的其他键，甚至包括原型链上的键。
某些情况下，for...in循环会以任意顺序遍历键名。

总之，for...in循环主要是为遍历对象而设计的，不适用于遍历数组。

for...of循环相比上面几种做法，有一些显著的优点。

for (let value of myArray) {
  console.log(value);
}1.
2.
3.

有着同for...in一样的简洁语法，但是没有for...in那些缺点。
不同于forEach方法，它可以与break、continue和return配合使用。
提供了遍历所有数据结构的统一操作接口。

分类

JavaScript

标签

前端

iterator

已于2021-4-27 10:47:31修改

51CTO

51CTO博客

51CTO学堂

详解js循环和ES6的iterator

订阅鸿蒙技术特刊，精选内容抢先看