일상적인 작업 흐름을 위한 ESEST팁, 요령, 모범 사례 및 코드 조각 예

ES6 (ECMAScript 2015) a apporté une refonte significative à JavaScript, introduisant de nombreuses nouvelles fonctionnalités qui peuvent rationaliser votre codage et améliorer la qualité globale de vos projets.

Dans cet article, nous passerons en revue quelques trucs, astuces et astuces de l'ES2015 et fournirons des exemples d'extraits de code pour améliorer votre flux de travail quotidien.

1. Déclaration de variables : let et const vs var

Dans ES5, les variables étaient déclarées à l'aide de var, qui avait un comportement limité à la fonction, entraînant des problèmes de levage et de visibilité de la portée. ES6 a introduit let et const avec la portée des blocs, offrant un meilleur contrôle sur la déclaration des variables.

const :

Définir une variable constante :

const variableName = "value"

Les variables constantes ne peuvent pas être modifiées, réaffectées ou redéfinies :

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

Vous pouvez modifier, ajouter de la valeur à un tableau constant mais vous ne pouvez pas le réaffecter ou le redéfinir :

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

Vous pouvez modifier, ajouter de la valeur à un objet constant mais vous ne pouvez pas le réaffecter ou le redéfinir :

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

Des variables constantes existent dans une portée de bloc :

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

laisser:

Définir une variable let :

let variableName = "value"

laisser les variables exister dans une portée de bloc :

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

let les variables ne peuvent pas être redéfinies, mais peuvent être réaffectées :

let variableName = "other value"  
    //-->SyntaxError
variableName = "other value"

Levage - var vs let :

La variable définie par var se hisse en haut

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"

La variable définie par let ne se hisse pas en haut

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

let doit être utilisé dans la boucle for au lieu de var car les variables définies par var seront divulguées en dehors de la boucle for et ne feront référence au résultat final de i que s'il existe une fonction setTimeout :

avec 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

avec 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

Meilleure pratique : Utilisez const pour les variables qui ne changeront pas et let pour les variables qui doivent changer dans un bloc spécifique. Évitez var pour éviter les problèmes liés à la portée.

---

2. Fonction flèche

La fonction Flèche est une nouvelle façon de définir une fonction pour un code plus propre et est couramment utilisée dans la fonction de rappel.
Les fonctions fléchées nous permettent d'écrire une syntaxe de fonction plus courte.
Définir une fonction flèche avec return :

let myFunction = (a, b) => {
  sum = a * b;
  return sum;
}

Définir une fonction flèche sans retour :

let myFunction = (a, b) => a * b;

S'il n'y a pas de paramètre, vous pouvez simplement utiliser des parenthèses :

let myFunction = () => ("Hello world");  

De la même manière avant ES6

function functionName(param1,param2){
     return param1+param2;
}

La fonction flèche est couramment utilisée dans le rappel :

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

De la même manière avant ES6

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

Meilleure pratique : Utilisez les fonctions fléchées pour les fonctions anonymes et les rappels afin de raccourcir votre code et d'éviter des problèmes avec cela.

---

3. Littéraux de modèle et concaténation de chaînes

Dans ES5, la concaténation de chaînes nécessitait l'utilisation de +, ce qui rendait difficile la gestion de chaînes complexes ou multilignes. ES6 a introduit des littéraux de modèle, permettant des expressions intégrées et des chaînes multilignes à l'aide de backticks.
Les littéraux de modèle utilisent des contre-tiques (` `) plutôt que des guillemets ("") pour définir une chaîne.
La chaîne de modèle est un moyen rapide pour gérer une chaîne.
Vous pouvez référencer des variables :

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

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

De la même manière avant ES6 :

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

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

Les littéraux de modèle autorisent les guillemets simples et doubles à l'intérieur d'une chaîne :

Les littéraux de modèle autorisent les chaînes multilignes.
Vous pouvez simplement couper une ligne, utiliser la tabulation sans utiliser n t :

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

Les littéraux de modèle autorisent les expressions dans des chaînes :

let price = 10;
let VAT = 0.25;

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

Bonne pratique : Utilisez des littéraux de modèle pour une meilleure lisibilité lorsque vous travaillez avec des chaînes qui impliquent un contenu dynamique ou s'étendent sur plusieurs lignes.

---

4. Affectation de déstructuration vs accès traditionnel

La déstructuration vous permet de décompresser les valeurs des tableaux et des objets en variables, réduisant ainsi le code répétitif et améliorant la lisibilité.

Définissez et attribuez une valeur aux variables portant les mêmes noms que les propriétés :

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

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

Définissez et attribuez une valeur aux variables avec des noms différents des propriétés :

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

console.log(username, userage);  //Output --> John 30

De la même manière avant ES6

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

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

Déstructuration de tableau Attribuer des valeurs d'un tableau à différentes variables :

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

Bonne pratique : Utilisez la déstructuration pour un accès plus propre et plus intuitif aux propriétés des tableaux et des objets.

---

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

ES6:

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

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]

ES6:

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

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

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]

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

Another example

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

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
});

ES6:

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

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

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

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

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

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

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"

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"

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)})

---

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!

위 내용은 일상적인 작업 흐름을 위한 ESEST팁, 요령, 모범 사례 및 코드 조각 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!