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

前言

今天重温了一下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。

总结

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

赞 (0)

相关推荐

  • JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)

    POP 删除最后一项 删除最后一项,并返回删除元素的值:如果数组为空则返回undefine var a = [1,2,3,4,5]; a.pop();//a:[1, 2, 3, 4] a.pop();//a:[1, 2, 3] a.pop();//a:[1, 2] shift 删除第一项 删除原数组第一项,并返回删除元素的值:如果数组为空则返回undefine var a = [1,2,3,4,5]; a.shift(); //a:[2,3,4,5] a.shift(); //a:[3, 4,

  • javascript中slice(),splice(),split(),substring(),substr()使用方法

    1.slice(): Array和String对象都有 在Array中  slice(i,[j]) i为开始截取的索引值,负数代表从末尾算起的索引值,-1为倒数第一个元素 j为结束的索引值,缺省时则获取从i到末尾的所有元素 参数返回: 返回索引值从i到j的数组,原数组不改变 在String中 slice(i,[j]) 参数说明: i为开始截取的索引值,负数代表从末尾算起的索引值,-1为倒数第一个字符 j为结束的索引值,缺省时则获取从i到末尾的所有字符 2.splice() 存在Array中   

  • javascript中substr,substring,slice.splice的区别说明

    substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符. stringObject.substr(start,length);start必须,length可选. start 是截取的开始位置的下标,从0开始算起,必须是数字.可以是负数,-1是倒数第一个字符,-2是倒数第二个字符,以此类推. length 是要截取的字符的长度,必须是数字.如果未指定,则从start位置处开始截取到字符串结尾. substr 指定的是字符串的开始下标跟截取长度,所以可以替代substring

  • JavaScript中splice与slice的区别

    splice与slice是数组中的两个常用方法,但是很多初学者很容易将二者混淆. slice的操作不影响原数组.会返回所选择的元素. splice往数组中指定位置添加或删除元素,会影响原数组.返回被删除的元素. slice() 可从已有的数组中返回选定的元素. 语法 arrayObject.slice(start,end) start 必需.规定从何处开始选取.如果是负数,那么它规定从数组尾部开始算起的位置.也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推. end 可选.规定从

  • javascript中不易分清的slice,splice和split三个函数

    每每见到这三个函数,我都会很懵,一定要到网上搜搜:今天,恰巧又见到了它们,所以想必是时候为它们做个笔记啦 1.slice(数组) 用法:array.slice(start,end) 解释:该方法是对数组进行部分截取,并返回一个数组副本:参数start是截取的开始数组索引,end参数等于你要取的最后一个字符的位置值加上1(可选) //如果不传入参数二,那么将从参数一的索引位置开始截取,一直到数组尾 var a=[1,2,3,4,5,6]; var b=a.slice(0,3); //[1,2,3]

  • 原生JS中slice()方法和splice()区别

    slice()方法和splice()方法都是原生js中对数组操作的方法.那么他两种有什么区别呢?今天通过本文教程给大家简单介绍下. slice(),返回一个新的数组,该方法可从已有的数组中返回选定的元素.例如:arrObject(start,end),start是必选的.规定从何处开始选取,如果是负数,则是从数组元素尾部选取,也就是说-1指最后一个元素,-2指倒数第二个元素:end是可选元素.规定从何处结束选取.该参数没有,表示从开始位置截取到数组末尾,如果是负数,表示从数组末尾向前截取元素.该

  • JavaScript中数组slice和splice的对比小结

    前言 今天重温了一下Javascript,看到了数组的方法,其中有两个比较相似的方法--splice和splice,看着很像,就是多了一个p,但是用法却相当不一样. 在使用中,可以通过选择一个具有强语义表达性的 API 来减少混淆的发生. 1.slice slice是指定在一个数组中的元素创建一个新的数组,即原数组不会变 数组的 slice (ECMAScript 5.1 标准 15.4.4.10 节)非常类似于字符串的 slice.根据规范,slice 需要两个参数,起点和终点.它会返回一个包

  • javascript中数组和字符串的方法对比

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

  • JavaScript中数组常见操作技巧

    JavaScript中数组常见操作技巧

    效果图如下所示: Tip: 右键在新标签中打开查看清晰大图 下面介绍JavaScript中的数组对象遍历.读写.排序等操作以及与数组相关的字符串处理操作 创建数组 一般使用数组字面量[]创建新数组,除非想要创建指定长度的数组 // good var arr = []; var arr = ['red', 'green', 'blue']; var arr = [ ['北京', 90], ['上海', 50], ['广州', 50] ]; // bad var arr = new Object()

  • javascript中数组（Array)对象和字符串（String)对象的常用方法总结

    本文实例总结了javascript中数组(Array)对象和字符串(String)对象的常用方法.分享给大家供大家参考,具体如下: 综述:笔者经常将数组的方法和字符串的方法混淆,这里写篇日志,做个区分 1.字符串对象 String是JavaScript中的五种基本类型之一. (1)字符串对象的创建 例1: var str="Hello world"; 或者 var str=new String("Hello world") (2)charAt()方法 charAt(

  • 浅谈JavaScript中数组的增删改查

    数组的增加 •ary.push()   向数组末尾添加元素,返回的是添加后新数组的长度,原有数组改变 •ary.unshift()  向数组开头添加元素,返回的是添加后新数组的长度,原有数组改变 • var ary=[1,2,3,4];   var res=ary.unshift(6);   console.log(res); ---->5 返回的是新数组的长度•ary.splice(n,m,x)从索引n开始删除m个元素,把新增的元素X放在索引n的前面,把删除的元素当成一个新数组返回,原有数组改

  • JavaScript中数组的22种方法必学(推荐)

    前面的话 数组总共有22种方法,本文将其分为对象继承方法.数组转换方法.栈和队列方法.数组排序方法.数组拼接方法.创建子数组方法.数组删改方法.数组位置方法.数组归并方法和数组迭代方法共10类来进行详细介绍 对象继承方法 数组是一种特殊的对象,继承了对象Object的toString().toLocaleString()和valueOf()方法 [toString()] toString()方法返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串 [注意]该方法的返回值与不使用任何参数

  • JavaScript中数组的各种操作的总结(必看篇)

    JavaScript中数组的各种操作的总结(必看篇)

    js数组的新建,头插入,尾插入,头删除,尾删除,中间删除,删除多个,多个数组合并,数组倒序,数组截取等等,都有对应的例子. 声明一个数组 原来是如下声明: var s = new Array(); 但是 现在编辑器推荐使用如下声明:简洁 var s = []; concat 方法 返回一个新数组,这个新数组是由两个或更多数组组合而成的.不修改原数组. join 方法 返回字符串值,其中包含了连接到一起的数组的所有元素,元素由指定的分隔符分隔开来.不修改原数组. pop 方法 移除数组中的最后一个

  • javascript中数组的常用算法深入分析

    前言 Array是Javascript构成的一个重要的部分,它可以用来存储字符串.对象.函数.Number,它是非常强大的.因此深入了解Array是前端必修的功课.本文将给大家详细介绍了javascript中数组的常用算法,下面话不多说了,来一起看看详细的介绍吧 一.不改变原数组,返回新数组(字符串) 1.concat()   连接两个或者多个数组,两边的原始数组都不会变化,返回的是被连接数组的一个副本. 2.join()  把数组中所有的元素放入到一个字符串中,返回字符串 var a = [1

  • 总结Javascript中数组各种去重的方法

    前言 在做javascript开发的时候,经常会遇到数组元素重复的问题,而javascript Array又没有直接提供方法解决此问题,还需要自己去实现.这篇文章总结了Javascript中数组各种去重的方法,下面来一起看看. 方法一 利用对象属性不重复的特性 Array.prototype.distinct = function (){ var arr = this, i, obj = {}, result = [], len = arr.length; for(i = 0; i< arr.l

  • JavaScript中数组去重的5种方法

    正常情况下,数据去重的工作一般都是由后端同事来完成的,但是前端也要掌握好处理数据的能力,万一去重的工作交给我们大前端处理,我们也不能怂呀.现在我总结了一些去重的方法,希望对大家有点帮助. 方法一:new Set()实现数组去重 ES6 提供了新的数据结构 Set,它类似于数组,但是成员的值都是唯一的,没有重复的值. Set 本身是一个构造函数,用来生成 Set 数据结构.Set函数可以接受一个数组,用于初始化.根据 Set的数据特性,我们可以实现数组去重. let list = [1, 1, '

随机推荐