JS中的slice()和splice()的区别以及记忆方式

总结

splice()会改变原来的数组,返回的是被改变的内容,比如说通过splice删掉了某一项,那么返回的是删掉的这一项,当然还是会以数组的形式返回。

slice不会对原数组进行改变,会返回一个新的数组。利用slice同样也可以实现根据索引删除某一项

我是怎么记忆的

splice的前缀是sp,sp代表着super是超级的意思,说明它有超级权限,就是说会改变原有数组的权限,会对原有数组进行删除增加的权限。sp的p念起来就是屁,屁被人体减去的东西,因此splice返回值的就是 被删除的东西。

详解与例子

slice()

    slice()定义:从已有的数组中返回你选择的某段数组元素

      slice()语法:arrayObject.slice(start,end)

      注:

      ①:start表示从何处开始选取,end表示从何处开始结束选取,表示一个选取的范围

      ②:start可以为负数,此时它规定从数组尾部开始算起的位置。也就是-1 ,指最后一个元素,-2 指倒数第二个元素,以此类推

      ③:end如果没有被指定参数,数组会包含从 start 到最后一个数组元素的所有元素

      ④:slice()方法不会修改数组本身,而是返回所选取范围的数组元素。如果想删除数组中的某一个元素,需要使用splice()

     下面来看一些例子

       这里的取值范围是0-2(start-end),因为数组的下标是从0开始,所以这里的2就是下面数组中的 javascript元素

       这里需要注意的是0-2选取的元素是html和css,并不包括javascript

         

       如果只有start,则会选择start开始到end之间的所有数组元素

         

        如果start是负数,则会从数组尾部开始算起。这里只有start没有end,且start为负数,所以只能获取到最后1个数组元素

       

        如果你想获取除了最后1个元素以外的全部元素

      

        如果start和end都是负1,结果为空

      

   splice()

     splice()定义:从数组中添加或删除元素,然后返回被删除的数组元素。

     splice()语法:arrayObject.splice(index,howmany,item1,.....,itemX)

     注:

      ①:index表示从什么位置开始添加或删除数组元素

      ②:howmany表示删除的元素数量,如果为0,则表示不删除数组元素

      ③:tem1,.....,itemX表示新增的数组元素

      ④:slice()方法会改变原始数组

     下面来看一些例子

       从第3个元素(即 javascript)开始且不删除元素,并在第3个元素前面新增1个元素hello

       

          从第3个元素开始且删除1个元素(这里删除的元素是 javascript),并在原来第3个元素的位置新增1个元素hello

        

      从最后1个元素开始并删除最后1个元素,同时在删除的最后1个元素的位置新增1个元素hello

       

         从最后1个元素开始且不删除元素,同时在最后1个元素前面新增1个元素hello

       

原文地址:https://www.cnblogs.com/handboy/p/11386161.html

时间: 2024-08-29 14:56:43

JS中的slice()和splice()的区别以及记忆方式的相关文章

JS中的call,apply和bind及记忆方式

总结 call().apply()和bind()都是用来改变函数执行时的上下文,可借助它们实现继承:call()和apply()唯一区别是参数不一样,call()是apply()的语法糖:bind()是返回一个新函数,供以后调用,而apply()和call()是立即调用. 我是怎么记的 apply是a开头跟array的a开头一致,所以apply的参数是数组的,其余两个call 和 bind的参数就不需要记忆了,都是多参数类型. 详解 js中的call(), apply()和bind()是Func

js中callback.call()和callback()的区别

js中callback.call()和callback()的区别在js中callback.call()和callback() 有什么区别,举个例子:function a(){alert('hello!');}function b(callback){callback();}function c(callback){callback.call();}function test(){b(a);c(a);}在test函数中,b和c的效果是一样的,都执行了回调函数a.这两种用法有什么区别呢? -----

JS中的setTimeout和setInterval的区别

学了许久的javascript,发现其中非常常用的两个函数,就是setInterval和setTimeout函数,对这两个函数的理解,有时觉得很模糊,经过多次的试验,终于对它有了比较深入的了解.定义,setInterval()-- 间隔指定的毫秒数不停地执行指定的代码.setTimeout,延迟两秒调用函数,这个定义非常的简单,但是它并不像字面意思上那么的简 很多人都觉得这两个方法差不多,但是,实际上,他们差的很远呢     因为setTimeout(表达式,延时时间)在执行时,是在载入后延迟指

js中style,currentStyle和getComputedStyle的区别

js中style,currentStyle和getComputedStyle的区别 MarysMa 在js中用xx.style.marginTop是无法获取写在css或<sytle>标签中的margin-top之类的样式值(包括width,height等). 这就是style属性的限制: style :只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的.(内联样式: body中标签里用style直接写的样式.) currentStyle :可以弥补style的不足,但是只适用

JS中三目运算符和if else的区别分析与示例

本文是通过示例详细分析了JS中三目运算符和if else的区别,是篇非常不错的文章,这里推荐给大家. 今天写了一个图片轮播的小demo,用到了判断 先试了一下if else,代码如下: 复制代码代码如下: if(n >= count-1){n =0;}else{n ++;} 随后代码写完了,准备优化一下代码,将此段改成了三目运算符的写法 复制代码代码如下: n = n >= (count-1) ? n=0 : n++ 结果完全不同 随后研究了一下这两者的区别,总结为一句话:三目运算有返回值,i

JS中NaN、null、Undefined区别

1.NaN(not a number)非数字.不和任何数字相等,包括自己本身,可以用isNaN()判断,当praseInt()和praseFloat()不能解析时返回NaN.NaN为number对象下的一个属性,number.NaN typeof(NaN)   //return number NaN == NaN   //return FALSE 2.null 表示尚未存在的对象, 3.undefined表示尚未初始化   var a:alert(a)  //return undefined 在

JS中构造函数与普通函数的区别及JS构造函数、原型和实例的关系

JS中构造函数与普通函数的区别: https://www.cnblogs.com/cindy79/p/7245566.html JS构造函数.原型和实例的关系: https://blog.csdn.net/u012443286/article/details/78823955 JavaScript构造函数及原型对象: https://blog.csdn.net/a153375250/article/details/51083245 原文地址:https://www.cnblogs.com/jim

js中构造函数的原型添加成员的两种方式

首先,js中给原型对象添加属性和方法. 方式一:对象的动态特效 给原型对象添加成员 语法:构造函数.prototype.方法名=function (){ } 方式二:替换原型对象(不是覆盖,而是替换,把原先的同名的直接替换成现在的) 语法:构造函数.prototype.方法名={ } tips:方式二不常用,因为这样会修改了原型本身 搜索:JS中通过构造函数添加成员方法和通过原型法添加成员方法的区别 参考网址  http://blog.csdn.net/xxmzumeng/article/det

js中的target与currentTarget的区别&lt;转&gt;

关于js中target与currentTarget的区别的关键在于他们所处在的事件流的阶段是不一样的,target处于事件流的目标阶段,currentTarget处理事件流的捕获.处于目标阶段和冒泡阶段.只有当他们同事处于目标阶段的时候他们的指向才是一样的,请看以下代码: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title>js性能优化</title