Maison  >  Article  >  interface Web  >  10 conseils pratiques en JavaScript (partager)

10 conseils pratiques en JavaScript (partager)

青灯夜游
青灯夜游avant
2021-01-04 17:55:262423parcourir

10 conseils pratiques en JavaScript (partager)

Recommandations associées : "Tutoriel vidéo javascript"

Je suis toujours à la recherche de nouvelles façons d'améliorer l'efficacité.

Et JavaScript est toujours plein de surprises inattendues.

1. Convertir l'objet arguments en un tableau

L'objet arguments est un objet de type tableau accessible à l'intérieur de la fonction, qui contient le valeurs transmises à la valeur de l'argument de la fonction.

Mais ceci est différent des autres tableaux, nous pouvons accéder à la valeur et obtenir la longueur, mais nous ne pouvons pas utiliser d'autres méthodes de tableau dessus.

Heureusement, nous pouvons convertir cela en un tableau régulier :

var argArray = Array.prototype.slice.call(arguments);

2. Additionnez toutes les valeurs du tableau

Mon réflexe initial était d'utiliser une boucle, mais ce serait trop encombrant.

var numbers = [3, 5, 7, 2];
var sum = numbers.reduce((x, y) => x + y);
console.log(sum); // returns 17

3. Court-circuit conditionnel

On a le code suivant :

if (hungry) {
    goToFridge();
}

En utilisant des variables avec des fonctions, on Peut le rendre plus court :

hungry && goToFridge()

4. Utilisez la logique ou ||

pour la condition que j'avais l'habitude de déclarer mes variables au début de la fonction pour éviter d'avoir à undefined apparaît en cas d'erreur inattendue.

function doSomething(arg1){ 
    arg1 = arg1 || 32; // if it's not already set, arg1 will have 32 as a default value
}

5. Opérateur virgule

L'opérateur virgule (,) peut évaluer chacun de ses opérandes (de gauche à droite) et renvoie la valeur du dernier opérande.

let x = 1;

x = (x++, x);

console.log(x);
// expected output: 2

x = (2, 3);

console.log(x);
// expected output: 3

6. Utilisez la longueur pour ajuster la taille du tableau

Nous pouvons utiliser l'attribut length pour ajuster la taille du tableau ou effacer le tableau

var array = [11, 12, 13, 14, 15];  
console.log(array.length); // 5  

array.length = 3;  
console.log(array.length); // 3  
console.log(array); // [11,12,13]

array.length = 0;  
console.log(array.length); // 0  
console.log(array); // []

7. Utiliser la déstructuration de tableau pour échanger des valeurs

La syntaxe d'affectation de déstructuration est une expression JavaScript qui peut décompresser les valeurs du tableau. ou les propriétés de l'objet en différentes variables.

let a = 1, b = 2
[a, b] = [b, a]
console.log(a) // -> 2
console.log(b) // -> 1

8. Organiser au hasard les éléments du tableau

Chaque jour, j'organise au hasard

organise au hasard, organise au hasard

var list = [1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(list.sort(function() {
    return Math.random() - 0.5
})); 
// [4, 8, 2, 9, 1, 3, 6, 5, 7]

9. Les noms de propriétés peuvent être dynamiques

Vous pouvez attribuer des propriétés dynamiques avant de déclarer l'objet.

const dynamic = 'color';
var item = {
    brand: 'Ford',
    [dynamic]: 'Blue'
}
console.log(item); 
// { brand: "Ford", color: "Blue" }

10. Filtrer les valeurs uniques

Pour tous les amateurs d'ES6, nous pouvons utiliser Set avec l'opérateur spread (spread) Object pour créer un nouveau tableau contenant uniquement des valeurs uniques.

const my_array = [1, 2, 2, 3, 3, 4, 5, 5]
const unique_array = [...new Set(my_array)];
console.log(unique_array); // [1, 2, 3, 4, 5]

Pensées finales

La responsabilité est bien plus importante que l'efficacité.

Votre site Web doit fonctionner dans tous les navigateurs.

Vous pouvez utiliser Endtest ou d'autres outils similaires pour vous en assurer.

Et vous ? Avez-vous des trucs ou astuces JavaScript à partager ?

Adresse originale en anglais : https://dev.to/zandershirley/10-practical-javascript-tricks-2b7h

Auteur : Zander Shirley

Pour plus de connaissances liées à la programmation, veuillez visiter : Introduction à la programmation ! !

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!

Déclaration:
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer