Maison > Article > interface Web > 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é){}
return
Pour renvoyer une instruction multiligne (telle qu'un objet littéral
), vous devez entourer le corps de la fonction avec ().
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 :
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: 2412. Chaîne de modèle
Dans le langage JavaScript traditionnel, le le modèle de sortie est généralement écrit comme ceci .
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
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;
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; //最后一个变量名为contact14. L'abréviation de chaîne multiligne
doit générer une chaîne multiligne et vous devez utiliser + pour l'épisser :
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 === 'Dog' && 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!