ESEST日常のワークフローのヒント、コツ、ベスト プラクティス、コード スニペットの例

ES6 (ECMAScript 2015) membawa perubahan ketara kepada JavaScript, memperkenalkan pelbagai ciri baharu yang boleh menyelaraskan pengekodan anda dan meningkatkan kualiti keseluruhan projek anda.

Dalam siaran ini, kami akan membincangkan beberapa petua, helah, amalan terbaik ES2015 dan memberikan contoh coretan kod untuk meningkatkan aliran kerja harian anda.

1. Mengisytiharkan Pembolehubah: let dan const vs var

Dalam ES5, pembolehubah telah diisytiharkan menggunakan var, yang mempunyai gelagat skop fungsi, yang membawa kepada isu dengan keterlihatan angkat dan skop. ES6 memperkenalkan let dan const dengan blok-scoping, memberikan kawalan yang lebih baik ke atas perisytiharan berubah-ubah.

const:

Tentukan pembolehubah malar:

const variableName = "value"

Pembolehubah malar tidak boleh ditukar atau menetapkan semula atau mentakrifkan semula:

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

Anda boleh menukar, menambah nilai pada tatasusunan tetap tetapi anda tidak boleh menetapkan semula atau mentakrifkannya semula:

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

Anda boleh menukar, menambah nilai pada objek malar tetapi anda tidak boleh menetapkan semula atau mentakrifkannya semula:

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

Pembolehubah malar wujud dalam skop blok:

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

biarkan:

Tentukan pembolehubah biarkan:

let variableName = "value"

biar pembolehubah wujud dalam skop blok:

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

biar pembolehubah tidak boleh ditakrifkan semula, tetapi boleh ditugaskan semula:

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

Mengangkat - var vs let:

Pembolehubah yang ditakrifkan oleh var dinaikkan di bahagian atas

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"

Pembolehubah ditakrifkan oleh biarkan tidak dinaikkan di bahagian atas

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

let harus digunakan dalam gelung for dan bukannya var kerana pembolehubah yang ditakrifkan oleh var akan dibocorkan di luar gelung for dan hanya akan merujuk hasil akhir i jika terdapat fungsi setTimeout:

dengan 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

dengan 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

Amalan Terbaik: Gunakan const untuk pembolehubah yang tidak akan berubah dan biarkan pembolehubah yang perlu berubah dalam blok tertentu. Elakkan var untuk mengelakkan isu berkaitan skop.

---

2. Fungsi Anak Panah

Fungsi anak panah ialah cara baharu untuk mentakrifkan fungsi untuk kod yang lebih bersih dan biasanya digunakan dalam fungsi panggil balik.
Fungsi anak panah membolehkan kami menulis sintaks fungsi yang lebih pendek.
Tentukan fungsi anak panah dengan kembali:

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

Tentukan fungsi anak panah tanpa kembali:

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

Jika tiada parameter, anda hanya boleh menggunakan kurungan:

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

Cara yang sama sebelum ES6

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

Fungsi anak panah biasanya digunakan dalam panggil balik:

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

Cara yang sama sebelum ES6

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

Amalan Terbaik: Gunakan fungsi anak panah untuk fungsi tanpa nama dan panggil balik untuk menjadikan kod anda lebih pendek dan untuk mengelakkan masalah dengan ini.

---

3. Template Literals vs String Concatenation

Dalam ES5, penggabungan rentetan memerlukan penggunaan +, menjadikannya sukar untuk mengurus rentetan yang kompleks atau berbilang baris. ES6 memperkenalkan literal templat, membenarkan ungkapan terbenam dan rentetan berbilang baris menggunakan tanda belakang.
Templat Literals menggunakan tanda balik (` `) dan bukannya petikan ("") untuk mentakrifkan rentetan.
Rentetan templat ialah cara cepat untuk anda mengendalikan rentetan.
Anda boleh merujuk pembolehubah:

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

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

Cara yang sama sebelum ES6:

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

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

Templat Literal membenarkan kedua-dua petikan tunggal dan berganda dalam rentetan:

Templat Literal membenarkan rentetan berbilang baris.
Anda hanya boleh memutuskan baris, gunakan tab tanpa menggunakan n t :

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

Templat Literal membenarkan ungkapan dalam rentetan:

let price = 10;
let VAT = 0.25;

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

Amalan Terbaik: Gunakan literal templat untuk kebolehbacaan yang lebih baik apabila bekerja dengan rentetan yang melibatkan kandungan dinamik atau menjangkau berbilang baris.

---

4. Memusnahkan Tugasan vs Akses Tradisional

Penstrukturan membolehkan anda membongkar nilai daripada tatasusunan dan objek kepada pembolehubah, mengurangkan kod berulang dan meningkatkan kebolehbacaan.

Takrif dan tetapkan nilai kepada pembolehubah dengan nama yang sama seperti sifat:

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

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

Tentukan dan tetapkan nilai kepada pembolehubah dengan nama yang berbeza daripada sifat:

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

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

Cara yang sama sebelum ES6

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

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

Pemusnahan Tatasusunan Berikan nilai daripada tatasusunan kepada pembolehubah berbeza:

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

Amalan Terbaik: Gunakan penstrukturan untuk akses yang lebih bersih dan intuitif kepada sifat daripada tatasusunan dan objek.

---

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 中国語 Web サイトの他の関連記事を参照してください。