Maison > interface Web > js tutoriel > le corps du texte

Analyser 8 pièges courants en JavaScript

coldplay.xixi
Libérer: 2020-06-15 15:53:00
avant
1601 Les gens l'ont consulté

Analyser 8 pièges courants en JavaScript

8 pièges courants en JavaScript

Partager :

Note du traducteur : Dans Dans le long voyage de la programmation, il y a toujours des pièges qui vous feront fondre en larmes.

Texte original anglais : Qui a dit que javascript était facile ?

Traducteur : Fundebug

Nous donnons ici quelques conseils et énumérons quelques pièges pour les débutants en JavaScript. Si vous êtes déjà maçon, vous pouvez également le lire.

1. Avez-vous essayé de trier les éléments du tableau ?

JavaScript utilise l'ordre alphanumérique par défaut. Par conséquent, le résultat de [1,2,5,10].sort() est [1, 10, 2, 5].

Si vous souhaitez trier correctement, vous devez faire ceci : [1,2,5,10].sort((a, b) => a - b)

2. new Date() est très simple à utiliser

Les méthodes d'utilisation de new Date() sont :

Ne reçoit aucun paramètre : renvoie l'heure actuelle ; reçoit un paramètre x : renvoie le 1er janvier ; , 1970 + x La valeur en millisecondes. new Date(1, 1, 1) renvoie le 1er février 1901. Cependant..., new Date(2016, 1, 1) n'ajoutera pas 2016 à 1900, mais représentera uniquement 2016.

3. La fonction de remplacement ne remplace pas vraiment ?

let s = "bob"
const replaced = s.replace('b', 'l')
replaced === "lob" // 只会替换掉第一个b
s === "bob" // 并且s的值不会变
Copier après la connexion

Si vous souhaitez remplacer tous les b, utilisez l'expression régulière :

"bob".replace(/b/g, 'l') === 'lol'
Copier après la connexion

4 Soyez prudent avec les opérations de comparaison

// 这些可以'abc' === 'abc' // true1 === 1 // true// 然而这些不行[1,2,3] === [1,2,3]
 // false{a: 1} === {a: 1} // false{} === {} // false
Copier après la connexion

car [1,2,3] et [. 1,2,3] sont deux tableaux différents, mais leurs éléments sont les mêmes. Par conséquent, il ne peut pas être jugé simplement par ===. ·

5. Le tableau n'est pas un type de base

typeof {} === 'object' // true
typeof 'a' === 'string' // true
typeof 1 === number // true
// 但是....
typeof [] === 'object' // true
Copier après la connexion

Si vous souhaitez déterminer si une variable var est un tableau, vous devez utiliser Array.isArray(var).

6. Clôture

Il s'agit d'une question d'entretien JavaScript classique :

const Greeters = []
for (var i = 0 ; i < 10 ; i++) {
Greeters.push(function () { return console.log(i) })
}
Greeters[0]() // 10
Greeters[1]() // 10
Greeters[2]() // 10
Copier après la connexion

Bien qu'elle soit censée produire 0,1,2,…, ce n'est pas le cas. Savez-vous comment déboguer ?
Il y a deux manières :

Utilisez let au lieu de var. Remarque : vous pouvez vous référer à un autre blog de Fundebug. « let » peut-il remplacer « var » dans ES6 ? Utiliser la fonction de liaison. Remarque : vous pouvez vous référer à l'autre blog de Fundebug. Les débutants en JavaScript doivent lire « ceci » Greeters.push(console.log.bind(null, i))

Bien sûr, il existe de nombreuses solutions. Ces deux-là sont mes préférés !

7. Concernant la liaison

Que produira le code suivant ?

class Foo {
    constructor(name) {
        this.name = name
    }
    greet() {
        console.log(&#39;hello, this is &#39;, this.name)
    }
    someThingAsync() {
        return Promise.resolve()
    }
    asyncGreet() {
        this.someThingAsync().then(this.greet)
    }
}
new Foo(&#39;dog&#39;).asyncGreet()
Copier après la connexion

Si vous dites que le programme va planter et signaler une erreur : Cannot read property ‘name’ of undefined。

1 Parce que le geet de la ligne 16 n'est pas exécuté dans le bon environnement. Bien sûr, il existe de nombreuses façons de résoudre ce BUG !

J'aime utiliser la fonction bind pour résoudre le problème :

//code from http://caibaojian.com/8-javascript-attention.html
asyncGreet () {
this.someThingAsync()
.then(this.greet.bind(this))
}
Copier après la connexion

Cela garantira que greet sera appelé par l'instance de Foo, plutôt que par this de la fonction locale.

2. Si vous souhaitez que greet ne soit jamais lié à la mauvaise portée, vous pouvez utiliser bind dans le constructeur.

class Foo {
    constructor(name) {
        this.name = name this.greet = this.greet.bind(this)
    }
}
Copier après la connexion

3. Vous pouvez également utiliser les fonctions fléchées (=>) pour empêcher la modification de la portée. Remarque : Vous pouvez vous référer à l'autre blog de Fundebug "Arrow Function", une lecture incontournable pour les débutants en JavaScript.

asyncGreet() {
    this.someThingAsync().then(() = >{
        this.greet()
    })
}
Copier après la connexion

8. Math.min() est plus grand que Math.max()

Math.min() < Math.max() // false
Copier après la connexion

car Math.min() renvoie Infinity, tandis que Math.max() renvoie -Infinity。

Tutoriel recommandé : "Tutoriel de base js"

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!

Étiquettes associées:
source:webhek.com
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal