Lassen Sie uns kurz über die sechs kleinen Funktionen von ES6 sprechen

Vorwort

Dieser Artikel gibt hauptsächlich eine kurze Einführung in ES6. Vielleicht wissen Sie noch nicht, was ES6 ist. Tatsächlich handelt es sich um eine neue JavaScript-Spezifikation. Wenn Sie in dieser Zeit, in der alle sehr beschäftigt sind, ES6 schnell verstehen möchten, lesen Sie bitte weiter, um mehr über die sechs Hauptfunktionen der neuesten Generation von JavaScript, der heute beliebtesten Programmiersprache, zu erfahren.

ES6 hat im letzten Jahr viele Fortschritte gebracht. Hier sind 6 meiner liebsten neuen Funktionen in JS.

1. Objekt[Schlüssel]

Manchmal ist es nicht möglich, bei der Deklaration von Objektvariablen alle Schlüssel/Werte festzulegen, sodass Sie nach der Deklaration Schlüssel/Werte hinzufügen müssen.

let myKey = 'key3';
let obj = {
  key1: 'One',
  key2: 'Two'
};
obj[myKey] = 'Three';

Das ist im besten Fall etwas umständlich, verwirrend und im schlimmsten Fall etwas hässlich.

ES6 bietet Entwicklern eine elegantere Möglichkeit:

let myKey = 'variableKey';
let obj = {
  key1: 'One',
  key2: 'Two',
  [myKey]: 'Three' /* yay! */
};

Entwickler können [] verwenden, um Variablen zu umschließen und eine Anweisung zu verwenden, um alles auszuführen Funktionen.

2. Pfeilfunktionen

Sie müssen nicht mit allen Änderungen in ES6 Schritt halten und haben auch für einige Verwirrung gesorgt JS-Entwickler. Obwohl ich viele Blogbeiträge über die Eigenschaften von Pfeilfunktionen schreiben könnte, möchte ich darauf hinweisen, wie Pfeilfunktionen eine Möglichkeit bieten, Code für einfache Funktionen zu komprimieren.

// Adds a 10% tax to total
let calculateTotal = total => total * 1.1;
calculateTotal(10) // 11
 
// Cancel an event -- another tiny task
let brickEvent = e => e.preventDefault();
document.querySelector('div').addEventListener('click', brickEvent);

Ohne Funktionen und Rückgabeschlüsselwörter müssen Sie manchmal nicht einmal () hinzufügen, um eine kurze Code-Schreibmethode zum Schreiben von Funktionen bereitzustellen . .

3. find/findIndex

JS stellt Entwicklern die Methode Array.prototype.indexOf zur Verfügung, um den Index des angegebenen Elements im Array abzurufen, indexOf stellt jedoch keine Basis bereit zur Beurteilung. Die Methoden „find“ und „findIndex“ stellen das erste Element und den Index bereit, die die Berechnungsbedingungen erfüllen.

let age = [12,19,6,4];
 
let firstAdult = ages.find(age => age >= 18); // 19
let firstAdultIndex = ages.findIndex(age => age >= 19); // 1

4....Erweiterter Modifikator

Der erweiterte Modifikator gibt an, dass Arrays und iterierbare Objekte als Zeit bezeichnet werden sollen in einzelne Parameter aufgeteilt werden:

// Pass to function that expects separate multiple arguments
// Much like Function.prototype.apply() does
let numbers = [9, 4, 7, 1];
Math.min(...numbers); // 1
 
// Convert NodeList to Array
let divsArray = [...document.querySelectorAll('div')];
 
// Convert Arguments to Array
let argsArray = [...arguments];

Ein weiterer Vorteil dieses speziellen Parameters besteht darin, dass er iterierbare Objekte (NodeList, Argumente) in echte Arrays umwandeln kann In der Vergangenheit haben wir häufig Array.from oder andere Methoden verwendet, um dies zu erreichen.

5. Vorlagenliterale

Mehrzeilige Zeichen wurden in JS ursprünglich durch + und „``“ implementiert, waren jedoch schwierig beizubehalten. Viele Entwickler und sogar einige Frameworks verwenden das 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag, um die Vorlage zu speichern, und verwenden dann die DOM-Methode „outerHTML“, um die HTML-Zeichen abzurufen.

ES6 bietet Vorlagenliterale zum einfachen Erstellen mehrzeiliger Zeichenfolgen mithilfe von Backticks:

// Multiline String
let myString = `Hello
 
I'm a new line`;
 
//Basic interpolations
let obj = {x:1,y:2};
 
console.log(`Your total is: ${obj.x + obj.y}`); // Your total is 3

6 Standardargumentwerte

Die Bereitstellung von Standardwerten für Funktionsparameter ist bereits in serverseitigen Sprachen (Python, PHP) vorgesehen, und jetzt verfügt auch JS über diese Funktion:

//Basic usage
 
function great( name = 'Anon' ){
  console.log(`Hello ${name}`);
}
 
great(); // Hello Anon!
 
//You can have a function too!
 
function greet( name = 'Anon',callback = function(){} ){
  console.log(`Hello ${name}!`);
  // No more "callback && callback()" (no conditional)
  callback();
}
 
// Only set a default for one parameter
function greet(name, callback = function(){}) {}

Die 6 oben aufgeführten Funktionen werden von ES6 für Entwickler bereitgestellt, und natürlich gibt es noch viele weitere Funktionen.