10 super nützliche Funktionen in Javascript

Möglicherweise sind Sie mit JavaScript noch nicht vertraut oder haben es nur gelegentlich verwendet. Unabhängig davon hat sich JavaScript stark verändert und einige Funktionen sind durchaus lohnenswert. In diesem Artikel werden einige Funktionen vorgestellt, die meiner Meinung nach ein ernsthafter JavaScript-Entwickler jeden Tag irgendwann verwenden wird.

Referenzen

Die folgenden zwei Seiten über ES6+ sind meine Favoriten:

● ES6-Funktionen

● MDN

Expand-Operator

Wie der Name schon sagt, wird er für Objekte verwendet oder der Erweiterungsoperator (...) vor einem Array, um eine Struktur in eine Liste zu erweitern. Zeigen Sie:

let firstHalf = [ 'one', 'two'];
let secondHalf = ['three', 'four', ...firstHalf];

Ist diese Schreibmethode elegant und prägnant genug? Wenn der Spread-Operator nicht verwendet wird, müssen wir so schreiben:

let firstHalf = [ 'one', 'two'];
let secondHalf = ['three', 'four'];
for(var i=0, i <firstHalf.length; i++ ) {
  secondHalf.push(firstHalf[i]);
}

Der Spread-Operator eignet sich auch zum Zusammenführen der Eigenschaften von Objekten:

const hero = {
  name: 'Xena - Warrior Princess',
  realName: 'Lucy Lawless'
}


const heroWithSword = {
 ...hero,
 weapon: 'sword'
}

Wenn der Spread-Operator Wird nicht verwendet, müssen Sie die Objekte durchlaufen. Attribute:

let keys = Object.keys(hero);
let obj = {};

for(var i=0; i< keys.length; i++) {
   obj[keys[i]] = keys[props[i]];
}

Verbleibende Parameter

Verbleibende Parameter umfassen die verbleibenden Parameter in der Sequenz. Charakteristisch für JavaScript ist, dass die Anzahl der Parameter sehr flexibel ist. Normalerweise gibt es eine Argumentvariable, die die Argumente sammelt. Schauen wir uns ein Beispiel an:

function add(first, second, ...remaining) {
  return first + second;
}

Der obige Code fügt nur das erste und das zweite hinzu, das heißt, der Aufruf von add(1, 2) und add(1, 2, 3, 4) wird erhalten gleiches Ergebnis. Korrigieren wir es unten:

function add(first, second, ...remaining) {
  return first + second + remaining.reduce((acc, curr) => acc + curr, 0);
}

Wie bereits erwähnt, sammelt ...remaining die verbleibenden Parameter und liefert uns eine Benennung dieser Parameter, wodurch deutlich wird, dass wir beabsichtigen, die verbleibenden Parameter zu verwalten. Ich erinnere mich, dass ES5 spätestens schon Argumente hat, aber nur wenige wissen davon.

String-Interpolation

Haben Sie schon einmal eine solche Aussage gesehen?

class Product {
 constructor(name, description, price) {
   this.name = name;
   this.description = description;
   this.price = price;
 }

 getDescription() {
   return " Full description \n" + 
   " name: " + this.name + 
   " description: " + this.description
 }
}

Natürlich beziehe ich mich auf die lange, unleserliche mehrzeilige Anweisung in der Methode getDescription(). Ein ähnliches Phänomen gibt es in den meisten Programmiersprachen. Mehrere Sprachen bieten String-Interpolation, und glücklicherweise ist JavaScript eine davon. Schreiben wir die getDescription()-Methode neu: Die

getDescription() {
   return `Full description \n: 
   name: ${this.name}
   description ${this.description}
   `;
}

