Maison > interface Web > js tutoriel > Introduction à l'abréviation de js

Introduction à l'abréviation de js

零下一度
Libérer: 2017-07-09 09:39:42
original
3031 Les gens l'ont consulté

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';
}
Copier après la connexion

Abréviation :


const answer = x > 10 ? 'is greater' : 'is lesser';
Copier après la connexion

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


const big = x > 10 ? " greater 10" : x
Copier après la connexion

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;
}
Copier après la connexion

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


const variable2 = variable1 || 'new';
Copier après la connexion

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


let x;
let y;
let z = 3;
Copier après la connexion

Méthode d'abréviation :


let x, y, z=3;
Copier après la connexion

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


if (likeJavaScript === true)
Copier après la connexion

abréviation :


if (likeJavaScript)
Copier après la connexion

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...
}
Copier après la connexion

Abréviation :


let a;
if ( !a ) {
// do something...
}
Copier après la connexion

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


for (let i = 0; i < allImgs.length; i++)
Copier après la connexion

Abréviation :


for (let index in allImgs)
Copier après la connexion

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
Copier après la connexion

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 = &#39;localhost&#39;;
}
Copier après la connexion

Abréviation :


const dbHost = process.env.DB_HOST || &#39;localhost&#39;;
Copier après la connexion

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++) {}
Copier après la connexion

Abréviation :


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

// 下面都是返回true
1e0 === 1;
1e1 === 10;
1e2 === 100;
1e3 === 1000;
1e4 === 10000;
1e5 === 100000;
Copier après la connexion

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 };
Copier après la connexion

Abréviation :


const obj = { x, y };
Copier après la connexion

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(&#39;Hello&#39;, name);
}

setTimeout(function() {
 console.log(&#39;Loaded&#39;)
}, 2000);

list.forEach(function(item) {
 console.log(item);
});
Copier après la connexion

Abréviation :


sayHello = name => console.log(&#39;Hello&#39;, name);
setTimeout(() => console.log(&#39;Loaded&#39;), 2000);
list.forEach(item => console.log(item));
Copier après la connexion

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 };
};
Copier après la connexion


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

var func = () => ({ foo: 1 });
Copier après la connexion
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;
}
Copier après la connexion


volume = (l, w = 3, h = 4 ) => (l * w * h);
volume(2) //output: 24
Copier après la connexion
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 = &#39;You have logged in as &#39; + first + &#39; &#39; + last + &#39;.&#39;

const db = &#39;http://&#39; + host + &#39;:&#39; + port + &#39;/&#39; + database;
Copier après la connexion
abréviation :

${}


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

const db = `http://${host}:${port}/${database}`;
Copier après la connexion
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(&#39;mobx/observable&#39;);
const action = require(&#39;mobx/action&#39;);
const runInAction = require(&#39;mobx/runInAction&#39;);

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;
Copier après la connexion


Vous pouvez également attribuer un
import { observable, action, runInAction } from &#39;mobx&#39;;

const { store, form, loading, errors, entity } = this.props;
Copier après la connexion
nom de variable

 :


const { store, form, loading, errors, entity:contact } = this.props;
//最后一个变量名为contact
Copier après la connexion
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 = &#39;Lorem ipsum dolor sit amet, consectetur\n\t&#39;
  + &#39;adipisicing elit, sed do eiusmod tempor incididunt\n\t&#39;
  + &#39;ut labore et dolore magna aliqua. Ut enim ad minim\n\t&#39;
  + &#39;veniam, quis nostrud exercitation ullamco laboris\n\t&#39;
  + &#39;nisi ut aliquip ex ea commodo consequat. Duis aute\n\t&#39;
  + &#39;irure dolor in reprehenderit in voluptate velit esse.\n\t&#39;
Copier après la connexion

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.`
Copier après la connexion

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()
Copier après la connexion

简写:


// 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];
Copier après la connexion

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


const odd = [1, 3, 5 ];
const nums = [2, ...odd, 4 , 6];
Copier après la connexion

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


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 }
Copier après la connexion

16.强制参数简写

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


function foo(bar) {
 if(bar === undefined) {
  throw new Error(&#39;Missing parameter!&#39;);
 }
 return bar;
}
Copier après la connexion

简写:


mandatory = () => {
 throw new Error(&#39;Missing parameter!&#39;);
}

foo = (bar = mandatory()) => {
 return bar;
}
Copier après la connexion

17.Array.find简写

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


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;},
]

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];
  }
 }
}
Copier après la connexion

简写:


pet = pets.find(pet => pet.type ===&#39;Dog&#39; && pet.name === &#39;Tommy&#39;);
console.log(pet); // { type: &#39;Dog&#39;, name: &#39;Tommy&#39; }
Copier après la connexion

18.Object[key]简写

考虑一个验证函数


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

console.log(validate({first:&#39;Bruce&#39;,last:&#39;Wayne&#39;})); // true
Copier après la connexion

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


// 对象验证规则
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:&#39;Bruce&#39;})); // false
console.log(validate(schema, {first:&#39;Bruce&#39;,last:&#39;Wayne&#39;})); // true
Copier après la connexion

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

19.双重非位运算简写

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

Math.floor(4.9) === 4 //true
Copier après la connexion

简写

~~4.9 === 4 //true
Copier après la connexion

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

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:php.cn
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