Js中Array.splice 与 Array.slice 如何区分

更新日期: 2019-08-09阅读: 2.2k标签: 区别
1. splice()方法返回数组中已删除的项,slice()方法返回数组中的选定元素,作为新的数组对象。
2. splice()方法更改原始数组,而slice()方法不更改原始数组。
3. splice()方法可以使用n个参数:

参数1:索引,必需。一个整数,指定添加/删除项目的位置,使用负值指定数组末尾的位置。

参数2:可选。要删除的项目数。如果设置为0(零),则不会删除任何项目。如果没有通过,将删除提供的索引中的所有项目。

参数3 ... n:可选。要添加到数组的新项目。

var array=[1,2,3,4,5];
console.log(array.splice(2)); //从index=2的位置截断,后面的抛弃
// 显示 [3, 4, 5], 被删除的项目以新数组形式返回.

console.log(array);
// 显示 [1, 2], 原数组被修改.

var array2=[6,7,8,9,0];
console.log(array2.splice(2,1)); // 从index=2的位置截断,后面的抛弃一个
// 显示  [8]

console.log(array2.splice(2,0));
//显示空数组 [] , 没有项目被删除.

console.log(array2);
// 显示 [6,7,9,0]

var array3=[11,12,13,14,15];
console.log(array3.splice(2,1,"Hello","World")); //这里才显示出绞接的含义!
// 显示 [13]

console.log(array3);
// 显示 [11, 12, "Hello", "World", 14, 15]

           -5 -4 -3 -2 -1
            |  |  |  |  |
var array4=[16,17,18,19,20];
             |  |  |  |  |
             0  1  2  3  4

console.log(array4.splice(-2,1,"me"));
// 显示  [19]

console.log(array4);
// 显示 [16, 17, 18, "me", 20]

如果Argument(1)是NaN,则将其视为0。

var array5=[21,22,23,24,25];
console.log(array5.splice(NaN,4,"NaN 被看作是 0"));
// 显示 [21,22,23,24]

console.log(array5);
// 显示 ["NaN 被看作是 0",25]

如果Argument(2)小于0或等于NaN,则将其视为0。

var array6=[26,27,28,29,30];
console.log(array6.splice(2,-5,"Hello"));
// 显示 []

console.log(array6);
// 显示 [26,27,"Hello",28,29,30]

console.log(array6.splice(3,NaN,"World"));
// 显示 []

console.log(array6);
// 显示 [26,27,"Hello","World",28,29,30]

如果Argument(1)或Argument(2)大于Array的长度,则任一参数都将使用Array的长度。

var array7=[31,32,33,34,35];
console.log(array7.splice(23,3,"Add Me"));
// 显示 []

console.log(array7);
// 显示 [31,32,33,34,35,"Add Me"]

console.log(array7.splice(2,34,"Add Me Too"));
// 显示 [33,34,35,"Add Me"]

console.log(array7);
// 显示 [31,32,"Add Me Too"]


slice()方法可以有2个参数:

参数1:必需。一个整数,指定开始选择的位置(第一个元素的索引为0)。使用负数从数组的末尾进行选择。

参数2:可选。一个整数,指定结束选择的位置。如果省略,将选择从数组的起始位置到结尾的所有元素。使用负数从数组的末尾进行选择。

var array=[1,2,3,4,5]
console.log(array.slice(2));
// 显示 [3, 4, 5], 返回选定元素.

console.log(array.slice(-2));
// 显示 [4, 5], 返回选定元素.
console.log(array);
// 显示 [1, 2, 3, 4, 5], 原数组保持不变.

var array2=[6,7,8,9,0];
console.log(array2.slice(2,4));
// 显示 [8, 9]

console.log(array2.slice(-2,4));
// 显示 [9]

console.log(array2.slice(-3,-1));
// 显示 [8, 9]

console.log(array2);
// 显示 [6, 7, 8, 9, 0]

如果任一参数是NaN,则将其视为0。

var array3=[11,12,13,14,15];
console.log(array3.slice(NaN,NaN));
// 显示 []

console.log(array3.slice(NaN,4));
// 显示 [11,12,13,14]

console.log(array3);
// 显示 [11,12,13,14,15]

如果任一参数大于数组的长度,则任一参数都将使用数组的长度

var array4=[16,17,18,19,20];
console.log(array4.slice(23,24));
// 显示 []

console.log(array4.slice(23,2));
// 显示 []

console.log(array4.slice(2,23));
// 显示 [18,19,20]

console.log(array4);
// 显示 [16,17,18,19,20]



链接: https://fly63.com/article/detial/4629

AR / MR / VR / XR有什么区别?

VR能让人完全沉浸在虚拟环境中;AR能创建一个叠加在虚拟内容的世界,但不能与真实环境交互; MR则是虚拟与现实的混合体,它能创造出可以与真实环境交互的虚拟物体。最后,XR则是包括三种“现实”(AR,VR,MR)的术语。

详解call bind apply区别/使用场景/es6实现/es3实现

call,apply,bind的区别:apply接收数组 func.apply(obj, [arus]),call一连串参数 func.call(obj, param1, param2....),bind返回一个函数 func.bind(obj,param...)(parms...)

理解screenX,clientX,pageX,offsetX,pageXoffset的区别

event.screenX、event.screenY鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性,event.clientX、event.clientY鼠标相对于浏览器可视区域的X,Y坐标

css之word-wrap和word-break的区别

对于英文单词,如果有一个连写且长度很长的英文单词,在第一行显示不下的情况下,浏览器默认不会截断显示,而是把这个单词整体挪到下一行。但是当整体挪到下一行还是显示不完全该肿么办呢?

url 、src 、href 的区别

URL统一资源定位符是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示,是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL

Js插件、 组件、类库、框架的区别

框架和类库等概念的出现都是源于人们对复用的渴望。“不要重复发明轮子”,成了软件界的一句经典名言。从最初的单个函数源代码的复用,到面向对象中类的复用(通常以类库的形式体现)

*.min.js跟*.js的区别

js是JavaScript 源码文件, .min.js是压缩版的js文件。减小体积 .min.js文件经过压缩,相对编译前的js文件体积较小,传输效率快。防止窥视和窃取源代码

PTN与SDH的区别?

SDH是基于TDM技术,主要用于传输语音,此外采用GFP封装来传输IP包,物理介质为光纤。PTN是采用DWDM技术,主要用于传输IP包、以太网帧,此外采用MPLS-TP技术来实现PWE3伪线

html中src与href的区别

写代码的时候就经常把这两个属性弄混淆,到底是href还是src,href表示超文本引用,用在link和a等元素上,href是引用和页面关联,是在当前元素和引用资源之间建立联系,src表示引用资源,表示替换当前元素,用在img,script,iframe上

Js绑定事件的两种方式的区别

运行后发现,点击后src没有变化,调试发现,这里this是window对象,而不是img标签对象。顿时感觉有点迷惑,因为以前绑定事件中,拿标签属性都是用的this,怎么这里不对了?

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!