18 Petua Pengoptimuman JavaScript yang Perlu Anda Tahu

Dalam artikel ini, mari kita lihat 18 teknik pengoptimuman untuk JavaScript Ia sesuai untuk semua pembangun yang menggunakan pengaturcaraan JavaScript. Tujuan artikel ini adalah untuk membantu anda menjadi lebih mahir dalam menggunakan bahasa JavaScript untuk kerja pembangunan Saya berharap ia akan berguna kepada semua orang.

1 Penghakiman berbilang syarat

Apabila kita perlu menilai berbilang nilai, kita boleh menggunakan. termasuk kaedah tatasusunan.

//Bad
if (x === 'iphoneX' || x === 'iphone11' || x === 'iphone12') {
//code... 
}
//Good
if (['iphoneX', 'iphone11', 'iphone12'].includes(x)) {
//code...
}

2 Jika benar … lain

Apabila bahagian dalam keadaan if-else tidak mengandungi logik yang lebih besar, trinokular pengendali akan lebih baik.

// Bad
let test= boolean;
if (x > 100) {
test = true;
} else {
test = false;
}
// Good
let test = (x > 10) ? true : false;
//or we can simply use
let test = x > 10;

Selepas menyusun syarat, kami mengekalkan kandungan seperti yang ditunjukkan di bawah (trinokular mata kompleks):

let x = 300,
let test2 = (x > 100) ? &#39;greater 100&#39; : (x < 50) ? &#39;less 50&#39; : &#39;between 50 and 100&#39;;
console.log(test2); // "greater than 100"

3. ' Semakan nilai nol

Kadangkala kita perlu menyemak sama ada pembolehubah yang kita rujuk untuk nilai itu bukan nol atau Tidak Ditakrifkan atau '', kita boleh menggunakan tulisan litar pintas

// Bad
if (first !== null || first !== undefined || first !== '') {
let second = first;
}
// Good 短路写法
let second = first|| '';

4. Semak nilai nol dan tetapkan nilai lalai

Apabila kita menetapkan nilai dan mendapati pembolehubah kosong dan perlu menetapkan lalai nilai, kita boleh menggunakan tulisan litar pintas berikut

let first = null,
let second = first || 'default'
console.log(second)

4 Pengendali dua bit

Pengendali bitwise ialah pengetahuan asas. mata dalam tutorial pemula JavaScript, tetapi kami tidak selalunya menggunakan operator bitwise. Kerana tiada siapa yang mahu bekerja dengan 1s dan 0s tanpa berurusan dengan binari.

Tetapi pengendali dwi-bit mempunyai kes yang sangat praktikal. Anda boleh menggunakan pengendali dwi-bit dan bukannya Math.floor( ). Kelebihan pengendali kedudukan dua-negatif ialah ia melakukan operasi yang sama dengan lebih pantas

// Bad
Math.floor(4.9) === 4  //true
// Good
~~4.9 === 4  //true

5 pengoptimuman kecil biasa ES6 - Sifat objek

const x,y = 5
// Bad
const obj = { x:x, y:y }
// Good
const obj = { x, y }

6 pengoptimuman kecil biasa ES6 - fungsi anak panah

//Bad
function sayHello(name) {
  console.log('Hello', name);
}
setTimeout(function() {
  console.log('Loaded')
}, 2000)
list.forEach(function(item) {
  console.log(item)
})
// Good
const sayHello = name => console.log('Hello', name)
setTimeout(() => console.log('Loaded'), 2000)
list.forEach(item => console.log(item))

7 Nilai pulangan formula

ialah kata kunci yang biasa kami gunakan untuk mengembalikan hasil akhir fungsi. Fungsi anak panah dengan hanya satu pernyataan boleh mengembalikan hasil secara tersirat (fungsi mesti menghilangkan tanda kurungan ({ }) untuk menghilangkan kata kunci pulangan).

Untuk mengembalikan pernyataan berbilang baris (seperti teks objek), anda perlu menggunakan () dan bukannya { } untuk membalut badan fungsi. Ini memastikan bahawa kod dinilai sebagai satu kenyataan.

