前端开发用js数组方法_强大的splice

javascript前端开发实用技术教程|前端与移动开发 javascriptjavascript jquery 交互式web前端开发

splice这个单词是“剪接”的意思。比如制作电影吧,后期都要剪接的。
剪接、剪接就是剪切拼接
splice这个api核心目的是剪切。以此为出发点,也许能很好的记住吧。
为啥说“前切”而不是“拼接”才是其核心呢?因为返回的结果是,被切掉的那些元素组成的数组。
javascript 代码

console.log([1, 2, 3, 4].splice(2));

从下标2开始,即元素3开始,都切掉。

splice是改变数组的,这个很好记。是在原电影上进行剪接的。
javascript 代码

var a = [1, 2, 3, 4];
a.splice(2);
console.log(a);

关于参数的说明,我们可以从“剪接”的角度来记。
你可以想象一下你在剪接一部电影,那么每一次操作,是不是掐掉连续的一段,再接上其他的连续一段。
因此splice不管删除还是添加,都是连续的概念。
array.splice(start, deleteCount, value,…)
start表示你从哪开始切的。一般涉及到下标参数的,都是前闭后开的,尤其一个时,那肯定是包括自身的。
deleteCount表示你要删除几个。不删就传0。
其他参数表示,你要拼接进来的元素。

比如我要删除掉倒数第3个和第2个,再拼接进5,6,7。
start是-3
deleteCount是2
因此有
javascript 代码

var a = [1, 2, 3, 4];
a.splice(-3, 2, 5, 6, 7);
console.log(a); //[1, 5, 6, 7, 4]

至此我算是记住了,个人使用也没问题。
比如删除掉第3个元素:
javascript 代码

var a = [1, 2, 3, 4];
a.splice(2, 1);
console.log(a);

比如删除掉后最后两个元素:
javascript 代码

var a = [1, 2, 3, 4];
a.splice(-2, 2);
console.log(a);

清空数组:
javascript 代码

var a = [1, 2, 3, 4];
a.splice(0);
console.log(a);

实现类似pop的效果:
javascript 代码

var a = [1, 2, 3, 4];
a.splice(-1, 1);
console.log(a);

实现shift的效果:
javascript 代码

var a = [1, 2, 3, 4];
a.splice(0, 1);
console.log(a);

实现unshift的效果:
javascript 代码

var a = [1, 2, 3, 4];
a.splice(0, 0, 0);
console.log(a);

实现push的效果:
javascript 代码

var a = [1, 2, 3, 4];
a.splice(a.length, 0, 5);
console.log(a);

注意此时,start使用-1是不行的,因为是下标是“闭”的:
javascript 代码

var a = [1, 2, 3, 4];
a.splice(-1, 0, 5);
console.log(a); //[1, 2, 3, 5, 4]

貌似本文到此就完了。
可是你去面试时,可能会有变态的题目:
javascript 代码

var a = [1, 2, 3, 4];
a.splice();
console.log(a);

ok,不传参数,不进行任何操作。
如果是下面的呢?
javascript 代码

var a = [1, 2, 3, 4];
a.splice({});
console.log(a);

恩,清空整个数组是没问题的。
那这个呢?
javascript 代码

var a = [1, 2, 3, 4];
a.splice(undefined);
console.log(a);

好吧,也是清空数组。
你以为这就完了,再来个
javascript 代码

var a = [1, 2, 3, 4];
a.splice(undefined, null);
console.log(a);

what??
最后你猜猜下面这个会怎样?
javascript 代码

var a = [1, 2, 3, 4];
a.splice(true, {}, true, {});
console.log(a);

java 前端页面开发技术|web前端开发技术 html css javascript|java能开发前端和后台

» 本文来自:前端开发者 » 《前端开发用js数组方法_强大的splice》
» 本文链接地址:https://www.rokub.com/4205.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!