JS 中的各种 for 循环

一坑未填又开一坑….

先把所有的 for 循环列出吧

1. for 原始 for 循环语句

经典的 for 循环,所有新手一开始都会写的 demo 基本都会用到的 for 循环吧,我就不多讲了,上一个学生时代(伪)的*号金字塔吧。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const max = 5
for (let n = 1; n < max; n++) {
let str = ''
for (let i = 1; i < max - n; i++) {
str += ' '
}
for (let j = 1; j < 2 * n; j++) {
str += '*'
}
console.log(str);
}
// *
// ***
// *****
// *******

2. for...in 为遍历对象属性而构建的 for 循环

for...in 语句以任意顺序遍历一个对象的除Symbol以外的可枚举属性。

先上一个 demo 配合着来看,先是对象

1
2
3
4
5
6
7
8
9
const obj = { a: 1, b: 2, c: 3 };

for (let prop in obj) {
console.log(prop);
}

// a
// b
// c

再看一下用它来遍历数组

1
2
3
4
5
6
7
8
9
const arr = ['a', 'b', 'c'];

for (let prop in arr) {
console.log(prop);
}

// 0
// 1
// 2

可以看到,它遍历对象的属性名,MDN最后有一句:

“它最常用的地方应该是用于调试,可以更方便的去检查对象属性(通过输出到控制台或其他方式)”

????? ,可我实一般调试时都是直接把整个对象都打印出来啊

所以 for...in 是为遍历对象属性而构建的 for 循环,虽然数组可以用,但是并没有Dio用….

并且它会枚举所有属性,包含了被迭代的对象的原型,实际工作开发,这些对象很可能是不需要出现的属性,比如VueJS的 __ob_

虽然可以配合使用 hasOwnProperty() 来处理,但是太蛮烦了,最好用的场景可能就是这个同时输出键名和键值的场景

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const triangle = {a: 1, b: 2, c: 3};

function ColoredTriangle() {
this.color = 'red';
}

ColoredTriangle.prototype = triangle;

const obj = new ColoredTriangle();

for (let prop in obj) {
if (obj.hasOwnProperty(prop)) {
console.log(`obj.${prop} = ${obj[prop]}`);
}
}

// obj.color = red

3. for...of 遍历可迭代对象的可枚举属性

for...of 可迭代的对象就多了(包括 Array,Map,Set,String,TypedArray,arguments 对象,DOM 集合等等,但是不包括 Object 哦),在这些 可迭代 对象上创建一个迭代循环,调用自定义迭代钩子,并为每个不同属性的值执行语句


4. for await...of

ES9的内容???我先看看文档。

未完成…