js中slice、splice用法与区别

1.slice(start,end)(参数可选)

slice() 方法返回一个从开始到结束(不包括结束)选择的数组的一部分浅拷贝到一个新数组对象。原始数组不会被修改。

var a = [‘a‘, ‘b‘, ‘c‘, ‘d‘]

var b = a.slice(0, 1)

console.log(a); //[‘a‘, ‘b‘, ‘c‘, ‘d‘]

console.log(b); //[‘a‘]

不传参数,默认从0开始,可以复制数组:

var a = [‘a‘, ‘b‘, ‘c‘, ‘d‘];var c = a.slice();//复制原数组(浅复制)。
console.log(a); //[‘a‘, ‘b‘, ‘c‘, ‘d‘];
console.log(c);//[‘a‘, ‘b‘, ‘c‘, ‘d‘];

参数可以是负数,begin为负数表示从原数组倒数第几位开始复制,如果不传end,复制到数组末尾。如果end大于数组长度,依然复制到数组结尾。

var a = [‘a‘, ‘b‘, ‘c‘, ‘d‘];var d = a.slice(-2);
console.log(a); //[‘a‘, ‘b‘, ‘c‘, ‘d‘];
console.log(d); //[‘c‘, ‘d‘];

end为负数,表示在倒数第几位结束复制,不包括end。

var a = [‘a‘, ‘b‘, ‘c‘, ‘d‘];
 var e = a.slice(1, -1);
 console.log(e); //[ ‘b‘, ‘c‘]

slice() 方法还可以将类数组转换成数组

function list() {
  return Array.prototype.slice.call(arguments);
}

var list1 = list(1, 2, 3); // [1, 2, 3]

或者

function list() {
  return [].slice.call(arguments) 

} 
var list1 = list(1, 2, 3); // [1, 2, 3]

2.splice(start, deleteCount, item1, item2, ...) 方法通过删除现有元素和/或添加新元素来更改一个数组的内容。而slice()不会修改原数组

start:(必选)

指定修改的开始位置(从0计数)。如果超出了数组的长度,则从数组末尾开始添加内容;如果是负值,则表示从数组倒数第几位(从1计数)。

deleteCount:(可选)

整数,表示要移除的数组元素的个数。如果 deleteCount 是 0,则不移除元素。这种情况下,至少应添加一个新元素。如果 deleteCount 大于start 之后的元素的总数,则从 start 后面的元素都将被删除(含第 start 位)。
如果deleteCount被省略,则其相当于(arr.length - start)。

item1, item2, ... (可选)要添加进数组的元素,从start 位置开始。如果不指定,则 splice() 将只删除数组元素。

var a = [‘a‘, ‘b‘, ‘c‘, ‘d‘]
var b = a.splice(0) //deleteCount被省略,相当于(a.length - start)。

console.log(a); //[];console.log(b); //[‘a‘, ‘b‘, ‘c‘, ‘d‘];

var c = [‘a‘, ‘b‘, ‘c‘, ‘d‘];var d = c.splice(-1,1);
console.log(c); //[‘a‘, ‘b‘, ‘c‘];console.log(d); //[‘d‘];

var e = [‘a‘, ‘b‘, ‘c‘, ‘d‘];

var f = e.splice(1, 5);//deleteCount 大于start 之后的元素的总数

console.log(e); //[‘a‘];

console.log(f); //[‘b‘, ‘c‘, ‘d‘];

var h = [‘a‘, ‘b‘, ‘c‘, ‘d‘]

var l = h.splice(1, 2, ‘x‘)//‘x‘替换删除掉的字符

console.log(h); //[‘a‘, ‘x‘, ‘d‘]

console.log(l); //[‘b‘, ‘c‘]

时间: 2024-10-25 18:34:19

js中slice、splice用法与区别的相关文章

js中slice splice split的区别

slice:    不会修改原来的数组,截取数组元素返回 splice:    直接修改原数组,删除原数组中的指定元素,返回的是被删除的元素组成的数组 split:    根据特定的字符切割字符串并且返回生成的数组

JQuery之append和appendTo的区别,还有js中的appendChild用法

JQuery之append和appendTo的区别 append()前面是要选择的对象,后面是要在对象内插入的元素内容 appendTo()前面是要插入的元素内容且为Jquery对象,而后面是要选择的对象 实例: $('#a').append('content'); $('<div>content</div>').appendTo($('#a')); 注意appendTo前面一定要是Jquery对象. appendChild(Node)这个 方法一般是在指定元素节点的最后一个子节点

