19 conseils pour le codage JavaScript

Cet article convient à tout développeur basé sur JavaScript. J'ai écrit cet article principalement sur certains codes abrégés en JavaScript pour aider tout le monde à mieux comprendre certaines des bases de JavaScript. J'espère que ces codes pourront vous aider à mieux comprendre JavaScript sous différents angles.

Opérateur ternaire

Si vous utilisez l'instruction if...else, alors c'est un bon moyen de sauvegarder le code.

Longhand :

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

Sténographie :

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

Vous pouvez également imbriquer comme ci-dessousifDéclarations :

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

Évaluation de court-circuit

Lors de l'attribution de la valeur d'une variable à une autre variable, vous voudrez peut-être vous assurer que la variable n'est pas null, undefined, ou vide. Vous pouvez écrire une instruction conditionnelle ou une évaluation de court-circuit avec plusieurs if.

Longhand :

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

Sténographie :

const variable2 = variable1  || 'new';

Ne me croyez pas, s'il vous plaît, faites confiance au vôtre testez d'abord (vous pouvez coller le code suivant dans es6console)

let variable1;
let variable2 = variable1  || '';
console.log(variable2 === ''); // prints true

variable1 = 'foo';
variable2 = variable1  || '';
console.log(variable2); // prints foo

Déclarer les variables

Lors de la déclaration de variables dans une fonction, déclarer plusieurs variables en même temps comme suit peut vous faire économiser un beaucoup de temps et d'espace :

Longhand :

let x;
let y;
let x = 3;

Sténographie :

let x, y, z=3;

S'il y a

cela est probablement trivial, mais mérite d'être mentionné. Lors des vérifications "if", l'opérateur d'affectation peut parfois être omis.

Longhand :

if (likeJavaScript === true)

Sténographie :

if (likeJavaScript)

Remarque : Ces deux Les deux méthodes ne sont pas exactement les mêmes et la vérification des abréviations réussira tant que likeJavaScript est true.

Voici un autre exemple. Si a n'est pas true, alors que faire.

Longhand :

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

Sténographie :

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

JavaScript pour la boucle

Ce une petite astuce est utile si vous voulez juste du JavaScript natif et que vous ne voulez pas compter sur des bibliothèques externes comme jQuery ou Lodash.

Manuel long :

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

Sténographie :

for (let index in allImgs)

Array.forEachAbréviation :

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

Évaluation de court-circuit

Si le paramètre est null ou undefined, nous pouvons simplement utiliser une opération logique de court-circuit pour remplacer six lignes de code par une ligne de code.

Affichage long :

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

Abréviation :

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

Exposant décimal

Vous pourriez J'ai vu ça. Il s'agit essentiellement d'une façon étrange d'écrire les nombres, où il y a plusieurs 0 après un nombre. Par exemple, 1e7 est essentiellement équivalent à 10000000 (1 est suivi de 7 0). Il représente la notation décimale égale à 10000000.

Longhand :

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

Sténographie :

for (let i = 0; i < 1e7; i++) {}
// All the below will evaluate to true
1e0 === 1;
1e1 === 10;
1e2 === 100;
1e3 === 1000;
1e4 === 10000;
1e5 === 100000;

Propriétés de l'objet

Définir l'objet Les littéraux d'objet rendent JavaScript plus intéressant. ES6 fournit un moyen plus simple d'attribuer des propriétés d'objet. Si le nom et la valeur de la propriété sont identiques, vous pouvez utiliser l'abréviation suivante.

Manuel long :

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

Sténographie :

const obj = { x, y };

Fonction flèche

Fonction classique Ils sont faciles à lire et à écrire, mais ils deviennent un peu verbeux et déroutants lors de l'appel d'autres fonctions dans des fonctions imbriquées.

Manuel long :

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

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

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

Sténographie :

sayHello = name => console.log('Hello', name);

setTimeout(() => console.log('Loaded'), 2000);

