ES6+ fill()
在定义数组时,需要给数组设置认值进行填充,ES6 提供了 fill
,类似 copyWithin
都是替换数组中的值,fill 可以替换指定的值,copyWithin
则是复制数组中的值去替换指定位置的值,不能指定值。
fill
接收指定的值,替换数组中的指定位置的值,可以用于初始化认值的数组。
语法使用:
arr.fill(value[, start[, end]])
参数解释:
初始化数组,并填充值。
let arr = Array().fill()
console.log(arr) // [1, 1, 1, 1, 1]
Array(5)
会创建长度为 5 的空数组,然后使用 fill
对每一项填充认值是 1。
有两个参数时,会从第二个参数的指定位置进行填充。如果是负值时,则从数组的最后一项往前数第几个位置开始算起。如下示例:
[, , ].fill(, ); // [0, 0, 0]
[, , ].fill(, ); // [1, 0, 0]
[, , ].fill(, -); // [1, 2, 0]
[, , ].fill(, -); // [0, 0, 0]
上面的中,第值是要填充的目标元素,第二个参数是起始位置开始替换。当第二个参数是负值时,第 3 行中第二个参数是 -1 则从数组最后元素开始往前计算替换的长度,这里是的长度是 1,所以数组的最后一项被替换了。第 4 行中第二个参数是 -3 可以知道和数组的长度是一样的,所以整个数组都被替换了。
有三个参数时,第三个参数是替换结束的位置,不结束的位置。
['a', 'b', 'c'].fill(, , ); // ["a", 4, "c"]
['a', 'b', 'c'].fill(, -, -); // [4, "b", "c"]
['a', 'b', 'c'].fill(, -, ); // [4, "b", "c"]
['a', 'b', 'c'].fill(, -, ); // ["a", "b", "c"]
上面的中,通过上面的示例我们可以总结一点就是,找到起始位置的元素和结束位置的元素,如果它们中间有值则把中值替换,起始位置的索引必须小于结束位置的索引,如果没有则不会被替换。如:
第 2 行中 -3 的位置是 “a”,-2 的位置是 “b”,在数组中 “a” 和 “b” 直接没有值,但是包含起始的 “a” 所以 “a” 会被替换。
第 4 行中第二个参数 -2 位置元素是 “b” 索引是 1,第三个参数 1 位置的元素是 “a” 索引是 0,起始位置的索引大于结束位置的索引,所以数组中没有符合替换的元素。
值得注意的是,当使用 fill 对数组中的想填充的是对象时,对象是引用类型,更改其中一项其他项的值也会跟着改变,看以下示例:
var arr = Array().fill({}) // [{}, {}, {}]
arr[].name = 'imooc'; // [{name: 'imooc'}, {name: 'imooc'}, {name: 'imooc'}]
上面的中,初始化认值是空对象的数组,然后给数组中的其中元素,其他值也会跟着改变。
fill
在初始化数组时非常实用可以地初始化带认值的数组,另外需要注意的是如果填充的是对象时,由于对象是引用类型的方式存储的,所以改变其中一项中的值时其他项也会跟着改变。