JS数组Array常用方法汇总+实例

yizhihongxing

JS数组Array常用方法汇总+实例

在JavaScript中,数组是一种非常重要的数据类型。它可以用来存储多个值,并且可以通过下标来访问和修改数组中的元素。JavaScript提供了很多常用的数组方法,可以使数组的操作更加方便快捷。下面我们就来详细讲解一下这些常用的数组方法。

一、创建数组

要创建一个数组,有多种方式:

1. 直接声明

let arr1 = []; //空数组
let arr2 = [1, 2, 3]; //包含3个元素的数组

2. 使用构造函数

let arr3 = new Array(); //空数组
let arr4 = new Array(1, 2, 3); //包含3个元素的数组

3. 使用Array.from()方法

let arr5 = Array.from({length: 3}, (value, index) => index + 1); //值为 [1, 2, 3] 的数组

二、访问数组元素

要访问一个数组的元素,可以使用下标。下标从0开始,表示数组中的第1个元素。

let arr = [1, 2, 3];
console.log(arr[0]); //输出1
console.log(arr[1]); //输出2
console.log(arr[2]); //输出3

三、数组常用方法

下面是一些常用的数组方法。

1. push()和pop()

push()方法可以在数组的末尾添加一个或多个元素,返回值为新数组的长度。pop()方法可以将数组末尾的元素删除,并返回删除的元素。

let arr = [1, 2, 3];
arr.push(4, 5); //添加4和5,arr的值为[1,2,3,4,5]
let popValue = arr.pop(); //删除5,arr的值为[1,2,3,4],popValue为5

2. shift()和unshift()

shift()方法可以删除数组的第1个元素,并返回删除的元素。unshift()方法可以在数组的开头添加一个或多个元素,并返回新数组的长度。

let arr = [1, 2, 3];
let shiftValue = arr.shift(); //删除1,arr的值为[2,3],shiftValue为1
arr.unshift(0); //添加0,arr的值为[0,2,3]

3. slice()

slice()方法可以返回指定位置的一个或多个元素组成的新数组,不会修改原数组。

let arr = [1, 2, 3, 4, 5];
let subArr = arr.slice(1, 4); //截取2、3、4,subArr的值为[2,3,4],arr的值不变

4. splice()

splice()方法可以删除数组中的一个或多个元素,并可以在指定位置插入一个或多个元素。返回值为被删除的元素组成的数组。

let arr = [1, 2, 3, 4, 5];
let delArr = arr.splice(1, 3, 'a', 'b'); //删除2、3、4,插入'a'、'b',arr的值为[1,'a','b', 5],delArr的值为[2,3,4]

5. concat()

concat()方法可以将多个数组合并成一个新数组,不会修改原数组。

let arr1 = [1, 2];
let arr2 = [3, 4];
let arr3 = arr1.concat(arr2); //arr3的值为[1,2,3,4],arr1和arr2的值不变

6. join()

join()方法可以将数组中的所有元素按照指定的分隔符连接为一个字符串。

let arr = [1, 2, 3];
let str = arr.join('-'); //str的值为'1-2-3'

四、实例说明

下面我们来看两个实例。

1. 将数组中的元素乘以2

let arr = [1, 2, 3, 4, 5];
for(let i = 0; i < arr.length; i++){
  arr[i] = arr[i] * 2;
}
console.log(arr); //输出[2, 4, 6, 8, 10]

2. 查找数组中的最大值和最小值

let arr = [1, 2, 3, 4, 5];
let max = arr[0], min = arr[0];
for(let i = 1; i < arr.length; i++){
  if(arr[i] > max){
    max = arr[i];
  }
  if(arr[i] < min){
    min = arr[i];
  }
}
console.log('最大值为:' + max + ',最小值为:' + min); //输出最大值为5,最小值为1

五、总结

通过本文的介绍,我们了解了数组的常见操作和实例应用。数组是JavaScript中非常常用的一种数据类型,对于初学者来说,掌握好数组的相关方法是非常重要的。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JS数组Array常用方法汇总+实例 - Python技术站

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

