JavaScript >> Javascript-Tutorial >  >> Tags >> map

ES6, ES7, ES8 &Schreiben von modernem JavaScript Pt4 – Inklusive, Pads, Loops &Maps

ES6 hat JavaScript zu einer besseren und ausgereifteren Programmiersprache gemacht. Es brachte viele Funktionen mit sich, die das Leben der Entwickler einfacher machten. Dieser Teil hilft Ihnen dabei, ES6-Funktionen wie includes() zu verstehen , padStart() , padEnd() , neue Schleifen und auch map() und … Karte. Entdecken Sie die Welt von ES6 und lernen Sie, wie man modernes JavaScript schreibt!

ES6, ES7, ES8 &Modernes JavaScript schreiben Teil 1 (Scope, let, const, var).

ES6, ES7, ES8 &Schreiben von modernem JavaScript Teil 2 (Vorlagenliterale, Destrukturierung und Standardparameter).

ES6, ES7, ES8 &Schreiben von modernem JavaScript Teil 3 (Spread, Rest, Sets &Object Literal).

ES6, ES7, ES8 &Schreiben von modernem JavaScript Teil 5 (WeakMap, WeakSet und Export &Import).

ES6, ES7, ES8 &Modernes JavaScript schreiben, Teil 6 (Pfeilfunktionen &Versprechen).

ES6, ES7, ES8 &Modernes JavaScript schreiben Teil 7 (Async/await &Klassen).

Array.includes()

Wenn Sie häufig mit Arrays arbeiten, finden Sie diese ES6-Funktion möglicherweise nützlich. Diese Methode namens includes() bietet eine schnelle Möglichkeit herauszufinden, ob ein Array ein bestimmtes Element oder einen bestimmten Wert enthält. Sie müssen keine Schleifen oder andere Iteratoren verwenden und Ihre Arbeit mit unnötigem Code aufblähen. Stattdessen können Sie includes() verwenden , geben Sie den Wert oder das Element an, nach dem Sie suchen, und lassen Sie JavaScript den Rest erledigen.

Außerdem können Sie angeben, an welchem ​​Index includes() stehen soll Fangen Sie an, nach diesem Wert oder Gegenstand zu suchen. In diesem Fall includes() -Methode beginnt nicht am Anfang des Arrays, was die Standardeinstellung ist. Stattdessen beginnt es bei dem von Ihnen angegebenen Index und ignoriert alle Werte oder Elemente, die im Array vor diesem Index vorhanden sind.

Wie ich bereits erwähnt habe, includes() -Methode nimmt den Anfang des Arrays als Standardposition für den Start. Das bedeutet, dass der Index ein optionaler Parameter ist und Sie ihn weglassen können, wenn Sie ihn nicht verwenden. Der einzige erforderliche Parameter ist der gesuchte Wert oder Artikel. Wenn der Wert vorhanden ist, includes() gibt true zurück . Andernfalls wird false zurückgegeben .

///
// Includes() example No.1:
const includesExample = ['Ruby', 'JavaScript', 'Python', 'C++', 'Swift', 'Brainfuck']

console.log(includesExample.includes('JavaScript'))
// Outputs: true

console.log(includesExample.includes('C'))
// Outputs: false


///
// Includes() example No.2: Using index parameter
const includesExample = ['Ruby', 'JavaScript', 'Python', 'C++', 'Swift', 'Brainfuck']

console.log(includesExample.includes('Python', 1))
// Outputs: true

console.log(includesExample.includes('Python', 3))
// Outputs: false (Python is on the 2nd index)

String.padStart() und String.padEnd()

Die zwei weniger bekannten String-Methoden, die in ES6 eingeführt wurden, sind padStart() und padEnd() . Nur weil diese beiden nicht so bekannt sind wie andere ES6-Funktionen, heißt das nicht, dass sie manchmal nicht nützlich sind. Sie können. Diese beiden Methoden können Ihnen helfen, eine bestimmte Aufgabe schneller und einfacher zu erledigen, auch mit weniger Code.

Sie führen padStart() und padEnd() Die Arbeit besteht darin, dass sie bestimmte Zeichen zu einer vorhandenen Zeichenfolge hinzufügen. Die padStart() fügt neue Zeichen am Anfang der Zeichenfolge hinzu, während padEnd() Am Ende. Sie geben die Anzahl der Zeichen an, die diese Methoden durch einen Parameter namens targetLength hinzufügen sollen .

Es gibt eine Sache, die Sie bei diesem Parameter beachten müssen. Es ist nicht die Länge in Bezug auf die Anzahl der Zeichen, die Sie hinzufügen möchten. Es ist die gesamte Länge der Saite, die Sie ändern möchten. Angenommen, Sie haben eine Zeichenfolge mit acht Zeichen und möchten diese Zeichenfolge mit vier zusätzlichen Zeichen erweitern, indem Sie entweder padStart() verwenden oder padEnd() .

