Maison > interface Web > js tutoriel > 2021 Extraits JavaScript haute fréquence et pratiques

2021 Extraits JavaScript haute fréquence et pratiques

coldplay.xixi
Libérer: 2021-01-04 11:40:01
avant
2198 Les gens l'ont consulté

2021 Extraits JavaScript haute fréquence et pratiques

[Recommandations d'apprentissage associées : tutoriel vidéo javascript]

Sans plus tarder, dans cet article, je liste quelques extraits de code JavaScript couramment utilisés ou pratiques. J'espère que cela vous sera utile.

1. Opérateur ternaire

let someThingTrue = true
if(someThingTrue){
    handleTrue()
}else{
    handleFalse()
}

****** 以下是简短版本 ******

let someThingTrue = true
someThingTrue ?  handleTrue() : handleFalse()复制代码
Copier après la connexion

2. Fonctionnement en court-circuit
const defaultValue = "SomeDefaultValue"
let someValueNotSureOfItsExistance = null
let expectingSomeValue = someValueNotSureOfItsExistance ||     defaultValue

console.log(expectingSomeValue) // SomeDefaultValue复制代码
Copier après la connexion

3. La condition est vraie

let someValue = true
if (someValue) {
  console.log('条件成立!')
}复制代码
Copier après la connexion

4. Boucle

for (let i = 0; i < 1e2; i++) { // 代替 i<100 是不是有点酷
}复制代码
Copier après la connexion
let someValues = [1, 2, 4]
for (let val in someValues) {
  console.log(val)
}
let obj = {
  &#39;key1&#39;: &#39;value1&#39;,
  &#39;key2&#39;: &#39;value2&#39;,
  &#39;key3&#39;: &#39;value3&#39;
}
for (let key in obj) {
  console.log(key)
}复制代码
Copier après la connexion
for5. Mappage des valeurs vers les objets

let x=&#39;x&#39;,y=&#39;y&#39;
let obj = {x,y}

console.log(obj) // {x: "x", y: "y"}复制代码
Copier après la connexion

6. Object.entries()

const credits = {
  producer: &#39;大迁世界&#39;,
  name: &#39;前端小智&#39;,
  rating: 9
}
const arr = Object.entries(credits)
console.log(arr)

*** 输出 ***
[ [ &#39;producer&#39;, &#39;大迁世界&#39; ], [ &#39;name&#39;, &#39;前端小智&#39; ], [ &#39;rating&#39;, 9 ] ]复制代码
Copier après la connexion

7. 🎜>8 . Littéral de modèle

const credits = {
  producer: &#39;大迁世界&#39;,
  name: &#39;前端小智&#39;,
  rating: 9
}
const arr = Object.values(credits)
console.log(arr)

*** 输出 ***

[ &#39;大迁世界&#39;, &#39;前端小智&#39;, 9 ]复制代码
Copier après la connexion

9. Affectation de déstructuration

let name = &#39;前端小智&#39;
let age = 20
var someStringConcatenateSomeVariable = `我是 ${name},今年 ${age} 岁`
console.log(someStringConcatenateSomeVariable)复制代码
Copier après la connexion

10. Chaîne multiligne

import { observable, action, runInAction } from &#39;mobx&#39;;复制代码
Copier après la connexion

11. 12. Valeur du paramètre par défaut

Approche précoce

let multiLineString = `some string\n
with multi-line of\n
characters\n`

console.log(multiLineString)复制代码
Copier après la connexion

Approche ultérieure ES6

const pets = [{
    type: &#39;Dog&#39;,
    name: &#39;Max&#39;
  },
  {
    type: &#39;Cat&#39;,
    name: &#39;Karl&#39;
  },
  {
    type: &#39;Dog&#39;,
    name: &#39;Tommy&#39;
  }
]
pet = pets.find(pet => pet.type === 'Dog' && pet.name === 'Tommy')

console.log(pet) // { type: 'Dog', name: 'Tommy' }复制代码
Copier après la connexion

13. L'abréviation de la fonction flèche

function area(h, w) {
  if (!h) {
    h = 1;
  }
  if (!w) {
    w = 1;
  }
  return h * w
}复制代码
Copier après la connexion

est abrégée comme suit :

function area(h = 1, w = 1) {
  return h * w
}复制代码
Copier après la connexion

14. Le retour implicite

let sayHello = (name) => {
  return `你好,${name}`
}

console.log(sayHello('前端小智'))复制代码
Copier après la connexion

est abrégé comme suit :

let sayHello = name => `你好,${name}`

console.log(sayHello('前端小智'))复制代码
Copier après la connexion

15. La fonction doit avoir la valeur de paramètre

let someFuncThatReturnSomeValue = (value) => {
  return value + value
}
console.log(
someFuncThatReturnSomeValue('前端小智'))复制代码
Copier après la connexion

pour être réécrite comme ceci. :

let someFuncThatReturnSomeValue = (value) => (
  value + value
)
console.log(someFuncThatReturnSomeValue('前端小智'))复制代码
Copier après la connexion

16.charAt() abréviation

function mustHavePatamMethod(param) {
  if (param === undefined) {
    throw new Error('Hey You must Put some param!');
  }
  return param;
}复制代码
Copier après la connexion

17.Appel de fonction conditionnelle

mustHaveCheck = () => {
  throw new Error('Missing parameter!')
}
methodShoudHaveParam = (param = mustHaveCheck()) => {
  return param
}复制代码
Copier après la connexion

Manière d'écriture courte :

'SampleString'.charAt(0) // S
// 简写
'SampleString'[0]复制代码
Copier après la connexion

17.Math.Floor abréviation

function fn1() {
  console.log('I am Function 1')
}

function fn2() {
  console.log('I am Function 2')
}
/*
长的写法
*/
let checkValue = 3;
if (checkValue === 3) {
  fn1()
} else {
  fn2()
}复制代码
Copier après la connexion

18.Math.pow abréviation

(checkValue === 3 ? fn1 : fn2)()复制代码
Copier après la connexion

19. Convertir la chaîne en nombre

let val = '123.95'

console.log(Math.floor(val)) // 常规写法
console.log(~~val) // 简写复制代码
Copier après la connexion

20.&& opération

Math.pow(2, 3) // 8
// 简写
2 ** 3 // 8复制代码
Copier après la connexion

21.toString abréviation

const num1 = parseInt('100')
// 简写
console.log(+"100")
console.log(+"100.2")复制代码
Copier après la connexion

22. Opérateur de chaîne en option (à venir

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:juejin.im
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