Heim > Web-Frontend > js-Tutorial > ESESTipps, Tricks, Best Practices und Code-Snippet-Beispiele für Ihren täglichen Arbeitsablauf

ESESTipps, Tricks, Best Practices und Code-Snippet-Beispiele für Ihren täglichen Arbeitsablauf

Barbara Streisand
Freigeben: 2024-09-22 06:22:02
Original
328 Leute haben es durchsucht

ESESTips, Tricks, Best Practices, and Code Snippet Examples for Your Day-to-Day Workflow

ES6 (ECMAScript 2015) brachte eine umfassende Überarbeitung von JavaScript und führte zahlreiche neue Funktionen ein, die Ihre Codierung optimieren und die Gesamtqualität Ihrer Projekte verbessern können.

In diesem Beitrag gehen wir einige ES2015-Tipps, Tricks Best Practices durch und stellen Code-Snippet-Beispiele zur Verfügung, um Ihren täglichen Arbeitsablauf zu verbessern.

1. Variablen deklarieren: let und const vs. var

In ES5 wurden Variablen mit var deklariert, was ein funktionsbezogenes Verhalten aufwies, was zu Problemen beim Heben und der Bereichssichtbarkeit führte. ES6 führte let und const mit Block-Scoping ein und ermöglichte so eine bessere Kontrolle über die Variablendeklaration.

const:

Definieren Sie eine konstante Variable:

const variableName = "value"
Nach dem Login kopieren

Konstante Variablen können nicht geändert oder neu zugewiesen oder neu definiert werden:

const variableName = "other value"  
   //-->SyntaxError: Identifier 'variableName' has already been declared
variableName = "other value" 
   //-->TypeError: Assignment to constant variable.
Nach dem Login kopieren

Sie können ein konstantes Array ändern oder ihm einen Wert hinzufügen, aber Sie können es nicht neu zuweisen oder neu definieren:

const arrayName = [1,2,3,4]
arrayName.push(5) 
   // Output -->[1,2,3,4,5]
const arrayName = [9,8,7,6] 
   //-->SyntaxError: Identifier 'arrayName' has already been declared
Nach dem Login kopieren

Sie können ein konstantes Objekt ändern oder ihm einen Wert hinzufügen, aber Sie können es nicht neu zuweisen oder neu definieren:

const person = {name:"Developer",email:"developer@developer.com",city:"New Delhi"}
person.name ="Developer 2" //change a property 
person.location = "Gurugram" //add a new property
person = {name:"Dilip",email:"dilip@abc.com",city:"Delhi"} //reassign it 
   //-->SyntaxError: Identifier 'arrayName' has already been declared
Nach dem Login kopieren

Konstante Variablen existieren in einem Blockbereich:

var x = 1
{ //this is a block scope
    const x = 2
}
console.log(x) 
    //Output -->1
Nach dem Login kopieren

lassen:

Definieren Sie eine Let-Variable:

let variableName = "value"
Nach dem Login kopieren

Variablen in einem Blockbereich existieren lassen:

var x = 1
{ //this is a block scope
    let x = 2
}
console.log(x) //Output -->1
Nach dem Login kopieren

Let-Variablen können nicht neu definiert, aber neu zugewiesen werden:

let variableName = "other value"  
    //-->SyntaxError
variableName = "other value"
Nach dem Login kopieren

Heben – var vs let:

Variable, die durch var definiert wird, wird oben angehoben

console.log(sayHello)
    //Output -->undefined
//variable sayHello is hoisted at the top before it was defined by var
//This means that variable is there but with value of undefined
var sayHello = "Hello World" 
console.log(sayHello)
    //Output -->"Hello World"
Nach dem Login kopieren

Variable, die durch let definiert wird, wird nicht nach oben gehoben

console.log(sayHello)
     //-->ReferenceError: Cannot access 'sayHello' before initialization/defined
let sayHello = "Hello World"
console.log(sayHello)
    //Output -->"Hello World"
Nach dem Login kopieren

