JavaScript-Studiennotizen ES6-Array-Methode_Javascript-Kenntnisse

ES6 (ECMAScript 6) ist der Standard für die kommende neue Version der JavaScript-Sprache mit dem Codenamen Harmony (was Harmonie bedeutet, offensichtlich hat es nicht mit dem Tempo unseres Landes Schritt gehalten, wir sind in die Chinese Dream-Version eingetreten). Das letzte Mal, dass ein Standard formuliert wurde, war ES5, der 2009 veröffentlicht wurde. Die Standardisierungsarbeiten an ES6 sind derzeit im Gange und die offiziell finalisierte Version wird voraussichtlich im Dezember 2014 veröffentlicht. Die meisten Standards sind jedoch bereits vorhanden und die Browserunterstützung für ES6 wird implementiert.

ES6 fügt Arrays einige neue Funktionen hinzu, und diese neuen Funktionen können bisher auf Ihre eigene Geschäftsschicht angewendet werden. In diesem Abschnitt fassen wir zusammen, wie einige der neuen Funktionen von ES6 für Arrays verwendet werden.

Zwei statische Methoden, die von ES6 bereitgestellt werden:

Array.from

Array.of

ES6 bietet Methoden zum Bearbeiten, Füllen und Filtern von Arrays:

Array.prototype.copyWidthin
Array.prototype.fill
Array.prototype.find
Array.prototype.findIndex

Es gibt Methoden zur Array-Iteration in ES6:

Array.prototype.keys
Array.prototype.values
Array.prototype.entries
Array.prototype[Symbol.iterator]

Im Folgenden wird hauptsächlich auf die Verwendung dieser Methoden eingegangen.

Array.from()

Die Methode Array.from() wird hauptsächlich zum Konvertieren von zwei Arten von Objekten (Array-ähnliche Objekte [array-ähnliche Objekte] und durchquerbare Objekte [iterierbar]) in echte Arrays verwendet.

In ES5 wird häufig die folgende Methode verwendet, um ein Array-ähnliches Objekt in ein Array zu konvertieren:

function cast () {
return Array.prototype.slice.call(arguments);
}
cast('a','b','c','d'); // ["a", "b", "c", "d"]

Oder Sie können auch schreiben:

function cast () {
return [].slice.call(arguments);
}
cast('a','b','c','d'); // ["a", "b", "c", "d"]

In ES6 können Sie Array.from verwenden, um ein Array-ähnliches Objekt in ein echtes Array umzuwandeln.

Das sogenannte Array-ähnliche Objekt hat nur ein wesentliches Merkmal, nämlich ein Längenattribut. Daher ist jedes Objekt mit einem Längenattribut ein Array-ähnliches Objekt und kann über die Array.from-Methode in ein echtes Array umgewandelt werden.

let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
}
console.log(Array.from(arrayLike)); // ["a","b","c"]

In ES6 kann der Spread-Operator (...) auch einige Datenstrukturen in Arrays konvertieren. Es muss lediglich die Iteratorschnittstelle Symbol.iterator hinter den Kulissen aufgerufen werden.

function cast (){
return [...arguments]
}
cast('a','b','c'); // ["a","b","c"]

Es ist erwähnenswert, dass der Spread-Operator nicht zum Konvertieren eines Array-ähnlichen Objekts in ein Array verwendet werden kann, wenn ein Objekt keine Traverser-Schnittstelle bereitstellt.

Array.from akzeptiert drei Parameter, es ist jedoch nur eine Eingabe erforderlich:

Eingabe: Array-ähnliche Objekte und durchquerbare Objekte, die Sie konvertieren möchten

map: Ähnlich der Map-Methode eines Arrays wird sie verwendet, um jedes Element zu verarbeiten und den verarbeiteten Wert in das zurückgegebene Array
einzufügen

Kontext: Dies
wird in der Bindungskarte verwendet

Solange die Datenstruktur der Iteratorschnittstelle bereitgestellt ist, kann Array.from sie in ein Array konvertieren:

let arr = Array.from('w3cplus.com')
console.log(arr); // ["w","3","c","p","l","u","s",".","c","o","m"]
let namesSet = new Set(['a', 'b'])
let arr2 = Array.from(namesSet) 
console.log(arr2); //["a","b"]

Da sowohl die Zeichenfolge als auch die Set-Struktur über Iteratorschnittstellen verfügen, kann der obige Code von Array.from in ein echtes Array konvertiert werden. Wenn der Parameter ein echtes Array ist, gibt Array.from auch ein identisches neues Array zurück:

let arr = Array.from([1, 2, 3]);
console.log(arr); // [1,2,3]

