Résumer 15 compétences de développement JavaScript (organisées et partagées)

Cet article partagera avec vous quelques astuces souvent utilisées dans les projets. JavaScript possède de nombreuses fonctionnalités intéressantes que la plupart des développeurs débutants et intermédiaires ne connaissent pas. J'espère que cela aide tout le monde.

1. Ajouter conditionnellement des propriétés aux objets

Nous pouvons utiliser l'opérateur spread (...) pour ajouter rapidement des propriétés aux objets JS de manière conditionnelle.

const condition = true;
const person = {
  id: 1,
  name: 'John Doe',
  ...(condition && { age: 16 }),
};

L'opérateur && renvoie la dernière expression évaluée si chaque opérande est évalué comme vrai. Ainsi, un objet {age: 16} est renvoyé, qui est ensuite développé pour faire partie de l'objet personne.

Si la condition est fausse, JavaScript fera quelque chose comme ceci :

const person = {
  id: 1,
  name: '前端小智',
  ...(false), 
};
// 展开 `false` 对对象没有影响
console.log(person); // { id: 1, name: 'John Doe' }

2. Vérifiez si l'attribut existe dans l'objet

Vous pouvez utiliser le mot-clé in pour vérifier si un certain attribut existe dans l'objet JavaScript. .

const person = { name: '前端小智', salary: 1000 };
console.log('salary' in person); // true
console.log('age' in person); // false

3. Noms de propriétés dynamiques dans les objets

Définir les propriétés des objets à l'aide de clés dynamiques est simple. Utilisez simplement ['key name'] pour ajouter des propriétés :

const dynamic = 'flavour';
var item = {
  name: '前端小智',
  [dynamic]: '巧克力'
}
console.log(item); // { name: '前端小智', flavour: '巧克力' }

La même astuce peut être utilisée pour référencer les propriétés d'un objet à l'aide de clés dynamiques :

const keyName = 'name';
console.log(item[keyName]); // returns '前端小智'

4. Déstructuration d'objets à l'aide de clés dynamiques

Nous le savons dans les objets. Lors de la déstructuration, vous pouvez utiliser : pour renommer les propriétés déstructurées. Mais saviez-vous que vous pouvez également déconstruire les propriétés d’un objet lorsque le nom de la clé est dynamique ?

const person = { id: 1, name: '前端小智' };
const { name: personName } = person;
console.log(personName); // '前端小智'

Maintenant, nous utilisons des clés dynamiques pour déstructurer les propriétés :

const templates = {
  'hello': 'Hello there',
  'bye': 'Good bye'
};
const templateName = 'bye';
const { [templateName]: template } = templates;
console.log(template); // Good bye

5. Opérateur de fusion de valeurs nulles

L'opérateur ?? est utile lorsque nous voulons vérifier si une variable est nulle ou indéfinie. Lorsque son opérande gauche est nul ou indéfini, il renvoie l'opérande droit, sinon il renvoie son opérande gauche.

const foo = null ?? 'Hello';
console.log(foo); // 'Hello'
const bar = 'Not null' ?? 'Hello';
console.log(bar); // 'Not null'
const baz = 0 ?? 'Hello';
console.log(baz); // 0

Dans le troisième exemple, 0 est renvoyé car même si 0 est considéré comme faux en JS, il n'est ni nul ni indéfini. Vous pensez peut-être que nous pouvons utiliser l'opérateur || mais il y a une différence entre les deux

Vous pensez peut-être que nous pouvons utiliser l'opérateur || ici, mais il y a une différence entre les deux.

const cannotBeZero = 0 || 5;
console.log(cannotBeZero); // 5
const canBeZero = 0 ?? 5;
console.log(canBeZero); // 0

6. Chaîne facultative ?.

Rencontrez-vous souvent des erreurs comme celle-ci : TypeError : Impossible de lire la propriété « foo » de null. C'est un problème ennuyeux pour chaque développeur. Un chaînage facultatif a été introduit pour résoudre ce problème. Jetons un coup d'oeil :

const book = { id:1, title: 'Title', author: null };
// 通常情况下，你会这样做
console.log(book.author.age) // throws error
console.log(book.author && book.author.age); // null
// 使用可选链
console.log(book.author?.age); // undefined
// 或深度可选链
console.log(book.author?.address?.city); // undefined

Vous pouvez également utiliser la chaîne de fonctions facultative suivante :

const person = {
  firstName: '前端',
  lastName: '小智',
  printName: function () {
    return `${this.firstName} ${this.lastName}`;
  },
};
console.log(person.printName()); // '前端 小智'
console.log(persone.doesNotExist?.()); // undefined

7. Utilisez l'opérateur !!

 !! en une valeur booléenne (vrai ou faux) :

const greeting = 'Hello there!';
console.log(!!greeting) // true
const noGreeting = '';
console.log(!!noGreeting); // false

8. Conversion de chaînes et d'entiers

Utilisez l'opérateur + pour convertir rapidement des chaînes en nombres :

const stringNumer = '123';
console.log(+stringNumer); //123
console.log(typeof +stringNumer); //'number'

