diff options
Diffstat (limited to 'files/nl/web/javascript/reference/global_objects/array/find/index.html')
| -rw-r--r-- | files/nl/web/javascript/reference/global_objects/array/find/index.html | 224 |
1 files changed, 224 insertions, 0 deletions
diff --git a/files/nl/web/javascript/reference/global_objects/array/find/index.html b/files/nl/web/javascript/reference/global_objects/array/find/index.html new file mode 100644 index 0000000000..2d9443ef47 --- /dev/null +++ b/files/nl/web/javascript/reference/global_objects/array/find/index.html @@ -0,0 +1,224 @@ +--- +title: Array.prototype.find() +slug: Web/JavaScript/Reference/Global_Objects/Array/find +tags: + - Array + - ECMAScript 2015 + - ECMAScript6 + - JavaScript + - Method + - Prototype + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/find +--- +<div>{{JSRef}}</div> + +<p>De <code><strong>find()</strong></code>-methode geeft de <strong>waarde</strong> van het <strong>eerste array element </strong>dat aan de testfunctie voldoet terug. Als geen van de elementen uit het array aan de testfunctie voldoen, dan wordt {{jsxref("undefined")}} teruggegeven.</p> + +<p>Zie ook de {{jsxref("Array.findIndex", "findIndex()")}}-methode, die de <strong>index</strong> van het gevonden element in de array teruggeeft in plaats van de waarde zelf.</p> + +<h2 id="Syntaxis">Syntaxis</h2> + +<pre class="syntaxbox"><code><var>arr</var>.find(<var>callback</var>[, <var>thisArg</var>])</code></pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Functie om voor alle waarden in de array uit te voeren, die drie argumenten accepteert: + <dl> + <dt><code>element</code></dt> + <dd>Het huidige element uit de array dat wordt verwerkt.</dd> + <dt><code>index</code></dt> + <dd>De index van het huidige element uit de array dat wordt verwerkt.</dd> + <dt><code>array</code></dt> + <dd>De array waarop <code>find</code> werd aangeroepen.</dd> + </dl> + </dd> + <dt><code>thisArg</code></dt> + <dd>Optioneel. Object om voor <code>this</code> te gebruiken tijdens het uitvoeren van <code>callback</code>.</dd> +</dl> + +<h3 id="Retourwaarde">Retourwaarde</h3> + +<p>Een waarde in de array als een element aan de testfunctie voldoet, anders {{jsxref("undefined")}}.</p> + +<h2 id="Beschrijving">Beschrijving</h2> + +<p>De <code>find</code>-methode voert de <code>callback</code>-functie eenmaal per aanwezig element in de array uit, totdat er één wordt gevonden waarvoor <code>callback</code> een waarde true teruggeeft. Als een dergelijk element wordt gevonden, geeft <code>find</code> direct de waarde van dat element terug. In andere gevallen geeft <code>find</code> {{jsxref("undefined")}} terug nadat alle elementen uit de array zijn doorlopen. <code>callback</code> wordt alleen aangeroepen voor indexen van de array waaraan een waarde is toegekend; de functie wordt niet aangeroepen voor indexen die zijn verwijderd of waaraan nooit een waarde is toegekend.</p> + +<p><code>callback</code> wordt aangeroepen met drie argumenten: de waarde van het element, de index van het element en het Array-object waarover wordt geïtereerd.</p> + +<p>Als een <code>thisArg</code>-parameter aan <code>find</code> wordt meegegeven, wordt deze voor elke aanroep van <code>callback</code> gebruikt als de waarde voor <code>this</code>. Als er geen waarde voor is opgegeven, wordt {{jsxref("undefined")}} gebruikt.</p> + +<p><code>find</code> wijzigt de array waarop de methode wordt aangeroepen niet.</p> + +<p>Het bereik van de elementen die door <code>find</code> worden verwerkt, wordt ingesteld voor de eerste aanroep van <code>callback</code>. Elementen die aan de array worden toegevoegd nadat de aanroep naar <code>find</code> begint, worden niet door <code>callback</code> bezocht. Als een bestaand, maar nog niet bezocht element van de array door <code>callback</code> wordt gewijzigd, zal de waarde van dit element die aan <code>callback</code> wordt meegegeven de waarde worden die eraan was toegekend op het moment dat <code>find</code> de index van dat element bereikte; verwijderde elementen worden niet bezocht.</p> + +<h2 id="Voorbeelden">Voorbeelden</h2> + +<h3 id="Een_object_in_een_array_zoeken_via_een_van_zijn_eigenschappen">Een object in een array zoeken via een van zijn eigenschappen</h3> + +<pre class="brush: js">var voorraad = [ + {naam: 'appels', aantal: 2}, + {naam: 'bananen', aantal: 0}, + {naam: 'kersen', aantal: 5} +]; + +function zoekKersen(fruit) { + return fruit.naam === 'kersen'; +} + +console.log(voorraad.find(zoekKersen)); // { naam: 'kersen', aantal: 5 }</pre> + +<h3 id="Een_priemgetal_in_een_array_zoeken">Een priemgetal in een array zoeken</h3> + +<p>Het volgende voorbeeld zoekt een element in de array dat een priemgetal is (of geeft {{jsxref("undefined")}} terug als er geen priemgetal is).</p> + +<pre class="brush: js">function isPriem(element) { + var start = 2; + while (start <= Math.sqrt(element)) { + if (element % start++ < 1) { + return false; + } + } + return element > 1; +} + +console.log([4, 6, 8, 12].find(isPriem)); // niet gedefinieerd, niet gevonden +console.log([4, 5, 8, 12].find(isPriem)); // 5 +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Deze methode is aan de ECMAScript 2015-specificatie toegevoegd en is mogelijk nog niet in alle JavaScript-implementaties beschikbaar. Met de volgende snippet kan <code>Array.prototype.find</code> echter worden ‘gepolyfilled’:</p> + +<pre class="brush: js">// https://tc39.github.io/ecma262/#sec-array.prototype.find +if (!Array.prototype.find) { + Object.defineProperty(Array.prototype, 'find', { + 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 kValue. + var kValue = o[k]; + if (predicate.call(thisArg, kValue, k, o)) { + return kValue; + } + // e. Increase k by 1. + k++; + } + + // 7. Return undefined. + return undefined; + } + }); +}</pre> + +<h2 id="Specificaties">Specificaties</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specificatie</th> + <th scope="col">Status</th> + <th scope="col">Opmerking</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.find', 'Array.prototype.find')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Eerste definitie.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.find', 'Array.prototype.find')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browsercompatibiliteit">Browsercompatibiliteit</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Functie</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Edge</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basisondersteuning</td> + <td>{{CompatChrome(45.0)}}</td> + <td>{{CompatGeckoDesktop("25.0")}}</td> + <td>{{CompatNo}}</td> + <td>12</td> + <td>{{CompatNo}}</td> + <td>{{CompatSafari("7.1")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Functie</th> + <th>Android</th> + <th>Chrome voor Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Edge</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basisondersteuning</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("25.0")}}</td> + <td>{{CompatNo}}</td> + <td>12</td> + <td>{{CompatNo}}</td> + <td>8.0</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Zie_ook">Zie ook</h2> + +<ul> + <li>{{jsxref("Array.prototype.findIndex()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> +</ul> |