In diesem Fall würden Sie den Wert als targetLength übergeben wäre 12 (acht plus weitere vier Zeichen). Und, wie gesagt, die padStart() würde die neuen Zeichen am Anfang hinzufügen, die padEnd() würde sie am Ende hinzufügen. Was passiert, wenn Sie versehentlich eine Länge angeben, die kleiner ist als die Länge der ursprünglichen Zeichenfolge? Nichts wird passieren.

JavaScript gibt die ursprüngliche Zeichenfolge ohne Änderungen zurück. Und was ist, wenn Sie nur targetLength angeben und nicht, welches Zeichen Sie verwenden möchten? JavaScript verwendet Leerzeichen ( ) als Standardzeichen.

///
// padStart() example No.1:
const padStartExample = 'string'

// Make the original string 18 characters long (add 12 '*' characters)
console.log(padStartExample.padStart(18, '*'))
// Outputs: '************string'


//
// padStart() example No.2: Shorter than the original
const padStartExample = 'string'

// Specify length smaller than the length of the original string
console.log(padStartExample.padStart(4, '*'))
// Outputs: 'string'


//
// padStart() example No.3: No character specified
const padStartExample = 'string'

// Omit the character parameter
console.log(padStartExample.padStart(10))
// Outputs: '    string'


///
// padEnd() example No.1:
const padEndExample = 'string'

// Make the original string 14 characters long (add 4 '*' characters)
console.log(padEndExample.padEnd(12, '*'))
// Outputs: 'string******'


///
// padEnd() example No.2: Shorter than the original
const padEndExample = 'string'

// Specify length smaller than the length of the original string
console.log(padEndExample.padEnd(4, '*'))
// Outputs: 'string'


///
// padEnd() example No.3: No character specified
const padEndExample = 'string'

// Omit the character parameter
console.log(padEndExample.padEnd(13))
// Outputs: 'string       '

for…of und for…in Schleifen

Schleifen sind in JavaScript nichts Neues. Es gab Schleifen, die Sie auch vor ES6 verwenden konnten, wie z. B. for , while und do while . Einige Leute waren jedoch davon überzeugt, dass dies nicht ausreichte. Infolgedessen wurden in ES6 zwei neue Schleifen eingeführt, for...of und for...in . Diese beiden Schleifen für alle iterierbaren JavaScript-Objekte.

Das heißt, Sie können sie für Objekte wie Strings, Arrays, Sets und Maps verwenden. Es gibt zwei Unterschiede zwischen for...of und for...in Sie müssen sich erinnern. Zuerst die for...of iteriert über Werte, die sich innerhalb des Objekts befinden. Der for...in iteriert über die aufzählbaren Eigenschaften eines Objekts. Zweitens for...in kann auch über Objektliterale iterieren.

///
// for...in example No.1: Array and enumerable properties
const forInExample = ['bazz', true, 21]

for (let prop in forInExample) {
  // Output all enumerable properties of the array
  console.log(prop)
}

// Outputs:
// '0'
// '1'
// '2'


///
// for...in example No.2: Array and values
const forInExample = ['bazz', true, 21]

for (let prop in forInExample) {
  // Output all enumerable properties of the array
  console.log(forInExample[prop])
}

// Outputs:
// 'bazz'
// 'true'
// '21'


///
// for...in example No.3: Object literal and enumerable properties
const forInExample = {foo: 'bazz', lang: 'JavaScript', x: 13, age: 21}

for (let prop in forInExample) {
  // Output all properties inside the object literal
  console.log(prop)
}

// Outputs:
// 'foo'
// 'lang'
// 'x'
// 'age'


///
// for...in example No.4: Object literal and enumerable properties with values
const forInExample = {foo: 'bazz', lang: 'JavaScript', x: 13, age: 21}

for (let prop in forInExample) {
  // Output all properties as well as their values
  console.log(`Property ${prop} has value of ${forInExample[prop]}.`)
}

// Outputs:
// 'Property foo has value of bazz.'
// 'Property lang has value of JavaScript.'
// 'Property x has value of 13.'
// 'Property age has value of 21.'


///
// for...in example No.5: String
const forInExample = 'JavaScript'

for (let character in forInExample) {
  // Output all characters of the string
  console.log(character)
}

// Outputs:
// '0'
// '1'
// '2'
// '3'
// '4'
// '5'
// '6'
// '7'
// '8'
// '9'


///
// for...in example No.5: String and square bracket notation
const forInExample = 'JavaScript'

