Kemahiran menulis JavaScript

JavaScript ialah bahasa pengaturcaraan peringkat tinggi yang digunakan untuk pembangunan web, dan ia telah menjadi bahagian penting dalam pembangunan web moden. Sama ada anda sedang membangunkan bahagian hadapan atau belakang, JavaScript ialah salah satu bahasa yang mesti dipelajari. Mempelajari JavaScript memerlukan masa dan usaha tertentu, tetapi ia juga memerlukan beberapa petua dan helah. Dalam artikel ini, kami akan meneroka beberapa teknik penulisan JavaScript untuk membantu anda memahami dan menggunakan JavaScript dengan lebih baik.

1 Elakkan menggunakan pembolehubah global

Dalam JavaScript, pembolehubah global sangat berbahaya kerana ia boleh diubah suai dengan mudah oleh bahagian lain, yang akan meningkatkan kerumitan kod dan mungkin akan menyebabkan ralat yang tidak dapat dijelaskan . Oleh itu, kita harus cuba mengelak daripada menggunakan pembolehubah global dan sebaliknya mengehadkan pembolehubah kepada skop fungsi.

Contohnya, anda boleh membungkus kod dalam fungsi laksana sendiri, supaya anda boleh mengehadkan skop pembolehubah dan mengelakkan konflik penamaan:

(function() {
  var num = 1;
  console.log(num); // 1
})();

2 Gunakan const dan biarkan kata kunci of var

Dalam versi JavaScript yang lalu, hanya kata kunci var boleh digunakan untuk menentukan pembolehubah. Walau bagaimanapun, ES6 memperkenalkan kata kunci const dan let, yang boleh mengehadkan skop dan kaedah penetapan pembolehubah dengan lebih baik, menjadikan kod lebih mantap dan selamat.

Pembolehubah yang diisytiharkan dengan kata kunci const tidak dibenarkan untuk ditetapkan semula, dan mesti dimulakan serta-merta apabila diisytiharkan:

const PI = 3.14;

Pembolehubah yang diisytiharkan dengan kata kunci let dibenarkan untuk ditetapkan semula, tetapi hanya dalam blok di mana ia ditakrifkan. Gunakan dalam skop:

let num = 1;
if(true) {
  let num = 2;
  console.log(num); // 2
}
console.log(num); // 1

3. Gunakan fungsi anak panah

Fungsi anak panah ialah kaedah definisi fungsi dalam ES6, yang menyediakan struktur sintaks yang lebih ringkas. Fungsi anak panah tidak mempunyai nilai ini sendiri dan objek argumen, yang memudahkan takrifan fungsi dan pemprosesan skop ini. Contohnya:

//传统的函数定义方式
function add(a,b) {
  return a+b;
}

//箭头函数的定义方式
const add = (a,b) => a+b;

//箭头函数也可以写成这样
const add = (a,b) => {
  return a+b;
}

4. Gunakan rentetan templat

Rentetan templat ialah sintaks rentetan baharu yang diperkenalkan dalam ES6 Ia membolehkan anda memasukkan pembolehubah dan ungkapan ke dalam rentetan untuk menjadikan aksara Pembinaan rentetan lebih mudah dan intuitif. Contohnya:

const name = "John";
const age = 18;
console.log(`Hello, ${name}. You are ${age} years old.`); // Hello, John. You are 18 years old

5. Gunakan tugasan memusnahkan

Tugasan memusnahkan ialah sintaks dalam ES6 Ia boleh mengekstrak pembolehubah yang digunakan daripada objek atau tatasusunan, mengelakkan banyak masalah dalam kod. Pembolehubah sementara atau rujukan harta yang panjang. Contohnya:

//在ES5中的定义方式
var user = {name: "John", age: 20};
var name = user.name;
var age = user.age;

//在ES6中的定义方式（使用对象解构赋值）
const user = {name: "John", age: 20};
const {name, age} = user;

//在ES5中的定义方式
var arr = [1,2,3,4,5];
var a = arr[0];
var b = arr[1];
var c = arr[2];

//在ES6中的定义方式（使用数组解构赋值）
const arr = [1,2,3,4,5];
const [a,b,c] = arr;

6. Gunakan operator spread

Operator spread ialah sintaks dalam ES6 yang boleh digunakan untuk menyebarkan semua elemen dalam tatasusunan atau objek, mengelakkan banyak gelung dan Operasi tugasan menjadikan kod lebih ringkas dan jelas. Contohnya:

//在ES5中的定义方式
var arr1 = [1,2,3];
var arr2 = [4,5,6];
var arr = arr1.concat(arr2);

//在ES6中的定义方式
const arr1 = [1,2,3];
const arr2 = [4,5,6];
const arr = [...arr1, ...arr2];

7. Gunakan objek Promise

Promise ialah objek penyemak imbas terbina dalam dalam ES6, yang menyediakan cara yang lebih baik untuk mengendalikan operasi tak segerak. Janji boleh menukar operasi tak segerak kepada struktur kod yang lebih mudah dibaca dan mengelakkan panggilan balik neraka. Contohnya:

//在ES5中的定义方式
setTimeout(function() {
  console.log("hello world");
}, 1000);

//在ES6中的定义方式（使用Promise）
const wait = ms => new Promise(resolve => setTimeout(resolve, ms));
wait(1000).then(() => {
  console.log("hello world");
});

8. Gunakan pengaturcaraan berfungsi

Pengaturcaraan fungsional ialah paradigma pengaturcaraan JavaScript yang memfokuskan pada pengabstrakan dan penggunaan semula fungsi dan menekankan ketulenan dan kebolehubahan fungsi ringkas dan intuitif. Contohnya:

//函数式编程的定义方式
const add = a => b => a+b;
const inc = add(1);
const double = add(2);

console.log(inc(5)); // 6
console.log(double(4)); // 6

Ringkasan

Artikel ini membincangkan beberapa teknik penulisan JavaScript, termasuk mengelakkan penggunaan pembolehubah global, menggunakan const dan biarkan kata kunci bukannya var, menggunakan fungsi anak panah, menggunakan rentetan templat, Gunakan tugasan memusnahkan, gunakan operator spread, gunakan objek Promise dan pengaturcaraan berfungsi, dsb. Petua ini boleh membantu anda memahami dan menggunakan JavaScript dengan lebih baik, meningkatkan kebolehbacaan dan kebolehselenggaraan kod anda serta menjadikan pembangunan web lebih cekap dan menyeronokkan.

Atas ialah kandungan terperinci Kemahiran menulis JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!