JavaScript中的数组(一)

128 阅读4分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第 3 天,点击查看活动详情

数组:可以存储任意类型的数据,可以是字符串、数值、对象等。

创建数组

1、使用new关键字和Array构造函数

  • 创建一个空数组
let colors = new Array(); // []
  • 给Array构造函数传入一个数值 创建指定长度的数组,数组的length属性会被自动创建并设置成这个值
let colors = new Array(20); // [empty × 20]; 
console.log(colors.length); // 20
  • 给Array构造函数传入保存的元素 会创建包含这些元素的数组
let colors = new Array("red", "blue", "green"); 

注意这里会有一个问题:
给Array构造函数传入一个值,如果这值是数值,那么就会创建长度为指定数值的数组;参数如果是其他类型的,则会创建一个只包含这个值的数组。

let colors = new Array(3); // 创建一个包含 3 个元素的数组
let names = new Array("Greg");//创建一个只包含一个元素,即字符串"Greg"的数组

2、使用数组字面量表示发 数组字面量是在中括号中包含以 逗号分隔的元素列表

letcolors=["red","blue","green"]; //创建一个包含3个元素的数组 
let names = []; // 创建一个空数组
let values = [1,2,]; // 创建一个包含 2 个元素的数组

3、 ES6 新增的用于创建数组的静态方法

  • from() 用于将类数组结构转换为数组实例

类数组对象,即任何可迭代的结构, 或者有一个 length 属性 和可索引元素的结构。

还接收第二个可选的映射函数参数

还可以接收第三个可选参数,用于指定映射函 数中 this 的值。但这个重写的 this 值在箭头函数中不适用。

  • of() 用于将一组参数转换为数组实例。

这个方法用于替代在ES6之前常用的Array.prototype.slice.call(arguments),一种异常笨拙的将 arguments 对象转换为数组的写法

数组空位

使用数组字面量初始化数组时,可以使用一串逗号来创建空位(hole)。ECMAScript 会将逗号之间 相应索引位置的值当成空位,ES6 规范重新定义了该如何处理这些空位

ES6 新增方法普遍将这 些空位当成存在的元素,只不过值为 undefined:

由于行为不一致和存在性能隐患,因此实践中要避免使用数组空位。如果确实需要 空位,则可以显式地用 undefined 值代替。

数组索引

要取得或设置数组的值,需要使用中括号并提供相应值的数字索引

let colors = ["red", "blue", "green"]; // 定义一个字符串数组
 alert(colors[0]);// 显示第一项
colors[2] = "black";// 修改第三项
colors[3] = "brown";// 添加第四项

如果索引小于数组包含的元素数,则返回存储在相应位置 的元素;

如果把一个值设置给超过数组最大索引的索引,就像示例中的colors[3],则数组长度会自动扩 展到该索引值加 1 (索引是3,数组长度是4)

数组中元素的数量保存在length属性中, length属性的独特之处在于,它不是只读,可以通过修改length长度,从数组末尾删除或添加元素;添加元素是以undefined填充。

检测数组

  • instanceof 操作符
  • Array.isArray()

如果只有一个全局作用域的话: 使用 instanceof 操作符就可以

if(value instanceof Array) {
    // 操作数组
}

如果网页里有多个框架,则可能涉及两 个不同的全局执行上下文,因此就会有两个不同版本的 Array 构造函数。如果要把数组从一个框架传 给另一个框架,则这个数组的构造函数将有别于在第二个框架内本地创建的数组。

ECMAScript 提供了 Array.isArray()方法。这个方法的目的就是确定一个值是 否为数组,而不用管它是在哪个全局执行上下文中创建的。

if (Array.isArray(value)){ 
    // 操作数组
}

迭代器方法

在 ES6 中,Array 的原型上暴露了3个用于检索数组内容的方法:keys()、values()和 entries()。

  • keys()返回数组索引的迭代器
let arr = [2,3,4,5]
console.log(arr.keys()); // Array Iterator {}  数组索引的迭代器
console.log(Array.from(arr.keys())) //  [0, 1, 2, 3]

for(let item in arr.keys()){
    console.log('item', item)   
}

image.png

  • values()返回数组元素的迭代器
let arr = [2,3,4,5]
console.log(Array.from(arr.values())) //  [2, 3, 4, 5]
  • entries()返回 索引/值对的迭代器
let arr = [2,3,4,5]
console.log(Array.from(arr.entries())) //  [[0, 2], [1, 3], [2, 4], [3, 5]]