${}-Interpolation kann in einem Paar von mit ` umschlossenen Zeichenfolgen verwendet werden. Es sieht jetzt viel bequemer aus.

Abkürzungsattribut

muss in ES5 wie folgt geschrieben werden:

function createCoord(x, y) {
  return {
    x: x,
    y: y
  }
}

In ES6 kann das Abkürzungsattribut in Zukunft verwendet werden:

function createCoord(x, y) {
  return {
    x,
    y
  }
}

Sieht es erfrischender aus?

Methodenattribut

Methodenattribut ist ein im Objekt definiertes Attribut, das auf eine Methode zeigt. Betrachten Sie den folgenden Teil des ES5-Codes als Beispiel:

const math = {
  add: function(a,b) { return a + b; },
  sub: function(a,b) { return a - b; }, 
  multiply: function(a,b) { return a * b; }
}

ES6 muss in Zukunft nur noch Folgendes schreiben:

const math = {
  add(a,b) { return a + b; },
  sub(a,b) { return a - b; },
  multiply(a,b) { return a * b; }
}

Destrukturierungszuweisung

Destrukturierende Aufgaben haben sich positiv auf die psychische Gesundheit des Entwicklers selbst ausgewirkt.

Betrachten Sie den folgenden Code:

function handle(req, res) {
 const name = req.body.name;
 const description = req.body.description;
 const url = req.url;

 log('url endpoint', url);

 // 大量代码逻辑
 dbService.createPerson(name, description)
}

Egal aus welcher Sicht auch immer, der obige Code ist nicht perfekt, aber er spiegelt ein Anwendungsszenario wider, bei dem wir vom Objekt ausgehen möchten . Erhalten Sie Daten auf verschiedenen Ebenen. Sie fragen sich vielleicht: Was ist hier das Problem? Nun, ich kann mir einige Tastatureingaben ersparen, indem ich nicht so viele Variablen deklariere.

function handle(req, res) {
 const { body: { name, description }, url } = req;

 log('url endpoint', url);

 // 大量代码逻辑
 dbService.createPerson(name, description)

Sehen Sie, unser obiger Code komprimiert drei Zeilen in eine.

Die Destrukturierungsaufgabe ist nicht auf Objekte beschränkt. Es funktioniert genauso gut mit Arrays. Betrachten Sie den folgenden Code:

const array = [1,2,3,4,5,6];
const a = array[0];
const c = array[2];

Der obige Code kann eleganter umgeschrieben werden:

const array = [1,2,3,4,5,6];
const [a, ,c, ...remaining] = arr;

// remaining = [4,5,6]

Wir können den obigen Mustervergleich verwenden, um die Werte von zu zerlegen Array. Wir verwenden , , um bestimmte Werte zu überspringen. Die übrigen oben genannten Parameter können auch hier verwendet werden. Hier erfassen wir die übrigen Array-Mitglieder über die übrigen Parameter.

Destrukturierende Zuweisungen können auch für Funktionen und Parameter verwendet werden. Wenn eine Funktion mehr als 2-3 Parameter hat, ist es in JavaScript ein De-facto-Standard, ein Objekt zum Sammeln aller Parameter zu verwenden. Beispielsweise hat die folgende Funktion:

function doSomething(config) {
  if(config.a) { ... }
  if(config.b) { ... }
  if(config.c) { ... }
}

eine bessere Schreibweise:

function doSomething({ a, b, c }) {
  if(a) { ... }
  if(b) { ... }
  if(c) { ... }
}

Array-Methoden

ES6 führt viele nützliche Funktionen ein Array-Methoden, zum Beispiel:

● find(), findet Mitglieder in der Liste, gibt null zurück, um anzuzeigen, dass sie nicht gefunden wurden

● findIndex(), findet den Index des Listenmitglieds

● some() prüft, ob eine bestimmte Behauptung für mindestens ein Mitglied der Liste wahr ist

● schließt ein, ob die Liste ein Element enthält

Der folgende Code hilft Ihnen dabei Verstehe ihre Verwendung:

const array = [{ id: 1, checked: true }, { id: 2 }];
arr.find(item => item.id === 2) // { id: 2 }
arr.findIndex(item => item.id === 2) // 1
arr.some(item => item.checked) // true

const numberArray = [1,2,3,4];
numberArray.includes(2) // true

Promises + Async/Await

Wenn du schon ein paar Jahre in diesem Kreis bist, erinnerst du dich vielleicht daran, dass es eine Zeit gab, in der wir nur Rückrufe hatten, so:

function doSomething(cb) {
  setTimeout(() =>  {
    cb('done')
  }, 3000)
}

doSomething((arg) => {
 console.log('done here', arg);
})

Wir verwenden Rückrufe, da einige Vorgänge asynchron sind und ihre Ausführung einige Zeit in Anspruch nimmt. Dann bekamen wir die Promise-Bibliothek und die Leute begannen, sie zu nutzen. Dann fügte JavaScript nach und nach native Unterstützung für Versprechen hinzu.

function doSomething() {
  return new Promise((resolve, reject) => {
    setTimeout(() =>  {
      resolve('done')
    }, 3000)
  })
}

doSomething().then(arg => {
 console.log('done here', arg);
})

Wir können es sogar so nennen, um Versprechen aneinanderzureihen:

getUser()
  .then(getOrderByUser)
  .then(getOrderItemsByOrder)
  .then(orderItems => {
    // 处理排序后的成员
  })

Später wird das Leben besser, wir haben async/await, der obige Code kann so geschrieben werden Dies:

async function getItems() {
  try {
    const user = await getUser();
    const order = await getOrderByUser(user);
    const items = await getOrderItemsByOrder(order);
    return items;
  } catch(err) {
    // 在这里处理错误，建议返回某个值或者重新抛出错误
  }
}

getItems().then(items => {
  // 处理排序后的成员
})

Modul

Fast jede Programmiersprache unterstützt das Konzept des Moduls, bei dem der Code in mehrere Dateien aufgeteilt wird. Jede Datei ist eine in sich geschlossene Einheit (Modul). Betrachten Sie den folgenden Code:

// math.js

export function add(a,b) { return a + b; }
export function sub(a,b) { return a - b; }

export default mult(a,b) => a * b;

// main.js
import mult, { add, sub } from './math';

mult(2, 4) // 8
add(1,1)   // 2
sub(1,2)   // -1

我们在上面用 export 关键字注明了 add 和 sub 这两个结构对任何引入该模块的模块都公开可见。 export default 关键字则注明仅仅 import 模块时得到的结构。 在 main.js 中，我们将导入的 default 命名为 mult，同时指明我们引入 add() 和 sub() 这两个方法。

箭头函数和字典作用域 this

我在这篇文章中很多地方都用到了箭头函数，它不过是另一种函数表示法。 过去我们只能这么声明函数：

function printArray(arr) {
 // 具体操作
}

现在我们也可以这么写：

const printArray = (arr) => {
 // 具体操作
}

我们也可以将函数声明写到一行里：

const add = (a,b) => a + b

上面的代码表明我们进行操作并返回结果。 我们也可以采用下面的语法返回一个对象：

const create = (a,b) = > ({ x: a, y: b })

过去会碰到搞不清 this 是什么的问题。 考虑下面的代码：

let array = [1,2,3];

function sum() {
  this.total = 0;

  arr.forEach(function(item) {
    this.total+= item;  // 糟糕，`this` 是内层函数的 `this`
  })
  return total;
}

上面代码中的 this 指向 forEach 内部函数的 this，这可不是我们想要的。 过去我们通过以下方式解决这个问题：

function sum() {
  this.total = 0;
  var self = this;

  arr.forEach(function(item) {
    self.total+= item;  // 这里我们使用 `self`，它能解决问题，但是感觉有点别扭
  })
  return total;
}

箭头函数可以解决问题，再也不用 self 了，现在代码看起来是这样的：

function sum() {
  this.total = 0;

  arr.forEach((item) => {
    this.total+= item;  // 一切安好，`this` 指向外层函数
  })
  return total;
}

大胜！

结语

我还可以讲讲更多 ES6 方面的内容，不过这篇文章中我只打算介绍我最偏爱的特性。 我觉得你应该从今天开始使用这些特性。

英文原文地址：https://dev.to/itnext/modern-javascript-10-things-you-should-be-using-starting-today-22dp

本文来自 js教程 栏目，欢迎学习！

Das obige ist der detaillierte Inhalt von10 super nützliche Funktionen in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!