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 获取时间间隔实现代码

    获取时间间隔是在 Web 开发中比较常见的需求,例如计算两个时间之间的间隔、统计页面加载时间等,以下是详细的实现代码攻略: 获取当前时间的时间戳 在 JavaScript 中获取当前时间的时间戳可以使用 Date 对象的 getTime() 方法: // 获取当前时间的时间戳(毫秒数) var now = Date.now(); // 或者 var now …

    JavaScript 2023年5月27日
    00
  • 利用js-cookie实现前端设置缓存数据定时失效

    利用js-cookie实现前端设置缓存数据定时失效的步骤如下: 第一步:安装和引入js-cookie 在使用js-cookie之前,需要在你的项目中安装它。你可以通过npm或者使用CDN的方式安装js-cookie。 在实际使用时,需要在你的HTML文件中引入js-cookie,例如: <script src="js-cookie.js&qu…

    JavaScript 2023年6月11日
    00
  • 编写高性能JavaScript(译)

    下面就为您详细讲解“编写高性能JavaScript(译)”的完整攻略。 一、前言 JavaScript 是当前最流行的编程语言之一,但它的性能往往会成为我们的瓶颈。而编写高性能的 JavaScript 可以节省服务器资源、提高用户体验。本攻略将为大家介绍如何编写高性能 JavaScript 的方法和技巧。 二、准备工作 编写高性能 JavaScript 的前…

    JavaScript 2023年5月18日
    00
  • JavaScript高级程序设计 阅读笔记(十九) js表格排序

    下面是针对”JavaScript高级程序设计 阅读笔记(十九) js表格排序”的完整攻略: 阅读笔记简介 这篇阅读笔记主要讲解了如何使用JavaScript进行表格排序。通过这篇笔记,我们可以学习到如何使用JavaScript实现表格排序的几种方式,包括基于DOM操作、使用jQuery库、第三方SortableJS库和自定义tableSorter库等。 方法…

    JavaScript 2023年5月27日
    00
  • location.hash保存页面状态的技巧

    当我们需要保存页面状态,以便于后续操作时,可以借助浏览器提供的location.hash协议来实现。下面,让我详细讲解一下“location.hash保存页面状态的技巧”的完整攻略。 什么是location.hash location.hash指的是URL中#及其后面的内容。比如,http://www.example.com/#section1中的#sect…

    JavaScript 2023年6月11日
    00
  • jquery对象和javascript对象即DOM对象相互转换

    将jQuery对象转换为DOM对象可以使用get()或[index]方法,将DOM对象转换成jQuery对象可以使用$()或jQuery()方法进行转换。 示例1:将jQuery对象转换成DOM对象 // 创建jQuery对象 var $elem = $(‘<div>’, {text: ‘Hello World!’}); // 将jQuery对象…

    JavaScript 2023年5月27日
    00
  • jquery实现浮动在网页右下角的彩票开奖公告窗口代码

    下面我将详细讲解“jquery实现浮动在网页右下角的彩票开奖公告窗口代码”的攻略。 基本思路 我们的目标是实现一个浮动在网页右下角的彩票开奖公告窗口。具体实现思路如下: 在页面底部右下角添加一个固定宽度和高度的 div 元素,设置其 position 属性为 fixed,bottom 和 right 属性为 0,这样就可以让该元素始终浮动在页面的右下角。 在…

    JavaScript 2023年6月11日
    00
  • Android应用开发之代码混淆

    Android 应用开发之代码混淆 1.代码混淆的作用 代码混淆可以将原有 Java 代码反编译成的暴露的对应 Java 原代码格式的 Java 文件进行二次加密,改变其结构,提高代码保密性和防止逆向破解的能力。 在 Android 应用开发中,只编写 Java 代码是不够的。Android 应用也会包含 XML 、资源文件、native 库和其他二进制文件…

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