Wie bereits erwähnt, kann Array.from auch einen zweiten Parameter akzeptieren, der der Map-Methode eines Arrays ähnelt. Er wird zur Verarbeitung jedes Elements verwendet und der verarbeitete Wert wird in das zurückgegebene Array eingefügt:

Array.from(arrayLike, x => x * x);
// 等同于
Array.from(arrayLike).map(x => x * x);
Array.from([1, 2, 3], (x) => x * x)
// [1, 4, 9]

Wenn das Schlüsselwort this in der Map-Funktion verwendet wird, können Sie auch den dritten Parameter von Array.from übergeben, um dies zu binden.

Array.from() kann verschiedene Werte in echte Arrays umwandeln und bietet außerdem eine Kartenfunktion. Das bedeutet eigentlich, dass Sie, solange Sie über eine primitive Datenstruktur verfügen, zunächst deren Wert verarbeiten und ihn dann in eine kanonische Array-Struktur konvertieren und dann eine große Anzahl von Array-Methoden verwenden können.

Array.from({ length: 2 }, () => 'jack')
// ['jack', 'jack']

Im obigen Code gibt der erste Parameter von Array.from an, wie oft der zweite Parameter ausgeführt wird. Diese Funktion macht den Einsatz dieser Methode sehr flexibel.

Eine weitere Anwendung von Array.from() besteht darin, einen String in ein Array umzuwandeln und dann die Länge des Strings zurückzugeben. Da es verschiedene Unicode-Zeichen korrekt verarbeiten kann, kann der Fehler vermieden werden, dass JavaScript Unicode-Zeichen, die größer als uFFFF sind, als zwei Zeichen zählt.

function countSymbols(string) {
return Array.from(string).length;
}

Mit Array.from() können auch verschiedene Datentypen zurückgegeben werden:

function typesOf () {
return Array.from(arguments, value => typeof value)
}
typesOf(null, [], NaN)
// <- ['object', 'object', 'number']

Sie können auch die Kartenmethode verwenden, um die Funktion des obigen Codes zu implementieren:

function typesOf (...all) {
return all.map(value => typeof value)
}
typesOf(null, [], NaN)
// <- ['object', 'object', 'number']
Array.of

Verwenden Sie die Methode Array.of, um eine Reihe von Werten in ein Array umzuwandeln.

Array.of = function of () {
return Array.prototype.slice.call(arguments)
}

Aber Sie können Array.of nicht anstelle von Array.prototype.slice.call verwenden, sie verhalten sich anders:

Array.prototype.slice.call([1, 2, 3])
// <- [1, 2, 3]
Array.of(1, 2, 3)
// <- [1, 2, 3]
Array.of(3)
// <- [1]

Der Hauptzweck dieser Methode besteht darin, die Mängel des Array-Konstruktors Array() auszugleichen. Da die Anzahl der Parameter unterschiedlich ist, ist das Verhalten von Array() unterschiedlich:

new Array()
// <- []
new Array(undefined)
// <- [undefined]
new Array(1)
// <- [undefined x 1]
new Array(3)
// <- [undefined x 3]
new Array(1, 2)
// <- [1, 2]
new Array(-1)
// <- RangeError: Invalid array length

Array.of kann grundsätzlich verwendet werden, um Array() oder new Array() zu ersetzen, und es gibt keine Überlastung aufgrund unterschiedlicher Parameter und ihr Verhalten ist sehr einheitlich:

Array.of()
// <- []
Array.of(undefined)
// <- [undefined]
Array.of(1)
// <- [1]
Array.of(3)
// <- [3]
Array.of(1, 2)
// <- [1, 2]
Array.of(-1)
// <- [-1]

Array.of方法可以使用下面的代码来模拟实现：

function ArrayOf(){
return [].slice.call(arguments);
}

copyWidthin

copyWidthin方法可以在当前数组内部，将指定位置的数组项复制到其他位置(会覆盖原数组项)，然后返回当前数组。使用copyWidthin方法会修改当前数组。

Array.prototype.copyWithin(target, start = 0, end = this.length)

copyWidthin将会接受三个参数：

target: 这个参数是必须的，从该位置开始替换数组项

start: 这是一个可选参数，从该位置开始读取数组项，默认为0，如果为负值，表示从数组的右边向左开始读取

end: 这是一个可选参数，到该位置停止读取的数组项，默认等于Array.length。如果为负值，表示倒数

我们先来看一个简单的示例，下面声明了一个items数组：

var items = [1, 2, 3, ,,,,,,,]; // <- [1, 2, 3, undefined x 7]

下面的代码将在数组items的第六个位置开始粘贴数组项。粘贴过去的数组项是从items的第二位开始到第三位置结束。

items.copyWithin(6, 1, 3)
// <- [1, 2, 3, undefined × 3, 2, 3, undefined × 2]

