JavaScript教程 - 10 数组

前面我们保存数据的时候，是将数据保存在变量中，如果要保存2个数据，就声明2个变量。或者保存对象的信息，那就需要定义2个属性。

如果要保存100个数据呢，1000个数据......呢？

所以就需要保存数据的集合来保存批量的数据，下面介绍一下数组。

数组就是用来存储多个数据的集合，数组中的数据按照顺序排列的，可以通过索引来访问数组中的元素，索引从0开始。

10.1 数组的基础使用

10.1.1 创建数组

同样，数组和变量一样，在使用之前也要进行声明和初始化，数组变量是引用类型的。

// 创建一个空数组
let array = new Array();
// 创建一个空数组
let numbers = [];

// 创建一个数组，数组的长度为5
let array = new Array(5);

// 创建一个数组，包含一个元素，值为5
let numbers = [5];
// 创建一个数组，其中包含一个元素，值为'5'
let array = new Array('5');
// 创建一个数组，并添加了5个元素
let arra2 = new Array(1, 3, 5, 7, 9);
// 创建了一个数组，并添加了5个元素
let fruits = ['Apple', 'Banana', 'Orange', 2, 5];

• 在创建数组，可以使用 new Array() 或者 [] 的方式来定义。可以创建空数组，也可以创建指定长度的数组，还可以在创建的时候初始化数组中的元素。
• 数组中的元素，数据类型可以是任意的，包括对象和函数，但是尽量让各个元素的数据类型一样，好操作，免得出错。

10.1.2 基础操作

1 获取长度

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

let numbers = [1, 2, 3, 4, 5];
console.log(numbers);  // [1, 2, 3, 4, 5]
console.log("数组长度:" + numbers.length);    // 输出：5

2 访问元素

访问数组元素是使用下标 index 来访问的，从0开始，所以最后一个元素的索引为 数组的长度 - 1。

let numbers = [1, 2, 3, 4, 5];

let firstNum = numbers[0]; // 获取第一个元素
console.log(firstNum); // 输出：1

let lastNum = numbers[numbers.length - 1]; // 获取最后一个元素
console.log(lastNum); // 输出：5

// 修改元素
numbers[0] = 100; // 修改第一个元素的值为100
console.log(numbers[0]); // 100

numbers[2] = 50; // 修改第三个元素的值为50
console.log(numbers[2]); // 50

numbers[numbers.length] = 'Niubi';  // 此时已经越界了，相当于添加数据
console.log(numbers.length);  // 此时数组长度为6了
console.log(numbers);  // [100, 2, 50, 4, 5, 'Niubi']

numbers[100] = 'Doubi';  // 修改下标为100的元素
console.log(numbers.length);  // 此时数组长度为101了
console.log(numbers);  // [100, 2, 50, 4, 5, 'Niubi', 空属性 × 94, 'Doubi']

• 和其他语言不通， JS 中访问数组中的元素不会存在下标越界的问题，如果访问的下标大于等于数组长度，返回的元素数据为 undefined。
• 如果按照下标修改元素，如果下标大于等于数组长度，修改后，数组长度也会发生变化，会变为 下标 + 1 ，新增出来的元素为空，如果按照索引来获取这些元素，返回的值为 undefined 。
• 通过 numbers[numbers.length] 这种方式赋值，其实就相当于在数组最后面添加元素。

在 JS 中，还有更变态的，还可以直接修改数组的长度：

let numbers = [1, 2, 3, 4, 5];
numbers.length = 10;

console.log(numbers.length);  // 10
console.log(numbers);  // [1, 2, 3, 4, 5, 空属性 × 5]
console.log(numbers[7]); // undefined

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

• 如果是扩大数组的长度，那么后面的元素为空，获取就是 undefined，虽然获取元素的值为 undefined，但是和直接给元素赋值为 undefined 还是有区别的，遍历数组的时候再讲；
• 如果是缩小数组的长度， 相当于把后面的元素删掉。

内容未完......

查看完整内容 →