Notes d'étude JavaScript Compétences method_javascript du tableau ES6

ES6 (ECMAScript 6) est le standard de la nouvelle version à venir du langage JavaScript, nom de code harmonie (ce qui signifie harmonie, évidemment il n'a pas suivi le rythme de notre pays, nous sommes entrés dans la version Chinese Dream). La dernière fois qu’une norme a été formulée, c’était ES5, publiée en 2009. Les travaux de normalisation d'ES6 sont actuellement en cours et la version officiellement finalisée devrait être publiée en décembre 2014. Mais la plupart des normes sont déjà en place et la prise en charge des navigateurs pour ES6 est en cours de mise en œuvre.

ES6 ajoute de nouvelles fonctionnalités aux tableaux, et ces nouvelles fonctionnalités peuvent jusqu'à présent être appliquées à votre propre couche métier. Dans cette section, nous résumerons comment utiliser certaines des nouvelles fonctionnalités fournies par ES6 pour les tableaux.

Deux méthodes statiques fournies par ES6 :

Array.from

Tableau.de

ES6 fournit des méthodes pour manipuler, remplir et filtrer les tableaux :

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

Il existe des méthodes sur l'itération des tableaux dans ES6 :

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

Ce qui suit examine principalement l'utilisation de ces méthodes.

Array.from()

La méthode Array.from() est principalement utilisée pour convertir deux types d'objets (objets de type tableau [objets de type tableau] et objets traversables [itérables]) en tableaux réels.

Dans ES5, la méthode suivante est souvent utilisée pour convertir un objet de type tableau en tableau :

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

Ou vous pouvez aussi écrire :

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

Dans ES6, vous pouvez utiliser Array.from pour convertir un objet de type tableau en un véritable tableau.

L'objet dit de type tableau n'a qu'une seule caractéristique essentielle, c'est-à-dire qu'il doit avoir un attribut de longueur. Par conséquent, tout objet avec un attribut de longueur est un objet de type tableau et peut être converti en un véritable tableau via la méthode Array.from.

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

Dans ES6, l'opérateur spread (...) peut également convertir certaines structures de données en tableaux. Il lui suffit d’appeler l’interface itérateur Symbol.iterator en coulisses.

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

Il convient de noter que si un objet ne déploie pas d'interface traverseur, l'opérateur spread ne peut pas être utilisé pour convertir un objet de type tableau en tableau.

Array.from accepte trois paramètres, mais seule une saisie est requise :

entrée : objets de type tableau et objets traversables que vous souhaitez convertir

map : Semblable à la méthode map d'un tableau, elle est utilisée pour traiter chaque élément et mettre la valeur traitée dans le tableau renvoyé

contexte : ceci
utilisé dans la carte de liaison

Tant que la structure de données de l'interface de l'itérateur est déployée, Array.from peut la convertir en tableau :

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"]

Le code ci-dessus, parce que la chaîne de caractères et la structure Set ont des interfaces d'itérateur, peut être converti en un véritable tableau par Array.from. Si le paramètre est un vrai tableau, Array.from renverra également un nouveau tableau identique :

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

Comme mentionné précédemment, Array.from peut également accepter un deuxième paramètre, similaire à la méthode map d'un tableau. Il est utilisé pour traiter chaque élément, et la valeur traitée est mise dans le tableau renvoyé :

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

Si le mot-clé this est utilisé dans la fonction map, vous pouvez également transmettre le troisième paramètre de Array.from pour le lier.

Array.from() peut convertir diverses valeurs en tableaux réels et fournit également une fonction de carte. Ce que cela signifie en réalité, c'est que tant que vous disposez d'une structure de données primitive, vous pouvez d'abord traiter sa valeur, puis la convertir en une structure de tableau canonique, puis utiliser un grand nombre de méthodes de tableau.

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

Dans le code ci-dessus, le premier paramètre de Array.from spécifie le nombre de fois que le deuxième paramètre est exécuté. Cette fonctionnalité rend l’utilisation de cette méthode très flexible.

Une autre application de Array.from() consiste à convertir une chaîne en tableau, puis à renvoyer la longueur de la chaîne. Parce qu'il peut gérer correctement divers caractères Unicode, il peut éviter le bug selon lequel JavaScript compte les caractères Unicode plus grands que uFFFF comme deux caractères.

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

L'utilisation d'Array.from() peut également renvoyer différents types de données :

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

Vous pouvez également utiliser la méthode map pour implémenter la fonction du code ci-dessus :

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

Utilisez la méthode Array.of pour convertir un ensemble de valeurs en un tableau.

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

Mais vous ne pouvez pas utiliser Array.of à la place de Array.prototype.slice.call, ils se comportent différemment :

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

Le but principal de cette méthode est de combler les lacunes du constructeur de tableau Array(). Le nombre de paramètres étant différent, le comportement d'Array() sera différent :

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 peut essentiellement être utilisé pour remplacer Array() ou new Array(), et il n'y a pas de surcharge due à différents paramètres, et leur comportement est très uniforme :

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数组方法小编就给大家介绍到这里，希望对大家有所帮助！