国际热核聚变实验堆|web前端 - JS中的4个for循环 javascript

在 ECMAScript5（简称 ES5）中，有三个循环。在 2015 年 6 月发布的 ECMAScript6（简称 ES6）中，新增了一种循环类型。他们是：
for
for in
for each
for of
今天，就让我们一起来看看这4个 for 循环。
1、简单的for循环
我们来看看最常见的写法：
const arr = [1 2 3
;
for(let i = 0; i < arr.length; i++) {
console.log(arr[i
);

当循环中数组的长度没有变化时，我们应该将数组的长度存储在一个变量中，这样效率会更高。下面是改进的写法：
const arr = [1 2 3
;
for(let i = 0 len = arr.length; i <len; i++) {
console.log(arr[i
);

2、for-in
2.1、使用 for-in
通常，我们可以使用for-in来遍历数组的内容，代码如下：
const arr = [1 2 3
;
let index;
for(index in arr) {
console.log(“arr[“ + index + “
= “ + arr[index
);

一般来说，操作的结果如下：
arr[0
= 1
arr[1
= 2
arr[2
= 3
但这样做往往会产生问题。
2.2、 for-in的真相
for-in 循环遍历对象的属性，而不是数组的索引。所以for-in遍历的对象不限于数组，也可以遍历对象。示例如下：
const person = {
fname: “san”
lname: “zhang”
age: 99
;
let info;
for(info in person) {
console.log(“person[“ + info + “
= “ + person[info
);

结果如下：
person[fname
= san
person[lname
= zhang
person[age
= 99
需要注意的是for-in遍历属性的顺序是不确定的，即输出结果的顺序与对象中属性的顺序无关，也与属性的字母顺序无关，也没有任何其他顺序。
2.3 、关于数组的真相
数组是Javascript中的一个对象， Array的索引是属性名。事实上， Javascript 中的“数组”有点误导。
Javascript 中的数组与大多数其他语言中的数组不同。首先， Javascript 中的数组在内存中不是连续的。
其次， Array 的索引不是指偏移量。其实Array的索引不是Number类型，而是String类型。之所以能正确使用 arr[0
之类的写法，是因为语言可以自动改变 Number 类型。 0 转换为 String 类型的“0” 。
因此， Javascript 中从来没有 Array 索引，只有“0”、“1”等属性。
有趣的是，每个 Array 对象都有一个 length 属性，这使得它的行为更像其他语言中的数组。
但是为什么遍历Array对象的时候不输出length属性呢？那是因为for-in只能遍历“可枚举属性” ， length是不可枚举属性，实际上Array对象还有很多其他不可枚举属性。
现在，让我们回过头来看看使用 for-in 循环数组的例子。我们修改前面遍历数组的例子：
const arr = [1 2 3
;
arr.name = “Hello world”;
let index;
for(index in arr) {
console.log(“arr[“ + index + “
= “+ arr[index
);

操作的结果是：
arr[0
= 1
arr[1
= 2
arr[2
= 3
arr[name
= Hello world
我们看到 for-in 遍历我们新的“name”属性，因为 for-in 遍历对象的所有属性，而不仅仅是“索引” 。
同时，需要注意的是，这里输出的索引值，即“0”、“1”、“2”不是Number类型，而是String类型，因为它们是作为属性输出的，不是索引，这是否意味着我们只能输出数组的内容，而不能向我们的 Array 对象添加新属性？答案是否定的。
因为for-in不仅遍历数组本身的属性，还会遍历数组原型链上的所有可枚举属性。让我们看一个例子：