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
|
---
title: Array.prototype.fill()
slug: Web/JavaScript/Reference/Global_Objects/Array/fill
tags:
- Functies
translation_of: Web/JavaScript/Reference/Global_Objects/Array/fill
---
<div>{{JSRef}}</div>
<p><span class="seoSummary">De <code><strong>fill()</strong></code> functie verandert alle elementen in een array naar statische waarde. Vanaf de eerste index (standaard <code>0</code>) tot de laatste index (standaard <code>array.length</code>). De functie geeft de aangepaste array terug.</span></p>
<div>{{EmbedInteractiveExample("pages/js/array-fill.html")}}</div>
<p class="hidden">De bron van dit interactieve voorbeeld is opgeslagen in een GitHub repository. Als u wilt bijdragen aan het interactieve voorbeelden project, clone dan graag <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> en stuur ons een pull verzoek.</p>
<h2 id="Syntax">Syntax</h2>
<pre class="syntaxbox notranslate"><var>arr</var>.fill(<var>value[</var>, <var>start[<var>, <var>end]]</var>)</var></var>
</pre>
<h3 id="Parameters">Parameters</h3>
<dl>
<dt><code>value</code></dt>
<dd>Waarde om de array mee te vullen. (Let op, alle elementen in de array krijgen exact deze waarde.)</dd>
<dt><code>start</code> {{optional_inline}}</dt>
<dd>Start index, standaard <code>0</code>.</dd>
<dt><code>end</code> {{optional_inline}}</dt>
<dd>Laatste index, standaard <code>arr.length</code>.</dd>
</dl>
<h3 id="Return_waarde">Return waarde</h3>
<p>De aangepaste array, gevuld met <code>value</code>.</p>
<h2 id="Description">Description</h2>
<ul>
<li>Als <code>start</code> negatief is, dan wordt het uitgevoerd als <code>array.length + start</code>.</li>
<li>Als <code>end</code> negatief is, dan wordt het uitgevoerd als <code>array.length + end</code>.</li>
<li><code>fill</code> is bedoeld als generiek: de <code>this</code> waarde hoeft geen <code>Array</code> object te zijn.</li>
<li><code>fill</code> is een muterende functie: het verandert de array zelf een geeft deze array terug, niet een kopie ervan.</li>
<li>Als de eerste parameter een object is, dan zal iedere positie in de array hieraan refereren.</li>
</ul>
<h2 id="Polyfill">Polyfill</h2>
<pre class="brush: js notranslate">if (!Array.prototype.fill) {
Object.defineProperty(Array.prototype, 'fill', {
value: function(value) {
// Steps 1-2.
if (this == null) {
throw new TypeError('this is null or not defined');
}
var O = Object(this);
// Steps 3-5.
var len = O.length >>> 0;
// Steps 6-7.
var start = arguments[1];
var relativeStart = start >> 0;
// Step 8.
var k = relativeStart < 0 ?
Math.max(len + relativeStart, 0) :
Math.min(relativeStart, len);
// Steps 9-10.
var end = arguments[2];
var relativeEnd = end === undefined ?
len : end >> 0;
// Step 11.
var finalValue = relativeEnd < 0 ?
Math.max(len + relativeEnd, 0) :
Math.min(relativeEnd, len);
// Step 12.
while (k < finalValue) {
O[k] = value;
k++;
}
// Step 13.
return O;
}
});
}
</pre>
<p>Als verouderde JavaScript engines ondersteund moeten worden, welke <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a> </code> niet ondersteunen, dan is het beter om helemaal geen polyfill <code>Array.prototype</code> functies te gebruiken, aangezien ze dan niet non-enumerable te maken zijn.</p>
<h2 id="Voorbeelden">Voorbeelden</h2>
<h3 id="Fill_toepassen">Fill toepassen</h3>
<pre class="brush: js notranslate">[1, 2, 3].fill(4) // [4, 4, 4]
[1, 2, 3].fill(4, 1) // [1, 4, 4]
[1, 2, 3].fill(4, 1, 2) // [1, 4, 3]
[1, 2, 3].fill(4, 1, 1) // [1, 2, 3]
[1, 2, 3].fill(4, 3, 3) // [1, 2, 3]
[1, 2, 3].fill(4, -3, -2) // [4, 2, 3]
[1, 2, 3].fill(4, NaN, NaN) // [1, 2, 3]
[1, 2, 3].fill(4, 3, 5) // [1, 2, 3]
Array(3).fill(4) // [4, 4, 4]
[].fill.call({ length: 3 }, 4) // {0: 4, 1: 4, 2: 4, length: 3}
// Een enkel object, waaraan door iedere positie in de array gerefereerd wordt:
let arr = Array(3).fill({}) // [{}, {}, {}]
arr[0].hi = "hi" // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }]
</pre>
<h2 id="Specificaties">Specificaties</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specificatie</th>
</tr>
<tr>
<td>{{SpecName('ESDraft', '#sec-array.prototype.fill', 'Array.prototype.fill')}}</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibiliteit">Browser compatibiliteit</h2>
<div>
<div class="hidden">De compatibiliteits-tabel op deze pagina is gegenereerd fuit gestructureerde data. Als u wilt bijdragen aan de data, kijk dan op <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> en stuur ons een pull verzoek.</div>
<p>{{Compat("javascript.builtins.Array.fill")}}</p>
</div>
<h2 id="Zie_ook">Zie ook</h2>
<ul>
<li>{{jsxref("Array")}}</li>
<li>{{jsxref("TypedArray.prototype.fill()")}}</li>
</ul>
|
