Kurztipps, die JavaScript-Entwickler kennen müssen (Fortgeschrittene)

Dieser Artikel vermittelt Ihnen die Abkürzungsfähigkeiten, die JavaScript-Entwickler kennen müssen (für Fortgeschrittene). Ich hoffe, dass er Ihnen als Referenz dienen wird.

1. Variablenzuweisung

Wenn Sie den Wert einer Variablen einer anderen zuweisen, müssen Sie zunächst sicherstellen, dass der ursprüngliche Wert nicht null, undefiniert oder leer ist.

kann erreicht werden, indem eine Urteilserklärung geschrieben wird, die mehrere Bedingungen enthält:

if (variable1 !== null || variable1 !== undefined || variable1 !== '') {
     let variable2 = variable1;
}

oder in der folgenden Form abgekürzt:

const variable2 = variable1  || 'new';

Sie können den folgenden Code in es6console einfügen und testen selbst:

let variable1;
let variable2 = variable1  || '';
console.log(variable2 === ''); // prints true
variable1 = 'foo';
variable2 = variable1  || '';
console.log(variable2); // prints foo

2. Standardwertzuweisung

Wenn der erwartete Parameter null oder undefiniert ist, müssen keine sechs Codezeilen geschrieben werden, um einen Standardwert zuzuweisen. Mit nur einem kurzen logischen Operator können wir denselben Vorgang in nur einer Codezeile ausführen.

let dbHost;
if (process.env.DB_HOST) {
  dbHost = process.env.DB_HOST;
} else {
  dbHost = 'localhost';
}

wird abgekürzt als:

const dbHost = process.env.DB_HOST || 'localhost';

3. Objektattribute

ES6 bietet eine sehr einfache Möglichkeit, Objekten Attribute zuzuweisen. Wenn der Eigenschaftsname mit dem Schlüsselnamen übereinstimmt, kann die Abkürzung verwendet werden.

const obj = { x:x, y:y };

wird abgekürzt als:

const obj = { x, y };

4. Pfeilfunktion

Klassische Funktionen sind einfach zu lesen und zu schreiben, aber wenn sie in andere Funktionen verschachtelt und aufgerufen werden, ist das Ganze Funktion Es kann etwas langwierig und verwirrend werden. Zu diesem Zeitpunkt können Sie die Pfeilfunktion verwenden, um Folgendes abzukürzen:

function sayHello(name) {
  console.log('Hello', name);
}
 
setTimeout(function() {
  console.log('Loaded')
}, 2000);
 
list.forEach(function(item) {
  console.log(item);
});

Abkürzung:

sayHello = name => console.log('Hello', name);
setTimeout(() => console.log('Loaded'), 2000);
list.forEach(item => console.log(item));

5. Impliziter Rückgabewert

Der Rückgabewert ist das, was wir normalerweise zum Zurückgeben verwenden das Endergebnis der Funktion Schlüsselwörter. Eine Pfeilfunktion mit nur einer Anweisung kann implizit ein Ergebnis zurückgeben (die Funktion muss die Klammern ({ }) weglassen, um das Schlüsselwort return wegzulassen).

Um eine mehrzeilige Anweisung (z. B. Objekttext) zurückzugeben, müssen Sie () anstelle von { } verwenden, um den Funktionskörper zu umschließen. Dadurch wird sichergestellt, dass der Code als einzelne Anweisung ausgewertet wird.

function calcCircumference(diameter) {
  return Math.PI * diameter
}

wird abgekürzt als:

calcCircumference = diameter => (
  Math.PI * diameter;
)

6. Standardparameterwert

Sie können die if-Anweisung verwenden, um den Standardwert von Funktionsparametern zu definieren. ES6 sieht vor, dass in Funktionsdeklarationen Standardwerte definiert werden können.

function volume(l, w, h) {
  if (w === undefined)
    w = 3;
  if (h === undefined)
    h = 4;
  return l * w * h;
}

wird abgekürzt als:

volume = (l, w = 3, h = 4 ) => (l * w * h);
volume(2) //output: 24

7. Vorlagenzeichenfolge

Früher waren wir es gewohnt, „+“ zu verwenden, um mehrere Variablen in Zeichenfolgen umzuwandeln, aber das gibt es etwas einfacheres? Wie wäre es mit der Methode?

ES6 bietet entsprechende Methoden, wir können Backticks und $ { } verwenden, um Variablen zu einem String zu kombinieren.

const welcome = 'You have logged in as ' + first + ' ' + last + '.'
const db = 'http://' + host + ':' + port + '/' + database;

wird abgekürzt als:

const welcome = `You have logged in as ${first} ${last}`;
const db = `http://${host}:${port}/${database}`;

8. Destrukturierende Zuweisung

Destrukturierende Zuweisung ist ein Ausdruck, der verwendet wird, um Attributwerte schnell aus einem Array oder Objekt zu extrahieren und zuzuweisen sie an definierte Variablen.

In Bezug auf die Codeabkürzung kann die Destrukturierungszuweisung gute Ergebnisse erzielen.

const observable = require('mobx/observable');
const action = require('mobx/action');
const runInAction = require('mobx/runInAction');
const store = this.props.store;
const form = this.props.form;
const loading = this.props.loading;
const errors = this.props.errors;
const entity = this.props.entity;

wird abgekürzt als:

import { observable, action, runInAction } from 'mobx';
const { store, form, loading, errors, entity } = this.props;

Sie können sogar Ihren eigenen Variablennamen angeben:

const { store, form, loading, errors, entity:contact } = this.props;

