1, the loop

A loop is the repeated execution of a piece of code based on a condition

1.1, for loop

Grammar:

for (1Declare loop variables;2Judge cyclic conditions;3Update loop variable) {// 4 Code block to execute
}
// Execute in sequence 1 -> 2 -> 4 -> 3
Copy the code

Example:

for(let i = 0; i < 10; i++) {
  console.log(i)
  // Output 0 to 9
}
/ / or
for(let i = 0; i < 10&& i ! =5; i++) {
  console.log(i)
  // Output 0 to 4
}
/ / or
for(let i = 0; i < 0 || i < 6; i++) {
  console.log(i)
  // Output 0 to 5
}
Copy the code

Note:

The for loop has three expressions: 1: declare a loop variable; 2. Judge cyclic conditions; 3: updates loop variables. Between three expressions, use; Symbol split, expression can be omitted, but two; You can’t miss one sign
The for loop evaluates and then executes, just like the while loop
Three expressions of the for loop, can have multiple parts with multiple judgment conditions && and | | connection

The for loop is nested

Example:

// multiply table
for (let i = 1; i <10; i++) {
  let arr = []
  for (let k = 1; k <10; k++) {
    arr.push(`${i}x${k}=${i * k}`)}console.log(arr)
}
Copy the code

1.2. The while loop

Grammar:

while(Condition) {block of code to execute}Copy the code

Example:

let num = 0
while (num < 10) {console.log(num)
  num++
}
// Output 0 to 9
Copy the code

Note:

whileThe loop will loop over the code block as long as the condition specified istrue, so don’t forget to increment the variables used in the condition

1.3. Do while loop

Grammar:

do{block of code to execute}while(conditions);Copy the code

Example:

let i = 6

do {
  console.log(i)
  i++
}
while (i < 5)
Copy the code

Note:

The do while loop is a variant of the while loop. It executes a block of code first. And then we judge the condition, and we repeat as long as the condition is true
The loop is executed at least once, even if the condition is false

1.4. Break out of the loop

Sometimes you need to skip a loop or terminate the entire loop

continue

Skip an iteration in the loop

Example:

for (i = 0; i < 5; i++) {
  if (i === 3) { continue }
  console.log(i)
}
// Output 0, 1, 2, 4
Copy the code

Note:

The statement executed after continue in the for loop is the loop variable update statement i++
In the while and do while loops, the statement executed after continue is a loop condition and must be used after i++, otherwise continue will skip i++ and enter an infinite loop

break

Jump out and terminate the entire loop

Example:

for (i = 0; i < 5; i++) {
  if (i === 2) { break }
  console.log(i)
}
Copy the code

Note:

If the loop has multiple layers, thenbreakYou can only jump one floor

Two, traverse

Traversal means that each node in the data is visited one by one along a certain search route

For in 2.1

for… The IN statement is used to loop over an enumerable property of an array or object, either by breaking or throwing

Grammar:

// 'variable' is used to specify variables, which can be array elements or object attributes

for(variableinObject) {execute code here}Copy the code

Example:

let obj = {
  name: 'Joe'.age: 18
}

let arr = ['a'.'b'.'c']

for (let i in obj) {
  console.log(i)
}
// Print name age

for (let i in arr) {
  console.log(i)
}
// Output 0, 1, 2
Copy the code

2.2, the for of

for… The of statement creates an iteration loop over the iterable, calls the custom iteration hook, and executes statements for each of the different properties (including Array, Map, Set, String, TypedArray, arguments, etc., excluding Object), which can be broken or thrown

Grammar:

for (variable ofIterable) {// Operation statement
}
Copy the code

Example:

let arr = ['a'.'b'.'c']

let obj = {
  name: 'Joe'.age: 18.sex: 'male'
}

for (let i of arr) {
  console.log(i)
}
// output a, b, and c

for (let i of obj) {
  console.log(i)
}
// obj is not iterable
Copy the code

2.3, forEach

Execute the given function once for each item in the array that has valid values, in ascending order. Items that are deleted or not initialized are skipped (such as [1,,2]). If you need to interrupt, use a try/catch with throw

Grammar:

array.forEach(callback(currentValue, index, array))
Copy the code

Example:

let arr = ['a'.'b'.'c']

arr.forEach((item, index) = > {
  console.log(` value:${item}The subscript${index}`)})// Output value: A subscript :0 Value: B subscript :1 Value: C subscript :2
Copy the code

Terminating the loop:

try {
  arr.forEach((item, index) = > {
    if (index === 1) {
      throw 'stop'
    }
    console.log(` value:${item}The subscript:${index}`)})}catch (error) {
  console.log(error)
}
// Output value :a subscript :0 terminates
Copy the code

2.4, the map

Array traversal, returns a new array, the elements in the array for the original array elements after the call function values

Grammar:

array.map(function(currentValue,index,arr), thisValue)
Copy the code

Example:

let arr = [0.1.2.3.4.5]
let val = arr.map((item= > {
  return item + 10
}))
console.log(val)
// Output [10, 11, 12, 13, 14, 15]
Copy the code

2.5, the filter

Array traversal returns a new array containing all the elements of the test implemented through the provided function

Grammar:

let newArray = arr.filter(callback(element, index, array), thisArg)
Copy the code

Example:

let arr = [0.1.2.3.4.5]
function fn(e) {
  return e - 2 > 1
}
let arr2 = arr.filter(fn)
console.log(arr2)
// Output [3, 4, 5]
Copy the code

2.6, the keys ()

Object traversal, which returns an array containing all the key names of the object’s own (not inherited) enumerable properties (not including the Symbol property) and no methods on the prototype

Grammar:

Object.keys(obj)
Copy the code

Example:

let obj = {
  name: 'Joe'.age: 18.sex: 'male'
}
console.log(Object.keys(obj))
// print ["name", "age", "sex"]
Copy the code

2.7, the values ()

Object traversal returns an array of target object values whose elements are enumerable property values found on the target object

Grammar:

Object.values(obj)
Copy the code

Example:

let obj = {
  name: 'Joe'.age: 18.sex: 'male'
}
console.log(Object.keys(obj))
// output [" zhang SAN ", 18, "male "]
Copy the code

If you think it is helpful, I am @pengduo, welcome to like and follow the comments; END

The articles

Use NVM to manage node.js version and change NPM Taobao image source
More detailed! Vue’s nine ways of communication
Wechat small program to achieve search keyword highlighting
Env files are used in vUE to store global environment variables and configure vUE startup and package commands
More detailed! Vuex hands-on tutorials

Personal home page

CSDN
GitHub
Jane’s book
Blog garden
The Denver nuggets

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Detail JS common loop and traversal

1, the loop

1.1, for loop

The for loop is nested

1.2. The while loop

1.3. Do while loop

1.4. Break out of the loop

continue

break

Two, traverse

For in 2.1

2.2, the for of

2.3, forEach

2.4, the map

2.5, the filter

2.6, the keys ()

2.7, the values ()

Detail JS common loop and traversal

1, the loop

1.1, for loop

The for loop is nested

1.2. The while loop

1.3. Do while loop

1.4. Break out of the loop

continue

break

Two, traverse

For in 2.1

2.2, the for of

2.3, forEach

2.4, the map

2.5, the filter

2.6, the keys ()

2.7, the values ()

Related Posts

Front-end, deploy dist to Nginx

JS core principle (1) — the running mechanism of events

Do a zen path homepage drag-and-drop effect based on VUE