javascript之Array 数组对象详解

yizhihongxing

JavaScript之Array数组对象详解

什么是数组

在 JavaScript 中,数组(Array)是一种复合数据类型,用于存储一组有序的数据。可以将数组看作是一个盒子,该盒子中可以存放多个数据,而且这些数据是有序的,通过下标(索引)来访问每一个数据。

数组的创建

JavaScript 中,可以使用两种方式来创建数组:

1. 使用字面量方式创建数组

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

2. 使用 Array 构造函数创建数组

let arr = new Array(1, 2, 3);
console.log(arr); // [1, 2, 3]
console.log(typeof arr); // object

数组的基本操作

访问数组元素

数组的每个元素都有一个对应的下标,下标从 0 开始,以数组的长度减 1 结尾。可以通过下标来访问数组中的元素。

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

修改数组元素

可以通过下标来修改数组中的元素。

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

获取数组长度

可以使用数组的 length 属性来获取数组的长度。

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

添加元素

可以使用数组的 push 方法来在数组的末尾添加一个或多个元素。

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

删除元素

可以使用数组的 pop 方法来删除数组末尾的元素。

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

数组遍历

可以使用 for 循环或 forEach 方法来遍历数组。

let arr = [1, 2, 3];
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

arr.forEach(function(item) {
  console.log(item);
});

数组的高级操作

数组的排序

可以使用数组的 sort 方法来对数组进行排序。默认情况下,该方法使用 ASCII 码对数组进行排序。

let arr = ['banana', 'apple', 'orange'];
arr.sort();
console.log(arr); // ['apple', 'banana', 'orange']

如果需要根据某个特定的条件进行排序,可以传递一个函数给 sort 方法。

let arr = [
  { name: 'Apple', price: 2.5 },
  { name: 'Orange', price: 1.8 },
  { name: 'Banana', price: 3.2 }
];
arr.sort(function(a, b) {
  return a.price - b.price;
});
console.log(arr);
// [
//   { name: 'Orange', price: 1.8 },
//   { name: 'Apple', price: 2.5 },
//   { name: 'Banana', price: 3.2 }
// ]

数组的过滤

可以使用数组的 filter 方法来过滤数组中的元素。

let arr = [1, 2, 3, 4, 5];
let result = arr.filter(function(item) {
  return item % 2 === 0;
});
console.log(result); // [2, 4]

数组的映射

可以使用数组的 map 方法来将数组的每个元素映射为一个新的元素。

let arr = [1, 2, 3];
let result = arr.map(function(item) {
  return item * 2;
});
console.log(result); // [2, 4, 6]

示例说明

实现一个数组去重函数

function unique(arr) {
  let result = [];
  for (let i = 0; i < arr.length; i++) {
    if (result.indexOf(arr[i]) === -1) {
      result.push(arr[i]);
    }
  }
  return result;
}

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

实现一个数组求和函数

function sum(arr) {
  let result = 0;
  for (let i = 0; i < arr.length; i++) {
    result += arr[i];
  }
  return result;
}

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

总结

本文对 JavaScript 中的数组进行了详细的讲解,包括了数组的创建、基本操作、高级操作等内容。具体而言,讨论了数组的定义及创建、访问、修改、长度获取、添加元素、删除元素、遍历、排序、过滤和映射等操作。最后,通过两个示例,加深了对数组操作的理解和运用。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:javascript之Array 数组对象详解 - Python技术站

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

相关文章

  • Ajax提交post请求案例分析

    Ajax提交Post请求的完整攻略 什么是Ajax提交Post请求? Ajax是Asynchronous JavaScript and XML(异步的Javascript和XML)的缩写。它是一种用于创建更快、更好、更友好的Web应用程序的Web开发方法。 使用AJAX可以在不重新加载整个Web页面的情况下更新页面的内容。其中,Ajax的一种常见用法是通过P…

    JavaScript 2023年6月11日
    00
  • javascript的理解及经典案例分析

    JavaScript的理解及经典案例分析 JavaScript是一种轻量级的脚本语言,用于Web页面的动态交互和用户行为的操作。与其他语言相比,JavaScript具有易学易用、灵活性强、适用性广和运行速度较快等优点,因而被广泛应用于Web开发领域。 JavaScript的基本语法和特性 变量和数据类型 在JavaScript中,变量使用var关键字进行声明…

    JavaScript 2023年5月27日
    00
  • web游览器的标签页仿 ios mac 苹果的墓碑机制 (js代码)

    背景: 本来项目开发系统防挂机功能,在其余游览器中均可以使用。但是呢在苹果的safair游览器中会出现几率失效,最后经过排查发现是苹果的墓碑机制导致。即:此标签页活跃,其他标签页假死。然后就导致防挂机失效了。 原理: 假如当前游览器中有3个标签页分别是A,B,C,每个标签页都有倒计时。正常情况下,每个标签页都会倒计时。但是苹果游览器只会有一个标签页A正常倒计…

    JavaScript 2023年5月11日
    00
  • 深入浅析JavaScript字符串操作方法 slice、substr、substring及其IE兼容性

    深入浅析JavaScript字符串操作方法 slice、substr、substring及其IE兼容性 介绍 在JavaScript中,字符串是最常用的数据类型之一,在实际开发中,经常会遇到需要对字符串进行操作的情况。其中,slice、substr、substring是JavaScript内置的三个字符串操作方法,它们可以用来获取、修改字符串中的部分内容。本…

    JavaScript 2023年5月28日
    00
  • js跨域请求数据的3种常用的方法

    下面是详细讲解”js跨域请求数据的3种常用的方法”的攻略: 1. 跨域请求数据的背景 在Web开发的过程中,经常会遇到需要通过js代码来请求数据的情况。我们知道,由于同源策略(Same-origin policy)的限制,不同源(域)之间的js代码请求是受限制的。跨域请求数据就是在解决这个限制的前提下来实现的。 2. 跨域请求数据的3种常用的方法 2.1 J…

    JavaScript 2023年5月27日
    00
  • JS中parseInt()和map()用法分析

    JS中parseInt()和map()用法分析 parseInt() parseInt()是一个全局函数,用于解析字符串并返回整数。该函数接受两个参数:要解析的字符串和一个表示解析进制的参数。 parseInt(string, radix) 其中,string是要转换的字符串,radix是一个可选参数,表示要解析的字符串的进制数。 如果省略radix参数,则…

    JavaScript 2023年5月28日
    00
  • js在HTML的三种引用方式详解

    我来详细讲解“js在HTML的三种引用方式详解”。 什么是js在HTML的三种引用方式 在HTML中,我们可以通过三种不同的方式引入JavaScript代码,让我们的网页拥有更多的交互性和动态效果。这三种引用方式分别是: 内部文件引用:在HTML文件中使用<script>标签引入JavaScript文件; 外部文件引用:在HTML文件中使用&lt…

    JavaScript 2023年5月27日
    00
  • Javascript简单改变表单元素背景的方法

    下面是Javascript简单改变表单元素背景的方法的完整攻略: 1. 选择表单元素 首先,你需要选取需要改变背景的表单元素。可以使用文档对象模型(DOM)通过ID、类名或标签名等属性选择器获取指定的表单元素。 例如,如果有一个输入框的ID为”input-box”,则可以使用以下代码选择该元素: var inputBox = document.getElem…

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