let sollte in der for-Schleife anstelle von var verwendet werden, da durch var definierte Variablen außerhalb der for-Schleife verloren gehen und nur dann auf das Endergebnis von i verweisen, wenn es eine setTimeout-Funktion gibt:

mit var

for (var i = 0; i < 3; i++) {
     console.log(i);
     setTimeout(function(){
          console.log("The number is " + i);
     }, 1000);
};
//after 1 sec
    //-->The number is 2  (x3)   
//setTimeout reference i after when the for loop ends
console.log(i)
    //--> 2
//i is leaked outside the for loop
Nach dem Login kopieren

mit let

for (let i = 0; i < 3; i++) {
     setTimeout(function(){
          console.log("The number is " + i);
     }, 1000);
}
//after 1 sec
    //-->The number is 0
    //-->The number is 1
    //-->The number is 2
Nach dem Login kopieren

Best Practice: Verwenden Sie const für Variablen, die sich nicht ändern, und let für Variablen, die sich innerhalb eines bestimmten Blocks ändern müssen. Vermeiden Sie var, um bereichsbezogene Probleme zu vermeiden.


2. Pfeilfunktion

Die Pfeilfunktion ist eine neue Methode zum Definieren einer Funktion für saubereren Code und wird häufig in Rückruffunktionen verwendet.
Mit Pfeilfunktionen können wir eine kürzere Funktionssyntax schreiben.
Definieren Sie eine Pfeilfunktion mit return:

let myFunction = (a, b) => {
  sum = a * b;
  return sum;
}
Nach dem Login kopieren

Definieren Sie eine Pfeilfunktion ohne Return:

let myFunction = (a, b) => a * b;
Nach dem Login kopieren

Wenn kein Parameter vorhanden ist, können Sie einfach Klammern verwenden:

let myFunction = () => ("Hello world");  
Nach dem Login kopieren

Das Gleiche vor ES6

function functionName(param1,param2){
     return param1+param2;
}
Nach dem Login kopieren

Die Pfeilfunktion wird häufig im Rückruf verwendet:

let myArr = [1,2,3]
let doubleThenFilter = arr => arr.map((value) => (value * 2) )
                                  .filter((value) => (value % 3 === 0));
doubleThenFilter(myArr)
Nach dem Login kopieren

Das Gleiche vor ES6

function doubleThenFilter(arr){
    return arr.map(function(value){
        return value *2;
    }).filter(function(value){
        return value % 3 === 0;
    })
};
Nach dem Login kopieren

Best Practice: Verwenden Sie Pfeilfunktionen für anonyme Funktionen und Rückrufe, um Ihren Code kürzer zu machen und Probleme damit zu vermeiden.


3. Vorlagenliterale vs. String-Verkettung

In ES5 erforderte die Zeichenfolgenverkettung die Verwendung von +, was die Verwaltung komplexer oder mehrzeiliger Zeichenfolgen erschwerte. ES6 führte Vorlagenliterale ein, die eingebettete Ausdrücke und mehrzeilige Zeichenfolgen mit Backticks ermöglichen.
Vorlagenliterale verwenden Backticks (` `) anstelle der Anführungszeichen (""), um eine Zeichenfolge zu definieren.
Mit der Vorlagenzeichenfolge können Sie schnell mit einer Zeichenfolge umgehen.
Sie können auf Variablen verweisen:

let first = "Dilip";
let last = "Mishra";

console.log(`Hello, ${first} ${last}`);
//Output --> "Hello, Dilip Mishra"
Nach dem Login kopieren

Das Gleiche vor ES6:

let first = "Dilip";
let last = "Mishra";
var greeting = 'Hello, ' + name + '!';

console.log('Hello, ' + first + ' ' +last);  
//Output --> "Hello, Dilip Mishra"

Nach dem Login kopieren

Vorlagenliterale erlauben sowohl einfache als auch doppelte Anführungszeichen innerhalb einer Zeichenfolge:

Vorlagenliterale ermöglichen mehrzeilige Zeichenfolgen.
Sie können einfach eine Zeile umbrechen und die Tabulatortaste verwenden, ohne n t :
zu verwenden

