Rumah > Artikel > hujung hadapan web > 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 += 'Hello '; } console.log(str); // Hello Hello Hello Hello Hello // Shorthand 'Hello '.repeat(5); // 想跟你说100声抱歉! 'sorry\n'.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!