js数组的增删改查,十二种方法(含代码)

简介: js数组的增删改查,十二种方法(含代码)

让我为大家介绍一下数组的增删改查的方法吧!本人文笔有限,如有什么不对的地方,请大家见谅!

1.unshift——从数组前方添加

unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度,会改变原数组

//创建一个数组
  var arr = [1,2,3,4,5]
  //使用unshift()方法增加
  console.log(arr.unshift(0));//返回数组长度,6
  console.log(arr);//输出结果  [0, 1, 2, 3, 4, 5]  在数组最前面添加一个元素
  arr.unshift(-2,-1)//可以一直往前加
  console.log(arr);//输出结果[-2, -1, 0, 1, 2, 3, 4, 5]

2.push——从数组后方添加

push() 方法可向数组的末尾添加一个或更多元素,并返回新的长度,会改变原数组

// 创建一个数组
  var arr = [1,2,3,4,5]
  //使用push()方法增加
  console.log(arr.push(6));//返回数组长度,6
  console.log(arr);//输出结果  [ 1, 2, 3, 4, 5, 6]  在数组最末尾添加一个元素
  arr.push(7,8)//可以一直往末尾添加
  console.log(arr);//输出结果[ 1, 2, 3, 4, 5, 6, 7, 8]

3.shift——从数组最前面删除

shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值,会改变原数组

// 创建一个数组
  var arr = [1,2,3,4,5]
  //使用shift()方法,删除数组的第一个元素
  console.log(arr.shift());//返回被删除的第一个元素,输出:1
  console.log(arr);//输出结果  [ 2, 3, 4, 5]  数组第一个元素已被删除
  console.log(arr.length);//输出结果为:4    会改变原数组的长度

4.pop——从数组末尾删除

pop() 方法用于把数组的最后一个元素从其中删除,并返回最后一个元素的值,会改变原数组

// 创建一个数组
  var arr = [1,2,3,4,5]
  //使用pop()方法,删除数组的第一个元素
  console.log(arr.pop())//返回被删除的最后一个元素,输出:5
  console.log(arr);//输出结果   [ 1, 2, 3, 4] 数组最后一个元素已被删除
  console.log(arr.length);//输出结果为:4    会改变原数组的长度

5.splice——可以实现添加、删除、替换操作

splice()方法用于添加、删除、替换某一个元素,十分好用,会改变原数组

当splice()一个参数时,代码如下:

// 创建一个数组
  var arr = [1,2,3,4,5]
  // 使用splice方法
  // 一个值时从下标为start开始删除,包括自身,一直删到末尾
  console.log(arr.splice(1))//下标为1开始删除,返回被删除的元素[2,3,4,5]
  console.log(arr)//会改变原数组返回1

当splice()二个参数时,代码如下:

// 创建一个数组
  var arr = [1,2,3,4,5]
  // 使用splice方法
  //  二个值时,splice(从哪开始删(下标),删除的个数从1开始不是0)
  console.log(arr.splice(0,1))//下标0开始,删除一个,也就是删除了1这个元素,返回被删除的元素
  console.log(arr)//会改变原数组,返回[2,3,4,5]

当splice()三个参数及以上时,代码如下:

// 创建一个数组
  var arr = [1, 2, 3, 4, 5]
  // 使用splice方法
  // splice(从哪开始删(下标),删除的个数从1开始不是0,往这个删除的元素之前添加的元素)
  //可以添加多个
  console.log(arr.splice(0, 1, -1, -2))//删除1这个元素往这个元素前添加
  console.log(arr)//会改变原数组,返回[-1,-2,2,3,4,5]

6.slice——截取数组

可以用来从数组提取指定元素,该方法不会改变数组,而是将截取到的元素封装到一个新数组中返回

参数:

1.截取开始位置的索引,包含开始索引
2.截取结束位置的索引,不包含结束索引
第二个值可以省略不写,此时会截取从开始索引开始往后的所有元素

代码如下:

// 创建一个数组
  var arr = ["a","b","c","d"]
  // 当slice一个参数时
  var result=arr.slice(2)
  console.log(result)//返回["c","d"]
  // 当slice二个参数时
  var result1 = arr.slice(0,2)
  console.log(result1)//返回["a","b"]

7.delete——删除元素但保留自身

delete可以删除元素但保留自身,代码如下:

// 创建一个数组
  var arr = [1, 2]
  // 使用delete,它与其它方法使用格式不太一样
  var del = delete arr[0]//删除下标为0的元素,保留自身
  console.log(arr)//会改变原数组,返回[空,2]

8.reverse——反转数组

反转数组,会改变原数组,代码如下:

