Introduction à l'abréviation de js

Un article très populaire à l'étranger récemment. L'abréviation de js peut améliorer votre niveau d'écriture en js dans une certaine mesure et votre compréhension de js sera plus approfondie.

Lien original, très populaire récemment Un article

C'est vraiment une lecture incontournable pour tout développeur basé sur JavaScript J'ai écrit cet article comme une source de référence essentielle pour apprendre les techniques de codage JavaScript abrégées que j'ai apprises au fil des ans. vous aider à comprendre ce qui se passe. J'ai inclus les versions longues pour donner une certaine perspective de codage.

Cet article est une lecture incontournable pour tout développeur basé sur JavaScript, j'écris ceci. Cet article concerne l'apprentissage des abréviations JavaScript qui Je connais depuis de nombreuses années. Pour aider tout le monde à apprendre et à comprendre, j'ai compilé quelques méthodes d'écriture non abrégées.

14 juin 2017 : Cet article a été mis à jour pour ajouter de nouveaux conseils de raccourci basés sur ES6. Si vous souhaitez en savoir plus sur les modifications apportées à ES6, inscrivez-vous à SitePoint Premium et consultez notre screencast Un aperçu d'ES6.

1. Opérateur ternaire

Lorsque vous souhaitez écrire une instruction if...else, utilisez plutôt l'opérateur ternaire.

Écriture commune :

const x = 20;
let answer;
if (x > 10) {
  answer = 'is greater';
} else {
  answer = 'is lesser';
}

Abréviation :

const answer = x > 10 ? 'is greater' : 'is lesser';

peut également être Ensemble intégré d'instructions if :

const big = x > 10 ? " greater 10" : x

2. Raccourci d'évaluation de court-circuit

Lors de l'attribution d'une autre valeur à une variable , je veux m'assurer que la valeur d'origine n'est pas null, undefined ou null. Vous pouvez écrire une instruction if multi-conditions.

if (variable1 !== null || variable1 !== undefined || variable1 !== '') {
   let variable2 = variable1;
}

Ou vous pouvez utiliser la méthode d'évaluation de court-circuit :

const variable2 = variable1 || 'new';

3. Méthode d'abréviation des variables d'instruction

let x;
let y;
let z = 3;

Méthode d'abréviation :

let x, y, z=3;

4. s'il existe une méthode d'abréviation de condition

if (likeJavaScript === true)

abréviation :

if (likeJavaScript)

Uniquement likeJavaScript est vrai Les deux déclarations ne sont égales que lorsque la valeur

Si la valeur du jugement n'est pas une vraie valeur, vous pouvez faire ceci :

let a;
if ( a !== true ) {
// do something...
}

Abréviation :

let a;
if ( !a ) {
// do something...
}

5. Méthode d'abréviation de boucle JavaScript

for (let i = 0; i < allImgs.length; i++)

Abréviation :

for (let index in allImgs)

Vous pouvez également utiliser Array.forEach :

function logArrayElements(element, index, array) {
 console.log("a[" + index + "] = " + element);
}
[2, 5, 9].forEach(logArrayElements);
// logs:
// a[0] = 2
// a[1] = 5
// a[2] = 9

6. Évaluation du court-circuit

La valeur attribuée à une variable est déterminée en jugeant si la valeur est null ou undefined, puis :

let dbHost;
if (process.env.DB_HOST) {
 dbHost = process.env.DB_HOST;
} else {
 dbHost = 'localhost';
}

Abréviation :

const dbHost = process.env.DB_HOST || 'localhost';

7. Exposant décimal

Lorsque vous devez écrire un nombre avec plusieurs zéros (comme 10000000), vous pouvez utiliser l'exposant ( 1e7) pour remplacer ce nombre :

for (let i = 0; i < 10000000; i++) {}

Abréviation :

for (let i = 0; i < 1e7; i++) {}

// 下面都是返回true
1e0 === 1;
1e1 === 10;
1e2 === 100;
1e3 === 1000;
1e4 === 10000;
1e5 === 100000;

8. Abréviation de l'attribut d'objet

Si le nom de l'attribut est le même que le nom de la clé, vous pouvez utiliser la méthode ES6 :

const obj = { x:x, y:y };

Abréviation :

const obj = { x, y };

9. Abréviation de la fonction flèche

La méthode traditionnelle d'écriture de fonctions est facile à comprendre et à écrire pour les gens, mais lorsqu'elle est imbriquée dans une autre fonction, ces avantages sont perdus.

function sayHello(name) {
 console.log('Hello', name);
}

setTimeout(function() {
 console.log('Loaded')
}, 2000);

list.forEach(function(item) {
 console.log(item);
});

Abréviation :

sayHello = name => console.log('Hello', name);
setTimeout(() => console.log('Loaded'), 2000);
list.forEach(item => console.log(item));

10.

L'instruction

est souvent utilisée pour renvoyer le résultat final d'une fonction. La fonction flèche d'une seule instruction peut implicitement renvoyer sa valeur (la fonction doit omettre le return afin d'omettre le <. 🎜> mot-clé){}returnPour renvoyer une instruction multiligne (telle qu'un objet littéral

expression

), vous devez entourer le corps de la fonction avec ().

Abréviation :

function calcCircumference(diameter) {
 return Math.PI * diameter
}

var func = function func() {
 return { foo: 1 };
};

calcCircumference = diameter => (
 Math.PI * diameter;
)

var func = () => ({ foo: 1 });

Valeur du paramètre par défaut

Afin de transmettre des valeurs par défaut aux paramètres dans les fonctions, il est généralement écrit en utilisant des instructions if, mais utiliser ES6 pour définir les valeurs par défaut sera très concis :

Abréviation :

