Ringkasan dan perkongsian 20 teknik singkatan JavaScript untuk meningkatkan kecekapan

Artikel ini menyusun dan berkongsi 20 teknik singkatan JavaScript untuk meningkatkan kecekapan saya harap ia akan membantu semua orang.

Petua Singkatan

Apabila mengisytiharkan berbilang pembolehubah pada masa yang sama, ia boleh dipendekkan menjadi satu baris

//Longhand
let x;
let y = 20;
 
//Shorthand
let x, y = 20;

Menggunakan pemusnahan, anda boleh menetapkan nilai kepada berbilang pembolehubah pada masa yang sama

//Longhand
let a, b, c;
a = 5;
b = 8;
c = 12;
//Shorthand
let [a, b, c] = [5, 8, 12];

Gunakan operator ternary untuk memudahkan jika lain

//Longhand 
let marks = 26; 
let result; 
if (marks >= 30) {
   result = 'Pass'; 
} else { 
   result = 'Fail'; 
} 
//Shorthand 
let result = marks >= 30 ? 'Pass' : 'Fail';

Gunakan operator || untuk pembolehubah Menentukan nilai lalai

pada asasnya mengambil kesempatan daripada ciri operator || Apabila hasil ungkapan sebelumnya ditukar kepada nilai Boolean, nilainya ialah hasil ungkapan berikut

//Longhand
let imagePath;
let path = getImagePath();
if (path !== null && path !== undefined && path !== '') {
    imagePath = path;
} else {
    imagePath = 'default.jpg';
}
//Shorthand
let imagePath = getImagePath() || 'default.jpg';

Gunakan operator && untuk memudahkan pernyataan if

Sebagai contoh, fungsi dipanggil hanya apabila keadaan tertentu adalah benar, yang boleh disingkatkan sebagai

//Longhand
if (isLoggedin) {
    goToHomepage();
 }
//Shorthand
isLoggedin && goToHomepage();

Gunakan pemusnahan untuk menukar nilai dua pembolehubah

let x = 'Hello', y = 55;
//Longhand
const temp = x;
x = y;
y = temp;
//Shorthand
[x, y] = [y, x];

Gunakan fungsi anak panah untuk memudahkan fungsi

//Longhand
function add(num1, num2) {
  return num1 + num2;
}
//Shorthand
const add = (num1, num2) => num1 + num2;

Anda perlu memberi perhatian kepada perbezaan antara fungsi anak panah dan fungsi biasa

Gunakan templat rentetan untuk memudahkan kod

Gunakan rentetan templat dan bukannya penggabungan rentetan asal

//Longhand
console.log('You got a missed call from ' + number + ' at ' + time);
//Shorthand
console.log(`You got a missed call from ${number} at ${time}`);

Rentetan berbilang baris juga boleh dipermudahkan menggunakan templat rentetan

//Longhand
console.log('JavaScript, often abbreviated as JS, is a\n' + 
            'programming language that conforms to the \n' + 
            'ECMAScript specification. JavaScript is high-level,\n' + 
            'often just-in-time compiled, and multi-paradigm.'
            );
//Shorthand
console.log(`JavaScript, often abbreviated as JS, is a
            programming language that conforms to the
            ECMAScript specification. JavaScript is high-level,
            often just-in-time compiled, and multi-paradigm.`
            );

Untuk padanan berbilang nilai, semua nilai boleh diletakkan dalam tatasusunan , gunakan kaedah tatasusunan untuk menyingkat

//Longhand
if (value === 1 || value === 'one' || value === 2 || value === 'two') {
  // Execute some code
}
// Shorthand 1
if ([1, 'one', 2, 'two'].indexOf(value) >= 0) {
   // Execute some code
}
// Shorthand 2
if ([1, 'one', 2, 'two'].includes(value)) { 
    // Execute some code 
}

dengan bijak menggunakan sintaks ringkas bagi Objek ES6

Contohnya, apabila nama sifat dan nama pembolehubah adalah sama, ia boleh disingkatkan terus kepada satu