list.forEach(item => console.log(item));

Retour implicite

returnUn mot clé souvent utilisé dans les fonctions, qui renverra le résultat final de la fonction. Les fonctions fléchées renvoient des résultats implicitement dans une seule instruction (la fonction doit omettre le {}, afin d'omettre le mot-clé return).

Si une instruction multiligne (comme un objet) est renvoyée, il est nécessaire d'utiliser () au lieu de {} dans le corps de la fonction. Cela garantit que le code est renvoyé sous forme d'instruction distincte.

Longhand :

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

Sténographie :

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

Valeur du paramètre par défaut

Vous Vous pouvez utiliser l'instruction if pour définir les valeurs par défaut des paramètres de fonction. Dans ES6, les valeurs par défaut peuvent être définies dans les déclarations de fonctions.

Manuel long :

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

Sténographie :

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

Modèles littéraux

Oui Fatigué d'utiliser + pour concaténer plusieurs variables en une seule chaîne ? N'y a-t-il pas un moyen plus simple ? Si vous pouvez utiliser ES6, vous avez de la chance. Dans ES6, ce que vous devez faire est d'utiliser des apostrophes et ${}, et de mettre vos variables entre accolades.

Longhand :

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

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

Sténographie :

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

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

Affectation de déstructuration

Si vous Lorsque vous utilisez l'un des frameworks Web populaires, il existe de nombreuses possibilités de transmettre des informations entre une API sous la forme de tableaux ou d'objets de données. Une fois que l'objet de données atteint un composant, vous devez le développer.

Longhand :

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;

Sténographie :

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

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

Vous pouvez même spécifier vous-même le nom de la variable :

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

Chaîne multiligne

Vous constaterez que le code que vous avez utilisé pour écrire des chaînes multilignes ressemblera à ce qui suit :

Longhand:

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'

但还有一个更简单的方法。使用撇号。

Shorthand:

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.`

Spread Operator

Spread Operator是ES6中引入的，使JavaScript代码更高效和有趣。它可以用来代替某些数组的功能。Spread Operator只是一个系列的三个点(...)。

Longhand:

// 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()

Shorthand:

// 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()函数，使用Spread Operator你可以将一个数组插入到另一个数组的任何地方。

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 }

强制参数

默认情况下，JavaScript如果不给函数参数传一个值的话，将会是一个undefined。有些语言也将抛出一个警告或错误。在执行参数赋值时，你可以使用if语句，如果未定义将会抛出一个错误，或者你可以使用强制参数（Mandatory parameter）。

Longhand:

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

Shorthand:

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

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

Array.find

如果你以前写过一个查找函数，你可能会使用一个for循环。在ES6中，你可以使用数组的一个新功能find()。

Longhand:

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

Shorthand:

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

Object[key]

你知道Foo.bar也可以写成Foo[bar]吧。起初，似乎没有理由应该这样写。然而，这个符号可以让你编写可重用代码块。

下面是一段简化后的函数的例子：

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

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

这个函数可以正常工作。然而，需要考虑一个这样的场景：有很多种形式需要应用验证，而且不同领域有不同规则。在运行时很难创建一个通用的验证功能。

Shorthand:

// object validation rules
const schema = {
  first: {
    required:true
  },
  last: {
    required:true
  }
}

// universal validation function
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

现在我们有一个验证函数，可以各种形式的重用，而不需要为每个不同的功能定制一个验证函数。

Double Bitwise NOT

如果你是一位JavaScript新手的话，对于逐位运算符（Bitwise Operator）你应该永远不会在任何地方使用。此外，如果你不处理二进制0和1，那就更不会想使用。

然而，一个非常实用的用例，那就是双位操作符。你可以用它替代Math.floor()。Double Bitwise NOT运算符有很大的优势，它执行相同的操作要快得多。你可以在这里阅读更多关于位运算符相关的知识。

Longhand:

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

Shorthand:

~~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!