//Bad
function calcCircumference(diameter) {
  return Math.PI * diameter
}
// Good
const calcCircumference = diameter => (
  Math.PI * diameter
)

8 pengoptimuman kecil biasa ES6 - tugasan memusnahkan

const form = { a:1, b:2, c:3 }
//Bad
const a = form.a
const b = form.b
const c = form.c
// Good
const { a, b, c } = form

9 pengoptimuman Pengoptimuman - Pengendali sebaran

Nilai pulangan ialah kata kunci yang biasanya kami gunakan untuk mengembalikan hasil akhir fungsi. Fungsi anak panah dengan hanya satu pernyataan boleh mengembalikan hasil secara tersirat (fungsi mesti menghilangkan tanda kurungan ({ }) untuk menghilangkan kata kunci pulangan).

Untuk mengembalikan pernyataan berbilang baris (seperti teks objek), anda perlu menggunakan () dan bukannya { } untuk membalut badan fungsi. Ini memastikan bahawa kod dinilai sebagai satu kenyataan.

const odd = [ 1, 3, 5 ]
const arr = [ 1, 2, 3, 4 ]
// Bad
const nums = [ 2, 4, 6 ].concat(odd)
const arr2 = arr.slice( )
// Good
const nums = [2 ,4 , 6, ...odd]
const arr2 = [...arr]

10 Pemprosesan biasa tatasusunan

Kuasai kaedah tatasusunan biasa, simpan dalam fikiran anda, dan jangan lakukan lihat API semasa menulis , ini boleh meningkatkan kecekapan pengekodan dengan berkesan Lagipun, kaedah ini digunakan setiap hari

setiap beberapa peta penapis untukSetiap find findIndex mengurangkan termasuk

const arr = [1,2,3]
//every 每一项都成立，才会返回true
console.log( arr.every(it => it>0 ) ) //true
//some 有一项都成了，就会返回true
console.log( arr.some(it => it>2 ) ) //true
//filter 过滤器
console.log( arr.filter(it => it===2 ) ) //[2]
//map 返回一个新数组
console.log( arr.map(it => it==={id:it} ) ) //[ {id:1},{id:2},{id:3} ]
//forEach 没有返回值
console.log( arr.forEach(it => it===console.log(it)) ) //undefined
//find 查找对应值 找到就立马返回符合要求的新数组
console.log( arr.find(it => it===it>2) ) //3
//findIndex 查找对应值 找到就立马返回符合要求新数组的下标
console.log( arr.findIndex(it => it===it>2) ) //2
//reduce 求和或者合并数组
console.log( arr.reduce((prev,cur) => prev+cur) ) //6
//includes 求和或者合并数组
console.log( arr.includes(1) ) //true
//数组去重
const arr1 = [1,2,3,3]
const removeRepeat = (arr) => [...new Set(arr1)]//[1,2,3]
//数组求最大值
Math.max(...arr)//3
Math.min(...arr)//1
//对象解构 这种情况也可以使用Object.assign代替
let defaultParams={
    pageSize:1,
    sort:1
}
//goods1
let reqParams={
    ...defaultParams,
    sort:2
}
//goods2
Object.assign( defaultParams, {sort:2} )

11. Bandingkan pulangan

Menggunakan perbandingan dalam penyataan pulangan boleh mengurangkan kod daripada 5 baris kepada 1 baris.

// Bad
let test
const checkReturn = () => {
    if (test !== undefined) {
        return test;
    } else {
        return callMe('test');
}
}
// Good
const checkReturn = () => {
return test || callMe('test');
}

12. Panggilan fungsi pendek

Kita boleh menggunakan operator ternary untuk melaksanakan fungsi jenis ini.

const test1 =() => {
  console.log('test1');
}
const test2 =() => {
  console.log('test2');
}
const test3 = 1;
if (test3 == 1) {
  test1()
} else {
  test2()
}
// Good
test3 === 1? test1():test2()

13.switch code block (ifelse code block) singkatan

