We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

fill() メソッドは、配列中の開始インデックスから終了インデックスまでの要素を固定値で設定します。

構文

arr.fill(value[, start = 0[, end = this.length]])

引数

value
配列に設定する値。
start
オプション。開始位置。
end
オプション。終了位置。

説明

設定される要素の範囲は [start, end) です(endは含まれません)。

fill メソッドは最大 3 つの引数 valuestartend をとります。startend はオプションの引数で、デフォルト値はそれぞれ 0this オブジェクトの length です。

start が負の値の場合、length+start として扱われます (length は配列の長さ)。end が負の値の場合、length+end として扱われます。

fill 関数はジェネリック関数であり、this が配列オブジェクトである必要はありません。

fill メソッドは可変メソッドで、this オブジェクト自身を変更し、オブジェクト自身のコピーではなく、オブジェクト自身を返します。

[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, -2);       // [4, 2, 3]
[1, 2, 3].fill(4, NaN, NaN);     // [1, 2, 3]
Array(3).fill(4);                // [4, 4, 4]
[].fill.call({ length: 3 }, 4);  // {0: 4, 1: 4, 2: 4, length: 3}

Polyfill

(訳注)Polyfillとは、ある機能をサポートしていないブラウザで相当機能を実装するための各種テクニックのことです。

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;
    }
  });
}

Object.defineProperty が利用できないとても古い JavaScript エンジンをサポートする必要がある場合、 Array.prototype のメソッドを polyfill するのは避けたほうがよいでしょう。それらを列挙不可にすることができないからです。

仕様

仕様 ステータス コメント
ECMAScript 2015 (6th Edition, ECMA-262)
Array.prototype.fill の定義
標準 初期定義
ECMAScript Latest Draft (ECMA-262)
Array.prototype.fill の定義
ドラフト  

ブラウザ実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 Chrome Firefox (Gecko) Edge Internet Explorer Opera Safari
基本サポート 45 [1] 31 (31) (有) 未サポート 未サポート 7.1
機能 Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート 未サポート 未サポート 31.0 (31) 未サポート 未サポート 8.0

[1] Chrome 36 以降は、設定で機能は隠されていますが使用可能です。chrome://flags で “Enable Experimental JavaScript” の項目を有効化してください。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: unarist, taiyaki32p, dskmori, shide55
最終更新者: unarist,