JS array fill()

🌙
手机阅读
本文目录结构

fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

  1. var array1 = [1, 2, 3, 4];
  2. // fill with 0 from position 2 until position 4
  3. console.log(array1.fill(0, 2, 4));
  4. // expected output: [1, 2, 0, 0]
  5. // fill with 5 from position 1
  6. console.log(array1.fill(5, 1));
  7. // expected output: [1, 5, 5, 5]
  8. console.log(array1.fill(6));
  9. // expected output: [6, 6, 6, 6]

语法

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

参数

value

用来填充数组元素的值。

start 可选

起始索引,默认值为0。

end 可选

终止索引,默认值为 this.length

返回值

修改后的数组。

描述

fill 方法接受三个参数 value, start 以及 end.startend 参数是可选的, 其默认值分别为 0 和 this 对象的 length 属性值。

如果 start 是个负数, 则开始索引会被自动计算成为 length+start, 其中 length 是 this 对象的 length 属性值。如果 end 是个负数, 则结束索引会被自动计算成为 length+end

fill 方法故意被设计成通用方法, 该方法不要求 this 是数组对象。

fill 方法是个可变方法, 它会改变调用它的 this 对象本身, 然后返回它, 而并不是返回一个副本。

当一个对象被传递给 fill方法的时候, 填充数组的是这个对象的引用。

示例

  1. [1, 2, 3].fill(4); // [4, 4, 4]
  2. [1, 2, 3].fill(4, 1); // [1, 4, 4]
  3. [1, 2, 3].fill(4, 1, 2); // [1, 4, 3]
  4. [1, 2, 3].fill(4, 1, 1); // [1, 2, 3]
  5. [1, 2, 3].fill(4, 3, 3); // [1, 2, 3]
  6. [1, 2, 3].fill(4, -3, -2); // [4, 2, 3]
  7. [1, 2, 3].fill(4, NaN, NaN); // [1, 2, 3]
  8. [1, 2, 3].fill(4, 3, 5); // [1, 2, 3]
  9. Array(3).fill(4); // [4, 4, 4]
  10. [].fill.call({ length: 3 }, 4); // {0: 4, 1: 4, 2: 4, length: 3}
  11. // Objects by reference.
  12. var arr = Array(3).fill({}) // [{}, {}, {}];
  13. arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }]

Polyfill

  1. if (!Array.prototype.fill) {
  2. Object.defineProperty(Array.prototype, 'fill', {
  3. value: function(value) {
  4. // Steps 1-2.
  5. if (this == null) {
  6. throw new TypeError('this is null or not defined');
  7. }
  8. var O = Object(this);
  9. // Steps 3-5.
  10. var len = O.length >>> 0;
  11. // Steps 6-7.
  12. var start = arguments[1];
  13. var relativeStart = start >> 0;
  14. // Step 8.
  15. var k = relativeStart < 0 ?
  16. Math.max(len + relativeStart, 0) :
  17. Math.min(relativeStart, len);
  18. // Steps 9-10.
  19. var end = arguments[2];
  20. var relativeEnd = end === undefined ?
  21. len : end >> 0;
  22. // Step 11.
  23. var final = relativeEnd < 0 ?
  24. Math.max(len + relativeEnd, 0) :
  25. Math.min(relativeEnd, len);
  26. // Step 12.
  27. while (k < final) {
  28. O[k] = value;
  29. k++;
  30. }
  31. // Step 13.
  32. return O;
  33. }
  34. });
  35. }

如果你确实需要维护已过时的不支持 [Object.defineProperty] 的 JavaScript 引擎,那么最好完全不向 Array.prototype 添加方法,因为你不能使它不可枚举。

规范

规范 状态 注释
ECMAScript 2015 (6th Edition, ECMA-262) Array.prototype.fill Standard 最初定义。
ECMAScript Latest Draft (ECMA-262) Array.prototype.fill Draft  

相关

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了