JS中Array.prototype.slice()

原创 已于 2022-02-26 23:14:59 修改 · 306 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#原型模式 #前端 #javascript

于 2022-01-23 00:11:31 首次发布

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

demo:

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.slice()
最低0.47元/天 解锁文章
【JavaScript】splice() 和 slice() 方法详解
lph159的博客
03-09 5307
splice()方法用于添加、删除或替换数组中的元素，并且会直接修改原数组。start（必填）：指定要修改的起始索引。（可选）：指定要删除的元素个数。（可选）：要插入到数组中的新元素。slice()方法用于从原数组中提取部分元素，但不会修改原数组。start（必填）：提取的起始索引。end（可选）：提取的结束索引（不包含end位置的元素）。
深入Array.prototype.slice()方法
shuoxi666的博客
05-29 761
"slice"英文是 片 的意思，顾名思义，slice方法是将数组切片,即返回原数组的一部分 slice() 方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。 var arr = [4,2,7,0,1,6] arr.slice(1,3) //[2,7] arr.slice() //[4,2,7,0,1,6] arr.slice(1) //[2,7,0,1,6]
javascript Array.prototype.slice使用说明
12-01
除了正常用法，slice 经常用来将 array-like 对象转换为 true array. 名词解释：array-like object – 拥有 length 属性的对象，比如 { 0: ‘foo’, length: 1 }, 甚至 { length: ‘bar’ }. 最常见的 array-like 对象是 arguments 和 NodeList. 查看 V8 引擎 array.js 的源码，可以将 slice 的内部实现简化为： 代码如下: function slice(start, end) { var len = ToUint32(this.length), result =
Array.prototype.slice.call
dataadapters的专栏
01-29 6699
在研究某个框架源码的时候，看到的。 查了下资料， 1.两个部分，一个是String.slice() slice( ) returns a string containing a slice, or substring, of string. It does not modify string。 slice()返回一个子片段，对原先的string没有影响,还可以用负数当参数。 Exampl
slice()
qq_42238554的博客
11-18 2123
slice() 作用：返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。 注意：不会改变原数组 描述： slice 不会修改原数组，只会返回一个浅复制了原数组中的元素的一个新数组。原数组的元素会按照下述规则拷贝： 如果该元素是个对象引用 （不是实际的对象），slice 会拷贝这个对象引用到新的数组里。两个对象...
浅谈javascript的Array.prototype.slice.call
10-23
发现大多人都用了Array.prototype.slice.call(argments,0)，一直不明白这句是干什么的。而昨天温习了slice()方法，再参考Function.call(thisArg[, arg1[, arg2[, ...]]])，还是不得而知（我脑筋转得慢:|）。
Array.prototype.slice.apply的使用方法
09-05
`Array.prototype.slice.apply` 是 JavaScript 中一种巧妙的技巧，它允许我们借用 `Array.prototype.slice` 方法来处理非数组对象，尤其是 `arguments` 对象。`arguments` 是一个伪数组对象，它在每个函数内部可用，...
Array.prototype.slice用法详解
weixin_34005042的博客
11-19 171
slice方法是定义在js数组原型中的方法，用于截取数组的部分元素，具体使用如下： arrayExample.slice(start, end); start为起始元素位置，end为截止元素位置，如： var arrayExample = [1, 2, 3, 4, 5]; var arrayResult = arrayExample.slice(1,4); console.l...
Array.prototype.slice()
SCUhzs
09-28 517
文章目录语法注意示例 语法 slice(start,end) 方法可从已有数组中返回选定的元素，返回一个新数组，包含从start到end（不包含该元素）的数组元素。 start参数：必须，规定从何处开始选取，如果为负数，规定从数组尾部算起的位置，-1是指最后一个元素。 end参数：可选（如果该参数没有指定，那么切分的数组包含从start倒数组结束的所有元素，如果这个参数为负数，那么规定是从数组尾部开始算起的元素）。 例如： [1,2,3,4,5].slice(1,3); 返回索引为[1,3)的内容，即
[JS]Array.prototype.slice()和Array.prototype.splice()
weixin_34323858的博客
09-05 259
arr.slice(begin,end) slice()方法返回一个从开始到结束（不包括结束）选择的数组的一部分浅拷贝到一个新数组对象。且原始数组不会被修改。 如果该参数为负数，则它表示在原数组中的倒数第几个元素结束抽取。 slice(-2,-1)表示抽取了原数组中的倒数第二个元素到最后一个元素（不包含最后一个元素，也就是只有倒数第二个元素）。 如果end被省略，则slice会...
Array.prototype.slice() 方法
TheBadWaka的博客
01-13 1021
MDN 链接: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice W3C 链接: http://www.w3school.com.cn/jsref/jsref_slice_array.asp 定义和用法slice() 方法可从已有的数组中返回选定的元素。语
Array.prototype.slice应用和原理探析
warhin的专栏
03-18 5505
Array.prototype.slice应用和原理探析，以及在jQuery中对应的实现原理。
有关 Array.prototype.slice() 方法的详解
weixin_45242865的博客
09-08 4175
Array.prototype.slice() slice() 方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括 end），原始数组不会被改变。 语法 arr.slice([begin[, end]]) 参数 begin 可选   提取起始处的索引（从 0 开始），从该索引开始提取原数组元素。   如果该参数为负数，则表示从原数组中的倒数第几个元素开始提取，slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元
Array.prototype.slice.call(arguments)
xiaoyuer_2020的博客
11-25 523
JavaScript中的Array.prototype.slice.call(arguments)能将有length属性的对象转换为数组(特别注意： 这个对象一定要有length属性). 首先，我们来看看JavaScript中的slice用法， 在JavaScript中Array是一个类，slice是此类中的一个方法，slice的中文意思是 ‘截取’。 slice() 方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会.
非懂不可的Slice（二）-- 就要学习Go语言
weixin_33787529的博客
12-21 114
这一节，我们来讨论更多关于Slice的用法。 nil切片与空切片 nil切片 var s []int fmt.Println(s == nil) // 输出 true fmt.Println(len(s),cap(s)) // 输出：0 0 复制代码上面这段代码声明了一个nil切片s，其实，切片的零值就是nil。为什么？通过上一节我们知道，因为切片就是一个数组的引用。切片的类型在初始化时已...
Array.prototype.slice()、arguments
weixin_45152848的博客
03-21 400
mdn的解释（slice） slice() 方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end） 。原始数组不会被改变。 var a = [1,2,{x:1}]; var b = a.slice(); b = null; // 此时不会影响a，浅拷贝 console.log(a) var c = a.slice(); c[2...
Array.prototype.slice.call()
最新发布
03-08
<think>嗯，我现在需要解释一下Array.prototype.slice.call()这个方法的用途和原理。首先，用户可能对JavaScript中的数组和类似数组的对象不太熟悉，所以应该从基础开始讲起。 首先，slice()方法本身是数组的一个方法，用于截取数组的一部分，返回一个新数组，而不修改原数组。比如，arr.slice(1,3)会返回从索引1到3（不包括3）的元素。 但问题在于，类似数组的对象（比如arguments对象、DOM元素集合等）并不是真正的数组，它们没有slice方法。这时候，如果直接调用arguments.slice()会报错，因为arguments没有这个方法。 这时候，Array.prototype.slice.call(arguments)的作用就体现出来了。通过使用call方法，可以改变slice方法的this指向，让slice方法在类似数组的对象上运行。因为slice方法内部只依赖于数字索引和length属性，而类似数组的对象正好具备这些特性，所以这样就可以将这类对象转换为真正的数组。 举个例子，假设有一个类似数组的对象： var arrayLike = {0: 'a', 1: 'b', length: 2}; var arr = Array.prototype.slice.call(arrayLike); 这样，arr就会变成['a', 'b']，一个真正的数组。 需要注意的是，在ES6之后，更推荐使用Array.from()方法来转换类数组对象，或者使用展开运算符[...arrayLike]，但这两种方法需要对象是可迭代的，而Array.prototype.slice.call()则不需要可迭代，只需要有length属性和索引即可。 此外，如果类数组对象的length属性不准确，或者索引不连续，可能会导致转换后的数组不符合预期。因此，使用时需要确保类数组对象的结构正确。 总结一下，Array.prototype.slice.call()的作用是将一个类数组对象转换为真正的数组，通过借用数组的slice方法，并利用call改变this指向来实现。这在ES5及之前的环境中非常常见，但在现代代码中可能更倾向于使用ES6的新方法。</think>好的，我来逐步解释 `Array.prototype.slice.call()` 的作用和原理： ### 1. **基础知识点** - **`slice()` 方法**：数组的 `slice()` 方法用于截取数组片段，返回新数组，例如： ```javascript const arr = [1, 2, 3, 4]; console.log(arr.slice(1, 3)); // 输出：[2, 3] ``` - **`call()` 方法**：用于改变函数执行时的 `this` 指向，例如： ```javascript function showName() { console.log(this.name); } const obj = { name: "John" }; showName.call(obj); // 输出：John ``` --- ### 2. **问题场景** 类数组对象（如 `arguments`、DOM元素集合）有数字索引和 `length` 属性，但**没有数组方法**： ```javascript function example() { console.log(arguments.slice()); // 报错！arguments 没有 slice 方法 } example(1, 2, 3); ``` --- ### 3. **解决方案** 通过 `Array.prototype.slice.call(类数组对象)`： ```javascript function example() { const argsArray = Array.prototype.slice.call(arguments); console.log(argsArray); // 输出真正的数组：[1, 2, 3] } example(1, 2, 3); ``` --- ### 4. **原理拆解** - **`Array.prototype.slice`**：获取数组原型的 `slice` 方法。 - **`.call(arguments)`**：让 `slice` 方法在 `arguments` 对象上执行，此时： - `slice` 的 `this` 指向 `arguments` 对象 - `slice` 根据 `this.length` 和数字索引生成新数组 --- ### 5. **现代替代方案**（ES6+） - **`Array.from()`**： ```javascript const argsArray = Array.from(arguments); ``` - **展开运算符**： ```javascript const argsArray = [...arguments]; ``` --- ### 6. **注意事项** - **必须满足两个条件**： 1. 对象有 `length` 属性 2. 有连续的数字索引（例如 `{0: 'a', 1: 'b', length: 2}`） - **不适用于稀疏结构**： ```javascript const bad = { 0: 'a', 2: 'c', length: 3 }; console.log(Array.prototype.slice.call(bad)); // 输出：['a', empty, 'c'] ``` --- ### 总结表格 | 方法 | 适用场景 | 兼容性 | 是否需要迭代器 | |-------------------------------|----------------------------|------------|----------------| | `Array.prototype.slice.call()` | 类数组对象转数组 | 全浏览器 | 否 | | `Array.from()` | 类数组/可迭代对象转数组 | ES6+ | 是（可选） | | `[...类数组]` | 可迭代的类数组对象转数组 | ES6+ | 是 | 通过这种机制，`Array.prototype.slice.call()` 成为了早期 JavaScript 中将类数组对象转换为标准数组的标准做法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值