let firstname = 'Amitav';
let lastname = 'Mishra';
//Longhand
let obj = {firstname: firstname, lastname: lastname};
//Shorthand
let obj = {firstname, lastname};

Gunakan operator unari untuk memudahkan penukaran rentetan kepada nombor

//Longhand
let total = parseInt('453');
let average = parseFloat('42.6');
//Shorthand
let total = +'453';
let average = +'42.6';

Gunakan kaedah repeat() untuk memudahkan pengulangan rentetan

//Longhand
let str = '';
for(let i = 0; i < 5; i ++) {
  str += &#39;Hello &#39;;
}
console.log(str); // Hello Hello Hello Hello Hello
// Shorthand
&#39;Hello &#39;.repeat(5);
// 想跟你说100声抱歉！
&#39;sorry\n&#39;.repeat(100);

Gunakan asterisk berganda dan bukannya Math.pow()

//Longhand
const power = Math.pow(4, 3); // 64
// Shorthand
const power = 4**3; // 64

Gunakan tilde berganda operator (~~) dan bukannya Math.floor()

//Longhand
const floor = Math.floor(6.8); // 6
// Shorthand
const floor = ~~6.8; // 6

Perhatikan bahawa ~~ hanya terpakai pada nombor kurang daripada 2147483647

Gunakan operator spread (...) dengan bijak untuk memudahkan kod

Permudahkan penggabungan tatasusunan

let arr1 = [20, 30];
//Longhand
let arr2 = arr1.concat([60, 80]); // [20, 30, 60, 80]
//Shorthand
let arr2 = [...arr1, 60, 80]; // [20, 30, 60, 80]

Salinan objek peringkat tunggal

let obj = {x: 20, y: {z: 30}};
//Longhand
const makeDeepClone = (obj) => {
  let newObject = {};
  Object.keys(obj).map(key => {
      if(typeof obj[key] === 'object'){
          newObject[key] = makeDeepClone(obj[key]);
      } else {
          newObject[key] = obj[key];
      }
});
return newObject;
}
const cloneObj = makeDeepClone(obj);
//Shorthand
const cloneObj = JSON.parse(JSON.stringify(obj));
//Shorthand for single level object
let obj = {x: 20, y: 'hello'};
const cloneObj = {...obj};

Cari jumlah maksimum dalam tatasusunan Nilai minimum

// Shorthand
const arr = [2, 8, 15, 4];
Math.max(...arr); // 15
Math.min(...arr); // 2

Gunakan untuk dalam dan untuk bagi untuk memudahkan gelung untuk biasa

let arr = [10, 20, 30, 40];
//Longhand
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}
//Shorthand
//for of loop
for (const val of arr) {
  console.log(val);
}
//for in loop
for (const index in arr) {
  console.log(arr[index]);
}

Memudahkan mendapatkan aksara tertentu dalam rentetan

let str = 'jscurious.com';
//Longhand
str.charAt(2); // c
//Shorthand
str[2]; // c

Shift Kecuali atribut objek

let obj = {x: 45, y: 72, z: 68, p: 98};
// Longhand
delete obj.x;
delete obj.p;
console.log(obj); // {y: 72, z: 68}
// Shorthand
let {x, p, ...newObj} = obj;
console.log(newObj); // {y: 72, z: 68}

Gunakan arr.filter(Boolean) untuk menapis nilai-nilai ahli tatasusunan falsey

let arr = [12, null, 0, 'xyz', null, -25, NaN, '', undefined, 0.5, false];
//Longhand
let filterArray = arr.filter(function(value) {
    if(value) return value;
});
// filterArray = [12, "xyz", -25, 0.5]
// Shorthand
let filterArray = arr.filter(Boolean);
// filterArray = [12, "xyz", -25, 0.5]

[Cadangan berkaitan: tutorial pembelajaran javascript】

Atas ialah kandungan terperinci Ringkasan dan perkongsian 20 teknik singkatan JavaScript untuk meningkatkan kecekapan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!