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
|
---
title: Array.prototype.fill()
slug: Web/JavaScript/Reference/Global_Objects/Array/fill
tags:
- Array
- ECMAScript 2015
- JavaScript
- 原型
- 填充工具
- 方法
translation_of: Web/JavaScript/Reference/Global_Objects/Array/fill
---
<div>{{JSRef}}</div>
<p><code><strong>fill()</strong></code> 方法會將陣列中索引的第一個到最後一個的每個位置全部填入一個靜態的值。</p>
<div>{{EmbedInteractiveExample("pages/js/array-fill.html")}}</div>
<h2 id="語法">語法</h2>
<pre class="syntaxbox"><var>arr</var>.fill(<var>value[</var>, <var>start[<var>, <var>end]]</var>)</var></var>
</pre>
<h3 id="參數">參數</h3>
<dl>
<dt><code>value</code></dt>
<dd>欲填入陣列的值。</dd>
<dt><code>start</code> {{optional_inline}}</dt>
<dd>起始的索引值，預設為 0。</dd>
<dt><code>end</code> {{optional_inline}}</dt>
<dd>結束的索引值，預設為 <code>this.length</code>（即陣列的長度）。</dd>
</dl>
<h3 id="回傳值">回傳值</h3>
<p>修改後的陣列。</p>
<h2 id="說明">說明</h2>
<p>要填入的元素區間為 [<code>start</code>, <code>end</code>)，意即包含 <code>start</code> 但不包含 <code>end</code>。</p>
<p><strong><code>fill</code></strong> 方法採用了三個傳入引數（arguments），分別為<code>value</code>、<code>start</code> 及 <code>end</code>。<code>start</code> 和 <code>end</code> 為可選引數，其預設值分別為 <code>0</code> 和 <code>this</code> 物件（該陣列）的 <code>length</code>。</p>
<p>若 <code>start</code> 為負數，則此方法會將其換算成 <code>length+start</code>，<code>length</code> 即該陣列的長度。同理，若 <code>end</code> 為負數，其會被換算成 <code>length+end</code>。</p>
<p><strong><code>fill</code></strong> 函式刻意地被設計成通用的函式，它不需要 <code>this</code> 物件一定是一個陣列物件。此外，它是可變動的（mutable）方法，意即會修改 <code>this</code> 物件本身並回傳，而非只是回傳拷貝。</p>
<p>當 <strong><code>fill</code></strong> 方法獲得一個傳入的物件，會將傳入的物件位置進行複製，並把其參考值（reference）之拷貝填入陣列中。</p>
<h2 id="範例">範例</h2>
<pre class="brush: js">[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}
// Objects by reference.
var arr = Array(3).fill({}) // [{}, {}, {}];
arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }]
</pre>
<h2 id="Polyfill">Polyfill</h2>
<pre class="brush: js">if (!Array.prototype.fill) {
Object.defineProperty(Array.prototype, 'fill', {
value: function(value) {
// 步驟 1 - 2。
if (this == null) {
throw new TypeError('this is null or not defined');
}
var O = Object(this);
// 步驟 3 - 5。
var len = O.length >>> 0;
// 步驟 6 - 7。
var start = arguments[1];
var relativeStart = start >> 0;
// 步驟 8。
var k = relativeStart < 0 ?
Math.max(len + relativeStart, 0) :
Math.min(relativeStart, len);
// 步驟 9 - 10。
var end = arguments[2];
var relativeEnd = end === undefined ?
len : end >> 0;
// 步驟 11。
var final = relativeEnd < 0 ?
Math.max(len + relativeEnd, 0) :
Math.min(relativeEnd, len);
// 步驟 12。
while (k < final) {
O[k] = value;
k++;
}
// 步驟 13。
return O;
}
});
}
</pre>
<p>如果你需要支援實際上棄用的 JavaScript 引擎且其不支援 <code><a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a></code> 的話，最好不要採用上述的工具來填充方法至 <code>Array.prototype</code>，因為你不能將這個方法設定為不可列舉（non-enumerable）的屬性。</p>
<h2 id="規範">規範</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">規範</th>
<th scope="col">狀態</th>
<th scope="col">備註</th>
</tr>
<tr>
<td>{{SpecName('ES2015', '#sec-array.prototype.fill', 'Array.prototype.fill')}}</td>
<td>{{Spec2('ES2015')}}</td>
<td>初次定義。</td>
</tr>
<tr>
<td>{{SpecName('ESDraft', '#sec-array.prototype.fill', 'Array.prototype.fill')}}</td>
<td>{{Spec2('ESDraft')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
<div>
<p>{{Compat("javascript.builtins.Array.fill")}}</p>
</div>
<h2 id="參見">參見</h2>
<ul>
<li>{{jsxref("Array")}}</li>
<li>{{jsxref("TypedArray.prototype.fill()")}}</li>
</ul>
|
