js数组实例方法copyWithin

2022-12-29616次阅读javascript

数组实例的copyWithin()方法,在当前数组内部,将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组。也就是说,使用这个方法,会修改当前数组。

Array.prototype.copyWithin(target, start = 0, end = this.length)

它接受三个参数。

  • target(必需):从该位置开始替换数据。如果为负值,表示倒数。
  • start(可选):从该位置开始读取数据,默认为 0。如果为负值,表示从末尾开始计算。
  • end(可选):到该位置前停止读取数据,默认等于数组长度。如果为负值,表示从末尾开始计算。

这三个参数都应该是数值,如果不是,会自动转为数值。

copyWithin使用场景

1. 删除数组中间某一项

数组删除第一个项目可以使用 shift() 方法,删除最后一个项目可以使用 pop() 方法,但似乎没有删除中间某一项的方法。

在过去都是使用 splice() 方法实现的,语法示意:

[].splice(index, 1);

现在多了个选择,使用 copyWithin(),例如:

[].copyWithin(index, index + 1).pop();

例如,删除数组 arr 中的 第 2 项:

arr = ['甲', '乙', '丙', '丁'];
arr.copyWithin(1, 2).pop();
// 结果是['甲', '丙', '丁']
console.log(arr);

2. 置顶数组某一项

这种数组总长度不变的场景比较适合 copyWithin 方法:

// 自定义top置顶方法

Array.prototype.top = function (index) {
    const value = this[index];
    this.copyWithin(1, 0, index);
    this[0] = value;
};

例如:

arr = ['甲', '乙', '丙', '丁'];
arr.top(1);
// 结果是["乙", "甲", "丙", "丁"]
console.log(arr);

3. 模拟插入排序算法

下面这个案例源自这个stackoverflow:

const insertionSort = (data, compare) => {
  const arr = [...data];
  let unsort_index = 1;
  while (unsort_index < arr.length) {
    while (arr[unsort_index] >= arr[unsort_index - 1]) unsort_index += 1;
    const pick = arr[unsort_index];
    let iter = 0;
    while (iter < unsort_index && arr[iter] < pick) iter += 1;
    arr.copyWithin(iter + 1, iter, unsort_index);
    arr[iter] = pick;
    unsort_index += 1;
  }
  return arr;
}
const input = [2, 3, 5, 1, 9, 8, 6, 6];
const asc = (a, b) => a - b;
const dsc = (a, b) => b - a;
console.log({ input, asc_sorted: insertionSort(input, asc) });
console.log({ input, dsc_sorted: insertionSort(input, dsc) });

源自于:https://www.zhangxinxu.com/wordpress/2022/12/js-array-copywithin/

上一篇: react router保存上一页路由  下一篇: CSS属性insert   

js数组实例方法copyWithin相关文章