Einführung in die Abkürzung von js

Ein in letzter Zeit sehr beliebter Artikel aus dem Ausland. Die Abkürzung von js kann Ihr JS-Schreibniveau bis zu einem gewissen Grad verbessern und Ihr Verständnis von js wird besser.

Originallink, in letzter Zeit sehr beliebt. Ein Artikel

Dies ist wirklich ein Muss für jeden JavaScript-basierten Entwickler. Ich habe diesen Artikel als wichtige Referenzquelle für das Erlernen von Kurzschrift-JavaScript-Codierungstechniken geschrieben Um Ihnen zu helfen, zu verstehen, was vor sich geht, habe ich die Langhandversionen eingefügt, um einen Einblick in die Programmierung zu geben.

Dieser Artikel ist ein Muss für jeden JavaScript-basierten Entwickler. Ich schreibe diesen Artikel. In diesem Artikel geht es darum, JavaScript-Abkürzungen zu lernen Ich bin seit vielen Jahren damit vertraut, um allen das Lernen und Verstehen zu erleichtern. Ich habe einige nicht abgekürzte Schreibmethoden zusammengestellt.

14. Juni 2017: Dieser Artikel wurde aktualisiert, um neue Kurzschrifttipps basierend auf ES6 hinzuzufügen. Wenn Sie mehr über die Änderungen in ES6 erfahren möchten, melden Sie sich für SitePoint Premium an und schauen Sie sich unseren Screencast „Ein Blick in ES6“ an

1. Ternärer Operator

Wenn Sie eine if...else-Anweisung schreiben möchten, verwenden Sie stattdessen den ternären Operator.

Allgemeine Schreibweise:

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

Abkürzung:

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

kann auch sein eingebetteter Satz von if-Anweisungen:

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

2. Abkürzung für Kurzschlussauswertung

Beim Zuweisen eines anderen Werts zu einer Variablen , möchten sicherstellen, dass der ursprüngliche Wert nicht null, undefined oder null ist. Sie können eine if-Anweisung mit mehreren Bedingungen schreiben.

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

Oder Sie können die Kurzschlussbewertungsmethode verwenden:

const variable2 = variable1 || 'new';

3. Abkürzungsmethode für Anweisungsvariablen

let x;
let y;
let z = 3;

Abkürzungsmethode:

let x, y, z=3;

4. Wenn eine Bedingungsabkürzungsmethode vorhanden ist:

if (likeJavaScript === true)

Abkürzung:

if (likeJavaScript)

Nur likeJavaScript ist wahr. Die beiden Aussagen sind nur dann gleich, wenn der Wert

Wenn der Beurteilungswert kein wahrer Wert ist, können Sie Folgendes tun:

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

Abkürzung:

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

5. JavaScript-Schleifenabkürzungsmethode

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

Abkürzung:

for (let index in allImgs)

Sie können auch Array.forEach verwenden:

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

Der einer Variablen zugewiesene Wert wird bestimmt, indem beurteilt wird, ob der Wert null oder undefined ist, dann:

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

Abkürzung:

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

7. Dezimalexponent

Wenn Sie eine Zahl mit schreiben müssen Bei vielen Nullen (z. B. 10000000) können Sie den Exponenten ( 1e7) verwenden, um diese Zahl zu ersetzen:

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

Abkürzung:

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

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

8. Objektattributabkürzung

Wenn der Attributname mit dem Schlüsselnamen übereinstimmt, können Sie die ES6-Methode verwenden:

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

Abkürzung:

const obj = { x, y };

9. Pfeilfunktionsabkürzung

Die traditionelle Methode zum Schreiben von Funktionen ist für Menschen leicht zu verstehen und zu schreiben, aber wenn sie in eine andere Funktion verschachtelt wird, gehen diese Vorteile verloren.

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

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

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

Abkürzung:

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

10. Abkürzung für implizite Rückgabewerte

Die return-Anweisung wird häufig verwendet, um das Endergebnis einer Funktion zurückzugeben. Die Pfeilfunktion einer einzelnen Anweisung kann implizit ihren Wert zurückgeben (die Funktion muss das {} weglassen, um das Schlüsselwort)return

Um eine mehrzeilige Anweisung zurückzugeben (z. B. Objektliteral

Ausdruck ), müssen Sie () verwenden, um den Funktionskörper zu umgeben.

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

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

Abkürzung:

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

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

11. Standardparameterwert

Um Standardwerte an Parameter in Funktionen zu übergeben, wird es normalerweise mit if-Anweisungen geschrieben, aber die Verwendung von ES6 zum Definieren von Standardwerten ist sehr prägnant:

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

Abkürzung:

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

12. Vorlagenzeichenfolge

In der traditionellen JavaScript-Sprache ist die Die Ausgabevorlage wird normalerweise so geschrieben.

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

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

ES6 kann Backticks und

Abkürzungen verwenden: ${}

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

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

13 . Destrukturierende Zuweisungs-Kurzschriftmethode

In Web-Frameworks ist es oft notwendig, Daten in Form von Arrays oder Objektliteralen zwischen Komponenten und APIs hin und her zu übergeben und sie dann zu dekonstruieren

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;

Abkürzung:

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

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

Sie können auch

Variablennamen zuweisen:

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

14. Mehrzeilige Zeichenfolgenabkürzung

muss eine mehrzeilige Zeichenfolge ausgeben, und Sie müssen + verwenden um es zu verbinden:

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'

Verwenden Sie Backticks, um die Abkürzung zu erreichen:

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

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

Das obige ist der detaillierte Inhalt vonEinführung in die Abkürzung von js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!