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

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日

相关文章

  • vue前端路由以及vue-router两种模式实例详解

    Vue前端路由和Vue-Router两种模式实例详解 前置知识 在深入理解本文内容前,你需要掌握以下技术: Vue.js的基础知识 编写和理解Vue组件 熟悉Vue.js中template、script和style标签三者之间的关系 Vue前端路由 前端路由是一种在单页面应用程序(SPA)中切换视图的技术。一般情况下,前端路由的核心技术是修改浏览器url,以…

    JavaScript 2023年6月11日
    00
  • SVG描边动画

    下面是关于“SVG描边动画”的完整攻略。 1. 什么是SVG描边动画? SVG描边动画指的是利用SVG的path路径元素来创建描边动画效果。通常,SVG的path路径元素可以表示成简单的连续线或复杂的曲线,而SVG描边动画则可以让这些线条按照一定的顺序绘制出来,从而创造出动画效果。 2. 如何实现SVG描边动画? 下面是一个基本的SVG描边动画示例: &lt…

    JavaScript 2023年6月11日
    00
  • 获取input标签的所有属性的方法

    获取input标签的所有属性的方法可以基于JavaScript实现。主要流程包括获取input标签、获取input标签的所有属性以及遍历输出所有属性。具体步骤如下: 步骤 第一步:获取input标签 首先,我们需要获取input标签元素。可以通过document.querySelector(selector)获取: const inputElement = …

    JavaScript 2023年6月11日
    00
  • JS产生随机数的几个用法详解

    JS 产生随机数的几个用法详解 在前端开发中,生成随机数是常见的需求。在 JavaScript 中,我们有很多不同的方式来生成随机数,接下来将详细介绍常见的几种方式。 1. Math.random()方法 Math.random() 方法是 JavaScript 中生成伪随机数的默认方法。可以使用以下代码来生成 0 至 1 之间的随机小数。 const ra…

    JavaScript 2023年5月28日
    00
  • 被遗忘的javascript的slice() 方法

    下面我为大家讲解一下”被遗忘的JavaScript的slice() 方法”。 什么是slice()方法? slice()方法是JavaScript数组中的一个方法,用于返回一个从指定开始下标到结束下标(不包括结束下标)的子数组,并不会影响到原数组。 slice()方法的语法 array.slice(start, end) 其中start和end都是可选参数,…

    JavaScript 2023年5月27日
    00
  • 配合AJAX天气预报的webService 之asp

    下面是配合AJAX天气预报的webService之ASP的完整攻略: 1. 确认webService接口地址 首先,需要确定使用的天气预报webService接口地址。例如,我们使用的是中国天气网的API。在此基础上,可以根据实际需求自行寻找合适的接口。 2. 创建ASP页面 接着,创建一个名为“weather.asp”的ASP页面,用于提供与天气预报相关的…

    JavaScript 2023年6月11日
    00
  • 微信小程序 animation API详解及实例代码

    关于“微信小程序 animation API详解及实例代码”的完整攻略,我将从以下几个方面进行详细讲解: 介绍animation API的基本用法 animation API中常用的函数与属性 对animation API进行示例练习,包括动画样式的切换以及动画的时序控制 实例代码演示 1. animation API的基本用法 animation可以实现在…

    JavaScript 2023年6月11日
    00
  • 实用的Javascript调试技巧整理

    实用的Javascript调试技巧整理 在开发过程中,Javascript调试技巧是非常重要的一部分。好的调试技巧能够极大提升开发的效率,排除隐藏的bug。本文将介绍一些实用的Javascript调试技巧,它们可以帮助你快速找到问题并解决它们。 1. 使用console调试 使用console输出变量、对象和函数的细节是最基本和最常用的调试技巧之一。cons…

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