1. Verwenden Sie Arrays anstelle von Objekttypen, um geordnete Sammlungen darzustellen
Der ECMAScript-Standard legt nicht die Speicherreihenfolge von Eigenschaften im Objekttyp von JavaScript fest.
Aber wenn Sie eine for..in-Schleife verwenden, um die Eigenschaften in Object zu durchlaufen, müssen Sie sich auf eine bestimmte Reihenfolge verlassen. Gerade weil ECMAScript diese Sequenz nicht explizit standardisiert, kann jede JavaScript-Ausführungs-Engine gemäß ihren eigenen Merkmalen implementiert werden, sodass die Verhaltenskonsistenz der for..in-Schleife in verschiedenen Ausführungsumgebungen nicht garantiert werden kann.
Zum Beispiel ist das Ergebnis des folgenden Codes beim Aufruf der Report-Methode unsicher:
function report(highScores) {
var result = "";
var i = 1;
for (var name in highScores) { // unpredictable order
result += i + ". " + name + ": " +
highScores[name] + "\n";
i++;
}
return result;
}
report([{ name: "Hank", points: 1110100 },
{ name: "Steve", points: 1064500 },
{ name: "Billy", points: 1050200 }]);
// ?
Wenn Sie wirklich sicherstellen müssen, dass die laufenden Ergebnisse auf der Reihenfolge der Daten basieren, geben Sie der Verwendung des Array-Typs zur Darstellung der Daten Vorrang statt der direkten Verwendung des Objekttyps. Vermeiden Sie gleichzeitig die Verwendung von for..in-Schleifen und verwenden Sie explizite for-Schleifen:
function report(highScores) {
var result = "";
for (var i = 0, n = highScores.length; i < n; i++) {
var score = highScores[i];
result += (i + 1) + ". " +
score.name + ": " + score.points + "\n";
}
return result;
}
report([{ name: "Hank", points: 1110100 },
{ name: "Steve", points: 1064500 },
{ name: "Billy", points: 1050200 }]);
// "1. Hank: 1110100 2. Steve: 1064500 3. Billy: 1050200\n"
Ein weiteres Verhalten, das besonders reihenfolgeabhängig ist, ist die Berechnung von Gleitkommazahlen:
var ratings = {
"Good Will Hunting": 0.8,
"Mystic River": 0.7,
"21": 0.6,
"Doubt": 0.9
};
In Punkt 2 wurde erwähnt, dass die Additionsoperation von Gleitkommazahlen nicht einmal das Kommutativgesetz erfüllen kann:
Die Ergebnisse von (0,1 0,2) 0,3 und 0,1 (0,2 0,3) sind jeweils
0,600000000000001 und 0,6
Für arithmetische Operationen mit Gleitkommazahlen kann daher keine beliebige Reihenfolge verwendet werden:
var total = 0, count = 0;
for (var key in ratings) { // unpredictable order
total += ratings[key];
count++;
}
total /= count;
total; // ?
Wenn die Durchlaufreihenfolge von for..in unterschiedlich ist, ist auch das endgültige Gesamtergebnis unterschiedlich. Im Folgenden sind die beiden Berechnungsreihenfolgen und ihre entsprechenden Ergebnisse aufgeführt:
(0.8 + 0.7 + 0.6 +0.9) / 4 // 0.75 (0.6 + 0.8 + 0.7 +0.9) / 4 // 0.7499999999999999
Natürlich besteht eine Lösung für Probleme wie die Berechnung von Gleitkommazahlen darin, sie durch Ganzzahlen darzustellen. Beispielsweise vergrößern wir die obige Gleitkommazahl zunächst um das Zehnfache und verkleinern sie anschließend Berechnung ist 10 Mal abgeschlossen:
(8+ 7 + 6 + 9) / 4 / 10 // 0.75 (6+ 8 + 7 + 9) / 4 / 10 // 0.75
2. Fügen Sie niemals aufzählbare Attribute zu Object.prototype hinzu
Wenn Ihr Code auf for..in-Schleifen angewiesen ist, um Eigenschaften im Objekttyp zu durchlaufen, fügen Sie Object.prototype keine aufzählbaren Eigenschaften hinzu.
Bei der Erweiterung der JavaScript-Ausführungsumgebung ist es jedoch häufig erforderlich, dem Object.prototype-Objekt neue Eigenschaften oder Methoden hinzuzufügen. Sie können beispielsweise eine Methode hinzufügen, um alle Attributnamen in einem Objekt abzurufen:
Object.prototype.allKeys = function() {
var result = [];
for (var key in this) {
result.push(key);
}
return result;
};
Aber das Ergebnis sieht so aus:
({ a: 1, b: 2, c: 3}).allKeys(); // ["allKeys", "a", "b","c"]Eine mögliche Lösung besteht darin, Funktionen zu verwenden, anstatt neue Methoden für Object.prototype zu definieren:
function allKeys(obj) {
var result = [];
for (var key in obj) {
result.push(key);
}
return result;
}
Wenn Sie jedoch wirklich eine neue Eigenschaft zu Object.prototype hinzufügen müssen und nicht möchten, dass die Eigenschaft in der for..in-Schleife durchlaufen wird, können Sie die von der ES5-Umgebung bereitgestellte Object.defineProject-Methode verwenden:
Object.defineProperty(Object.prototype, "allKeys", {
value: function() {
var result = [];
for (var key in this) {
result.push(key);
}
return result;
},
writable: true,
enumerable: false,
configurable: true
});
Der Schlüsselteil des obigen Codes besteht darin, das enumerable-Attribut auf false zu setzen. In diesem Fall kann die Eigenschaft nicht in der for..in-Schleife durchlaufen werden.
3. Verwenden Sie für die Array-Durchquerung die for-Schleife anstelle der for..in-Schleife
Obwohl dieses Problem im vorherigen Punkt erwähnt wurde, können Sie für den folgenden Code sehen, wie hoch der endgültige Durchschnitt ist?
var scores = [98, 74, 85, 77, 93, 100, 89];
var total = 0;
for (var score in scores) {
total += score;
}
var mean = total / scores.length;
mean; // ?
Rechnerisch sollte das Endergebnis 88 sein.
Aber vergessen Sie nicht, dass in der for..in-Schleife immer der Schlüssel und nicht der Wert durchlaufen wird. Das Gleiche gilt für Arrays. Daher ist die Punktzahl in der for..in-Schleife oben nicht die erwartete Wertereihe wie 98, 74 usw., sondern eine Reihe von Indizes wie 0, 1 usw.
Sie könnten also denken, das Endergebnis sei:
(0 1 … 6) / 7 = 21
Aber auch diese Antwort ist falsch. Ein weiterer wichtiger Punkt ist, dass der Schlüsseltyp in der for..in-Schleife immer ein String-Typ ist, sodass der Operator hier tatsächlich die Spleißoperation von Strings ausführt:
Die erhaltene Endsumme ist tatsächlich die Zeichenfolge 00123456. Der in einen numerischen Typ umgewandelte Wert dieser Zeichenfolge ist 123456 und wird dann durch die Anzahl der Elemente, 7, dividiert, um das Endergebnis zu erhalten: 17636,571428571428
Für die Array-Traversierung ist es daher am besten, die Standard-for-Schleife zu verwenden
4. Priorisieren Sie die Verwendung von Traversal-Methoden gegenüber Schleifen
Bei der Verwendung von Schleifen kann leicht gegen das DRY-Prinzip (Don't Repeat Yourself) verstoßen werden. Dies liegt daran, dass wir normalerweise die Methode „Kopieren und Einfügen“ wählen, um zu vermeiden, dass Absätze von Zirkelanweisungen handschriftlich geschrieben werden. Dies führt jedoch zu einer Menge doppeltem Code im Code, und Entwickler werden sinnlos „das Rad neu erfinden“. Noch wichtiger ist, dass beim Kopieren und Einfügen leicht die Details in der Schleife übersehen werden, z. B. der Startindexwert, die Beendigungsbedingung usw.
Zum Beispiel tritt dieses Problem bei der folgenden for-Schleife auf, vorausgesetzt, dass n die Länge des Sammlungsobjekts ist:
for (var i = 0; i <= n; i++) { ... }
// 终止条件错误，应该是i < n
for (var i = 1; i < n; i++) { ... }
// 起始变量错误，应该是i = 0
for (var i = n; i >= 0; i--) { ... }
// 起始变量错误，应该是i = n - 1
for (var i = n - 1; i > 0; i--) { ... }
// 终止条件错误，应该是i >= 0
可见在循环的一些细节处理上很容易出错。而利用JavaScript提供的闭包(参见Item 11)，可以将循环的细节给封装起来供重用。实际上，ES5就提供了一些方法来处理这一问题。其中的Array.prototype.forEach是最简单的一个。利用它，我们可以将循环这样写：
// 使用for循环
for (var i = 0, n = players.length; i < n; i++) {
players[i].score++;
}
// 使用forEach
players.forEach(function(p) {
p.score++;
});
除了对集合对象进行遍历之外，另一种常见的模式是对原集合中的每个元素进行某种操作，然后得到一个新的集合，我们也可以利用forEach方法实现如下：
// 使用for循环
var trimmed = [];
for (var i = 0, n = input.length; i < n; i++) {
trimmed.push(input[i].trim());
}
// 使用forEach
var trimmed = [];
input.forEach(function(s) {
trimmed.push(s.trim());
});
但是由于这种由将一个集合转换为另一个集合的模式十分常见，ES5也提供了Array.prototype.map方法用来让代码更加简单和优雅：
var trimmed = input.map(function(s) {
return s.trim();
});
另外，还有一种常见模式是对集合根据某种条件进行过滤，然后得到一个原集合的子集。ES5中提供了Array.prototype.filter来实现这一模式。该方法接受一个Predicate作为参数，它是一个返回true或者false的函数：返回true意味着该元素会被保留在新的集合中；返回false则意味着该元素不会出现在新集合中。比如，我们使用以下代码来对商品的价格进行过滤，仅保留价格在[min, max]区间的商品：
listings.filter(function(listing) {
return listing.price >= min && listing.price <= max;
});当然，以上的方法是在支持ES5的环境中可用的。在其它环境中，我们有两种选择： 1. 使用第三方库，如underscore或者lodash，它们都提供了相当多的通用方法来操作对象和集合。 2. 根据需要自行定义。
比如，定义如下的方法来根据某个条件取得集合中前面的若干元素：
function takeWhile(a, pred) {
var result = [];
for (var i = 0, n = a.length; i < n; i++) {
if (!pred(a[i], i)) {
break;
}
result[i] = a[i];
}
return result;
}
var prefix = takeWhile([1, 2, 4, 8, 16, 32], function(n) {
return n < 10;
}); // [1, 2, 4, 8]
为了更好的重用该方法，我们可以将它定义在Array.prototype对象上，具体的影响可以参考Item 42。
Array.prototype.takeWhile = function(pred) {
var result = [];
for (var i = 0, n = this.length; i < n; i++) {
if (!pred(this[i], i)) {
break;
}
result[i] = this[i];
}
return result;
};
var prefix = [1, 2, 4, 8, 16, 32].takeWhile(function(n) {
return n < 10;
}); // [1, 2, 4, 8]
只有一个场合使用循环会比使用遍历函数要好：需要使用break和continue的时候。 比如，当使用forEach来实现上面的takeWhile方法时就会有问题，在不满足predicate的时候应该如何实现呢？
function takeWhile(a, pred) {
var result = [];
a.forEach(function(x, i) {
if (!pred(x)) {
// ?
}
result[i] = x;
});
return result;
}
我们可以使用一个内部的异常来进行判断，但是它同样有些笨拙和低效：
function takeWhile(a, pred) {
var result = [];
var earlyExit = {}; // unique value signaling loop break
try {
a.forEach(function(x, i) {
if (!pred(x)) {
throw earlyExit;
}
result[i] = x;
});
} catch (e) {
if (e !== earlyExit) { // only catch earlyExit
throw e;
}
}
return result;
}
可是使用forEach之后，代码甚至比使用它之前更加冗长。这显然是存在问题的。 对于这个问题，ES5提供了some和every方法用来处理存在提前终止的循环，它们的用法如下所示：
[1, 10, 100].some(function(x) { return x > 5; }); // true
[1, 10, 100].some(function(x) { return x < 0; }); // false
[1, 2, 3, 4, 5].every(function(x) { return x > 0; }); // true
[1, 2, 3, 4, 5].every(function(x) { return x < 3; }); // false
这两个方法都是短路方法(Short-circuiting)：只要有任何一个元素在some方法的predicate中返回true，那么some就会返回；只有有任何一个元素在every方法的predicate中返回false，那么every方法也会返回false。
因此，takeWhile就可以实现如下：
function takeWhile(a, pred) {
var result = [];
a.every(function(x, i) {
if (!pred(x)) {
return false; // break
}
result[i] = x;
return true; // continue
});
return result;
}
实际上，这就是函数式编程的思想。在函数式编程中，你很少能够看见显式的for循环或者while循环。循环的细节都被很好地封装起来了。
5、总结
以上就是本文的全部内容，希望通过这篇文章大家更加了解javascript循环的原理，大家共同进步。
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
