脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → 基础知识 → JavaScript中splice与slice的区别

JavaScript中splice与slice的区别

 更新时间：2017年05月09日 08:42:08   作者：ourjs  
本文给大家分享的是JavaScript中的splice和slice的用法和区别，slice()方法和splice()方法都是原生js中对数组操作的方法，下面我们来详细探讨下

splice与slice是数组中的两个常用方法，但是很多初学者很容易将二者混淆。

slice的操作不影响原数组。会返回所选择的元素。

splice往数组中指定位置添加或删除元素，会影响原数组。返回被删除的元素。

slice()

可从已有的数组中返回选定的元素。

语法

arrayObject.slice(start,end)

start 必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。

end 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。

var arr = [1,2,3,4,5,6]
arr.slice(2, 3) //返回[3]

splice()

splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。

注释：该方法改变原始数组。
arrayObject.splice(index,howmany,item1,.....,itemX)

index 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。

howmany 必需。要删除的项目数量。如果设置为 0，则不会删除项目。

item1, ..., itemX 可选。向数组添加的新项目。

如，向数组的起始位置插一个新的元素  -1

var arr = [1,2,3,4,5,6]
arr.splice(0,0, -1) //返回[]，第二个参数为0，即不删除任何元素
console.log(arr)

> [-1, 1, 2, 3, 4, 5, 6]

用slice复制数组

使用 slice(0) 可以快速复制并生成 一个新的数组，不过数组是新的，里面的元素还是原来的引用，比如：

var o = [1, 2]
var arr = [ 3, 4, o ]
var clone = arr.slice(0)
console.log(clone)
> [3, 4, Array[2]]

用concat复制数组

Array.concat 数组拼接函数也可以用来复制数组，比如：

var o = [1, 2]
var arr = [ 3, 4, o ]
var clone = arr.concat()
console.log(clone)
> [3, 4, Array[2]]

不过 slice和concat 生成的数组是新的，但里面的元素还是原来的引用，比如：

clone[2].push(3)
console.log(o)
> [1, 2, 3]

用JSON parse/ strinigfy 进行深度复制

可以使用 JSON.parse(JSON.stringify(arr)) 对对象或数组进行快速深度复制，此种方法无法复制 function 等无法序列化的对象，比如：

var o = [1, 2]
var arr = [ 3, 4, o ]
var clone = JSON.parse(JSON.stringify(arr))
console.log(clone)

> [3, 4, Array[2]]


clone[2].push(3)
console.log(o)
> [1, 2] //o元素没有变化

参考：

//www.jb51.net/w3school/jsref/jsref_slice_array.htm

//www.jb51.net/w3school/jsref/jsref_splice.htm

相关文章

  • JavaScript初级教程(第五课续)

    JavaScript初级教程(第五课续)

    JavaScript初级教程(第五课续)...
    2007-04-04
  • 举例详解Python中smtplib模块处理电子邮件的使用

    举例详解Python中smtplib模块处理电子邮件的使用

    这篇文章主要介绍了举例详解Python中smtplib模块处理电子邮件的使用,是Python入门学习中的基础知识,需要的朋友可以参考下
    2015-06-06
  • JavaScript中Number.NEGATIVE_INFINITY值的使用详解

    JavaScript中Number.NEGATIVE_INFINITY值的使用详解

    这篇文章主要介绍了JavaScript中Number.NEGATIVE_INFINITY值的使用,是JS入门学习中的基础知识,需要的朋友可以参考下
    2015-06-06
  • Javascript堆排序算法详解

    Javascript堆排序算法详解

    这篇文章主要介绍了Javascript堆排序算法及其示例，非常实用,需要的朋友可以参考下
    2014-12-12
  • 简述JavaScript中正则表达式的使用方法

    简述JavaScript中正则表达式的使用方法

    这篇文章主要介绍了JavaScript中正则表达式的使用方法,正则表达式是JS进阶学习中的重要知识,本文简述了JS对正则表达式的支持情况,需要的朋友可以参考下
    2015-06-06
  • JavaScript中__proto__与prototype的关系深入理解

    JavaScript中__proto__与prototype的关系深入理解

    本文将讨论下对象的内部原型(__proto__)和构造器的原型（prototype）的关系，需要了解更多的朋友可以参考下
    2012-12-12
  • window.open参数详解附实例

    window.open参数详解附实例

    一般我们在开发过程中通过window.open打开新窗口，但现在浏览器与杀毒都防止了这个函数弹出页面，一般我们将页面设置信任才可以使用，不过我们在后台开发过程中仍然通过这个方法打开页面，这里简单介绍下使用方法与常用参数
    2013-06-06
  • js setTimeout 常见问题小结

    js setTimeout 常见问题小结

    主要包括this指向问题、向setTimeout传入参数等相关问题，下面与大家分享下以上问题的解决方法，感兴趣的朋友可以参考下
    2013-08-08
  • JavaScript中join()方法的使用简介

    JavaScript中join()方法的使用简介

    这篇文章主要介绍了JavaScript中join()方法的使用简介,是JS入门学习中的基础知识,需要的朋友可以参考下
    2015-06-06
  • JavaScript高级程序设计（第3版）学习笔记2 js基础语法

    JavaScript高级程序设计（第3版）学习笔记2 js基础语法

    这一篇复习一下ECMAScript规范中的基础语法，英文好的朋友可以直接阅读官方文档。JavaScript本质上也是一种类C语言，熟悉C语言的朋友，可以非常轻松的阅读这篇文章，甚至都可以跳过，不过建议你最好还是看一看，在介绍的同时，我可能会引用一些自认为不易理解且比较流行的用法。
    2012-10-10

最新评论