9. Der Erweiterungsoperator ist in ES6 Einführung: Die Verwendung des Spread-Operators kann JavaScript-Code effizienter und interessanter machen.

Einige Array-Funktionen können mithilfe des Spread-Operators ersetzt werden. Die Abkürzung von

// joining arrays
const odd = [1, 3, 5];
const nums = [2 ,4 , 6].concat(odd);
 
// cloning arrays
const arr = [1, 2, 3, 4];
const arr2 = arr.slice( )

lautet:

// joining arrays
const odd = [1, 3, 5 ];
const nums = [2 ,4 , 6, ...odd];
console.log(nums); // [ 2, 4, 6, 1, 3, 5 ]
 
// cloning arrays
const arr = [1, 2, 3, 4];
const arr2 = [...arr];

Der Unterschied zwischen den Funktionen von concat() und concat() besteht darin, dass der Benutzer den Spread-Operator verwenden kann, um ein anderes Array in ein beliebiges Array einzufügen.

const odd = [1, 3, 5 ];
const nums = [2, ...odd, 4 , 6];

Sie können den Spread-Operator und die ES6-Destrukturierungssymbole auch zusammen verwenden:

const { a, b, ...z } = { a: 1, b: 2, c: 3, d: 4 };
console.log(a) // 1
console.log(b) // 2
console.log(z) // { c: 3, d: 4 }

10. Obligatorische Parameter

Wenn standardmäßig kein Wert an den Funktionsparameter übergeben wird, dann setzt JavaScript die Funktionsparameter auf undefiniert. Andere Sprachen geben Warnungen oder Fehler aus. Um eine Parameterzuweisung durchzuführen, können Sie eine if-Anweisung verwenden, um einen undefinierten Fehler auszulösen, oder Sie können „erzwungene Parameter“ nutzen.

function foo(bar) {
  if(bar === undefined) {
    throw new Error('Missing parameter!');
  }
  return bar;
}

wird abgekürzt als:

mandatory = ( ) => {
  throw new Error('Missing parameter!');
}
foo = (bar = mandatory( )) => {
  return bar;
}

11. Array.find

Wenn Sie die Suchfunktion jemals in einfachem JavaScript geschrieben haben, dann haben Sie wahrscheinlich eine for-Schleife verwendet. In ES6 wurde eine neue Array-Funktion namens find() eingeführt, eine Abkürzung für die Implementierung einer for-Schleife.

const pets = [
  { type: 'Dog', name: 'Max'},
  { type: 'Cat', name: 'Karl'},
  { type: 'Dog', name: 'Tommy'},
]
function findDog(name) {
  for(let i = 0; i<pets.length><p> wird abgekürzt als: </p><pre class="brush:php;toolbar:false">pet = pets.find(pet => pet.type ==='Dog' && pet.name === 'Tommy');
console.log(pet); // { type: 'Dog', name: 'Tommy' }

12. Objekt [Schlüssel]

Obwohl es üblich ist, foo.bar als foo ['bar'] zu schreiben, ist dies Diese Praktiken bilden die Grundlage für das Schreiben von wiederverwendbarem Code.

Betrachten Sie das folgende vereinfachte Beispiel einer Verifizierungsfunktion:

function validate(values) {
  if(!values.first)
    return false;
  if(!values.last)
    return false;
  return true;
}
console.log(validate({first:'Bruce',last:'Wayne'})); // true

Die obige Funktion vervollständigt die Verifizierungsarbeit perfekt. Wenn es jedoch viele Formulare gibt, muss eine Validierung durchgeführt werden, und es gibt unterschiedliche Felder und Regeln. Es wäre eine gute Wahl, wenn Sie eine generische Validierungsfunktion erstellen könnten, die zur Laufzeit konfiguriert werden kann.

// object validation rules
const schema = {
  first: {
    required:true
  },
  last: {
    required:true
  }
}
 
// universal validation function
const validate = (schema, values) => {
  for(field in schema) {
    if(schema[field].required) {
      if(!values[field]) {
        return false;
      }
    }
  }
  return true;
}
console.log(validate(schema, {first:'Bruce'})); // false
console.log(validate(schema, {first:'Bruce',last:'Wayne'})); // true

Da wir nun diese Validierungsfunktion haben, können wir sie in allen Formularen wiederverwenden, ohne für jedes Formular eine benutzerdefinierte Validierungsfunktion schreiben zu müssen.

13. Doppelbitoperatoren

Bitweise Operatoren sind die grundlegenden Wissenspunkte in JavaScript-Anfänger-Tutorials, wir verwenden jedoch nicht oft bitweise Operatoren. Denn niemand möchte mit Einsen und Nullen arbeiten, ohne sich mit Binärzahlen zu befassen.

Aber der Doppelbit-Operator hat einen sehr praktischen Fall. Sie können anstelle von Math.floor( ) Doppelbitoperatoren verwenden. Der Vorteil des doppelt negativen Positionierungsoperators besteht darin, dass er denselben Vorgang schneller ausführt. Die Abkürzung von

Math.floor(4.9) === 4  //true

lautet:

~~4.9 === 4  //true

Das Obige ist eine vollständige Einführung in die Abkürzungstechniken, die JavaScript-Entwickler kennen müssen (Fortgeschrittene), wenn Sie mehr über

JavaScript erfahren möchten Video-Tutorial

, achten Sie bitte auf die chinesische PHP-Website.

Das obige ist der detaillierte Inhalt vonKurztipps, die JavaScript-Entwickler kennen müssen (Fortgeschrittene). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!