String.prototype.slice() && Array.prototype.slice() 实现克隆数据

Posted 2021-09-04 胖鹅68

文章目录

• 一、参考
• 二、场景说明
• 三、String.prototype.slice()
• • 语法
  • 参数说明
  • 返回值
  • 案例说明API
• 四、Array.prototype.slice()
• • 语法
  • 参数说明
  • 返回值
  • 案例说明API

一、参考

1. Array.prototype.slice() MDN
2. String.prototype.slice() MDN

二、场景说明

在Vue开发过程中，会遇到如下场景

1. 需要克隆一个数组，触发视图的更新
2. 在不影响原有数据的情况下，对一个一模一样的数据处理转换，防止多个地方共用一个数据产生未知影响

三、String.prototype.slice()

语法

slice() 方法提取某个字符串的一部分，并返回一个新的字符串，且不会改动原字符串。

str.slice(beginIndex[, endIndex])

参数说明

beginIndex

• 从该索引（以 0 为基数）处开始提取原字符串中的字符。
• 如果值为负数，会被当做 strLength + beginIndex 看待，这里的strLength 是字符串的长度（例如， 如果 beginIndex 是 -3 则看作是：strLength - 3）

endIndex

• 可选。在该索引（以 0 为基数）处结束提取字符串。
• 如果省略该参数，slice() 会一直提取到字符串末尾。
• 如果该参数为负数，则被看作是 strLength + endIndex，这里的 strLength 就是字符串的长度(例如，如果 endIndex 是 -3，则是, strLength - 3)。

返回值

返回一个从原字符串中提取出来的新字符串

案例说明API

const str = 'The quick brown fox jumps over the lazy dog.';

console.log(str.slice(31));
// expected output: "the lazy dog."

console.log(str.slice(4, 19));
// expected output: "quick brown fox"

console.log(str.slice(-4));
// expected output: "dog."

console.log(str.slice(-9, -5));
// expected output: "lazy"

console.log(str)
// expected output: The quick brown fox jumps over the lazy dog.

四、Array.prototype.slice()

语法

slice() 方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。

arr.slice([begin[, end]])

参数说明

begin 可选

• 提取起始处的索引（从 0 开始），从该索引开始提取原数组元素。
• 如果该参数为负数，则表示从原数组中的倒数第几个元素开始提取，slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）。
• 如果省略 begin，则 slice 从索引 0 开始。
• 如果 begin 超出原数组的索引范围，则会返回空数组。

end 可选

• 提取终止处的索引（从 0 开始），在该索引处结束提取原数组元素。slice 会提取原数组中索引从 begin 到 end 的所有元素（包含 begin，但不包含 end）。
• slice(1,4) 会提取原数组中从第二个元素开始一直到第四个元素的所有元素 （索引为 1, 2, 3的元素）。
• 如果该参数为负数， 则它表示在原数组中的倒数第几个元素结束抽取。 slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素（不包含最后一个元素，也就是只有倒数第二个元素）。
• 如果 end 被省略，则 slice 会一直提取到原数组末尾。
• 如果 end 大于数组的长度，slice 也会一直提取到原数组末尾。

返回值

一个含有被提取元素的新数组。

案例说明API

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]

console.log(animals.slice(-2));
// expected output: Array ["duck", "elephant"]

console.log(animals.slice(2, -1));
// expected output: Array ["camel", "duck"]

console.log(animals);
// expected output: ['ant', 'bison', 'camel', 'duck', 'elephant']