相关文章

  • 清除WKWebView cookies的方法

    当我们使用WKWebView加载网页时,有时候需要清除已有的cookies。下面我将详细讲解清除WKWebView cookies的方法。 1. 使用HTTPCookieStorage清除 可以使用HTTPCookieStorage类来清除cookies。这个类是管理存储在客户端的http cookies的一个单例类。下面是代码示例: //得到单例对象 le…

    JavaScript 2023年6月11日
    00
  • React-Native之定时器Timer的实现代码

    下面是关于“React-Native之定时器Timer的实现代码”的完整攻略: 什么是定时器? 在React-Native中,我们可以使用定时器来处理一些需要在指定时间间隔内执行的任务。React-Native提供了两种类型的定时器:基于时间间隔的定时器和基于帧率的定时器。此处我们重点讲解基于时间间隔的定时器。 基于时间间隔的定时器用法 React-Nati…

    JavaScript 2023年6月11日
    00
  • js纯前端实现腾讯cos文件上传功能的示例代码

    这里是关于“js纯前端实现腾讯cos文件上传功能的示例代码”的完整攻略。 1. 腾讯云对象存储(COS) 腾讯云对象存储(COS)是一种高扩展性、低时延、高可靠、海量存储、低成本的云存储服务。通过 COS API,开发者可以将数据存储在腾讯云内,并且可以直接在自己的应用程序中对这些数据进行访问和操作。COS 服务提供了丰富的 Web API 接口,方便开发者…

    JavaScript 2023年5月27日
    00
  • jquery使用each方法遍历json格式数据实例

    下面我将详细讲解“jquery使用each方法遍历json格式数据实例”的完整攻略。 1. 前置知识 在讲解jquery使用each方法遍历json格式数据之前,需要先掌握以下基础知识: JSON格式的概念及其特点 jQuery库的引入方法 jQuery的选择器和DOM操作方法 2. 使用each方法遍历JSON格式数据的步骤 2.1 将JSON格式数据转化…

    JavaScript 2023年5月27日
    00
  • Javascript Date getTimezoneOffset() 方法

    JavaScript 中的 getTimezoneOffset() 方法用于获取本地时间与 UTC 时间之间的时差,以分钟为单位。在本教程中,我们将详细介绍 getTimezoneOffset() 方法的使用方法。 getTimezoneOffset() 方法的基本语法如下: date.getTimezoneOffset() 其中,date 是要获取时差的日…

    JavaScript 2023年5月11日
    00
  • JS判断元素是否存在数组中的5种方式总结

    下面是关于“JS判断元素是否存在数组中的5种方式总结”的详细讲解攻略: 1. 使用indexOf方法 indexOf()方法是用来查找一个元素在数组中第一次出现的位置。如果该元素存在,indexOf()方法会返回该元素在数组中的索引值,否则会返回-1。 下面是一个使用indexOf()方法来判断数组中是否包含某个元素的示例: const arr = [1, …

    JavaScript 2023年5月27日
    00
  • JavaScript常用字符串与数组扩展函数小结

    JavaScript是一门强大的语言,它提供了大量的内置函数,其中包括对字符串和数组的操作。除此之外,还有很多扩展函数可以用于处理字符串和数组。 本文将对常用的JavaScript字符串和数组扩展函数做一个小结。 JavaScript字符串扩展函数 1. startsWith() startsWith()方法用于判断一个字符串是否以指定的字符串开头。如果是,…

    JavaScript 2023年5月27日
    00
  • js学使用setTimeout实现轮循动画

    接下来我将分享使用setTimeout实现轮循动画的攻略。 什么是setTimeout函数? 在介绍如何使用setTimeout实现轮循动画之前,我们需要了解一下什么是setTimeout函数。 setTimeout函数是JavaScript中一个非常重要的函数,它的作用是在指定的时间后执行一段指定的函数。由于setTimeout是异步函数,所以它不会影响当…

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