浅谈JS中的!=、== 、!==、===的用法和区别 JS中Null与Undefined的区别 读取XML文件 获取路径的方式 C#中Cookie,Session,Application的用法与区别? c#反射 抽象工厂

var num = 1;    var str = '1';    var test = 1;    test == num  //true 相同类型 相同值    test === num //true 相同类型 相同值    test !== num //false test与num类型相同,其值也相同, 非运算肯定是false    num == str  //true 把str转换为数字,检查其是否相等.    num != str  //false == 的 非运算    num ==

JS中深拷贝与浅拷贝的区别,实现深拷贝的几种方法

JS中深拷贝与浅拷贝的区别,实现深拷贝的几种方法 如何区分深拷贝与浅拷贝,简单点来说,就是假设B复制了A,当修改A时,看B是否会发生变化,如果B也跟着变了,说明这是浅拷贝,拿人手短,如果B没变,那就是深拷贝,自食其力. 此篇文章中也会简单阐述到栈堆,基本数据类型与引用数据类型,因为这些概念能更好的让你理解深拷贝与浅拷贝. 我们来举个浅拷贝例子: let a=[0,1,2,3,4], b=a; console.log(a===b); a[0]=1; console.log(a,b); 嗯?明明b复

JS中isPrototypeOf 和hasOwnProperty 的区别 ------- js使用in和hasOwnProperty获取对象属性的区别

JS中isPrototypeOf 和hasOwnProperty 的区别 1.isPrototypeOf isPrototypeOf是用来判断指定对象object1是否存在于另一个对象object2的原型链中,是则返回true,否则返回false. 格式如下: object1.isPrototypeOf(object2); object1是一个对象的实例: object2是另一个将要检查其原型链的对象. 原型链可以用来在同一个对象类型的不同实例之间共享功能. 如果 object2 的原型链中包含

js中||和&amp;&amp;的用法

在js中&&.||不一定都是用来判断一个表达式的逻辑值是true.false,更多的是用来依据真值或者假值执行相应操作! a() && b() :如果执行a()后返回true,则执行b()并返回b的值:如果执行a()后返回false,则整个表达式返回a()的值,b()不执行:a() || b() :如果执行a()后返回true,则整个表达式返回a()的值,b()不执行:如果执行a()后返回false,则执行b()并返回b()的值:&& 优先级高于 || 如下

[转载]js中return的用法

一.返回控制与函数结果,语法为:return 表达式; 语句结束函数执行,返回调用函数,而且把表达式的值作为函数的结果 二.返回控制,无函数结果,语法为:return;  在大多数情况下,为事件处理函数返回false,可以防止默认的事件行为.例如,默认情况下点击一个元素,页面会跳转到该元素href属性指定的页.    Return False 就相当于终止符,Return True 就相当于执行符.    在js中return false的作用一般是用来取消默认动作的.比如你单击一个链接除了触发

js中indexof的用法详细解析

本篇文章主要是对js中indexof的用法进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助 String.IndexOf 方法 (Char, [startIndex], [count]) 报告指定字符在此实例中的第一个匹配项的索引.搜索从指定字符位置开始,并检查指定数量的字符位置. 参数 value 要查找的 Unicode 字符. 对 value 的搜索区分大小写. startIndex(Int32) 可选项,搜索起始位置.不设置则从0开始. count(Int32) 可选项,要

Angular.js 中 copy 赋值与 = 赋值 区别

转自st.gg Angular.js 中 copy 赋值与 = 赋值 区别 为什么用 $scope.user = $scope.master; $scope.master 会跟着 $scope.user 改变?angular.copy 和 = 号赋值有什么区别呢?新手还没有搞懂,请教各位了. <!DOCTYPE html> <html> <script src= "http://apps.bdimg.com/libs/angular.js/1.3.9/angular

js中import和require的区别

js中import和require的区别ES6标准发布后,module成为标准,标准使用是以export指令导出接口,以import引入模块.但是在我们一贯的node模块中,我们依然采用的是CommonJS规范,使用require引入模块,使用module.exports导出接口. require它相当于module.exports的传送门,module.exports后面的内容是什么,require的结果就是什么,对象.数字.字符串.函数……再把require的结果赋值给某个变量,相当于把re