for (let character in forInExample) {
  // Output all characters of the string
  console.log(forInExample[character])
}

// Outputs:
// 'J'
// 'a'
// 'v'
// 'a'
// 'S'
// 'c'
// 'r'
// 'i'
// 'p'
// 't'

Lassen Sie uns nun denselben Satz von Beispielen mit for...of verwenden . Naja fast. Wie ich bereits erwähnt habe, for...of kann nicht mit Objektliteral verwendet werden. Also müssen wir diesen überspringen. Beachten Sie die Unterschiede zwischen dem Beispiel oben und unten. Beachten Sie besonders das Ergebnis der Verwendung der Notation mit eckigen Klammern (array[prop] ) und das letzte Beispiel mit Zeichenfolgen. Wie Sie den for...in sehen können gibt Werte zurück, während for...of gibt undefined zurück .

///
// for...of example No.1: Array and values
const forOfExample = ['bazz', true, 21]

for (let prop of forOfExample) {
  // Output all value stored inside the array
  console.log(prop)
}

// Outputs:
// 'bazz'
// 'true'
// '21'


///
// for...of example No.2: Array, values and square bracket notation
const forOfExample = ['bazz', true, 21]

for (let prop of forOfExample) {
  // Output all enumerable properties of the array
  console.log(forOfExample[prop])
}

// Outputs:
// undefined
// undefined
// undefined


///
// for...of example No.3: String
const forOfExample = 'JavaScript'

for (let character of forOfExample) {
  // Output all characters of the string
  console.log(character)
}

// Outputs:
// 'J'
// 'a'
// 'v'
// 'a'
// 'S'
// 'c'
// 'r'
// 'i'
// 'p'
// 't'


///
// for...of example No.4: String and square bracket notation
const forOfExample = 'JavaScript'

for (let character of forOfExample) {
  // Output all characters of the string
  console.log(character)
}

// Outputs:
// undefined
// undefined
// undefined
// undefined
// undefined
// undefined
// undefined
// undefined
// undefined
// undefined

Nebenbemerkung:Es ist möglicherweise keine gute Idee, for...in zu verwenden Schleife mit Arrays. Der Grund dafür ist, dass wenn for...in über ein Array iteriert, kann dies in einer inkonsistenten Reihenfolge geschehen. Das heißt, wenn Sie for...in verwenden mehrmals, können Sie die Elemente in einem Array in unterschiedlicher Reihenfolge erhalten. Wenn also die Reihenfolge der Elemente wichtig ist, verwenden Sie entweder for...of oder forEach wird besser sein.

map()

Eine von ES6 eingeführte Funktion, die sehr oft von JavaScript-Entwicklern verwendet wird, ist map() . Diese Methode bietet eine sehr einfache und schnelle Möglichkeit, ein Array zu durchlaufen und etwas mit seinem Inhalt zu tun. Sie geben an, was Sie mit dem Inhalt über die Callback-Funktion machen möchten, die Sie in map() übergeben Methode.

Die Callback-Methode akzeptiert drei Argumente. Diese Argumente sind:1) der Wert des aktuellen Array-Elements, 2) der Index des aktuellen Array-Elements und 3) das gesamte Array, über das die Abbildung iteriert. Klingt zu einfach, oder? Nun, es ist einfach. Das ist wahrscheinlich auch der Grund für map() Methode wurde so populär.

Ich habe diesen map() erwähnt ist eines der beliebtesten Tools vieler JavaScript-Entwickler. Dies gilt insbesondere für JavaScript-Entwickler, die mit Frameworks wie React arbeiten. In Reaktion, map() Methoden werden oft verwendet, um über einige Daten zu iterieren und Komponenten wie Listen zu erstellen (Codebeispiel Nr. 3).

///
// map() example no.1: Array with strings
const mapExample = ['foo', 'bar', 'bazz', 'buzzy']

mapExample.map((arrayItem, index, array) => {
  console.log(`${arrayItem} is on index ${index} in array [${array}].`)
})

// Outputs:
'foo is on index 0 in array [foo,bar,bazz,buzzy].'
'bar is on index 1 in array [foo,bar,bazz,buzzy].'
'bazz is on index 2 in array [foo,bar,bazz,buzzy].'
'buzzy is on index 3 in array [foo,bar,bazz,buzzy].'


///
// map() example no.2: Some simple math
const mapExample = [1, 2, 3, 5, 8, 13, 21]

mapExample.map((arrayItem, index, array) => {
  // Output numbers inside the array as squared
  console.log(Math.pow(arrayItem, 2))
})

// Outputs:
// 1
// 4
// 9
// 25
// 64
// 169
// 441


///
// map() example no.3: React
import React from 'react'
import ReactDOM from 'react-dom'