function volume(l, w, h) {
 if (w === undefined)
  w = 3;
 if (h === undefined)
  h = 4;
 return l * w * h;
}

volume = (l, w = 3, h = 4 ) => (l * w * h);
volume(2) //output: 24

12. Chaîne de modèle

Dans le langage JavaScript traditionnel, le le modèle de sortie est généralement écrit comme ceci .

ES6 peut utiliser des backticks et

const welcome = 'You have logged in as ' + first + ' ' + last + '.'

const db = 'http://' + host + ':' + port + '/' + database;

abréviation :

${}

const welcome = `You have logged in as ${first} ${last}`;

const db = `http://${host}:${port}/${database}`;

13 . Méthode abrégée d'affectation de déstructuration

Dans les frameworks Web, il est souvent nécessaire de transmettre des données sous forme de tableaux ou de littéraux d'objet entre les composants et les API, puis de les déconstruire

Abréviation :

const observable = require('mobx/observable');
const action = require('mobx/action');
const runInAction = require('mobx/runInAction');

const store = this.props.store;
const form = this.props.form;
const loading = this.props.loading;
const errors = this.props.errors;
const entity = this.props.entity;

Vous pouvez également attribuer un

import { observable, action, runInAction } from 'mobx';

const { store, form, loading, errors, entity } = this.props;

nom de variable

 :

const { store, form, loading, errors, entity:contact } = this.props;
//最后一个变量名为contact

14. L'abréviation de chaîne multiligne

doit générer une chaîne multiligne et vous devez utiliser + pour l'épisser :

Utilisez des backticks pour obtenir l'abréviation :

const lorem = 'Lorem ipsum dolor sit amet, consectetur\n\t'
  + 'adipisicing elit, sed do eiusmod tempor incididunt\n\t'
  + 'ut labore et dolore magna aliqua. Ut enim ad minim\n\t'
  + 'veniam, quis nostrud exercitation ullamco laboris\n\t'
  + 'nisi ut aliquip ex ea commodo consequat. Duis aute\n\t'
  + 'irure dolor in reprehenderit in voluptate velit esse.\n\t'

const lorem = `Lorem ipsum dolor sit amet, consectetur
  adipisicing elit, sed do eiusmod tempor incididunt
  ut labore et dolore magna aliqua. Ut enim ad minim
  veniam, quis nostrud exercitation ullamco laboris
  nisi ut aliquip ex ea commodo consequat. Duis aute
  irure dolor in reprehenderit in voluptate velit esse.`

15.扩展运算符简写

扩展运算符有几种用例让JavaScript代码更加有效使用，可以用来代替某个数组函数。

// joining arrays
const odd = [1, 3, 5];
const nums = [2 ,4 , 6].concat(odd);

// cloning arrays
const arr = [1, 2, 3, 4];
const arr2 = arr.slice()

简写：

// joining arrays
const odd = [1, 3, 5 ];
const nums = [2 ,4 , 6, ...odd];
console.log(nums); // [ 2, 4, 6, 1, 3, 5 ]

// cloning arrays
const arr = [1, 2, 3, 4];
const arr2 = [...arr];

不像concat()函数，可以使用扩展运算符来在一个数组中任意处插入另一个数组。

const odd = [1, 3, 5 ];
const nums = [2, ...odd, 4 , 6];

也可以使用扩展运算符解构：

const { a, b, ...z } = { a: 1, b: 2, c: 3, d: 4 };
console.log(a) // 1
console.log(b) // 2
console.log(z) // { c: 3, d: 4 }

16.强制参数简写

JavaScript中如果没有向函数参数传递值，则参数为undefined。为了增强参数赋值，可以使用if语句来抛出异常，或使用强制参数简写方法。

function foo(bar) {
 if(bar === undefined) {
  throw new Error('Missing parameter!');
 }
 return bar;
}

简写：

mandatory = () => {
 throw new Error('Missing parameter!');
}

foo = (bar = mandatory()) => {
 return bar;
}

17.Array.find简写

想从数组中查找某个值，则需要循环。在ES6中，find()函数能实现同样效果。

const pets = [
 { type: 'Dog', name: 'Max'},
 { type: 'Cat', name: 'Karl'},
 { type: 'Dog', name: 'Tommy'},
]

function findDog(name) {
 for(let i = 0; i<pets.length; ++i) {
  if(pets[i].type === &#39;Dog&#39; && pets[i].name === name) {
   return pets[i];
  }
 }
}

简写：

pet = pets.find(pet => pet.type ==='Dog' && pet.name === 'Tommy');
console.log(pet); // { type: 'Dog', name: 'Tommy' }

18.Object[key]简写

考虑一个验证函数

function validate(values) {
 if(!values.first)
  return false;
 if(!values.last)
  return false;
 return true;
}

console.log(validate({first:'Bruce',last:'Wayne'})); // true

假设当需要不同域和规则来验证，能否编写一个通用函数在运行时确认？

// 对象验证规则
const schema = {
 first: {
  required:true
 },
 last: {
  required:true
 }
}

// 通用验证函数
const validate = (schema, values) => {
 for(field in schema) {
  if(schema[field].required) {
   if(!values[field]) {
    return false;
   }
  }
 }
 return true;
}


console.log(validate(schema, {first:'Bruce'})); // false
console.log(validate(schema, {first:'Bruce',last:'Wayne'})); // true

现在可以有适用于各种情况的验证函数，不需要为了每个而编写自定义验证函数了

19.双重非位运算简写

有一个有效用例用于双重非运算操作符。可以用来代替Math.floor()，其优势在于运行更快，可以阅读此文章了解更多位运算。

Math.floor(4.9) === 4 //true

简写

~~4.9 === 4 //true

到此就完成了相关的介绍，推荐大家继续看下面的相关文章

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!