En JavaScript, vous pouvez créer un tableau en utilisant le constructeur Fonctions de tableau natif JavaScript expliquées, ou en utilisant le littéral de tableau [], cette dernière étant la méthode préférée. L'objet Fonctions de tableau natif JavaScript expliquées hérite de Object.prototype, et l'exécution de l'opérateur typeof sur un tableau renvoie object au lieu de array. Cependant, [] instanceof Fonctions de tableau natif JavaScript expliquées renvoie également true. En d'autres termes, l'implémentation d'objets de type tableau est plus complexe, comme les objets strings, les objets arguments, les objets arguments ne sont pas des instances de Fonctions de tableau natif JavaScript expliquées, mais ont des attributs length et peuvent obtenir des valeurs via des index, afin qu'ils puissent boucler comme un tableau.
Dans cet article, je passerai en revue certaines des méthodes de prototypes de tableaux et explorerai leurs utilisations.
Boucle : .forEach
Jugement : .some et .every
Distinguer les implémentations de pile et de file d'attente .join et .concat
: .pop, .push, .shift et .unshift
Cartographie de modèle : .map
Requête : .filter
Tri : .sort
Calculer : .reduce et .reduceRight
Copier : .slice
Puissant.splice
Rechercher : .indexOf
Opérateur : in
Approche.reverse
.forEach
Il s'agit de la méthode la plus simple en JavaScript, mais IE7 et IE8 ne prennent pas en charge cette méthode . .forEach a une fonction de rappel comme paramètre. Lors du parcours du tableau, elle sera appelée pour chaque élément du tableau. La fonction de rappel accepte trois paramètres :
value. : élément actuel
index : l'index de l'élément actuel
array : le tableau à parcourir
De plus, facultatif Le deuxième paramètre est utilisé comme contexte de chaque appel de fonction (this
['_', 't', 'a', 'n', 'i', 'f', ']'].forEach(function (value, index, array) { this.push(String.fromCharCode(value.charCodeAt() + index + 2))
}, out = [])out.join('')// <- 'awesome'123456 est utilisé dans cet exemple). différents éléments du tableau, l'effet est similaire à .join. out[0] + '' + out[1] + '' + out[2] + '' + out[n]Impossible d'interrompre la boucle
, et lancer une exception n'est pas un choix judicieux. Heureusement, nous disposons d'un autre moyen pour interrompre les opérations. .forEach
.some.every et .Any(x => x.IsAwesome). .All(x => x.IsAwesome) a des paramètres similaires à
, nécessitant une fonction de rappel contenant trois paramètres : .forEach, value et index, et possède également un deuxième paramètre de contexte facultatif. MDN décrit .some comme suit : array
exécutera la fonction de rappel une fois pour chaque élément du tableau jusqu'à ce que la fonction de rappel renvoie
some. Si l'élément cible est trouvé,truerenvoie immédiatementsome, sinon some renvoie false. La fonction de rappel n'est exécutée que pour les index de tableau avec des valeurs attribuées ; elle n'est pas appelée pour les éléments supprimés ou non attribués.true
max = -Infinity
satisfied = [10, 12, 10, 8, 5, 23].some(function (value, index, array) { if (value > max) max = value return value < 10})
console.log(max)// <- 12satisfied// <- true1234567891011 de la fonction de rappel est appelé, la boucle de fonction est interrompue. Le principe de fonctionnement de value < 10 est similaire à celui de .every, mais la fonction de rappel renvoie false au lieu de true. .some
.join.concat et .join est souvent confondue. .concatConcatène les éléments du tableau avec .join(separator) comme séparateur et renvoie la forme de chaîne Si separator n'est pas fourni, le separator par défaut sera utilisé. , créera un nouveau tableau en tant que copie superficielle du tableau source. .concat
Utilisation courante : .concatarray.concat(val, val2, val3, valn)
Renvoyer un nouveau tableau.concat
Sans aucun paramètre, renvoie une copie superficielle du tableau source. array.concat()Une copie superficielle signifie que le nouveau tableau conserve la même référence d'objet que le tableau d'origine, ce qui est généralement une bonne chose. Par exemple :
var a = { foo: 'bar' }
var b = [1, 2, 3, a]
var c = b.concat()
console.log(b === c)// <- falseb[3] === a && c[3] === a// <- true123456789.pop, .push, .shift和 .unshift每个人都知道.push可以再数组末尾添加元素，但是你知道可以使用[].push('a', 'b', 'c', 'd', 'z')一次性添加多个元素吗？ .pop 方法是.push 的反操作，它返回被删除的数组末尾元素。如果数组为空，将返回void 0 (undefined),使用.pop和.push可以创建LIFO (last in first out)栈。
function Stack () { this._stack = []
}
Stack.prototype.next = function () { return this._stack.pop()
}
Stack.prototype.add = function () { return this._stack.push.apply(this._stack, arguments)
}
stack = new Stack()
stack.add(1,2,3)
stack.next()// <- 31234567891011121314151617相反，可以使用.shift和 .unshift创建FIFO (first in first out)队列。
function Queue () {
this._queue = []
}
Queue.prototype.next = function () { return this._queue.shift()
}
Queue.prototype.add = function () { return this._queue.unshift.apply(this._queue, arguments)
}
queue = new Queue()
queue.add(1,2,3)
queue.next()// <- 1Using .shift (or .pop) is an easy way to loop through a set of array elements, while draining the array in the process.
list = [1,2,3,4,5,6,7,8,9,10]while (item = list.shift()) {
console.log(item)
}
list// <- []123456789101112131415161718192021222324252627.map
.map为数组中的每个元素提供了一个回调方法，并返回有调用结果构成的新数组。回调函数只对已经指定值的数组索引执行；它不会对已删除的或未指定值的元素调用。
Fonctions de tableau natif JavaScript expliquées.prototype.map 和上面提到的.forEach、.some和 .every有相同的参数格式：.map(fn(value, index, array), thisArgument)
values = [void 0, null, false, '']
values[7] = void 0result = values.map(function(value, index, array){ console.log(value) return value
})// <- [undefined, null, false, '', undefined × 3, undefined]12345678undefined × 3很好地解释了.map不会对已删除的或未指定值的元素调用，但仍然会被包含在结果数组中。.map在创建或改变数组时非常有用，看下面的示例：
// casting[1, '2', '30', '9'].map(function (value) { return parseInt(value, 10)
})// 1, 2, 30, 9[97, 119, 101, 115, 111, 109, 101].map(String.fromCharCode).join('')// <- 'awesome'// a commonly used pattern is mapping to new objectsitems.map(function (item) { return {
id: item.id,
name: computeName(item)
}
})12345678910111213141516.filter
filter对每个数组元素执行一次回调函数，并返回一个由回调函数返回true的元素组成的新数组。回调函数只会对已经指定值的数组项调用。
通常用法：.filter(fn(value, index, array), thisArgument),跟C#中的LINQ表达式和SQL中的where语句类似，.filter只返回在回调函数中返回true值的元素。
[void 0, null, false, '', 1].filter(function (value) { return value
})// <- [1][void 0, null, false, '', 1].filter(function (value) { return !value
})// <- [void 0, null, false, '']123456789.sort(compareFunction)如果没有提供
compareFunction，元素会被转换成字符串并按照字典排序。例如，”80”排在”9”之前，而不是在其后。
跟大多数排序函数类似，Fonctions de tableau natif JavaScript expliquées.prototype.sort(fn(a,b))需要一个包含两个测试参数的回调函数,其返回值如下：
a在b之前则返回值小于0
a和b相等则返回值是0
a在b之后则返回值小于0
[9,80,3,10,5,6].sort()// <- [10, 3, 5, 6, 80, 9][9,80,3,10,5,6].sort(function (a, b) { return a - b
})// <- [3, 5, 6, 9, 10, 80]1234567.reduce和.reduceRight这两个函数比较难理解，.reduce会从左往右遍历数组，而.reduceRight则从右往左遍历数组，二者典型用法：.reduce(callback(previousValue,currentValue, index, array), initialValue)。 previousValue 是最后一次调用回调函数的返回值，initialValue则是其初始值，currentValue是当前元素值，index是当前元素索引，array是调用.reduce的数组。
一个典型的用例，使用.reduce的求和函数。
Fonctions de tableau natif JavaScript expliquées.prototype.sum = function () { return this.reduce(function (partial, value) { return partial + value
}, 0)
};
[3,4,5,6,10].sum()// <- 2812345678如果想把数组拼接成一个字符串，可以用.join实现。然而，若数组值是对象，.join就不会按照我们的期望返回值了，除非对象有合理的valueOf或toString方法，在这种情况下，可以用.reduce实现：
function concat (input) { return input.reduce(function (partial, value) { if (partial) { partial += ', '
} return partial + value
}, '')
}
concat([
{ name: 'George' },
{ name: 'Sam' },
{ name: 'Pear' }
])// <- 'George, Sam, Pear'123456789101112131415.slice和.concat类似，调用没有参数的.slice()方法会返回源数组的一个浅拷贝。.slice有两个参数：一个是开始位置和一个结束位置。 Fonctions de tableau natif JavaScript expliquées.prototype.slice 能被用来将类数组对象转换为真正的数组。
Fonctions de tableau natif JavaScript expliquées.prototype.slice.call({ 0: 'a', 1: 'b', length: 2 })
// <- ['a', 'b']12这对.concat不适用，因为它会用数组包裹类数组对象。
Fonctions de tableau natif JavaScript expliquées.prototype.concat.call({ 0: 'a', 1: 'b', length: 2 })
// <- [{ 0: 'a', 1: 'b', length: 2 }]12此外，.slice的另一个通常用法是从一个参数列表中删除一些元素，这可以将类数组对象转换为真正的数组。
function format (text, bold) { if (bold) { text = '<b>' + text + '</b>'
}
var values = Fonctions de tableau natif JavaScript expliquées.prototype.slice.call(arguments, 2)
values.forEach(function (value) { text = text.replace('%s', value)
}) return text}format('some%sthing%s %s', true, 'some', 'other', 'things')// <- <b>somesomethingother things</b>123456789101112131415.splice.splice 是我最喜欢的原生数组函数，只需要调用一次，就允许你删除元素、插入新的元素，并能同时进行删除、插入操作。需要注意的是，不同于`.concat和.slice,这个函数会改变源数组。
var source = [1,2,3,8,8,8,8,8,9,10,11,12,13] var spliced = source.splice(3, 4, 4, 5, 6, 7) console.log(source)// <- [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ,13]spliced// <- [8, 8, 8, 8]12345678
正如你看到的，.splice会返回删除的元素。如果你想遍历已经删除的数组时，这会非常方便。
var source = [1,2,3,8,8,8,8,8,9,10,11,12,13]var spliced = source.splice(9)
spliced.forEach(function (value) {
console.log('removed', value)
})// <- removed 10// <- removed 11// <- removed 12// <- removed 13console.log(source)// <- [1, 2, 3, 8, 8, 8, 8, 8, 9]12345678910111213.indexOf利用.indexOf 可以在数组中查找一个元素的位置，没有匹配元素则返回-1。我经常使用.indexOf的情况是当我有比较时，例如：a === 'a' || a === 'b' || a === 'c'，或者只有两个比较，此时，可以使用.indexOf：['a', 'b', 'c'].indexOf(a) !== -1。
注意，如果提供的引用相同，.indexOf也能查找对象。第二个可选参数用于指定开始查找的位置。
var a = { foo: 'bar' }
var b = [a, 2]
console.log(b.indexOf(1))// <- -1console.log(b.indexOf({ foo: 'bar' }))// <- -1console.log(b.indexOf(a))// <- 0console.log(b.indexOf(a, 1))// <- -1b.indexOf(2, 1)// <- 11234567891011121314151617如果你想从后向前搜索，可以使用.lastIndexOf。
in在面试中新手容易犯的错误是混淆.indexOf和in操作符:
var a = [1, 2, 5]1 in a// <- true, but because of the 2!5 in a// <- false1234567
问题是in操作符是检索对象的键而非值。当然，这在性能上比.indexOf快得多。
var a = [3, 7, 6]1 in a === !!a[1]// <- true1234
.reverse该方法将数组中的元素倒置。
var a = [1, 1, 7, 8]a.reverse()// [8, 7, 1, 1]1234
.reverse 会修改数组本身。
译文出处：http://www.ido321.com/1568.html
本文根据@Nicolas Bevacqua的《Fun with JavaScript Native Fonctions de tableau natif JavaScript expliquées Functions》所译，整个译文带有我自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://modernweb.com/2013/11/25/fun-with-javascript-native-array-functions/。
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
