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
|
---
title: Array.prototype.fill()
slug: Web/JavaScript/Reference/Global_Objects/Array/fill
tags:
- Array
- ECMAScript6
- JavaScript
- Method
- polyfill
translation_of: Web/JavaScript/Reference/Global_Objects/Array/fill
---
<div>{{JSRef}} </div>
<p><code><strong>fill()</strong></code> 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。</p>
<p>{{EmbedInteractiveExample("pages/js/array-fill.html")}}</p>
<h2 id="Syntax" name="Syntax">语法</h2>
<pre><var>arr</var>.fill(<var>value[</var>, <var>start[<var>, <var>end]]</var>)</var></var></pre>
<h3 id="Parameters" name="Parameters">参数</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="Description" name="Description">描述</h2>
<p><strong><code>fill</code></strong> 方法接受三个参数 <code>value</code>, <code>start</code> 以及 <code>end</code>.<span> <code>start</code> 和 <code>end</code> 参数是可选的, 其默认值分别为 <code>0</code> 和 <code>this</code> 对象的 <code>length </code></span>属性值。</p>
<p><span>如果 <code>start</code> 是个负数, 则开始索引会被自动计算成为 <code>length+start</code></span>, 其中<span> <code>length</code> 是 </span><code>this</code><span> 对象的 </span><code>length </code>属性值。<span>如果 </span><code>end</code><span> 是个负数, 则结束索引会被自动计算成为 </span><code>length+end</code>。</p>
<p><span><code><strong>fill</strong></code> 方法故意被设计成通用方法, 该方法不要求 <code>this</code> 是数组对象。</span></p>
<p><code><strong style="line-height: 1.5;">fill</strong></code><span style="line-height: 1.5;"> 方法是个可变方法, 它会改变调用它的 <code>this</code> 对象本身, 然后返回它, 而并不是返回一个副本。</span></p>
<p>当一个对象被传递给 <strong><code>fill</code></strong>方法的时候, 填充数组的是这个对象的引用。</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({}) // [{}, {}, {}];
// 需要注意如果fill的参数为引用类型，会导致都执行都一个引用类型
// 如 arr[0] === arr[1] 为true
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) {
// 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 final = relativeEnd < 0 ?
Math.max(len + relativeEnd, 0) :
Math.min(relativeEnd, len);
// Step 12.
while (k < final) {
O[k] = value;
k++;
}
// Step 13.
return O;
}
});
}
</pre>
<p>如果你确实需要维护已过时的不支持 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a></code> 的 JavaScript 引擎，那么最好完全不向 <code>Array.prototype</code> 添加方法，因为你不能使它不可枚举。</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('ES6', '#sec-array.prototype.fill', 'Array.prototype.fill')}}</td>
<td>{{Spec2('ES6')}}</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>{{Compat("javascript.builtins.Array.fill")}}</div>
<div id="compat-mobile">
</div>
<h2 id="See_also" name="See_also">相关</h2>
<ul>
<li>{{jsxref("Array")}}</li>
<li>{{jsxref("TypedArray.prototype.fill()")}}</li>
</ul>
|