Kami boleh menyimpan syarat dalam objek nilai kunci, Ia kemudian boleh digunakan mengikut keadaan.

// Bad
switch (data) {
  case 1:
    test1();
  break;
  case 2:
    test2();
  break;
  case 3:
    test();
  break;
  // And so on...
}
// Good
const data = {
  1: test1,
  2: test2,
  3: test
}
data[anything] && data[anything]()
// Bad
if (type === 'test1') {
  test1();
}
else if (type === 'test2') {
  test2();
}
else if (type === 'test3') {
  test3();
}
else if (type === 'test4') {
  test4();
} else {
  throw new Error('Invalid value ' + type);
}
// Good
const types = {
  test1: test1,
  test2: test2,
  test3: test3,
  test4: test4
};
const func = types[type];
(!func) && throw new Error('Invalid value ' + type); func();

14 Singkatan rentetan berbilang baris

Apabila kami memproses rentetan berbilang baris dalam kod, kami boleh melakukan ini:

// Bad
const data = 'abc abc abc abc abc abc\n\t'
+ 'test test,test test test test\n\t'
// Good
const data = `abc abc abc abc abc abc
         test test,test test test test`

15 Object.entry() Object.values() Object.keys()

Object.entry() Atribut. boleh menukar objek kepada tatasusunan objek.

Object.values() boleh mendapatkan nilai objek

Object.keys() boleh mendapatkan nilai kunci objek

const data = { test1: 'abc', test2: 'cde' }
const arr1 = Object.entries(data)
const arr2 = Object.values(data)
const arr3 = Object.keys(data)
/** arr1 Output:
[ 
    [ 'test1', 'abc' ],
    [ 'test2', 'cde' ],
]
**/
/** arr2 Output:
['abc', 'cde']
**/
/** arr3 Output:
['test1', 'test2']
**/

16 . Ulang rentetan berbilang kali

Untuk mengulang aksara yang sama beberapa kali, kita boleh menggunakan gelung for dan menambahnya pada gelung yang sama.

//Bad 
let test = ''; 
for(let i = 0; i < 5; i ++) { 
  test += &#39;test,&#39;; 
} 
console.log(str);// test,test,test,test,test,
//good 
console.log(&#39;test,&#39;.repeat(5))

17. Singkatan kuasa

Kebaikan fungsi kuasa eksponen matematik adalah seperti berikut:

//Bad 
Math.pow(2,3)// 8
//good 
2**3 // 8

18 Pemisah nombor

Anda kini boleh mengasingkan nombor dengan mudah hanya dengan menggunakan _. Ini akan memudahkan untuk mengendalikan sejumlah besar data.

//old syntax
let number = 98234567
//new syntax
let number = 98_234_567

Jika anda ingin menggunakan ciri terkini versi terkini JavaScript (ES2021/ES12), sila semak perkara berikut:

• 1.replaceAll(): Mengembalikan rentetan baharu di mana semua corak yang sepadan digantikan dengan perkataan gantian baharu.

• 2.Promise.any(): Objek Promise boleh lelar diperlukan Apabila Promise selesai, Promise dengan nilai dikembalikan.

• 3.weakref: Objek ini mempunyai rujukan yang lemah kepada objek lain dan tidak menghalang objek daripada menjadi sampah dikumpul.

• 4.FinalizationRegistry: Membolehkan anda meminta panggilan balik apabila objek dikumpul sampah.

• 5 Kaedah persendirian: Pengubah suai kaedah dan aksesori: Kaedah persendirian boleh diisytiharkan dengan #.

• 6. Operator logik: && dan ||.

• 7.Intl.ListFormat: Objek ini mendayakan pemformatan senarai sensitif bahasa.

• 8.Intl.DateTimeFormat: Objek ini mendayakan pemformatan tarikh dan masa yang sensitif bahasa.

[Pembelajaran yang disyorkan: tutorial lanjutan javascript]

Atas ialah kandungan terperinci 18 Petua Pengoptimuman JavaScript yang Perlu Anda Tahu. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!