Pour convertir rapidement des nombres en chaînes, vous pouvez également utiliser le symbole de l'opérateur +, suivi d'une chaîne vide :

const myString = 25 + '';
console.log(myString); //'25'
console.log(typeof myString); //'string'

Ces conversions de types sont très pratiques, mais elles entraînent moins de clarté et de lisibilité du code. Par conséquent, le développement réel nécessite une sélection et une utilisation minutieuses.

9. Vérifiez les fausses valeurs dans le tableau

Tout le monde aurait dû utiliser les méthodes de tableau : filter, some, each. Ces méthodes peuvent être utilisées avec la méthode booléenne pour tester les valeurs vraies et fausses.

const myArray = [null, false, 'Hello', undefined, 0];
// 过滤虚值
const filtered = myArray.filter(Boolean);
console.log(filtered); // ['Hello']
// 检查至少一个值是否为真
const anyTruthy = myArray.some(Boolean);
console.log(anyTruthy); // true
// 检查所有的值是否为真
const allTruthy = myArray.every(Boolean);
console.log(allTruthy); // false

Voici comment ça marche. Nous savons que ces méthodes de tableau acceptent une fonction de rappel, nous passons donc un booléen comme fonction de rappel. La fonction booléenne elle-même accepte un paramètre et renvoie vrai ou faux selon la vérité du paramètre. Donc :

myArray.filter(val => Boolean(val));

équivaut à :

myArray.filter(Boolean);

10. Aplatissement des tableaux

Il existe une méthode plate sur le prototype Array qui crée un seul tableau à partir d'un tableau de tableaux.

const myArray = [{ id: 1 }, [{ id: 2 }], [{ id: 3 }]];
const flattedArray = myArray.flat(); 
//[ { id: 1 }, { id: 2 }, { id: 3 } ]

Vous pouvez également définir un niveau de profondeur, spécifiant la profondeur à laquelle une structure de tableau imbriquée doit être aplatie. Par exemple :

const arr = [0, 1, 2, [[[3, 4]]]];
console.log(arr.flat(2)); // returns [0, 1, 2, [3,4]]

11.Object.entries

La plupart des développeurs utilisent la méthode Object.keys pour parcourir les objets. Cette méthode renvoie uniquement un tableau de clés d'objet, pas de valeurs. Nous pouvons utiliser Object.entries pour obtenir des clés et des valeurs.

const person = {
  name: '前端小智',
  age: 20
};
Object.keys(person); // ['name', 'age']
Object.entries(data); // [['name', '前端小智'], ['age', 20]]

Pour parcourir un objet, nous pouvons procéder comme suit :

Object.keys(person).forEach((key) => {
  console.log(`${key} is ${person[key]}`);
});
// 使用 entries 获取键和值
Object.entries(person).forEach(([key, value]) => {
  console.log(`${key} is ${value}`);
});
// name is 前端小智
// age is 20

Les deux méthodes ci-dessus renvoient le même résultat, mais Object.entries est plus facile à obtenir les paires clé-valeur.

Méthode 12.replaceAll

En JS, pour remplacer toutes les occurrences d'une chaîne par une autre chaîne, nous devons utiliser une expression régulière comme celle-ci :

const str = 'Red-Green-Blue';
// 只规制第一次出现的
str.replace('-', ' '); // Red Green-Blue
// 使用 RegEx 替换所有匹配项
str.replace(/\-/g, ' '); // Red Green Blue

Mais dans ES12, une nouvelle méthode nommée replaceAll était ajouté à String.prototype, qui remplace toutes les occurrences d'une chaîne par une autre valeur de chaîne.

str.replaceAll('-', ' '); // Red Green Blue

13. Séparateur de nombres

Vous pouvez utiliser le trait de soulignement comme séparateur de nombres, ce qui permet de compter facilement le nombre de 0 dans le nombre.

// 难以阅读
const billion = 1000000000;
// 易于阅读
const readableBillion = 1000_000_000;
console.log(readableBillion) //1000000000

下划线分隔符也可以用于BigInt数字，如下例所示

const trillion = 1000_000_000_000n;
console.log(trillion); // 1000000000000

14.document.designMode

与前端的JavaScript有关，设计模式让你可以编辑页面上的任何内容。只要打开浏览器控制台，输入以下内容即可。

document.designMode = 'on';

15.逻辑赋值运算符

逻辑赋值运算符是由逻辑运算符&&、||、??和赋值运算符=组合而成。

const a = 1;
const b = 2;
a &&= b;
console.log(a); // 2
// 上面等价于
a && (a = b);
// 或者
if (a) {
  a = b
}

检查a的值是否为真，如果为真，那么更新a的值。使用逻辑或 ||操作符也可以做同样的事情。

const a = null;
const b = 3;
a ||= b;
console.log(a); // 3
// 上面等价于
a || (a = b);

使用空值合并操作符 ??:

const a = null;
const b = 3;
a ??= b;
console.log(a); // 3
// 上面等价于
if (a === null || a === undefined) {
  a = b;
}

注意：??操作符只检查 null 或 undefined 的值。

【相关推荐：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!