JavaScript for Loop 循环指南完整版

Image by Max Duzij

花几分钟重温、关于JavaScript循环指南的基础，记住一张图

在前端开发过程当中，咱们常常使用到JavaScript 提供了不少种循环和迭代的方法，常见for, for…of, for…in, while, Array.forEach, 以及 Array.* (还有一些 Array 方法相似于循环/迭代器: Array.values(), Array.keys(), Array.map(), Array.reducer()等)，而这些都是很基础的东西，那确定有人以为这些都是很基础的东西，有什么的好看头的呢？整理出来的这些东西，目的为了有个框架化、脑图化。因此简单了制做了一副JS循环的脑图。把凌乱的、碎片化的知识整合在一切，更加容易记住基础。

Simple Loop

for

只要知足特定条件，for 循环就会一直重复执行。它一般用于执行代码块必定次数。

数组循环

const arr = [1, 2, 3]
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i])
}
复制代码

break 语句

使用 break 语句来终止循环

for (let i = 0; ; i++) {
  console.log('loop')
  break
}

// output: loop
复制代码

在这种状况下，for 循环中，break 关键字会在遇到循环时退出循环。

continue 语句

continue 语句能够用来继续执行（跳过代码块的剩余部分并进入下一个循环)

for (let i = 0; i < 3; i++) {
  if (i === 2) continue
  console.log(i)
}

// output: 0, 1
复制代码

以上代码能够输入的结果来，当条件 i === 2 成立时，遇到continue 关键字跳过并进行下个循环。

for…of

for...of 语句在可迭代对象（包括 Array、Map、Set、arguments 等等）上建立了一个循环，对值的每个独特属性调用一次迭代。

string 字符串循环

let string = 'text'

for (let value of string) {
  console.log(value) // output "t", "e", "x", "t"
}
复制代码

array 数组循环

let arr = [0, 1, 2]
for (let value of arr) {
  console.log(value) // output 0, 1, 2
}
复制代码

objects 对象循环

for…of 循环仅适用于可迭代的值，对象不是可迭代的，因此直接使用 for…of 来循环对象是不可行的。如下例子:

let object = { a: 1, b: 2, c: 3 }

for (let value of object) // Error: object is not iterable
  console.log(value)
复制代码

能够使用内置的 Object 方法将对象转换为可迭代对象：.keys()、.values()或.entries()，看如下例子:

let enumerable = { property : 1, method : () => {} };

for (let key of Object.keys( enumerable )) console.log(key);
> property
> method

for (let value of Object.values( enumerable )) console.log(value);
> 1
> () => {}

for (let entry of Object.entries( enumerable )) console.log(entry);
> (2) ["prop", 1]
> (2) ["meth", ƒ()]
复制代码

也能够经过使用 for…in 循环而不使用内置的 Object 方法来实现。

for…in

for…in 循环是一种特殊的循环类型，它遍历对象的属性或数组的元素。遍历对象时，可显示可枚举的对象属性

let object = { a: 1, b: 2, c: 3, method: () => {} }

for (let value in object) {
  console.log(value, object[value])
}

// output: 1, 2, 3, () => { }
复制代码

while

一个 while 语句只要指定的条件求值为真（true）就会一直执行它的语句块。

let c = 0

while (c++ < 5) { console.log(c) } // output: 1, 2, 3, 4, 5 复制代码

do…while

与 while 很是类似, 而 do...while 语句一直重复直到指定的条件求值获得假值（false）。

var i = 1
do {
  console.log(i)
  i++
} while (i <= 5)

// output: 1, 2, 3, 4, 5
复制代码

Arrays Loops

Array 有多种迭代方法。一般咱们建议使用内置的 Array 方法进行循环操做，而不使用 for 或 while 循环。数组方法附加到 Array.prototype 属性上，这意味着直接从数组对象使用。 例如使用Array.forEach()的方法进行操做数组

forEach

定义：forEach 方法对数组的每一个元素执行一次给定的函数。 返回值： none

let arr = ['jack', 'tom', 'vincent']

arr.forEach((name) => console.log(`My name is ${name}`))

//output
// My name is jack
// My name is tom
// My name is vincent
复制代码

every

定义：检测数组全部元素是否都符合判断条件，所有符合返回true, 不然false 返回值: boolean

const isBelowThreshold = (currentValue = currentValue < 40)
const array1 = [1, 30, 39, 29, 10, 13]

console.log(array1.every(isBelowThreshold))

// output: true
复制代码

some

定义：数组中是否有知足判断条件的元素。至少有一个知足判断条件就会返回true，都没有知足则返回false 返回值: boolean

filter

定义：对数组的每一个元素执行一次给定的函数，返回新数组 返回值：新数组

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]
复制代码

map

定义：方法建立一个新数组，其结果是该数组中的每一个元素都调用一次提供的函数后的返回值。 返回值：新数组

const array1 = [1, 4, 9, 16];
// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]
复制代码

reduce && reduceRight

定义：reduce方法对数组中的每一个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。

const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15
复制代码

定义：reduceRight方法接受一个函数做为累加器（accumulator）和数组的每一个值（从右到左）将其减小为单个值。

const array1 = [[0, 1], [2, 3], [4, 5]].reduceRight(
  (accumulator, currentValue) => accumulator.concat(currentValue)
);

console.log(array1);
// expected output: Array [4, 5, 2, 3, 0, 1]
复制代码

find()& findIndex()

定义：find方法用于找出第一个符合条件的数组成员，并返回该成员，若是没有符合条件的成员，则返回undefined。

const array1 = [5, 12, 8, 130, 44];
const found = array1.find(element => element > 10);

console.log(found);
// expected output: 12
复制代码

定义：findIndex返回第一个符合条件的数组成员的位置，若是全部成员都不符合条件，则返回-1。

const array1 = [5, 12, 8, 130, 44];
const isLargeNumber = (element) => element > 13;

console.log(array1.findIndex(isLargeNumber));
// expected output: 3
复制代码

参考文献

• The Complete Guide to Loops in JavaScript
• Loops and iteration （花几分钟时间重温）
• Array （花几分钟时间重温）