ES6 -- fill详解

fill

Array.prototype.fill
fill方法实际上是根据下标范围来给范围内的元素覆盖新的值
左闭右开

const arr = [1, 2, 3, 4, 5];
const newArr = arr.fill('a', 2, 4);
console.log(newArr);// [1, 2, 'a', 'a', 5]

当end 大于数组的长度的时候 覆盖到数组末尾

const arr = [1, 2, 3, 4, 5];
const newArr = arr.fill('a', 2, 5);
console.log(newArr);//[1, 2, 'a', 'a', 'a']

newArr 就是原数组的引用

console.log(arr === newArr);//true

当只填写start 没有end 则覆盖到数组末尾

const arr = [1, 2, 3, 4, 5];
const newArr = arr.fill('a', 2);
console.log(newArr);//[1, 2, 'a', 'a', 'a']

当 start 与 end 都部填写则全部覆盖

const arr = [1, 2, 3, 4, 5];
const newArr = arr.fill('a');
console.log(newArr);// ['a', 'a', 'a', 'a', 'a']

如果 start 和 end 是负数呢
start + len
end + len

const arr = [1, 2, 3, 4, 5];
const newArr = arr.fill('a',-4,-2);
console.log(newArr);//[1, 'a', 'a', 4, 5]

什么都不填呢
全部覆盖为undefined

const arr = [1, 2, 3, 4, 5];
const newArr = arr.fill();
console.log(newArr);// [undefined, undefined, undefined, undefined, undefined]

当 start 等于 end
不变

const arr = [1, 2, 3, 4, 5];
const newArr = arr.fill('a', 1, 1);
console.log(newArr);//[1, 2, 3, 4, 5]

当 start 与 end 是非数字
或者
end 是不是数字 start 是数字
不变

const arr = [1, 2, 3, 4, 5];
const newArr = arr.fill('a', 'c', 's');
console.log(newArr);//[1, 2, 3, 4, 5]

const arr = [1, 2, 3, 4, 5];
const newArr = arr.fill('a', 2, 'b');
console.log(newArr);//[1, 2, 3, 4, 5]

注意
当 start 为非数字 end 为数字
是[0, end)

const arr = [1, 2, 3, 4, 5];
const newArr = arr.fill('a', 'c', 4);
console.log(newArr);//['a', 'a', 'a', 'a', 5]

当 start 与 end 是NaN
或者
start 是数字 end 是NaN
不变

const arr = [1, 2, 3, 4, 5];
const newArr = arr.fill('a', NaN, NaN);
console.log(newArr);//[1, 2, 3, 4, 5]

const arr = [1, 2, 3, 4, 5];
const newArr = arr.fill('a', 2, NaN);
console.log(newArr);//[1, 2, 3, 4, 5]

注意
当 start 为NaN end 是数字时
[0, end)

const arr = [1, 2, 3, 4, 5];
const newArr = arr.fill('a', NaN, 4);
console.log(newArr);//['a', 'a', 'a', 'a', 5]

当 start 与 end 都为null
或 end 为null start是数字
不变

const arr = [1, 2, 3, 4, 5];
const newArr = arr.fill('a', 2, null);
console.log(newArr);//[1, 2, 3, 4, 5]

const arr = [1, 2, 3, 4, 5];
const newArr = arr.fill('a', null, null);
console.log(newArr);//[1, 2, 3, 4, 5]

当 end 是数字 start是null
[0,end)

const arr = [1, 2, 3, 4, 5];
const newArr = arr.fill('a', null, 4);
console.log(newArr);//['a', 'a', 'a', 'a', 5]

当 start end 都为undefined
全部覆盖

const arr = [1, 2, 3, 4, 5];
const newArr = arr.fill('a', undefined, undefined);
console.log(newArr);//['a', 'a', 'a', 'a', 'a']

当 start 数字 end uindefined
start 到最后

const arr = [1, 2, 3, 4, 5];
const newArr = arr.fill('a', 2, undefined);
console.log(newArr);//[1, 2, 'a', 'a', 'a']

当start undefined end 数字
[0, end)

const arr = [1, 2, 3, 4, 5];
const newArr = arr.fill('a', undefined, 3);
console.log(newArr);//['a', 'a', 'a', 'a', 5]

value 可选 默认填充undefined
start 可选 默认0
end 可选 默认 this.length

对象

const newObj = Array.prototype.fill.call({ length: 3 }, 4);
console.log(newObj);

创建类数组方法

可以使用fill包装成一个方法
创建一个类数组

function makeArrayLike(arr) {
  var arrLike = {
    length: arr.length,
    push: [].push,
    splice: [].splice,
  };
  arr.forEach(function (item, index) {
    [].fill.call(arrLike, item, index, index + 1);
  });
  return arrLike;
}
const newObj = makeArrayLike(['a', 'b', 'c', 'd', 'e']);
console.log(newObj);

function makeArrayLike(arr) {
  var arrLike = {
    length: arr.length,
    push: [].push,
    splice: [].splice,
  };
  arr.forEach(function (item, index) {
    [].fill.call(arrLike, item, index, index + 1);
  });
  return arrLike;
}
const newObj = makeArrayLike([
  {
    id: 1,
    name: '张三',
  },
  {
    id: 2,
    name: '李四',
  },
  {
    id: 3,
    name: '王五',
  },
]);
console.log(newObj);

实现myFill

Array.prototype.myFill = function () {
  var value = arguments[0] || undefined,
    start = arguments[1] >> 0,
    end = arguments[2];
  if (this == null) {
    throw new TypeError('This is null or not defined');
  }
  var obj = Object(this),
    len = obj.length >>> 0;
  start = start < 0 ? Math.max(len + start, 0) : Math.min(start, len);
  end = end === undefined ? len : end >> 0;
  end = end < 0 ? Math.max(len + end, 0) : Math.min(end, len);
  while (start < end) {
    obj[start] = value;
    start++;
  }
  return obj;
};