Array.prototype.fill()

fill() メソッドは、開始インデックス(デフォルトは 0)から終了インデックス(デフォルトは array.length)までのすべての要素を、静的な値に変更した配列を返します。

構文

arr.fill(value[, start[, end]])

引数

value
配列に設定する値です。
start&nbp;Optional
開始する位置です。既定値は 0 です。
end Optional
終了する位置です。既定値は this.length です。

戻り値

変更された配列です。

説明

  • start が負の場合 array.length + start として扱われます。
  • end が負の場合 array.length + end として扱われます。
  • fill メソッドはジェネリック関数であり、this が配列オブジェクトである必要はありません。
  • fill メソッドは可変メソッドで、配列のコピーではなく、変更された配列そのものを返します。
  • 最初のパラメータがオブジェクトの場合、配列の各スロットはそのオブジェクトを参照します。

ポリフィル

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 するのは避けたほうがよいでしょう。それらを列挙不可にすることができないからです。

fill を使用する

[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}

// A single object, referenced by each slot of the array:
let arr = Array(3).fill({}) // [{}, {}, {}]
arr[0].hi = "hi"            // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }]

仕様

仕様書
ECMAScript (ECMA-262)
Array.prototype.fill の定義

ブラウザー実装状況

Update compatibility data on GitHub
デスクトップモバイルサーバー
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung InternetNode.js
fillChrome 完全対応 45Edge 完全対応 12Firefox 完全対応 31IE 未対応 なしOpera 完全対応 32Safari 完全対応 8WebView Android 完全対応 45Chrome Android 完全対応 45Firefox Android 完全対応 31Opera Android 完全対応 32Safari iOS 完全対応 8Samsung Internet Android 完全対応 5.0nodejs 完全対応 4.0.0
完全対応 4.0.0
完全対応 0.12
無効
無効 From version 0.12: this feature is behind the --harmony runtime flag.

凡例

完全対応  
完全対応
未対応  
未対応
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

関連情報