JS 操作Array数组的方法及属性实例解析

JS 操作Array数组的方法及属性实例解析

在JavaScript中,数组(Array)是一种非常常见的数据结构,它能够存储多个值,并且可以动态地添加、删除、修改元素。本文将详细讲解JavaScript中操作Array数组的方法及属性。

创建数组

在JavaScript中,可以使用[]new Array()两种语法创建一个数组。其中,[]更为常见。

// 创建数组
const arr1 = [1, 2, 3, 4, 5];
const arr2 = new Array(6, 7, 8, 9, 10);

访问数组

在JavaScript中,可以使用下标来访问数组中的元素。数组下标从0开始,以此类推。

// 访问数组元素
console.log(arr1[0]); // 输出1
console.log(arr1[4]); // 输出5

Array数组的方法

JavaScript为数组提供了很多操作方法,下面列出常用方法并示范其使用。

push

push方法会在数组末尾添加一个元素,并返回新的数组长度。

// push方法
const arr1 = [1, 2, 3];
const length = arr1.push(4);
console.log(arr1); // 输出[1, 2, 3, 4]
console.log(length); // 输出4

pop

pop方法会删除数组末尾的一个元素,并返回该元素的值。

// pop方法
const arr1 = [1, 2, 3];
const value = arr1.pop();
console.log(arr1); // 输出[1, 2]
console.log(value); // 输出3

shift

shift方法会删除数组首位的一个元素,并返回该元素的值。

// shift方法
const arr1 = [1, 2, 3];
const value = arr1.shift();
console.log(arr1); // 输出[2, 3]
console.log(value); // 输出1

unshift

unshift方法会在数组首位添加一个元素,并返回新的数组长度。

// unshift方法
const arr1 = [1, 2, 3];
const length = arr1.unshift(0);
console.log(arr1); // 输出[0, 1, 2, 3]
console.log(length); // 输出4

splice

splice方法可以实现删除、插入和替换数组元素的操作。

// splice方法
const arr1 = [1, 2, 3, 4, 5];
// 删除从下标为2开始的2个元素,并添加两个元素
arr1.splice(2, 2, "a", "b");
console.log(arr1); // 输出[1, 2, "a", "b", 5]

slice

slice方法可以截取数组中的一段,返回一个新的数组。

// slice方法
const arr1 = [1, 2, 3, 4, 5];
// 截取下标为1到3的元素,不包括下标为3的元素
const newArr1 = arr1.slice(1, 3);
console.log(newArr1); // 输出[2, 3]

concat

concat方法可以将多个数组合并成一个新的数组。

// concat方法
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = arr1.concat(arr2);
console.log(arr3); // 输出[1, 2, 3, 4, 5, 6]

join

join方法可以将数组中的元素拼接成一个字符串。

// join方法
const arr1 = [1, 2, 3];
const str1 = arr1.join(",");
console.log(str1); // 输出"1,2,3"

数组属性

JavaScript还为数组提供了一些属性,下面列出常用属性。

length

length属性表示数组的长度。

// length属性
const arr1 = [1, 2, 3];
console.log(arr1.length); // 输出3

isArray

isArray属性可以用来判断一个变量是否为数组。

// isArray属性
const arr1 = [1, 2, 3];
console.log(Array.isArray(arr1)); // 输出true
const str1 = "abc";
console.log(Array.isArray(str1)); // 输出false

示例一:在数组中查找特定元素

const arr1 = [1, 2, 3, 4, 5];
const findNum = (arr, num) => {
  for (let i = 0; i < arr.length; i++) {
    if (arr[i] === num) {
      return i;
    }
  }
  return -1;
};
console.log(findNum(arr1, 3)); // 输出2
console.log(findNum(arr1, 6)); // 输出-1

示例二:求取平均数

const arr1 = [1, 2, 3, 4, 5];
const average = (arr) => {
  let sum = 0;
  for (let i = 0; i < arr.length; i++) {
    sum += arr[i];
  }
  return sum / arr.length;
};
console.log(average(arr1)); // 输出3

