JavaScript Array(数组) 对象


直接回答

JavaScript Array(数组)对象是用于存储多个值的特殊对象。以下是关于 JavaScript 数组的关键点:

  • 数组用于在一个变量中存储多个值,索引从 0 开始。
  • 可以包含不同类型的数据,如字符串、数字、对象等。
  • 支持多种创建方式,包括数组字面量和构造函数。
  • 提供丰富的方法,如 push()pop()map() 等,用于操作和遍历。

创建数组

  • 使用数组字面量:var arrayName = [item1, item2, item3];(推荐)。
  • 使用 Array 构造函数:var arrayName = new Array(item1, item2, item3);

访问和修改

  • 访问元素:arrayName[index],如 arrayName[0] 获取第一个元素。
  • 修改元素:arrayName[index] = newValue;

常用方法

  • length:返回数组长度。
  • push():在末尾添加元素;pop():删除末尾元素。
  • 迭代方法如 forEach()map() 用于遍历和处理。

更多详情可参考 MDN Web Docs – ArrayRunoob – JavaScript Array 对象W3School – JavaScript 数组


详细报告

JavaScript Array(数组)对象是 JavaScript 中用于存储有序集合的内置对象,广泛用于管理多个值。以下是对 JavaScript 数组的详细讲解,基于可靠的中文资源的研究和总结,旨在为用户提供全面的理解。

概述

JavaScript 数组是一种特殊的对象,用于存储多个值。这些值可以是任何数据类型,包括字符串、数字、对象,甚至其他数组。数组是有序的,元素通过索引访问,索引从 0 开始。数组是可调整大小的,长度可以动态变化,适合各种数据处理场景。

创建数组

创建 JavaScript 数组有几种方式:

  1. 数组字面量表示法
  • 语法:var arrayName = [item1, item2, item3];
  • 示例:var fruits = ["Apple", "Orange", "Plum"];
  • 这种方法简单直观,推荐用于大多数场景,支持多行声明,空格和换行不影响。
  1. 使用 Array 构造函数
  • 语法:var arrayName = new Array(item1, item2, item3);
  • 示例:var cars = new Array("Saab", "Volvo", "BMW");
  • 如果只传递一个数字参数,new Array(number) 会创建一个长度为 number 的数组,元素为 undefined,如 new Array(3) 创建 [undefined, undefined, undefined]
  • 注意:不推荐使用构造函数,因为容易出错,且数组字面量更简洁。
  1. 使用 Array.of() 方法(ECMAScript 2015 引入):
  • 语法:var arrayName = Array.of(item1, item2, item3);
  • 示例:var numbers = Array.of(1, 2, 3);
  • 这种方法确保参数被正确转换为数组,适合动态创建。

访问和修改元素

  • 访问元素:使用方括号和索引,arrayName[index]。例如,fruits[0] 返回 “Apple”。
  • 修改元素arrayName[index] = newValue;,如 fruits[0] = "Mango";
  • 添加元素
  • 使用 push() 方法在数组末尾添加:fruits.push("Lemon");
  • 使用 unshift() 方法在数组开头添加:fruits.unshift("Kiwi");
  • 直接通过索引添加:fruits[fruits.length] = "Lemon";,但注意高索引(如 fruits[6] = "Lemon";)会创建“空洞”,中间元素为 undefined
  • 删除元素
  • 使用 pop() 删除末尾元素:fruits.pop();
  • 使用 shift() 删除开头元素:fruits.shift();
  • 使用 splice() 删除指定位置的元素:fruits.splice(1, 1);(从索引 1 删除 1 个元素)。

数组属性

  • length:返回数组中的元素数量。例如,var len = fruits.length;,如果 fruits = ["Banana", "Orange", "Apple", "Mango"],则 len = 4
  • prototype:允许为所有数组添加自定义方法,如 Array.prototype.myUcase = function() { for (i=0; i<this.length; i++) { this[i] = this[i].toUpperCase(); } };

数组方法

JavaScript 数组提供了丰富的方法,用于操作、查询和遍历数组。以下是分类和详细说明:

修改数组的方法
  • push(element1, ..., elementN):在数组末尾添加元素,返回新长度。
  • pop():删除并返回数组末尾的元素。
  • shift():删除并返回数组开头的元素。
  • unshift(element1, ..., elementN):在数组开头添加元素,返回新长度。
  • splice(start, deleteCount, item1, ..., itemN):在指定位置添加或删除元素,返回被删除的元素数组。
  • reverse():反转数组元素的顺序,返回修改后的数组。
  • sort([compareFunction]):按升序排序,可自定义比较函数,返回排序后的数组。
不修改数组的方法
  • slice(start, end):返回从 start 到 end(不包括 end)的一个浅拷贝,返回新数组。
  • concat(array1, ..., arrayN):合并当前数组与参数数组,返回新数组。
  • join(separator):将所有元素连接成字符串,separator 为分隔符(默认逗号),返回字符串。
迭代方法
  • forEach(callback(element, index, array), thisArg):对每个元素执行回调函数,无返回值。
  • map(callback(element, index, array), thisArg):创建新数组,元素为回调函数处理后的值。
  • filter(callback(element, index, array), thisArg):创建新数组,包含通过回调测试的元素。
  • reduce(callback(accumulator, currentValue, index, array), initialValue):对数组元素执行回调函数,归并为单个值,需提供初始值。
搜索和位置方法
  • indexOf(searchElement, fromIndex):返回指定元素在数组中的第一个索引,从 fromIndex 开始搜索,返回 -1 若未找到。
  • lastIndexOf(searchElement, fromIndex):返回指定元素在数组中的最后一个索引,从 fromIndex 开始反向搜索,返回 -1 若未找到。
  • includes(searchElement, fromIndex):判断数组是否包含指定元素,从 fromIndex 开始搜索,返回布尔值。
其他方法
  • every(callback(element, index, array), thisArg):测试数组所有元素是否满足条件,返回布尔值。
  • some(callback(element, index, array), thisArg):测试数组是否有元素满足条件,返回布尔值。
  • find(callback(element, index, array), thisArg):返回第一个满足条件的元素,若无则返回 undefined
  • findIndex(callback(element, index, array), thisArg):返回第一个满足条件的元素的索引,若无则返回 -1。

以下是修改方法与非修改方法的对比表:

修改方法描述非修改等价方法
push(v1, v2)在末尾添加元素concat([v1, v2])
pop()删除末尾元素slice(0, -1)
shift()删除开头元素slice(1)
unshift(v1, v2)在开头添加元素toSpliced(0, 0, v1, v2)
reverse()反转数组toReversed()
sort()排序数组toSorted()
splice()添加/删除元素toSpliced()

特殊注意事项

  • 索引:JavaScript 数组的索引必须是非负整数,不能使用任意字符串作为索引。若尝试 array["name"] = "value",实际上是给对象添加属性,而不是数组元素。
  • 空洞:如果在赋值时跳过索引,如 array[5] = "value";,前面的索引(0-4)为 undefined,形成“空洞”。这可能影响某些方法的处理,如 forEach() 会跳过空洞。
  • 浅拷贝:数组的复制操作(如 slice()concat())创建浅拷贝,仅复制引用,嵌套对象不会深拷贝。
  • 关联数组:JavaScript 不支持关联数组,使用命名索引(如 person["firstName"] = "Bill";)会将数组视为对象,length 属性可能返回 0。

检查变量是否为数组

  • 推荐方法Array.isArray(variable),在 ECMAScript 5 中引入,适用于现代浏览器,返回布尔值。
  • 旧方法
  • 检查构造函数:variable.constructor === Array,但可能受环境影响。
  • 使用 instanceofvariable instanceof Array,但在多窗口或框架中可能不准确。
  • 自定义函数:function isArray(x) { return x.constructor.toString().indexOf("Array") > -1; },但不推荐。

资源推荐

以下是关于 JavaScript 数组的优质中文资源:

这些资源涵盖了从基础到高级的知识点,确保用户能找到适合的学习材料。

总结

JavaScript Array 对象是处理有序集合的强大工具,支持多种创建和操作方式。用户可通过上述中文资源获取详细讲解,结合实际需求选择合适的方法,确保数组操作的准确性和高效性。


关键引文


发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注