// 创建一个数组
  var arr = [1, 2, 3, 4]
  //使用reverse()方法
  arr.reverse()
  console.log(arr)//会改变原数组,返回[4,3,2,1]

9.concat——拼接数组

可以拼接数组,代码如下:

// 创建一个数组
  var arr = [1, 2]
  var arr1 = [3, 4]
  // 使用concat方法可以拼接数组返回一个新数组
  var arr2 =arr.concat(arr1)
  console.log(arr2)//输出[1,2,3,4]

10.join——数组转换成字符串

join()可以把数组转换成字符串,代码如下:

// 创建一个数组
  var arr = [1, 2, 3, 4]
  var str = arr.join(",")//添加,可以拼接成字符串
  console.log(str)//会把数组装换成字符串,返回1,2,3,4(字符串类型)

11.indexOf——查找数组是否存在这个元素

indexOf()可以查找这个值是否存在,存在则返回其第一次出现的索引,不存在返回-1

代码如下:

// 创建一个数组
  var arr = [1, 2, 3, 4]
  //使用indexOf()方法,indexOf(想要查找的值,如果是字符串记得用''包起来),
  //可以查找是否存在这个值,如果存在返回这个元素的下标,不存在返回-1
  console.log(arr.indexOf(0))//返回-1,找不到返回-1
  console.log(arr.indexOf(1))//返回0,下标为0

12.lastIndexOf——查找数组是否存在这个元素

lastIndexOf与indexOf不一样,lastIndexOf是从后往前查找,存在返回目标元素下标,不存在返回-1

代码如下:

// 创建一个数组
  var arr = [1,2,3,1,2,3]
  // lastIndexOf是从后往前查找
  //可以查找是否存在这个值,如果存在返回这个元素的下标,不存在返回-1
  console.log(arr.lastIndexOf(0))//返回-1
  console.log(arr.lastIndexOf(1))//返回3

感谢大家的阅读,如果有什么不对的地方,可以向我提出,感谢大家!

相关文章
|
9天前
|
JavaScript
短小精悍的js代码
【10月更文挑战第17天】
109 58
|
8天前
|
缓存 监控 前端开发
JavaScript 实现大文件上传的方法
【10月更文挑战第17天】通过以上步骤和方法,我们可以实现较为可靠和高效的大文件上传功能。当然,具体的实现方式还需要根据实际的应用场景和服务器要求进行调整和优化。
|
1天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
9 4
|
3天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
28 6
|
22小时前
|
JavaScript 前端开发 Go
异步加载 JS 的方法
【10月更文挑战第24天】异步加载 JavaScript 是提高网页性能和用户体验的重要手段。通过使用不同的方法和技术,可以实现灵活、高效的异步加载 JavaScript。在实际应用中,需要根据具体情况选择合适的方法,并注意处理可能出现的问题,以确保网页能够正常加载和执行。
|
12天前
|
人工智能 JavaScript 网络安全
ToB项目身份认证AD集成(三完):利用ldap.js实现与windows AD对接实现用户搜索、认证、密码修改等功能 - 以及针对中文转义问题的补丁方法
本文详细介绍了如何使用 `ldapjs` 库在 Node.js 中实现与 Windows AD 的交互,包括用户搜索、身份验证、密码修改和重置等功能。通过创建 `LdapService` 类,提供了与 AD 服务器通信的完整解决方案,同时解决了中文字段在 LDAP 操作中被转义的问题。
|
13天前
|
存储 JavaScript 前端开发
JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法
JavaScript 数据类型分为基本数据类型和引用数据类型。基本数据类型(如 string、number 等)具有不可变性,按值访问,存储在栈内存中。引用数据类型(如 Object、Array 等)存储在堆内存中,按引用访问,值是可变的。本文深入探讨了这两种数据类型的特性、存储方式、以及检测数据类型的两种常用方法——typeof 和 instanceof,帮助开发者更好地理解 JavaScript 内存模型和类型检测机制。
30 0
JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法
|
13天前
|
存储 JavaScript 前端开发
JavaScript数组去重的八种方法详解及性能对比
在JavaScript开发中,数组去重是一个常见的操作。本文详细介绍了八种实现数组去重的方法,从基础的双重循环和 indexOf() 方法,到较为高级的 Set 和 Map 实现。同时,分析了每种方法的原理和适用场景,并指出了使用 Set 和 Map 是目前最优的解决方案。通过本文,读者可以深入理解每种方法的优缺点,并选择最合适的数组去重方式。
27 0
|
14天前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
85 0
|
14天前
|
JavaScript
深入解析:JS与Vue中事件委托(事件代理)的高效实现方法
深入解析:JS与Vue中事件委托(事件代理)的高效实现方法
19 0