19 Tipps für die JavaScript-Codierung

Dieser Artikel ist für jeden Entwickler geeignet, der auf JavaScript basiert. Ich habe diesen Artikel hauptsächlich über einige abgekürzte Codes in JavaScript geschrieben, um jedem zu helfen, einige der Grundlagen von JavaScript besser zu verstehen. Ich hoffe, dass diese Codes Ihnen helfen können, JavaScript aus verschiedenen Perspektiven besser zu verstehen.

Ternärer Operator

Wenn Sie die if...else-Anweisung verwenden, ist dies eine gute Möglichkeit, Code zu sparen.

Langschrift:

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

Kurzschrift:

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

Sie können auch wie folgt verschachtelnifAussagen :

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

Kurzschlussauswertung

Wenn Sie den Wert einer Variablen einer anderen Variablen zuweisen, möchten Sie möglicherweise sicherstellen, dass die Variable nicht null, undefined, oder leer. Sie können eine bedingte Anweisung oder eine Kurzschlussauswertung mit mehreren if schreiben.

Langschrift:

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

Kurzschrift:

const variable2 = variable1  || 'new';

Glauben Sie mir nicht, vertrauen Sie bitte Ihrer eigenen Testen Sie zuerst (Sie können den folgenden Code in es6console einfügen)

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

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

Variablen deklarieren

Wenn Sie Variablen in einer Funktion deklarieren, können Sie durch die gleichzeitige Deklaration mehrerer Variablen wie im Folgenden Folgendes sparen: viel Zeit und Raum :

Langschrift:

let x;
let y;
let x = 3;

Kurzschrift:

let x, y, z=3;

Wenn vorhanden

das Wahrscheinlich trivial, aber erwähnenswert. Bei „Wenn-Prüfungen“ kann der Zuweisungsoperator manchmal weggelassen werden.

Langschrift:

if (likeJavaScript === true)

Kurzschrift:

if (likeJavaScript)

Hinweis: Diese beiden Die beiden Methoden sind nicht genau gleich. Die Abkürzungsprüfung wird bestanden, solange likeJavaScript true ist.

Hier ist ein weiteres Beispiel. Wenn a nicht true ist, was ist dann zu tun?

Langschrift:

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

Kurzschrift:

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

JavaScript for-Schleife

Dies Dieser kleine Trick ist nützlich, wenn Sie nur natives JavaScript benötigen und sich nicht auf externe Bibliotheken wie jQuery oder Lodash verlassen möchten.

Langschrift:

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

Kurzschrift:

for (let index in allImgs)

Array.forEachAbkürzung:

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

Kurzschlussauswertung

Wenn der Parameter null oder undefined ist, können wir einfach eine logische Kurzschlussoperation verwenden, um sechs Codezeilen durch eine Codezeile zu ersetzen.

Langschrift:

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

Kurzschrift:

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

Dezimalexponent

Vielleicht Habe das gesehen. Es ist im Wesentlichen eine seltsame Art, Zahlen zu schreiben, bei der nach einer Zahl viele 0 stehen. Beispielsweise ist 1e7 im Wesentlichen äquivalent zu 10000000 (auf 1 folgt 7 0). Es stellt die Dezimalschreibweise dar, die 10000000 entspricht.

Langschrift:

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

Kurzschrift:

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;

Objekteigenschaften

Objekt definieren Objektliterale machen JavaScript interessanter. ES6 bietet eine einfachere Möglichkeit, Objekteigenschaften zuzuweisen. Wenn Eigenschaftsname und -wert identisch sind, können Sie die folgende Abkürzung verwenden.

Langschrift:

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

Kurzschrift:

const obj = { x, y };

Pfeilfunktion

Klassische Funktion Sie sind leicht zu lesen und zu schreiben, werden jedoch etwas ausführlich und verwirrend, wenn andere Funktionen innerhalb verschachtelter Funktionen aufgerufen werden.

Langschrift:

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

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

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

Kurzschrift:

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

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

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

Implizite Rückgabe

returnEin häufig in Funktionen verwendetes Schlüsselwort, das das Endergebnis der Funktion zurückgibt. Pfeilfunktionen geben Ergebnisse implizit in einer Anweisung zurück (die Funktion muss das Schlüsselwort {} weglassen, um das Schlüsselwort return wegzulassen).

Wenn eine mehrzeilige Anweisung (z. B. ein Objekt) zurückgegeben wird, muss im Funktionskörper () anstelle von {} verwendet werden. Dadurch wird sichergestellt, dass der Code als separate Anweisung zurückgegeben wird.

Langschrift:

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

Kurzschrift:

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

Standardparameterwert

Sie Mit der if-Anweisung können Sie Standardwerte für Funktionsparameter definieren. In ES6 können Standardwerte in Funktionsdeklarationen definiert werden.

Langschrift:

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

Kurzschrift:

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

Vorlagenliterale

Ja, müde oder + verwenden, um mehrere Variablen in einer Zeichenfolge zu verketten? Gibt es nicht einen einfacheren Weg? Wenn Sie ES6 verwenden können, haben Sie Glück. In ES6 müssen Sie lediglich Apostrophe und ${} verwenden und Ihre Variablen in geschweifte Klammern setzen.

Langschrift:

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

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

Kurzschrift:

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

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

Destrukturierende Zuweisung

Wenn Sie Bei Verwendung eines der gängigen Web-Frameworks gibt es viele Möglichkeiten, Informationen zwischen einer API in Form von Arrays oder Datenobjekten zu übertragen. Sobald das Datenobjekt eine Komponente erreicht, müssen Sie es erweitern.

Langschrift:

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;

Kurzschrift:

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

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

Sie können den Variablennamen sogar selbst angeben:

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

Mehrzeilige Zeichenfolge

Sie werden feststellen, dass der Code, den Sie zum Schreiben mehrzeiliger Zeichenfolgen verwendet haben, wie folgt aussieht:

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

Das obige ist der detaillierte Inhalt von19 Tipps für die JavaScript-Codierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!