JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)

yizhihongxing

JS数组操作是对数组进行增加、删除、翻转、转字符串、取索引、截取、剪接和数组合并等常见操作。

增加操作

数组的增加操作包括push和unshift,push用于在数组末尾添加一个或多个元素,unshift用于在数组开头添加一个或多个元素。示例如下:

let arr = [1, 2, 3];

// push
arr.push(4);
console.log(arr); // [1, 2, 3, 4]

arr.push(5, 6);
console.log(arr); // [1, 2, 3, 4, 5, 6]

// unshift
arr.unshift(0);
console.log(arr); // [0, 1, 2, 3, 4, 5, 6]

arr.unshift(-1, -2);
console.log(arr); // [-1, -2, 0, 1, 2, 3, 4, 5, 6]

删除操作

数组的删除操作包括pop和shift,pop用于删除并返回数组末尾的一个元素,shift用于删除并返回数组开头的一个元素。示例如下:

let arr = [1, 2, 3, 4, 5, 6];

// pop
let last = arr.pop();
console.log(last); // 6
console.log(arr); // [1, 2, 3, 4, 5]

// shift
let first = arr.shift();
console.log(first); // 1
console.log(arr); // [2, 3, 4, 5]

翻转操作

数组的翻转操作可以使用reverse方法,该方法会颠倒数组中元素的顺序。示例如下:

let arr = [1, 2, 3, 4, 5];

arr.reverse();
console.log(arr); // [5, 4, 3, 2, 1]

转字符串操作

数组转为字符串可以使用join方法,该方法可以将数组中的元素用一个指定的分隔符拼接成一个字符串。示例如下:

let arr = [1, 2, 3, 4, 5];

let str = arr.join('-');
console.log(str); // '1-2-3-4-5'

取索引操作

数组中元素的索引可以使用indexOf和lastIndexOf方法获取,indexOf获取第一个匹配元素的索引,lastIndexOf获取最后一个匹配元素的索引。如果没有找到匹配元素,则返回-1。示例如下:

let arr = [1, 2, 3, 4, 5, 3];

console.log(arr.indexOf(3)); // 2
console.log(arr.lastIndexOf(3)); // 5
console.log(arr.indexOf(6)); // -1

截取操作

数组的截取操作可以使用slice方法,该方法会返回一个新的数组,包含原数组中指定的元素。示例如下:

let arr = [1, 2, 3, 4, 5];

let newArr = arr.slice(1, 3);
console.log(newArr); // [2, 3]

剪接操作

数组的剪接操作可以使用splice方法,该方法会删除原数组中指定位置的元素,并可以在指定位置插入新元素,同时返回被删除元素组成的新数组。示例如下:

let arr = [1, 2, 3, 4, 5];

let newArr = arr.splice(1, 2, 'a', 'b');
console.log(newArr); // [2, 3]
console.log(arr); // [1, 'a', 'b', 4, 5]

数组合并操作

数组的合并可以使用concat方法,该方法会将多个数组合并成一个新数组并返回。示例如下:

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = [7, 8, 9];

let newArr = arr1.concat(arr2, arr3);
console.log(newArr); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

以上便是JS数组操作的完整攻略了。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并) - Python技术站

(0)
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • jQuery学习笔记之创建DOM元素

    jQuery学习笔记之创建DOM元素 什么是DOM DOM (Document Object Model),文档对象模型,是W3C组织推荐的处理XML和HTML文档的标准编程接口。DOM将HTML或XML文档表示为节点与对象的组合,开发者可以使用JavaScript、VBScript等脚本语言对其进行操作。 在jQuery中,大量使用DOM元素操作,例如:创…

    JavaScript 2023年6月10日
    00
  • WebRTC媒体权限申请getUserMedia实例详解

    WebRTC媒体权限申请getUserMedia实例详解 WebRTC 是一个支持浏览器进行实时语音和视频通信的技术,该技术支持在浏览器中进行点对点的实时通信,如音视频聊天、语音识别等。其中要求涉及到媒体流的获取、媒体流的处理和媒体流的展示,其中媒体权限申请可以使用 getUserMedia 接口实现。 什么是 getUserMedia 接口? getUse…

    JavaScript 2023年6月11日
    00
  • JS中Eval解析JSON字符串的一个小问题

    当 JavaScript 中需要解析 JSON 字符串时,通常使用 JSON.parse() 方法。但是有些时候,我们可能想要使用 eval() 函数来解析 JSON 字符串。在这种情况下,有一个小问题需要注意。 问题是,如果 JSON 字符串中含有 JavaScript 关键字或保留字,eval() 函数可能会抛出一个意外的错误。因此,我们需要特别处理这种…

    JavaScript 2023年5月27日
    00
  • vue整合百度地图显示指定地点信息

    下面我会为您介绍Vue整合百度地图显示指定地点信息的完整攻略。 步骤一:申请百度地图开发者账号和JavaScript API密钥 首先需要申请百度地图开发者账号,然后在开发者中心获取JavaScript API密钥。 步骤二:安装百度地图JavaScript API SDK 在Vue项目中使用npm安装百度地图JavaScript API SDK,并在Vue…

    JavaScript 2023年5月19日
    00
  • 给html超链接设置事件不使用href来完成跳

    要给HTML超链接设置事件,不使用href来完成跳转,可以使用JavaScript中的event.preventDefault()方法来阻止默认行为,然后使用window.location方法来完成跳转。 具体实现步骤如下: 在HTML中设置一个<a>标签,没有href属性,但需要在标签中添加一个唯一标识符,如id属性,以便于在JavaScrip…

    JavaScript 2023年6月10日
    00
  • Bootstrap零基础学习第一课之模板

    那么我们来详细讲解一下 “Bootstrap零基础学习第一课之模板” 的完整攻略。 简介 Bootstrap 是 Twitter 推出的一个用于前端页面开发的框架,使用 Bootstrap 可以快速搭建出漂亮的响应式页面,很多网站都采用了 Bootstrap。Bootstrap 因其易学易用和功能强大而备受欢迎,是很多前端工程师的必备技能之一。 在开始我们的…

    JavaScript 2023年5月19日
    00
  • Bootstrap表单Form全面解析

    Bootstrap表单Form全面解析 什么是Bootstrap表单Form? Bootstrap表单Form是Bootstrap前端框架中一个用于构建表单的组件,用于简化表单的开发过程。通过使用Bootstrap表单Form,开发者可以快速构建出漂亮、易用、兼容性好的表单,提高工作效率。Bootstrap表单Form主要包括水平布局和垂直布局两种形式,以及…

    JavaScript 2023年6月10日
    00
  • vue+vant使用图片预览功能ImagePreview的问题解决

    下面是关于“vue+vant使用图片预览功能ImagePreview的问题解决”的完整攻略: 前言 图片预览是一项非常常见的功能,在网页设计与开发中经常会用到。在Vue项目中,由于拥有大量高性能的组件库,开发图片预览功能变得异常简单,其中Vant就是一个非常优秀的Vue组件库之一。 在使用Vant时,我们可以很简单地使用其中提供的ImagePreview组件…

    JavaScript 2023年6月11日
    00
合作推广
合作推广
分享本页
返回顶部