ES6 New Feature 2: Iterator (traversal) and for-of loop details, es6for-of

ES6 New Feature 2: Iterator (traversal) and for-of loop details, es6for-of

This article describes the new features of ES6, Iterator and for-of loop. We will share this with you for your reference. The details are as follows:

1. traverse the Array

For-of Working principle: the iterator has a next method. The for loop continuously calls this iterator. next method to obtain the next value until the done attribute in the returned value is true to end the loop.

① Before ES6

Var arr = [1, 2, 4, 5, 6]; arr. name = 'a'; for (var index = 0; index <arr. length; index ++) {console. log (arr [index]);} arr. forEach (function (value) {// ES5 built-in forEach method defect: break interruption cannot be used or return to the outer function console using the return statement. log (value );});

The results are: 1, 2, 3, 4, 5, 6.

② Use for-in: in addition to traversing array elements, the forfor-in loop body also traverses custom attributes. For example, if an array has an enumerative attribute arr. a, the loop will be executed once.

For (var index in arr) {// do not do this console. log (arr [index]);}

Result: 1, 2, 3, 4, 5, 6,

For-in is designed for common objects. the value assigned to the index is not the actual numbers 1 and 2, but the strings '1' and '2'

var b = 0;for (var index in arr) { b = b+ index; console.log(b)}

Result: 00,001,001 0012345, name

③ Use for-of: avoids all defects of for-in, and can correctly respond to break and return statements.

for(var value of arr){  console.log(value)}

Result: 1, 2, 3, 4, 5, 6

2. for-of loops facilitate other sets

① Traverse Set

var words = 'a';var s = new Set();s.add("a");s.add(1);for(var word of s){  console.log(word);}

Result: a, 1

② Traverse Map

var map = new Map();map.set('a',1);map.set('b',2);map.set('c',3);map.set('d',4);for(var [key,value] of map){  console.log(key+':'+value);}

Result: a: 1, B: 2, c: 3, d: 4

3. Iterator (traversal)

① Iterator is an interface specification. Any object can be traversed by deploying this interface. It has two functions: one is to provide a unified and simple interface for various data structures, and the other is to make the object attributes in a certain order.

② Principle of the traversal tool: the traversal tool provides a pointer pointing to an attribute of the current object. You can use the next method to move the pointer to the next attribute. The next method returns an object that contains two attributes: value and done. Here, the value attribute is the value of the current traversal position, and the done attribute is a Boolean value, indicating whether the traversal ends.

// Simulate the traversal principle function makeIterator (array) {var nextIndex = 0; return {next: function () {return nextIndex <array. length? {Value: array [nextIndex ++], done: false }:{ value: undefined, done: true }}} var it = makeIterator (['A ', 'B']); console. log (it. next (); // {value: 'A', done: false} console. log (it. next (); // {value: 'B', done: false} console. log (it. next (); // {value: undefined, done: true}

③ The Iterator interface returns the traversal device. The native method has the next method.

> Three types of data structures are native and have Iterator interfaces: arrays, objects similar to arrays, Set and Map structures.

var map = new Map();console.log(map[Symbol.iterator] === map.entries)//truevar arr = new Array();console.log(arr[Symbol.iterator] === arr.values)//truevar set = new Set();console.log(set[Symbol.iterator] === set.values)//true

> If you need the Iterator interface, you must deploy other data structures (mainly objects) on your own.

var students = {}students[Symbol.iterator] = function() { let index = 1; return {  next() {   return {done: index>10, value: index++}  } }}for(var i of students) { console.log(i);}//

I hope this article will help you design the ECMAScript program.