1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
|
---
title: Array.prototype.findIndex()
slug: Web/JavaScript/Reference/Global_Objects/Array/findIndex
tags:
- Méthode
translation_of: Web/JavaScript/Reference/Global_Objects/Array/findIndex
---
<div>{{JSRef}}</div>
<p>De methode <code><strong>findIndex()</strong></code> geeft de <strong>index</strong> terug van het <strong>eerste element</strong> in de array waarvoor de gegeven functie voldoet. Indien er geen element wordt gevonden, zal -1 teruggegeven worden.</p>
<div>{{EmbedInteractiveExample("pages/js/array-findindex.html")}}</div>
<p class="hidden">De broncode van dit interactieve voorbeeld is terug te vinden in een GitHub repository. Als je wil bijdragen aan het interactieve voorbeelden project, clone dan <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> en stuur ons een pull request.</p>
<div> </div>
<p>Zie ook de methode {{jsxref("Array.find", "find()")}}, die een <strong>waarde</strong> teruggeeft van het gevonden element in plaats van de index.</p>
<h2 id="Syntax">Syntax</h2>
<pre class="syntaxbox"><var>arr</var>.findIndex(<var>callback</var>[, <var>thisArg</var>])</pre>
<h3 id="Parameters">Parameters</h3>
<dl>
<dt><code>callback</code></dt>
<dd>De functie die wordt uitgevoerd voor elk element in de array, met volgende drie argumenten:
<dl>
<dt><code>element</code></dt>
<dd>Het huidig te evalueren element uit de array.</dd>
<dt><code>index</code>{{optional_inline}}</dt>
<dd>De index van het huidig te evalueren element binnen de array.</dd>
<dt><code>array</code>{{optional_inline}}</dt>
<dd>De array waarop de methode <code>findIndex</code> was aangeroepen.</dd>
</dl>
</dd>
<dt><code>thisArg</code>{{optional_inline}}</dt>
<dd>Optioneel. Het object dat als <code>this</code> kan gebruikt worden tijdens de uitvoer van <code>callback</code>.</dd>
</dl>
<h3 id="Return_value">Return value</h3>
<p>De index binnen de array van het gevonden element; anders, <strong>-1</strong>.</p>
<h2 id="Beschrijving">Beschrijving</h2>
<p>De methode <code>findIndex</code> voert de <code>callback</code> function uit voor elke index uit de array <code>0..length-1</code> (inclusief) tot wanneer er een element is waarvoor <code>callback</code> een waarde teruggeeft overeenkomstig met <code>true</code>. Als zo een element wordt gevonden, dan geeft <code>findIndex</code> onmiddellijk de index terug van deze iteratie. Als de functie voor geen enkel element voldoet of als <code>length</code> van de array 0 is, zal <code>findIndex</code> -1 teruggeven. In tegenstelling tot andere array methodes zoals Array#some, wordt <code>callback</code> ook aangeroepen ook voor indexen zonder element in de array.</p>
<p><code>callback</code> heeft drie argumenten: de waarde van het element, de index van het element, en het Array element dat wordt doorlopen.</p>
<p>Als een <code>thisArg</code> parameter wordt opgegeven voor <code>findIndex</code> zal het gebruikt worden als <code>this</code> bij elke aanroep van <code>callback</code>. Als het niet wordt opgegeven dan wordt {{jsxref("undefined")}} gebruikt.</p>
<p><code>findIndex</code> past de array waarop het wordt aangeroepen niet aan.</p>
<p>De reeks van elementen verwerkt door <code>findIndex</code> wordt opgemaakt voor de eerste aanroep van <code>callback</code>. Elementen die aan de array worden toegevoegd na de aanroep van <code>findIndex</code> zullen niet worden doorlopen door <code>callback</code>. Als een bestaand element, dat nog niet werd doorlopen, aangepast wordt door <code>callback</code>, dan zal deze waarde doorgegeven aan <code>callback</code>; verwijderde elementen worden ook doorlopen.</p>
<h2 id="Examples">Examples</h2>
<h3 id="Vind_de_index_van_een_priemgetal_in_een_array">Vind de index van een priemgetal in een array</h3>
<p>Het volgende voorbeeld toont hoe een priemgetal kan gevonden worden in een array met getallen (of -1 als er geen priemgetal in de array zit).</p>
<pre class="brush: js">function isPrime(element, index, array) {
var start = 2;
while (start <= Math.sqrt(element)) {
if (element % start++ < 1) {
return false;
}
}
return element > 1;
}
console.log([4, 6, 8, 12].findIndex(isPrime)); // -1, not found
console.log([4, 6, 7, 12].findIndex(isPrime)); // 2
</pre>
<h3 id="Vind_index_met_een_arrow_function">Vind index met een arrow function</h3>
<p>Het volgende voorbeeld toont hoe een element uit de array fruits kan gevonden worden met de arrow function syntax.</p>
<pre class="brush: js">const fruits = ["apple", "banana", "cantaloupe", "blueberries", "grapefruit"];
const index = fruits.findIndex(fruit => fruit === "blueberries");
console.log(index); // 3
console.log(fruits[index]); // blueberries
</pre>
<h2 id="Polyfill">Polyfill</h2>
<pre class="brush: js">// https://tc39.github.io/ecma262/#sec-array.prototype.findIndex
if (!Array.prototype.findIndex) {
Object.defineProperty(Array.prototype, 'findIndex', {
value: function(predicate) {
// 1. Let O be ? ToObject(this value).
if (this == null) {
throw new TypeError('"this" is null or not defined');
}
var o = Object(this);
// 2. Let len be ? ToLength(? Get(O, "length")).
var len = o.length >>> 0;
// 3. If IsCallable(predicate) is false, throw a TypeError exception.
if (typeof predicate !== 'function') {
throw new TypeError('predicate must be a function');
}
// 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
var thisArg = arguments[1];
// 5. Let k be 0.
var k = 0;
// 6. Repeat, while k < len
while (k < len) {
// a. Let Pk be ! ToString(k).
// b. Let kValue be ? Get(O, Pk).
// c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).
// d. If testResult is true, return k.
var kValue = o[k];
if (predicate.call(thisArg, kValue, k, o)) {
return k;
}
// e. Increase k by 1.
k++;
}
// 7. Return -1.
return -1;
},
configurable: true,
writable: true
});
}
</pre>
<p>Als je echt verouderde JavaScript engines moet blijven ondersteunen die <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a></code> niet supporteren, is het beter van <code>Array.prototype</code> methodes helemaal niet te voorzien als polyfill, omdat je ze toch niet niet-enumereerbaar kan maken.</p>
<h2 id="Specificaties">Specificaties</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('ES2015', '#sec-array.prototype.findindex', 'Array.prototype.findIndex')}}</td>
<td>{{Spec2('ES2015')}}</td>
<td>Initial definition.</td>
</tr>
<tr>
<td>{{SpecName('ESDraft', '#sec-array.prototype.findIndex', 'Array.prototype.findIndex')}}</td>
<td>{{Spec2('ESDraft')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<div>
<div class="hidden">De compatibility tabel van deze pagina werd gegenereerd uit gestructureerde data. Als je wil bijdragen verwijzen we naar <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> en stuur ons een pull request.</div>
<p>{{Compat("javascript.builtins.Array.findIndex")}}</p>
</div>
<h2 id="Zie_ook">Zie ook</h2>
<ul>
<li>{{jsxref("Array.prototype.find()")}}</li>
<li>{{jsxref("Array.prototype.indexOf()")}}</li>
</ul>
|