下面是更多例子：

// 将3号位复制到0号位
[1, 2, 3, 4, 5].copyWithin(0, 3, 4)
// [4, 2, 3, 4, 5]
// -2相当于3号位，-1相当于4号位
[1, 2, 3, 4, 5].copyWithin(0, -2, -1)
// [4, 2, 3, 4, 5]
// 将3号位复制到0号位
[].copyWithin.call({length: 5, 3: 1}, 0, 3)
// {0: 1, 3: 1, length: 5}
// 将2号位到数组结束，复制到0号位
var i32a = new Int32Array([1, 2, 3, 4, 5]);
i32a.copyWithin(0, 2);
// Int32Array [3, 4, 5, 4, 5]
// 对于没有部署TypedArray的copyWithin方法的平台
// 需要采用下面的写法
[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4);
// Int32Array [4, 2, 3, 4, 5]
Array.prototype.fill

Array.prototype.fill方法使用给定的值填充一个数组：

['a', 'b', 'c'].fill(0)
// <- [0, 0, 0]
new Array(3).fill(0)
// <- [0, 0, 0]

上面这种方法用于空数组的初始化非常方便。数组中已有的元素会全部被抹去。

除此之外，Array.prototype.fill方法还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置。

['a', 'b', 'c',,,].fill(0, 2)
// <- ['a', 'b', 0, 0, 0]
new Array(5).fill(0, 0, 3)
// <- [0, 0, 0, undefined x 2]

Array.prototype.fill提供的值可以是任意的，不仅可以是一个数值，甚至还可以是一个原始类型：

new Array(3).fill({})
// <- [{}, {}, {}]

不过这个方法不可以接受数组的映射方法，不过可以接受一个索引参数或类似下面这样的方式：

new Array(3).fill(function foo () {})
// <- [function foo () {}, function foo () {}, function foo () {}]
Array.prototype.find

Array.prototype.find方法用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的数组项，然后返回该数组项。如果没有符合条件的数组项，则返回undefined。

[1, 2, 3, 4, 5].find(item => item > 2)
// <- 3
[1, 2, 3, 4, 5].find((item, i) => i === 3)
// <- 4
[1, 2, 3, 4, 5].find(item => item === Infinity)
// <- undefined

另外这种方法的回调函数可以接受三个参数，依次为当前的值、当前的位置和原始数组。

[1, 5, 10, 15].find(function(value, index, arr) {
return value > 9;
}) // 10
Array.prototype.findIndex

这个方法类似于.some和.find方法。像.some返回true；像.find返回item。如果array[index] === item则返回其index。

Array.prototype.findIndex方法主要是用来返回数组项在数组中的位置。其和Array.prototype.find方法非常类似，接受一个回调函数，如果符合回调函数的条件，则返回数组项在数组中的位置，如果所有数组项都不符合回调函数条件，则会返回-1。

[1, 2, 3, 4, 5].find(item => item > 2)
// <- 2
[1, 2, 3, 4, 5].find((item, i) => i === 3)
// <- 3
[1, 2, 3, 4, 5].find(item => item === Infinity)
// <- -1

这个方法也可以接受第二个参数，用来绑定回调函数的this对象。

注：Array.prototype.find和Array.prototype.findIndex两个方法都可以发现NaN，弥补数组的indexOf方法的不足。

[NaN].indexOf(NaN)
// -1
[NaN].findIndex(y => Object.is(NaN, y))
// 0

上面的代码中，indexOf方法无法识别数组的NaN成员，但是findIndex方法可以借助Object.is方法做到。

ES6遍历数组的方法

ES6提供了三个新方法：entries()、keys()和values()，用来遍历数组。它们都返回一个遍历器对象，可以用for...of循环进行遍历，唯一的区别是keys()是对数组的键名的遍历、values()是对数组键值的遍历，entries()方法是对数值的键值对的遍历。

for (let index of ['a', 'b'].keys()) {
console.log(index);
}
// 0
// 1
for (let elem of ['a', 'b'].values()) {
console.log(elem);
}
// 'a'
// 'b'
for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem);
}
// 0 "a"
// 1 "b"

如果不使用for...of循环，可以手动调用遍历器对象的next方法，进行遍历：

let letter = ['a', 'b', 'c'];
let entries = letter.entries();
console.log(entries.next().value); // [0, 'a']
console.log(entries.next().value); // [1, 'b']
console.log(entries.next().value); // [2, 'c']

总结

这里简单的总结了有关于ES6中数组的相关方法。说实在的，初次接触ES6，很多东西都看得云里来雾里去。这里只是整理了一下这方面的相关知识。

关于JavaScript学习笔记之ES6数组方法小编就给大家介绍到这里，希望对大家有所帮助！