angularjs - Array Reduce-Funktionalität, die im folgenden Code passiert

Hallo, ich schaue mir Beispiele für den Quellcode von Angular 2.0 auf https://angular.io/ an

Ich bin auf den folgenden Code gestoßen. Die Funktion „remaining“ ermittelt im Wesentlichen die Anzahl der Elemente im Todos-Array, bei denen done false ist. Sie funktioniert einwandfrei, ich möchte nur verstehen, was in der reduce-Funktion passiert. Ich habe eine grundlegende Vorstellung davon, wie die reduce-Funktion funktioniert, konnte die Syntax hier jedoch nicht verstehen, insbesondere count+ +!todo.done. Ich bin neu in TypeScript.

export class TodoApp{
todos: Todo[] =[
    {text:"learn angular",done:true},
    {text:"build angular app",done:false}
];

get remaining(){
    return this.todos.reduce((count:number,todo:Todo) => count+ +!todo.done, 0);
}}

Antwort #1

Wenn Sie verstehen, wie die reduce-Methode funktioniert, wissen Sie, dass der Teil im Callback die Summe von zwei Werten zurückgeben soll, nämlich inkrement - wenn die Aufgabe undone ist (füge 1 hinzu) oder nichts (null) hinzufügen, wenn die Aufgabe erledigt ist, done gleich true.

Genau das macht diese Zeile

count + +!todo.done

Der Teil +!todo.done ist nur eine verwirrende Typumwandlung und könnte umgeschrieben werden als

count + Number(!Boolean(task.done))

Und jetzt sollte es klar sein, da die toNumber-Konvertierung von booleschen Werten einer einfachen Regel folgt (ECMAScript-Spezifikation): 1 für true, 0 für false.