Javascript数组系列五之增删改和强大的 splice()

今天是我们介绍数组系列文章的第五篇,也是我们数组系列的最后一篇文章,只是数据系列的结束,所以大家不用担心,我们会持续的更新干货文章。

生命不息,更新不止!

今天我们就不那么多废话了,直接干货开始。

我们在《Javascript数组系列一之栈与队列》中描述我们是如何利用 push、pop、shift、unshift方法进行数组单个元素的添加与删除。

但是光有单个元素的删除恐怕难以满足我们的应用场景,那么那么如何进行数组元素的批量操作?let’s go!

数组的增删改

slice

该方法会复制数组的一部分从我们选择到开始到结束位置,返回一个新数组。

slice 方法接受两个可选到参数:一个复制数组到开始索引,一个是复制数组到结束索引。

//语法
array.slice(begin, end);
//案例
const friends = ["大B哥", "二B哥", "三B哥", "我"];
const friends1 = friends.slice();
const friends2 = friends.slice(1);
const friends3 = friends.slice(1, 3);
const friends4 = friends.slice(-1);
const friends5 = friends.slice(-3, -1);
console.log(friends1); //["大B哥", "二B哥", "三B哥", "我"]
console.log(friends2); //["二B哥", "三B哥", "我"]
console.log(friends3); //["二B哥", "三B哥"]
console.log(friends4); //["我"]
console.log(friends5); //["二B哥", "三B哥"]

slice 方法主要就是复制数组到一部分,然后返回新的数组,所以用法也相对简单一些。但是还是有一些我们值得注意到地方。

  • 数组始终都是从左到右到复制顺序,即使参数是负数也是如此
  • 没有接受任何参数的时候,会复制整个数组
  • 一个参数的时候,是从当前参数的索引位置到数组到结束
  • 两个参与时,采用左闭右开到原则,即包含开始,但不包含结束
  • 当参数为负数时,会从数组的末尾开始计算

以上就是 slice 方法值得我们注意的地方,如果大家掌握了这些知识,那么将会很好的使用它。

最后,我们来看一看它的兼容问题

splice

splice 方法一个数组中最强大的方法,不仅可以对数组进行元素对添加,对数组元素对删除,对数组元素的替换,可以说它集百家与一身,它会直接修改原数组,返回删除的元素。

那么我们就来好好的看看它是如何进行数组的添加、删除与替换工作。

splice 方法的参数传入数量不的不同形成的效果也会不同。

首先它接受三个参数或甚至更多,除了开始位置索引 start 参数以外,其余全是可选参数。

start:删除数组元素的开始索引

count:需要删除元素的个数

item1,item2…:插入数组的元素

//语法
array.splice(start, count, item1, item2, ...)

因为 splice 参数变化多样,我们主要从三个方面来展示 splice 的用法。

1. 如何删除数组元素

传递一个参数的时候,数组会删除从给定的索引到数组结束的所有元素,原数组会被修改,返回删除的数组

//删除元素
const numbers = [1, 2, 3, 4, 5];
const removes = numbers.splice(2);
console.log(numbers); //[1, 2]
console.log(removes); //[3, 4, 5]

如何删除指定个数的数组?如我们只想删除第6个元素等等… 我们添加第二个参数 count 即可,元素的索引是从0开始,也就是说 start 参数是从 0 开始的。

//删除第6个元素
const numbers = [1, 2, 3, 4, 5, 6, 7, 8];
const removes = numbers.splice(5, 1);
console.log(numbers); //[1, 2, 3, 4, 5, 7, 8]
console.log(removes); //[6]

//删除第6,7位两个元素
const numbers = [1, 2, 3, 4, 5, 6, 7, 8];
const removes = numbers.splice(5, 2);
console.log(numbers); //[1, 2, 3, 4, 5, 8]
console.log(removes); //[6, 7]

已然明白,splice 方法是从 start 索引位置开始,删除 count 个元素。如何不删除元素呢?有些聪明的同学肯定已经知道那就是我们的 count 为 0 时,它就不会删除任何元素,这个也为我们后面如何添加与替换元素提供了前提条件。

2. 如何添加数组元素

如何添加一个元素,这会就要用到我们的第三个参数或者第四个,第五个等等,依次添加即可。

//指定在某个位置添加一个元素
const numbers = [1, 2, 3, 4, 5];
const removes = numbers.splice(2, 0, 'F');
console.log(numbers); //[1, 2, "F", 3, 4, 5]
console.log(removes); //[]

//指定在某个位置添加多个元素
const numbers = [1, 2, 3, 4, 5];
const removes = numbers.splice(2, 0, 'A', 'B', 'C');
console.log(numbers); //[1, 2, "A", "B", "C", 3, 4, 5]
console.log(removes); //[]