结语

以上即为JavaScript中操作Array数组的方法及属性,希望对您有所帮助。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JS 操作Array数组的方法及属性实例解析 - Python技术站

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

相关文章

  • JS函数验证总结(方便js客户端输入验证)

    JS函数验证是用JavaScript编写的表单客户端输入验证,目的是方便用户输入验证,减少对服务器沟通请求,缩短请求响应时间和提高用户体验。下面是JS函数验证的完整攻略: 1.概述 JS函数验证是对用户的输入数据预先验证,验证的方式可以使用JS正则表达式、API等方式,可以在用户提交表单到服务器之前,即在本地网页浏览器中对数据进行验证。这样可以减少不必要的请…

    JavaScript 2023年6月11日
    00
  • js document.getElementsByClassName的使用介绍与自定义函数

    让我们来详细讲解一下 “document.getElementsByClassName” 的使用介绍与自定义函数的完整攻略。 1. document.getElementsByClassName() 的介绍 document.getElementsByClassName() 是一个 JavaScript 函数,用于获取页面上所有指定 class 属性的元素。…

    JavaScript 2023年6月10日
    00
  • yepnope.js 异步加载资源文件

    yepnope.js是一个轻量级的异步资源加载工具,可以帮助我们在加载网页中的资源文件时,进行更灵活高效的操作。下面我为大家介绍一下如何使用yepnope.js进行异步加载资源文件的操作。 安装yepnope.js yepnope.js可以通过npm安装,也可以直接在HTML文件中通过CDN链接引入。 <!DOCTYPE html> <ht…

    JavaScript 2023年5月27日
    00
  • jQuery插件Validation表单验证详解

    jQuery插件Validation表单验证详解 表单验证是Web开发中非常重要的一环,jQuery插件Validation就是基于jQuery实现的一款表单验证插件,非常方便实用。本篇文章将会详细讲解jQuery插件Validation的使用方法,以及常见的验证规则和自定义验证规则。 页面引入jQuery和jQuery Validation插件 首先,将j…

    JavaScript 2023年6月10日
    00
  • Vue中如何把hash模式改为history模式

    Vue中可以通过修改路由模式的方式,从默认的hash模式改为history模式。下面是具体的操作步骤: 1. 修改路由模式 在Vue项目中找到router文件夹,打开index.js文件,找到路由实例的创建代码部分(通常代码会类似如下): import Vue from ‘vue’ import Router from ‘vue-router’ import…

    JavaScript 2023年6月11日
    00
  • BootStrap 动态添加验证项和取消验证项的实现方法

    当我们使用 Bootstrap 进行表单验证时,我们需要使用其提供的表单验证插件来简化验证开发。Bootstrap 的表单验证插件可以被在 HTML 标记中定义的 data 属性触发,例如 required、pattern 和 minlength。但是我们也需要动态地添加或取消这些验证项。 下面是Bootstrap动态添加验证项的实现方法: 动态添加 req…

    JavaScript 2023年6月10日
    00
  • javascript事件绑定学习要点

    当我们需要对网页中的某些元素进行交互操作时,Javascript 中常用的方法是事件绑定。下面是学习 Javascript 事件绑定时需要掌握的要点: 1. 什么是事件绑定? 事件绑定(Event binding) 是指为特定的事件类型和元素绑定一个事件处理器,当特定事件在特定元素上发生时,事件处理器会被自动调用。 2. 事件绑定的方法 Javascript…

    JavaScript 2023年6月10日
    00
  • javaScript日期工具类DateUtils详解

    JavaScritp日期工具类DateUtils详解 概述 JavaScript是一种广泛使用的动态编程语言,该语言可以用于浏览器和Node.js环境。在使用JavaScript开发web应用程序的过程中,日期处理是一个很常见和常用的功能。JavaScript内置有Date对象,而DateUtils是一种自定义的日期工具类,它提供了一系列有用的日期处理函数。…

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