// Array with some user data
const mapExample = [
  {
    name: 'Joe',
    age: 23,
    id: 1
  },
  {
    name: 'Amanda',
    age: 22,
    id: 2
  },
  {
    name: 'Daryl',
    age: 36,
    id: 3
  }
]

// Create main App component
const App = () => {
  return (
    <ul>
      {/* Use map() to iterate over mapExample and generate list of users */}
      {mapExample.map((arrayItem) => {
        return <li key={arrayItem.id}>{arrayItem.name} ({arrayItem.age})</li>
      })}
    </ul>
  )
}

// Render the App component in DOM
ReactDOM.render(<App />, document.getElementById('root'))

Karte

Neben dem map() -Methode führte ES6 auch eine Map als Objekt ein. Karten können verwendet werden, um Daten in Form von Schlüssel-Wert-Paaren zu speichern. Ähnlich wie Arrays sind Maps iterierbar. Hier endet jedoch die Ähnlichkeit. Karte hat nicht length Eigentum. Wenn Sie wissen möchten, wie viele Gegenstände sich auf der Karte befinden, müssen Sie size verwenden Eigentum. Dies ist ähnlich wie Sätze.

Eine andere Sache, die Maps von Arrays unterscheidet, ist, dass Map kein map() hat Methode. Kleines Paradoxon. Wenn Sie über Map iterieren möchten, müssen Sie entweder for...of verwenden , for...in oder forEach Schleifen. Berücksichtigen Sie, was Sie jetzt über for...in wissen , die sicheren Optionen sind entweder for...of oder forEach .

Wenn Sie eine neue Karte erstellen möchten, müssen Sie den Map() verwenden Konstrukteur. Dies ist eine weitere Ähnlichkeit, die Maps mit Sets teilen. Und genau wie bei Sets können Sie die Map entweder mit Werten (Schlüssel-Wert-Paaren) oder leer initialisieren und später mit set() Werte hinzufügen Methode.

Denken Sie beim Erstellen von Maps mit Werten daran, diese in eckige Klammern zu setzen ([] ). Schließlich können Sie auch eine neue Karte erstellen, indem Sie zwei vorhandene Karten zusammenführen. Dazu können Sie den Spread-Operator verwenden.

///
// Map example no.1: Initializing Map empty and adding values later
const mapExample = new Map()

mapExample.set(0, 'John')
mapExample.set(1, 'Dick')
mapExample.set(2, 'Timothy')

for (let [key, value] of mapExample) {
  console.log(key + ': ' + value)
}

// Outputs:
'0: John'
'1: Dick'
'2: Timothy'


///
// Map example no.2: Initializing Map with values
const mapExample = new Map([[1, 'Sticky'], [2, 'Flocky'], [3, 'Flecky']])

for (let [key, value] of mapExample) {
  console.log(key + ': ' + value)
}

// Outputs:
'0: Sticky'
'1: Flocky'
'2: Flecky'


///
// Map example no.3: Map and forEach loop
const mapExample = new Map([[1, 'Foo'], [2, 'Bar'], [3, 'Bazz']])

mapExample.forEach((value, key) => {
  console.log(key + ': ' + value)
})

// Outputs:
'0: Foo'
'1: Bar'
'2: Bazz'


///
// Map example no.4: Merging Maps with spread operator
// Remember to use different keys!
const mapExampleOne = new Map([[1, 'Foo']])
const mapExampleTwo = new Map([[2, 'Bazz']])

// Merge mapExampleOne and mapExampleTwo into new Map
const mapExampleThree = new Map([...mapExampleOne, ...mapExampleTwo])

mapExampleThree.forEach((value, key) => {
  console.log(key + ': ' + value)
})

// Outputs:
'1: Foo'
'2: Bazz'

Epilog:ES6, ES7, ES8 &Schreiben von modernem JavaScript Teil 4

Herzliche Glückwünsche! Sie haben gerade den vierten Teil dieser Serie beendet. In diesem Teil haben Sie etwas über includes() gelernt , padStart() , padEnd() , neue Schleifen, map() und Karte. Gut gemacht! Während Sie die Tiefen von ES6 und modernem JavaScript erkunden, werden Sie immer besser. Davon abgesehen sind Sie noch nicht am Ende. Es gibt noch viel, was Sie über ES6 lernen können.

Es gibt noch Raum, um Ihre JavaScript-Kenntnisse zu verbessern. Was kommt als nächstes? Im nächsten Teil lernen Sie Features wie Pfeilfunktionen, Export- und Importanweisungen, Promises, Async/Await und auch Klassen kennen. Schreiben Sie bis dahin etwas Code und üben Sie, was Sie bisher gelernt haben.