let text =
'The quick
brown fox
jumps over
the lazy dog';
  //Output -->  "The quick
brown fox
jumps over
the lazy dog"
Nach dem Login kopieren

Vorlagenliterale ermöglichen Ausdrücke in Zeichenfolgen:

let price = 10;
let VAT = 0.25;

let total = 'Total: ${(price * (1 + VAT)).toFixed(2)}';
  //Output -->  "Total: 12.50"
Nach dem Login kopieren

Best Practice: Verwenden Sie Vorlagenliterale für eine bessere Lesbarkeit, wenn Sie mit Zeichenfolgen arbeiten, die dynamischen Inhalt beinhalten oder sich über mehrere Zeilen erstrecken.


4. Destrukturierende Zuweisung vs. traditioneller Zugriff

Durch die Destrukturierung können Sie Werte aus Arrays und Objekten in Variablen entpacken, wodurch sich wiederholender Code reduziert und die Lesbarkeit verbessert wird.

Definieren Sie Variablen mit denselben Namen wie Eigenschaften und weisen Sie ihnen Werte zu:

const person = { name: 'John', age: 30 };
const { name, age } = person;

console.log(name, age);  //Output --> John 30

Nach dem Login kopieren

Definieren Sie Variablen mit anderen Namen als Eigenschaften und weisen Sie ihnen einen Wert zu:

const person = { name: 'John', age: 30 };
const { name:username, age:userage } = person;

console.log(username, userage);  //Output --> John 30
Nach dem Login kopieren

Das Gleiche vor ES6

var person = { name: 'John', age: 30 };
var name = person.name;
var age = person.age;

console.log(name, age);  //Output --> John 30

Nach dem Login kopieren

Array-Destrukturierung Werte aus einem Array verschiedenen Variablen zuweisen:

var arr = [1,2,3];
var [a,b,c] = arr;
console.log(a); //-->1
console.log(b); //-->2
console.log(c); //-->3
Nach dem Login kopieren

Best Practice:Verwenden Sie Destrukturierung für einen saubereren und intuitiveren Zugriff auf Eigenschaften von Arrays und Objekten.


5. Default Parameters vs Fallback Logic

ES5 required manual fallback logic to handle missing function arguments, while ES6 introduced default parameters to define fallback values directly in the function signature.

ES5:

function myFunction(x, y) {
  var y = y || 10;
  return x + y;
}
myFunction(5); // will return 15

Nach dem Login kopieren

ES6:

function myFunction(x, y = 10) {
  // y is 10 if not passed or undefined
  return x + y;
}
myFunction(5); //Output --> will return 15

Nach dem Login kopieren

Best Practice: Use default parameters to handle optional function arguments cleanly.


6. Spread Operator vs concat() or apply()

The spread operator (...) allows for simpler merging of arrays and objects and is much more intuitive than using concat() or apply().

ES5:

var arr1 = [1, 2];
var arr2 = [3, 4];
var combined = arr1.concat(arr2);

console.log(combined);  // [1, 2, 3, 4]

Nach dem Login kopieren

ES6:

const arr1 = [1, 2];
const arr2 = [3, 4];
const combined = [...arr1, ...arr2];

console.log(combined);  // [1, 2, 3, 4]

Nach dem Login kopieren

A spread operator would break down an array into values so that they can be easily used:

let nums = [4,5,6];
let nums2 = [1,2,3,...nums,7,8];
console.log(nums2);
    //--> [1,2,3,4,5,6,7,8]
Nach dem Login kopieren

Spread operator is commonly used when a function doesn’t accept an array as a parameter:

function sumValues(a,b,c){
     console.log(arguments);  //print out an array of the arguments of the function
return a+b+c;
}
let nums = [2,3,4];
sumValues(...nums); //values 2,3,4 of nums array has been passed to a,b,c parameters
    //-->[2,3,4]
    //-->9
sumValues(5,5,...nums); //value 2 of nums array has been passed to c parameter
    //-->[5,5,2,3,4]
    //-->12
Nach dem Login kopieren

Another example

