10 sehr nützliche JavaScript-Funktionen

Möglicherweise sind Sie neu bei JavaScript 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 Features
• MDN

Erweiterungsoperator

Wie der Name schon sagt, wird er als Erweiterungsoperator (...) vor einem Objekt oder Array verwendet, um eine Struktur zu erweitern eine Liste. 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 werden in die Sequenz einbezogen. 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, um deutlich zu machen, 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
  }
}

ES6 kann in Zukunft das Abkürzungsattribut verwenden:

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

It Sieht schon 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

Destrukturierungszuweisung ist gut für die Psychologie des Entwicklers und gesund.

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 Array-Methoden ein, wie zum Beispiel:

• find(), finde das Mitglied in der Liste, gib null zurück, bedeutet nicht gefunden
• findIndex(), finde den Index des Listenmitglieds
• some( ), überprüfen Sie einige, ob eine Behauptung für mindestens ein Mitglied der Liste wahr ist
• beinhaltet, ob die Liste ein Element enthält

Der folgende Code hilft Ihnen, deren Verwendung zu verstehen:

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

Versprechen + Asynchron/Warten

Wenn Sie schon ein paar Jahre in diesem Kreis sind, erinnern Sie sich vielleicht daran, dass es eine Zeit gab, in der wir nur Rückrufe hatten, wie diese:

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 Zeit in Anspruch nehmen. 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, das darin besteht, den Code in mehrere Dateien aufzuteilen, und 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 方面的内容，不过这篇文章中我只打算介绍我最偏爱的特性。 我觉得你应该从今天开始使用这些特性。

相关免费学习推荐：js视频教程

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