js 覆盖数组成员的方法 copyWithin() fill() - Kaiqisan

js 覆盖数组成员的方法 copyWithin() fill()

ヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである,今天来讲讲批量替换数组内容的知识。为什么把这俩方法放在一起呢？还不是因为这俩方法有一个共同点那就是能够批量覆盖，重写数组成员.

copyWithin(target, start, end): 提取数组内某一片段的信息，然后复制到另外一个地方。它有三个参数，第一个数target,义为复制到指定目标索引位置，复制完内容之后从目标索引开始粘贴，一直往后粘贴，直到粘贴完成或到达数组的下标末尾。第二，第三个参数 start end 为需要复制的成员的开始下标与结束下标，它们是可选项，如果它们俩都没有选的话，就是默认复制数组的全部成员，如果只写的start参数，没有写end参数的话那就是从start下标开始赋值到数组的末尾。这个方法没有返回值，会直接对原数组产生影响

需要注意的是，切勿写end参数不写start参数，这样不会达到 从第一个数组成员复制到end下标成员 这样的效果，反而会报错，这需要注意。

还有一个需要注意的是，这里的end参数并不是意味着复制操作一直到end下标成员，而是到end下标的前一个成员，比如说我的参数写着从第3个参数复制到第8个参数，但我实际拿取数组成员从第3个成员到第7个。

let arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']
arr.copyWithin(5, 2, 4)
console.log(arr); //  ["a", "b", "c", "d", "e", "c", "d", "h"]
// 这里抓取了下标为2,3的数组成员，然后从下标5开始粘贴，把f,g分别替换成c,d，最后达成复制效果。

let arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']
arr.copyWithin(4)
console.log(arr); //  ["a", "b", "c", "d", "a", "b", "c", "d"]
// 这里抓取了下标为全部数组成员，然后从下标4开始粘贴，一直到数组末尾结束，虽然还有没复制完的成员，但是剩下的成员被抛弃了

PS:start end参数支持负数，表示倒数第|n|个下标,最后参数会被转化为 arr.length - n，后面的过程全部一样。

let arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']
arr.copyWithin(1, -2) // 从倒数第二个开始复制一直到最后一个(复制了最后俩)，然后从下标为1开始粘贴
console.log(arr); //  ["a", "g", "h", "d", "e", "f", "g", "h"]

PS：这是个数组方法，不支持字符串使用，如果企图复制字符串的话就死了这个心，不妨试试别的方法把！

fill(val, start, end): 这个方法的理解难度比上面的方法要好理解得多，就是拿指定的值去对应下标填充，并覆盖原成员内容。三个值都是可选项，第一个值val是您希望替换的元素，第二第三个start end 是希望您替换开始和结束的下标，这个end的意味和上面的方法 copyWithin()方法是一样的，不会替换到end下标，而是替换到end下标的前一个成员。这个方法没有返回值，会直接对原数组产生影响

let arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']
arr.fill('hello?', 3, 7) // 替换下标从3到6的成员的内容为 ‘hello?’
console.log(arr) // ["a", "b", "c", "hello?", "hello?", "hello?", "hello?", "h"]

如果第2,3个参数没有传值的话，就默认选择替换所有的内容

let arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']
arr.fill('hello?')
console.log(arr) 
// ["hello?", "hello?", "hello?", "hello?", "hello?", "hello?", "hello?", "hello?"]

第2，3个参数支持传入负数，表示倒数第|n|个成员。

let arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']
arr.fill('hello?', 3, -2) // 从下标为3的成员一直填充到(arr.length - 2 - 1)个（倒数第三个）
console.log(arr)
// ["a", "b", "c", "hello?", "hello?", "hello?", "g", "h"] 

如果内部一个值也不传，那就是当是清空数组内容的所有内容，替换内容为undefined.

let arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']
arr.fill() 
console.log(arr)
// [undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined]

总结

这两个方法，嘛。能掌握最好，虽然在实践中很少用到就是了，即使用到了也多用于大量的数据处理上面。