let nums = [1,2,3,4];
Math.min(nums);
    //--> NaN
Math.min(...nums);
    //-->1
Nach dem Login kopieren

Best Practice: Use the spread operator for array concatenation, cloning objects, and passing variable arguments into functions.


7. Promises vs Callbacks

In ES5, asynchronous operations were typically handled with callbacks, leading to complex "callback hell" situations. ES6 introduced Promises, which simplify async code.

ES5:

function fetchData(callback) {
  setTimeout(function() {
    callback('Data loaded');
  }, 1000);
}

fetchData(function(data) {
  console.log(data);  // Data loaded
});

Nach dem Login kopieren

ES6:

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve('Data loaded'), 1000);
  });
}

fetchData().then(data => console.log(data));  // Data loaded

Nach dem Login kopieren

Best Practice: Use Promises (and async/await in modern code) for asynchronous code, as they provide a cleaner and more manageable approach.


8. Classes vs Constructor Functions

ES6 introduced class syntax as syntactic sugar over constructor functions for object-oriented programming. This provides a cleaner, more intuitive way to define and inherit from classes.

ES5:

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.greet = function() {
  return 'Hello, I am ' + this.name;
};

var john = new Person('John', 30);
console.log(john.greet());  // Hello, I am John

Nach dem Login kopieren

ES6:

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    return `Hello, I am ${this.name}`;
  }
}

const john = new Person('John', 30);
console.log(john.greet());  // Hello, I am John

Nach dem Login kopieren

Best Practice: Use classes to handle object creation and inheritance when working with OOP patterns in JavaScript.


9. Modules (import/export) vs IIFE or Global Functions

Prior to ES6, JavaScript did not have native module support. Developers had to use Immediately Invoked Function Expressions (IIFE) or rely on global variables. ES6 introduced import and export, allowing modular code organization.

ES5 (IIFE):

(function() {
  function add(x, y) {
    return x + y;
  }
  window.add = add;
})();

console.log(add(2, 3));  // 5

Nach dem Login kopieren

ES6 (Modules):

// math.js
export function add(x, y) {
  return x + y;
}

// main.js
import { add } from './math.js';
console.log(add(2, 3));  // 5

Nach dem Login kopieren

Best Practice: Use ES6 modules for better code organization, reusability, and easier dependency management.


10. Async/await

Async

The ansync keyword that placed before a function makes that the function behave like a Promise:

async function myFunc(){
    return "this is a promise";
}
myFunc().then((val)=>{console.log(val)});
    //-->"this is a promise"
Nach dem Login kopieren

In an async function, the return keyword will act like the resolve keyword in a Promise, the throw keyword will act like the reject keyword in a Promise

async function doHomework(){
    let isDone = false;
    if (isDone){
        return("is done");
    }else{
        throw "is not done";
    }
}
doHomework().then(function(homeworkResult){
    console.log("The homework " + homeworkResult);
}).catch(function(homeworkResult){
    console.log("The homework " + homeworkResult);
})
    //"The homework is not done"
Nach dem Login kopieren

Await

The await keyword is ONLY used in the async function. The await keyword makes your code wait until the Promise inside the function has been fulfilled/rejected:

async function myFunc(){
    let myPromise = new Promise((resolve,reject)=>{
        setTimeout(()=>{resolve("done!")},1000)
    });
    let result = await myPromise; //wait for this promise before continuing
    return result;
}
myFunc().then((result)=>{console.log(result)})

Nach dem Login kopieren

Final Thoughts

ES6 has drastically improved the way JavaScript is written and maintained. Adopting these tips and practices in your daily workflow will not only make your code cleaner but also more maintainable and scalable. Whether you're switching from ES5 or enhancing your ES6 skills, these tricks will help you stay productive.

Contributions Welcome! If you have additional tips, tricks, or use cases from your experience, feel free to share them in the comments.

Happy coding!

Das obige ist der detaillierte Inhalt vonESESTipps, Tricks, Best Practices und Code-Snippet-Beispiele für Ihren täglichen Arbeitsablauf. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage