This is the first day of my participation in the August Challenge. For details, see:August is more challenging

methods Degree of concise rightbreak/continueThe support of note
for low ✔ For traversing groups, traversing process is controlled, can passbreak 和 continueTo achieve control of traversal
forEach high ✖ ES5The new. It is used to iterate through the array, and the traversal process is uncontrolled, it will iterate through all the elements
every — ✖ ES5The new. Used for traversing groups, traversing process controlled, through the set functionThe return valueTrue and false, realized andbreak,continueSame effect
for in — ✔ ES3There is a delta of PI. forobjectBy design, the array belongs toobjectIt also works, but it has flaws. The index of the traversed element isstringType, notnumberType.for inIt’s going to iterate over the custom properties.
for of — ES6The new. Used to traverse a custom data structure (which is not an array, nor is itobject). You can also iterate through groups. By modifying the default traversal mechanism, withfor ofThe use of, makefor ofIs very powerful.

1. for

const arr = [1.2.3.4.5]
for (var i = 0; i < arr.length; i++) {
  console.log(arr[i])
}

/* Result: 1 2 3 4 5 */
Copy the code
const arr = [1.2.3.4.5]
for (var i = 0; i < arr.length; i++) {
  if (arr[i] === 2) {
    break // Break is valid in the for loop
  }
  console.log(arr[i])
}

/* Result: 1 */
Copy the code
const arr = [1.2.3.4.5]
for (var i = 0; i < arr.length; i++) {
  if (arr[i] === 2) {
    continue // Continue is valid in the for loop
  }
  console.log(arr[i])
}

/* Result: 1 3 4 5 */
Copy the code

2. forEach

const arr = [1.2.3.4.5]
arr.forEach(function (item) {
  console.log(item)
})

/* Result: 1 2 3 4 5 */
Copy the code
const arr = [1.2.3.4.5]
arr.forEach(function (item) {
  if (item === 2) {
    break // Error: Unsyntactic break
  }
  console.log(item)
})
Copy the code
const arr = [1.2.3.4.5]
arr.forEach(function (item) {
  if (item === 2) {
    continue // Error: Unsyntactic continue
  }
  console.log(item)
})
Copy the code

ForEach is more concise than for, but it doesn’t support break or continue, and it iterates over every element from beginning to end.

Development:

// Declare an array of length 5
let array = Array(5)
// Assign 1 to all elements of the array
array.forEach(function (item) {
  item = 1
})
console.log(array)

/* Result: (5) [empty × 5] */
Copy the code

ForEach cannot assign values to array elements.

3. every

Feature: Every iterates through a group of numbers, whether or not to continue the traversal depends on the return value of the function. If the return value is true, the traversal continues, and if the return value is false, the traversal ends. The default return value is false.

const arr = [1.2.3.4.5]
arr.every(function (item) {
  console.log(item) 
  // The default value returned by the function is false, so the first element is iterated
})

/* Result: 1 */
Copy the code
const arr = [1.2.3.4.5]
arr.every(function (item) {
  console.log(item)
  return true // The function returns true to continue the traversal
})

/* Result: 1 2 3 4 5 */
Copy the code

When the function returns true in the above code block, every iterates over all elements, looking like forEach. You might ask, why add the Every API at this point when every and forEach behave much like each other? ForEach is not controlled. If you use forEach, it has to iterate from beginning to end. It doesn’t support break and continue, and every doesn’t support break and continue. But every can have the same effect as break and continue. How? In fact, whether or not every can go down depends on the return value of the function. To break, you can use return false, and to continue, you can use return true, so every is controlled.

const arr = [1.2.3.4.5]
arr.every(function (item) {
  if (item === 2) {
	return false // This function terminates execution without any further traversal, which is equivalent to implementing the break effect
  }
  console.log(item)
  return true
})

/* Result: 1 */
Copy the code
const arr = [1.2.3.4.5]
arr.every(function (item) {
  if (item === 2) {
    // Do not do processing, equivalent to implement the continue effect
  } else {
    console.log(item)
  }
  return true
})

/* Result: 1 3 4 5 */
Copy the code

4. for in

For in is for objects that are traversable, not arrays, but arrays are also objects, and arrays are traversable, so for in can be traversed as well, but there’s a flaw in using for in to traverse arrays.

const arr = [1.2.3.4.5]
for (var index in arr) {
  console.log(index, arr[index])
}

/* result: 0 1 1 2 2 3 3 4 4 5 */
Copy the code
const arr = [1.2.3.4.5]
arr.pro = 8 // Add attribute pro to arR array (arR is array, array is object, object can hang attribute)
for (var index in arr) { 
  console.log(index, arr[index])
}

/* Result: 0 1 1 2 3 3 4 4 5 pro 8 */
Copy the code

As you can see, the index of an array does not have to be a number; it can also be a string. If we use for in to iterate through the array, if there are attributes that are mounted on the array, they will also be iterated over, which is different from what we expect, and that’s the flaw with for in.

const arr = [1.2.3.4.5]
arr.pro = 8
for (var index in arr) { // For in traversal, the index of the element is string, not number. So index here is a string
  if (index == 2) { // Index = string; number = number; === compares both types and values, and returns false as long as the types are different.)
    break // For in supports break
  }
  console.log(index, arr[index])
}

/* Result: 0 1 1 2 */
Copy the code
const arr = [1.2.3.4.5]
arr.pro = 8
for (var index in arr) {
  if (index == 2) {
    continue // Continue is supported in for in
  }
  console.log(index, arr[index])
}

/* Result: 0 1 1 2 3 4 4 5 pro 8 */
Copy the code

Index * 1 === 2 or +index === 2 or index === ‘2’.

When a string contains only numbers, we can convert the string to the type number by multiplying it by 1 or by preending it with a plus sign:

var test = '00023' // The string contains only numbers
var test1 = test * 1 // Multiply by 1 to convert to type number
var test2 = +test // Add a plus sign before the conversion to the number type
console.log(test, typeof (test)) // 00023 string
console.log(test1, typeof (test1)) // 23 "number"
console.log(test2, typeof (test2)) // 23 "number"
Copy the code

5. for of

For of is used to traverse a custom data structure (which is not an array or an object), as well as arrays.

5.1 Traversing groups

const arr = [1.2.3.4.5]
for (let item of arr) {
  console.log(item)
}

/* Result: 1 2 3 4 5 */
Copy the code

5.2 Traversing a custom data structure

// Suppose there are three types of goods A, B and C, and there are different prices under each type of goods. Now the price is defined as follows:
const Price = {
  A: [2.3.1.5.4.5].B: [3.5].C: [0.8.0.5.1.2]}Copy the code

If you want to find the lowest price in each category, how do you do it?

So let’s do for in first

for (let key in Price) {
  console.log(key, Price[key])
}

Results: / * A (3) [2.3, 1.5, 4.5] B (2) (3, 5) C (3) [0.8, 0.5, 1.2] * /
Copy the code

If you want to directly iterate through the lowest price of the various items, you can’t do for in, you have to do something else like sort.

Let’s use for of again

for (const [key, value] of Object.entries(Price)) {
  console.log(key, value);
  let min = value[0];
  for (const p of value) {
    if(min > p) { min = p; }}console.log(`${key}The lowest price for category IS${min}Yuan `);
}

/* Result: A (3) [2.3, 1.5, 4.5] The lowest price for category A is 1.5 yuan B (2) [3, 5] The lowest price for category B is 3 yuan C (3) [0.8, 0.5, 1.2] The lowest price for Category C is 0.5 yuan */
Copy the code