因为不对数组进行任何的删除项,然后又在数组中插入一些元素,实现的数组的添加

3. 如何替换数组元素

替换的思路与删除仅仅多了一步把要插入掉位置元素给删除掉。

//替换第2,3位的元素
const numbers = [1, 2, 3, 4, 5];
const removes = numbers.splice(2, 2, 'A', 'B');
console.log(numbers); //[1, 2, "A", "B", 5]

console.log(removes); //[3, 4]

来看看 splice 方法的兼容性如何

到目前位置连续五篇文章,我们已经介绍了很多数组的一些方法,你会发现这些方法都是基于单个数组的增删改甚至是合并,没有数组与数组之间的一些方法,不过 Javascript 还是为我们提供了一个方法就是可以实现数组与数组之间的合并操作。

concat

用法非常简单,就是用于两个数组的合并,原有数组不发生改变,返回一个新的数组。

它接受的参数为数组或者是值类型,参数的个数为一个或者多个。

//语法
var newArray = array.concat(array1, array2...)
//连接两个数组
const numbers1 = ['1', '2', '3'];
const numbers2 = ['4', '5', '6'];
const newNumbers = numbers1.concat(numbers2);
console.log(numbers1); //["1", "2", "3"]
console.log(numbers2); //["4", "5", "6"]
console.log(newNumbers);//["1", "2", "3", "4", "5", "6"]

//连接值类型
const numbers1 = ['1', '2', '3'];
const newNumbers = numbers1.concat('4');
console.log(newNumbers); //["1", "2", "3", "4"]

//连接多个数组
const numbers1 = ['1', '2', '3'];
const numbers2 = ['4', '5', '6'];
const number3 = ['7'];
const newNumbers = numbers1.concat(numbers2, number3);
console.log(newNumbers);//["1", "2", "3", "4", "5", "6", "7"]

那么 concat 方法的兼容性如何呢?

总结

到目前位置数组的系列文章以及介绍完毕,我们系统以及完整的介绍了数组的一系列方法,通过一些例子介绍了每个用法,甚至我们把每个方法的很多用法都有提到,不说能够应对所有应用场景把,至少在日常的开发过程中足够使用了。

数组虽然说完了,但是我们的故事还没有说玩,欢迎持续关注。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏星汉技术

Java API:Object class

1397
来自专栏blackheart的专栏

[C#6] 3-null 条件运算符

0. 目录 C#6 新增特性目录 1. 老版本的代码 1 namespace csharp6 2 { 3 internal class Perso...

21310
来自专栏blackheart的专栏

[C#2] 3-局部类型、属性访问器保护级别、命名空间别名限定符

1. 局部类型 C#1.0中,一个类只可以放在一个文件中。C#2.0中用了一个关键字"partial", 可以把一个类分成两个部分[即一个类的实现可以在多个文件...

1895
来自专栏nummy

python operator模块学习

operator模块是python中内置的操作符函数接口,它定义了一些算术和比较内置操作的函数。operator模块是用c实现的,所以执行速度比python代码...

722
来自专栏程序生活

Python itertools的使用简介无限迭代器chain方法

用*放在一个可迭代对象前面可以将对象拆分成多个单元素,比如first=[['1','2','3','4','4'],['2','4','2']],如果把*放在f...

711
来自专栏日常分享

Java 多态方法构造器执行方法

可见,当我们试图构造一个B时,应该会优先构造B的父类A,所以会调用父类A的构造函数A(),所以会输出

1085
来自专栏闪电gogogo的专栏

Python入门学习(二)

1 字典 1.1 字典的创建和访问 字典不同于前述的序列类型,它是一种映射类型。它的引入是为了简化定义索引值和元素值存在特定关系的定义和访问问题。 字典的定义形...

2868
来自专栏CDA数据分析师

陷阱!python参数默认值

在stackoverflow上看到这样一个程序: class demo_list: def __init__(self, l=[]): ...

2118
来自专栏决胜机器学习

《Redis设计与实现》读书笔记(一)——简单动态字符串(SDS)

《Redis设计与实现》读书笔记(一) ——简单动态字符串(SDS) (原创内容,转载请注明来源,谢谢) 前言:《Redis设计与实现》,是一本分析redis...

4215
来自专栏codingforever

经典算法巡礼(六) -- 排序之快速排序

快速排序正如她的名字,她是一种排序效率相当高的算法,而且可能是应用最广泛的排序算法了。快速排序流行的原因是她实现简单,适用于各种不同的输入数据且在一般应用中比其...

373

扫码关注云+社区