JavaScript中数组slice和splice的对比小结_javascript技巧

前言

今天重温了一下Javascript,看到了数组的方法,其中有两个比较相似的方法——splice和splice,看着很像,就是多了一个p,但是用法却相当不一样。

在使用中,可以通过选择一个具有强语义表达性的 API 来减少混淆的发生。

1、slice

slice是指定在一个数组中的元素创建一个新的数组,即原数组不会变

数组的 slice (ECMAScript 5.1 标准 15.4.4.10 节)非常类似于字符串的 slice。根据规范,slice 需要两个参数,起点和终点。它会返回一个包含了从起点开始,到终点之前之间所有元素的新数组。

理解 slice 的功能并不是太难:

'abc'.slice(1,2)   // "b"
[14, 3, 77].slice(1, 2) // [3]

需要特别注意的是它并不会修改原数组。

下面的代码段描述了这个行为,x 的值没有变,y 则是被截取的部分。

var x = [14, 3, 77];
var y = x.slice(1, 2);
console.log(x);   // [14, 3, 77]
console.log(y);   // [3]

2、splice

splice是JS中数组功能最强大的方法,它能够实现对数组元素的删除、插入、替换操作,返回值为被操作的值。

     splice删除:color.splice(1,2) (删除color中的1、2两项);

     splice插入:color.splice(1,0,'brown','pink') (在color键值为1的元素前插入两个值);

     splice替换:color.splice(1,2,'brown','pink')  (在color中替换1、2元素);

虽然 splice(15.4.4.12 节)也需要(至少)两个参数,但它的意义则完全不同。

[14, 3, 77].slice(1, 2)  // [3]
[14, 3, 77].splice(1, 2) // [3, 77]

除此之外,splice 还会改变原数组。

不要太惊讶,这正是 splice 的本意。

var x = [14, 3, 77]
var y = x.splice(1, 2)
console.log(x)   // [14]
console.log(y)   // [3, 77]

当你编写自己的模块时,选择一个最不容易发生混淆的 API 非常重要。理论上,你的用户不应该总是通过阅读文档来判断他们需要哪一个。那么我们应该遵循哪种命名规范呢?

我最熟悉的规范(与我之前在 QT 上的经验有关)是正确地选择动词:现在时表示可能的修改行为,过去时则不会修改原对象,而是返回一个新的版本。如果可以的话,这两种版本都要提供。

参考下面的例子:

var p = new Point(100, 75);
p.translate(25, 25);
console.log(p);  // { x: 125, y: 100 }
var q = new Point(200, 100);
var s = q.translated(10, 50);
console.log(q);  // { x: 200, y: 100 }
console.log(s);  // { x: 210, y: 150 }

注意(在二维笛卡尔坐标系中)移动位置的 translate() 和仅创建一个移动过的坐标的 translated() 之间的区别。调用 translate 会修改点 p 的值。然而,因为 translated() 不修改原对象,对象 q 没有被修改,而只返回了一个新的拷贝 s。

总结

如果这个规范能够非常一致地部署到你的应用中,那么上面提到的那种混淆则会被最大化地减低。以上就是这篇文章的全部内容了,希望能对大家的学习或者工作带来一定的帮助。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索js
, 数组
, slice
, splice
slice和splice的区别
javascript数组splice、javascript 数组slice、js slice splice、slice splice、splice和slice,以便于您获取更多的相关知识。

时间: 2024-08-04 10:02:39

JavaScript中数组slice和splice的对比小结_javascript技巧的相关文章

JavaScript中数组去除重复的三种方法_javascript技巧

