JavaScript的for從懵懂到辨明

loonggg 發(fā)布于2019-08-26 12:02 / 1926人閱讀

摘要：對于每個枚舉的屬性，部分都會被執(zhí)行。被迭代枚舉的對象。三對數(shù)組的每個元素執(zhí)行一次提供的函數(shù)。沒有辦法終止會跳出循環(huán)，除了拋出一個異常。當(dāng)?shù)竭_(dá)包含值的項(xiàng)時，整個數(shù)組的第一個項(xiàng)被移除了，這導(dǎo)致所有剩下的項(xiàng)前移了一個位置。

前言

初學(xué)JavaScript的時候，知道有各種for的時候，懵懵懂懂，也許是因?yàn)闆]有系統(tǒng)學(xué)習(xí)的緣故。現(xiàn)在我們把各種for都挨個辨明。

一、for

創(chuàng)建一個循環(huán)，包含三個可選表達(dá)式。三個可選表達(dá)式在圓括號中，由分號分隔。后跟一個循環(huán)中執(zhí)行的語句或塊語句。

語法

for ([initialization]; [condition]; [final-expression])
    statement

initialization

初始化語句。可寫表達(dá)式、賦值語句、變量聲明。

condition

循環(huán)條件表達(dá)式。如果表達(dá)式結(jié)果為true，statement會被執(zhí)行。如果表達(dá)式結(jié)果為false，那么執(zhí)行流程跳到for語句結(jié)構(gòu)后面的第一條語句。不寫表達(dá)式，就是永遠(yuǎn)為true。

final-expression

每次循環(huán)的最后都要執(zhí)行的表達(dá)式。執(zhí)行時機(jī)是在下一次condition的計算之前。

statement

只要condition的結(jié)果為true就會被執(zhí)行的語句。多條語句使用塊語句（{...}）來包含。沒有語句執(zhí)行，使用空語句（;）。

示例

我想輸出五個數(shù)字。

for (let i = 0; i < 5; i++)
    console.log(i);
/*
0
1
2
3
4
*/

另一種寫法輸出五個數(shù)字。可選的三個表達(dá)式，多行語句，需要使用{}包含起來。

for (let i = 0; ; i++) {
    if (i >= 5)
        break;
    console.log(i);
}
/*
0
1
2
3
4
*/

注意，如果不寫條件表達(dá)式，就要確保循環(huán)體內(nèi)能夠跳出，防止死循環(huán)。break可以跳出循環(huán)。

二、for...in

以任意順序遍歷一個對象的可枚舉屬性。對于每個枚舉的屬性，...部分都會被執(zhí)行。

語法

for (variable in object) {...}

variable

每次迭代的時候，將對象的屬性名分配給變量。

object

被迭代枚舉的對象。

示例

我想輸出對象里所有的屬性和值。

let o = {
    a: 1,
    b: 2,
    c: 3
};
for (const v in o) {
    console.log(`o.${v} = ${o[v]}`);
}
/*
o.a = 1
o.b = 2
o.c = 3
*/

可以看見for...in把所有的可枚舉屬性都枚舉了出來，v的類型是String，所以訪問當(dāng)前遍歷到的屬性值使用了關(guān)聯(lián)數(shù)組o[v]的方式。

for...in在遍歷的時候，是以任意順序遍歷的。

let o = [];
o[0] = 1;
o["one"] = 2;
o[2] = 3;
for (const v in o) {
    console.log(`o[${v}] = ${o[v]}`);
}
/*
o[0] = 1
o[2] = 3
o[one] = 2
*/

因此當(dāng)遇到對迭代訪問順序很重要的數(shù)組時，最好用整數(shù)索引。

我想累加數(shù)組所有的成員。

Array.prototype.age = 97;
let o = [1,2];
let sum = 0;
for (const v in o) {
    sum += o[v];
    console.log(`o[${v}] = ${o[v]}`);
}
console.log(`sum = ${sum}`);
/*
o[0] = 1
o[1] = 2
o[age] = 97
sum = 100
*/

很顯然這里不符合我們的預(yù)期，因?yàn)?b>for...in循環(huán)語句將返回所有可枚舉屬性，包括非整數(shù)類型的名稱和繼承的那些。還會獲取到原型鏈上的可枚舉屬性。

我只想累加自身所有屬性。

Array.prototype.age = 97;
let arr = [1, 2];
let sum = 0;
for (const v in arr) {
    if (arr.hasOwnProperty(v)) {
        sum += arr[v];
    }
    console.log(`arr[${v}] = ${arr[v]}`);
}
console.log(`sum = ${sum}`);
/*
o[0] = 1
o[1] = 2
o[age] = 97
sum = 3
*/

如果你只要考慮對象本身的屬性，而不是它的原型，那么使用Object.getOwnPropertyNames()或執(zhí)行Object.prototype.hasOwnProperty()來確定某屬性是否是對象本身的屬性（也能使用propertyIsEnumerable）。

三、Array.prototype.forEach()

