This blog series is a summary of the usage of ES6 basic grammar. If there are any mistakes, please correct them.
The third part mainly includes the for of cycle.

for of cycle

Several ways of circulation

Normal for loop

for(let i=0;i<arr.length;i++){
    //content
}

forEach cycle

1. Use of foreach

• format

  arr.forEach(function (element,index,array) {
     console.log(element,index,array);
  })

• The forEach method automatically calls the passed in function
• Each call will pass the currently traversed element, index and array to this function.

2. Precautions for each

• forEach cannot be terminated or skipped

for in cycle

1. Use of for in cycle

let arr = ['god','gosh','jesus','christ'];
for(let key in arr){
   console.log(key); //The index is taken out.
   console.log(arr[key]); //The value is taken out
}

2. Notes on for in cycle

• Console. Log (key); -- > fetches the index
  Console.log (arr [key]); -- > fetches the value

• The for in loop traverses all enumerable properties on the object (including those on the prototype)

  Array.prototype.des = function(){
   return this[0];
  };
  let arr = ['god','gosh','jesus','christ'];
  arr.title = 'words';
  for(let key in arr){
     console.log(key); //The index is taken out.
     console.log(arr[key]); //The value is taken out
  }

  

• It is not recommended to use for in loop to traverse array in enterprise development
• The properties in an object are unordered, and the for in loop is designed to traverse unordered things.

For in loop is specially used to traverse objects, and the properties of objects are unordered. Therefore, for in loop is specially used to traverse unordered things, so it is not recommended to use for in loop to traverse arrays.

for of cycle

1. Format

Array.prototype.des = function(){
 return this[0];
};
let arr = ['god','gosh','jesus','christ'];
arr.title = 'words';
for(let key of arr){
   console.log(key); //Direct traversal is the value
}

2. pay attention.

• Console. Log (key); -- > directly traverses the value
• Does not traverse the properties on the prototype
• Supports loop termination and skipping

Object.keys() method traversal property

1. usage

• Object.keys() puts the attribute names in an object into an array; each element in the array is of type string
• The property names in the array are arranged in the same order as they are returned when the for...in loop is used to traverse the object.
• If the key value of an object is not enumerable, an array of keys is returned.

When traversing an object:

let object1 = {
    a: 'somestring',
    b: 42,
    c: false
};

console.log(Object.keys(object1));
// expected output: Array ["a", "b", "c"]

When traversing an array:

// simple array
let arr = ['a', 'b', 'c'];
console.log(Object.keys(arr)); // console: ['0', '1', '2']
console.log(typeof Object.keys(arr)[0]); //string

Traversal class array:

// array like object
let obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.keys(obj)); // console: ['0', '1', '2']

It is unordered when traversing an object (that is, the order of attribute names in the array mentioned above is the same as the order returned when traversing the object with the for...in loop. )

// array like object with random key ordering
var anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.keys(anObj)); // console: ['2', '7', '100']

2. The object. Keys () method can be used to determine whether an object is empty
Use the array returned by the Object.keys() method to determine whether the array length is 0; if the length is 0, then the object is empty; otherwise, it is not empty.

let object1 = {
    a: 'somestring',
    b: 42,
    c: false
};
let keys = Object.keys(object1);
console.log(keys);
console.log(keys.length === 0); //false

Further discussion on for of cycle

1. The for of loop can be used to traverse the iteratable objects. In the last ES6 grammar article It also mentions what iterative objects are

The iteratable object is to deploy the iterator interface, or to define the data structure of the [Symbol.iterator] method. In ES6, the iterator interface is mainly used for of consumption.

OK, I have to ask you again: what is [Symbol.iterator], Put a reference link handy

a zero arguments function that returns an object,conforming to the iterator protocol

2.entries() method
The entries() method returns a new Array Iterator object containing key / value pairs for each index in the array.

let arr = ['god','gosh','jesus','christ'];
for(let key of arr){
   console.log(key);
}

Enter arr.entries() in the console to return a new Array Iterator object

3. Returns a new Array Iterator object. Array Iterator is an object, and its prototype (Array Iterator) has a next method, which can be used to traverse the iterator to get the [key,value] of the original array.

• The next method returns an object {value: Array(2), done: false} every time it executes
• This object stores the currently fetched data and the mark of whether the fetching is finished. The mark of not fetching is false and the mark of finished fetching is true.

4. Use for of to traverse arr.entries() (i.e. its iterator) and return an array. You can get the key / value pairs of each index in the original array at the same time.

let arr = ['god','gosh','jesus','christ'];
for(let key of arr.entries()){
   console.log(key);
}

5. Of course, it's OK to write separately and obtain separately.

let arr = ['god','gosh','jesus','christ'];
for(let key of arr.entries()){
   // console.log(key);
   console.log(key[0]); //Get index
   console.log(key[1]); //Get property value
}

You can use the deconstruction assignment to process key values to complete subsequent operations

let arr = ['god','gosh','jesus','christ'];
for(let [index,value] of arr.entries()){
   // console.log(key);
   // console.log(key[0]); / / get index
   // console.log(key[1]); / / get the property value
   console.log((`The first ${index + 1}The word is ${value}`));
}

6.for of loop can use Array/Map/Set/String/TypedArray/arguments object / NodeList object. Therefore, it is not necessary to consider which loop can be used when traversing, and for of can solve these scenarios; however, for of loop does not support object traversal.

function sum() {
    let count = 0;
    for (let key of arguments){
        count = count + key;
    }
    return count;
}
console.log(sum(1, 2, 3, 4, 5, 6, 7, 8));