废话不多说了,具体方法如下所示: 方法一:返回新数组每个位子类型没变 function outRepeat(a){ var hash=[],arr=[]; for (var i = 0; i < a.length; i++) { hash[a[i]]!=null; if(!hash[a[i]]){ arr.push(a[i]); hash[a[i]]=true; } } console.log(arr); } outRepeat([2,4,4,5,"a","a"

JavaScript中数组添加值和访问值常见问题_javascript技巧

通过本文给大家介绍关于数组方面的一些小问题,或许对大家有点帮助,本文写的不好,还请各位大侠见谅. 1. // var arr = [,,]; // arr["bbb"]="nor "; // arr[-]="nor "; // console.log(arr); >> [, , , bbb: "nor ", -: "nor "] // console.log(arr.bbb) >>

JavaScript中数组成员的添加、删除介绍_javascript技巧

JavaScript中,由于数组长度是可变的,因此可以通过直接定义新的成员而将其添加到数组中: 复制代码 代码如下: var o = [2,3,5]; o[3] = 7; console.log(o);//[2,3,5,7] 除了这种方法,还可以通过使用push()语句来达到相同的目的: 复制代码 代码如下: o.push(11); console.log(o);//[2,3,5,7,11] o.push(13,17); console.log(o);//[2,3,5,7,11,13,17] 如

javascript中Date format(js日期格式化)方法小结_javascript技巧

本文实例总结了javascript中日期格式化的方法.分享给大家供大家参考,具体如下: 方法一: // 对Date的扩展,将 Date 转化为指定格式的String // 月(M).日(d).小时(h).分(m).秒(s).季度(q) 可以用 1-2 个占位符, // 年(y)可以用 1-4 个占位符,毫秒(S)只能用 1 个占位符(是 1-3 位的数字) // 例子: // (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 200

javascript中数组的sort()方法的使用介绍_javascript技巧

复制代码 代码如下: <html> <head> <title>数组的sort()方法</title> <script> /* sort() 1.没有产生副本,直接引用原数组 2.如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序, 说得更精确点,是按照字符编码的顺序进行排序. 要实现这一点,首先应把数组的元素都转换成字符串(如有必要),以便进行比较. 3.如果想按照其他标准进行排序,就需要提供比较函数,该函数要比较两个值, 然后返

javascript中的注释使用与注意事项小结_javascript技巧

在javascript中有两种注释方式: 单行注释: // 多行注释: /* */ 注释主要是为了让我们编写的程序更具有可读性,也便于他人来进行二次修改 看下面的例子,我们给正则表达式用/* */注释了,运行时发布报了一个语法错误 复制代码 代码如下: /* var rm_a = /a*/.match(s); */ 所以说块级注释是不安全的,如果在我们的代码中犯了这样的错误,很难去排查 所以最好是用单选注释// 取代多行注释 /* */ JavaScript 注释

javascript中使用css需要注意的地方小结_javascript技巧

1.在改变单个元素样式时,注意style对象的语法和css中使用的语法几乎是一一对应的.不过包含连字符的属性则被替换为一种"camel castring"的形式,例如:font-size现在成了fontSize,而margin-top变成了marginTop: 2.在使用"float"时,因为"float"是javascript的一个保留字,所以就不能使用style.float,而改成了style.cssFloat(IE使用的是style.sty

javascript中数组和字符串的方法对比_javascript技巧

前面的话 字符串和数组有很多的相同之处,它们的方法众多,且相似度很高:但它们又有不同之处,字符串是不可变值,于是可以把其看作只读的数组.本文将对字符串和数组的类似方法进行比较 可索引 ECMAScript5定义了一种访问字符的方法,使用方括号加数字索引来访问字符串中的特定字符 可索引的字符串的最大的好处就是简单,用方括号代替了charAt()调用,这样更加简洁.可读并且可能更高效.不仅如此,字符串的行为类似于数组的事实使得通用的数组方法可以应用到字符串上 如果参数超出范围或是NaN时,则输出un

JavaScript将数组转换成CSV格式的方法_javascript技巧

本文实例讲述了JavaScript将数组转换成CSV格式的方法.分享给大家供大家参考.具体分析如下: JavaScript中数组对象的valueOf方法可以将数组的值输出为逗号分割的字符串,下面的代码演示了如何将数组抓换成逗号和竖线分割的字符串 var fruits = ['apple', 'peaches', 'oranges', 'mangoes']; var str = fruits.valueOf(); //输出结果: apple,peaches,oranges,mangoes 如果希望