Résumé et partage de 20 techniques d'abréviation JavaScript pour améliorer l'efficacité

Cet article compile et partage 20 techniques d'abréviation JavaScript pour améliorer l'efficacité. J'espère qu'il sera utile à tout le monde.

Compétences en abréviation

Lorsque plusieurs variables sont déclarées en même temps, elles peuvent être abrégées en une seule ligne

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

Grâce à la déstructuration, plusieurs variables peuvent se voir attribuer des valeurs en même temps

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

Utilisez intelligemment l'opérateur ternaire pour simplifier if else

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

Utilisez l'opérateur || pour attribuer une valeur par défaut à une variable

L'essence est de profiter des caractéristiques de l'opérateur || est converti en une valeur booléenne false, la valeur est le résultat de l'expression suivante

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

Utilisez l'opérateur && pour simplifier l'instruction if

Par exemple, une fonction est appelée uniquement lorsqu'une certaine condition est vraie, ce qui peut être abrégé

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

Utilisez la déstructuration pour échanger les valeurs de deux variables

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

Appliquer des fonctions fléchées pour simplifier les fonctions

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

Obligatoire Faites attention à la différence entre les fonctions fléchées et les fonctions ordinaires

Utilisez des modèles de chaîne pour simplifier le code

Utiliser des chaînes de modèles au lieu de la concaténation de chaînes d'origine

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

Les chaînes multilignes peuvent également être simplifiées à l'aide de modèles de chaînes

//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.`
            );

Pour la correspondance de valeurs multiples, toutes les valeurs peuvent être placées dans un tableau et abrégées via la méthode du tableau

//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 
}

Utiliser la syntaxe concise des objets ES6

Par exemple, lorsque le nom de la propriété et le nom de la variable sont identiques, ils peuvent être directement abrégés en un

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

Utilisez des opérateurs unaires pour simplifier les caractères. Chaîne en nombre

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

Utilisez la méthode repeat() pour simplifier la répétition d'une chaîne

//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);

Utilisez un double astérisque au lieu de Math.pow()

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

Utilisez l'opérateur double tilde (~~) au lieu de Math.floor()

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

Il convient de noter que ~~ ne s'applique qu'aux nombres inférieurs que 2147483647

Utilisez l'opérateur spread (...) pour simplifier le code

Simplifiez la fusion de tableaux

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]

Copie d'objets monocouches

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};

Trouver les valeurs maximales et minimales dans le tableau

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

Utiliser pour in et for of pour simplifier les boucles for ordinaires

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]);
}

Simplifier l'obtention d'un certain caractère dans une chaîne

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

Supprimer les attributs d'objet

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}

Utiliser arr.filter(Boolean) pour filtrer la valeur des membres du tableau 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]

【Connexe recommandations : tutoriel d'apprentissage javascript】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!