對數(shù)組的每個元素執(zhí)行一次提供的函數(shù)。返回值為undefined。

語法

Array.forEach(callback[, thisArg])

callback

為數(shù)組每個元素執(zhí)行的函數(shù)，這個函數(shù)接受三個參數(shù)。

currentValue

數(shù)組中正在處理的當(dāng)前元素值。

index

數(shù)組中正在處理的當(dāng)前元素的索引。

array

forEach()方法正在操作的數(shù)組。

thisArg

可選參數(shù)。當(dāng)執(zhí)行回調(diào) 函數(shù)時用作this的值(參考對象)。

示例

我想輸出所有元素。

function logArrayElements(element, index, array) {
    console.log(`a[${index}] = ${element}`);
}
[4, 2, 3].forEach(logArrayElements);
/*
a[0] = 4
a[1] = 2
a[2] = 3
*/

forEcah()會跳過已經(jīng)刪除或者為初始化的項(xiàng)（但不包括那些值為undefined的項(xiàng)，例如在稀疏數(shù)組上）。

function logArrayElements(element, index, array) {
    console.log(`a[${index}] = ${element}`);
}
[4, , 3].forEach(logArrayElements);
[1, undefined, 3].forEach(logArrayElements);
/*
a[0] = 4
a[2] = 3
a[0] = 1
a[1] = undefined
a[2] = 3
*/

沒有辦法終止會跳出forEcah()循環(huán)，除了拋出一個異常。

function logArrayElements(element, index, array) {
    console.log(`a[${index}] = ${element}`);
    break;
}
[1, 2, 3].forEach(logArrayElements);
/*
Uncaught SyntaxError: Illegal break statement
    at Array.forEach ()
    at :5:11
*/

使用return也無法中止循環(huán)。

使用thisArg，舉個勉強(qiáng)的例子。通過自定義的add()方法，計算所添加數(shù)組的和sum和成員數(shù)count。

function Counter() {
    this.sum = 0;
    this.count = 0;
}
Counter.prototype.add = function(array) {
    array.forEach(function(element) {
        this.sum += element;
        ++this.count;
    }, this);
};
let obj = new Counter();
obj.add([1, 3, 5, 7]);
console.log(obj.count);  // 4 === (1+1+1+1)
console.log(obj.sum);  // 16 === (1+3+5+7)
/*
4
16
*/

注意：如果使用箭頭函數(shù)表達(dá)式傳入函數(shù)參數(shù)，thisArg參數(shù)會被忽略，因?yàn)榧^函數(shù)在詞法上綁定了this值。

如果數(shù)組在迭代時被修改了，則其他元素會被跳過。

let words = ["one", "two", "three", "four"];
words.forEach(function(word) {
  console.log(word);
  if (word === "two") {
    words.shift();
  }
});
/*
one
two
four
*/

當(dāng)?shù)竭_(dá)包含值"two"的項(xiàng)時，整個數(shù)組的第一個項(xiàng)被移除了，這導(dǎo)致所有剩下的項(xiàng)前移了一個位置。因?yàn)樵?b>"four"現(xiàn)在在數(shù)組更前的位置，"three"會被跳過。forEach()不會在迭代之前創(chuàng)建數(shù)組的副本。

四、for...of

for...of語句在可以迭代的對象（Array、Map、Set、String、TypedArray、arguments對象等等）上創(chuàng)建一個迭代循環(huán)，調(diào)用自定義迭代鉤子，并為每個不同屬性的值執(zhí)行語句。

語法

for (variable of iterable) {
    ...
}

variable

在每次迭代中，將不同屬性的值分配給變量。

iterable

被迭代枚舉其屬性的對象。

示例迭代Array

let a = [10, 20, 30];
for (let v of a) {
    console.log(v);
}
/*
10
20
30
*/

迭代String

let s = "Tang";
for (let v of s) {
    console.log(v);
}
/*
T
a
n
g
*/

迭代arguments

(function() {
    for (let v of arguments) {
        console.log(v);
    }
}
)(1, 2, 3);
/*
1
2
3
*/

區(qū)別

無論是for...in還是for...of語句都是迭代一些東西。它們之間的主要區(qū)別在于它們的迭代方式。

for...in語句以原始插入順序迭代對象的可枚舉屬性。

for...of語句遍歷可迭代對象定義要迭代的數(shù)據(jù)。

以下示例顯示了與Array一起使用時，for...of循環(huán)和for...in循環(huán)之間的區(qū)別。

Object.prototype.objCustom = function() {}; 
Array.prototype.arrCustom = function() {};

let iterable = [3, 5, 7];
iterable.foo = "hello";

for (let i in iterable) {
  console.log(i);
}
/*
0
1
2
foo
arrCustom
objCustom
*/

for (let i in iterable) {
  if (iterable.hasOwnProperty(i)) {
    console.log(i);
  }
}
/*
0
1
2
foo
*/

for (let i of iterable) {
  console.log(i);
}
/*
3
5
7
*/