Conseils et pièges que les débutants en js devraient connaître

Voici quelques conseils et pièges que les débutants en Javascript devraient connaître. Si vous êtes déjà un expert, révisez cela.

Javascript n'est qu'un langage de programmation. Comment cela pourrait-il mal se passer ?

1. Avez-vous déjà essayé de trier un ensemble de nombres ?

La fonction sort() de Javascript utilise le tri alphanumérique (points de code String Unicode) par défaut.

Donc [1,2,5,10].sort() affichera [1, 10, 2, 5].

Pour trier correctement un tableau, vous pouvez utiliser [1,2,5,10].sort((a, b) => a — b)

Une solution très simple, à condition d'avoir Sachez qu'il y a est un tel piège

2. new Date() est génial

new Date() Acceptable :

• Aucun paramètre : renvoie l'heure actuelle

• Un paramètre x : renvoie le 1er janvier 1970 + x millisecondes. Ceux qui connaissent Unix savent pourquoi.

• new Date(1, 1, 1) renvoie 1901, le 1er février. Parce que le premier paramètre représente 1900 plus 1 an, le deuxième paramètre représente le deuxième mois de cette année (donc février) — Les personnes ayant des circuits cérébraux normaux commenceront à indexer à partir de 1 — , et le troisième paramètre est très évidemment le premier jour de le mois, donc 1 — parfois l'indice commence à 1 — .

• nouvelle Date(2016, 1, 1) n'ajoutera pas 2016 à 1900. Cela ne représente que 2016.

3. Remplacer ne "remplace" pas

let s = "bob"const replaced = s.replace('b', 'l')
replaced === "lob"
s === "bob"

Je pense que c'est une bonne chose parce que je ne le fais pas. comme les fonctions changent leurs entrées. Il faut également savoir que replace ne remplacera que la première chaîne correspondante :

Si vous souhaitez remplacer toutes les chaînes correspondantes, vous pouvez utiliser une expression régulière avec le drapeau /g :

"bob".replace(/b/g, 'l') === 'lol' // 替换所有匹配的字符串

4. Faites attention lorsque vous comparez

// These are ok'abc' === 'abc' // true1 === 1         // true// These are not
[1,2,3] === [1,2,3] // false
{a: 1} === {a: 1}   // false
{} === {}           // false

Raison : [1,2,3] et [1,2,3] sont deux tableaux indépendants. Il se trouve qu’ils contiennent la même valeur. Ils ont des références différentes et ne peuvent être comparés à ===.

5. Le tableau n'est pas un type de données primitif

typeof {} === 'object'  // truetypeof 'a' === 'string' // truetypeof 1 === number     // true// But....typeof [] === 'object'  // true

Si vous voulez savoir si votre variable est un tableau, vous pouvez toujours utiliser Array.isArray(myVar)

6. . Fermeture

C'est une question d'entretien bien connue :

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

Pensez-vous que cela produira 0, 1, 2... ? Savez-vous pourquoi il ne produit pas comme ceci ? Comment le modifieriez-vous pour qu'il génère 0, 1, 2... ?

Il y a deux solutions possibles ici :

Remplacer let par var Résolu.

let et varLa différence. est la portée. La portée de var est le bloc fonctionnel le plus proche, et la portée de let est le bloc englobant le plus proche. Le bloc englobant peut être plus petit que le bloc fonctionnel (s'il ne se trouve dans aucun bloc, à la fois let et var. sont mondiaux). (Source)

Alternative : Utiliser bind:

Greeters.push(console.log.bind(null, i))

Il existe de nombreuses autres façons. Ce ne sont que mes deux meilleurs choix

7. En parlant de liaison

que pensez-vous que cela va produire ?

class Foo {  constructor (name) {this.name = name
  }
  greet () {console.log('hello, this is ', this.name)
  }
  someThingAsync () {return Promise.resolve()
  }
  asyncGreet () {this.someThingAsync()
    .then(this.greet)
  }
}new Foo('dog').asyncGreet()

Si vous pensez que cette application va planter avec l'invite Cannot read property 'name' of undefined, un point pour vous.

Cause : greet n'a pas été exécuté dans le bon contexte. Encore une fois, il existe encore de nombreuses solutions à ce problème.

Personnellement, j'aime

asyncGreet () {this.someThingAsync()
.then(this.greet.bind(this))
}

Cela garantit que l'instance de la classe est appelée comme contexte greet.

Si vous pensez que greet ne doit pas s'exécuter en dehors du contexte de l'instance, vous pouvez le lier dans le constructeur de la classe :

class Foo {constructor (name) {this.name = namethis.greet = this.greet.bind(this)
}
}

Vous devez également connaître les fonctions fléchées ( => ) peut être utilisé pour préserver le contexte. Cette approche fonctionnerait également :

asyncGreet () {this.someThingAsync()
.then(() => {this.greet()
})
}

même si je ne pense pas que la dernière approche soit élégante.

Je suis content que nous ayons résolu ce problème.

Résumé

Félicitations, vous pouvez désormais mettre votre programme sur Internet en toute sécurité. Cela ne fonctionnera probablement même pas mal (mais c'est généralement le cas) Bravo o/

S'il y a autre chose que je devrais mentionner, faites-le-moi savoir !