JavaScript 数据类型 - 数组

JavaScript 数组

一、数组基础

• 定义：数组是一组按顺序排列的集合，每个值称为元素。JavaScript 的数组可以包含任意数据类型，包括数字、字符串、布尔值、对象、函数等。

• 创建方法：

  • 使用数组字面量（推荐）：let arr = [1, 2, 3.14, 'Hello', null, true];
  • 使用 Array() 构造函数：let arr = new Array(1, 2, 3);
    • 如果只传入一个数字参数，会创建一个指定长度的数组，但数组元素为 undefined：

      let arr = new Array(5); // 创建长度为5的数组，元素为undefined
      console.log(arr); // 输出：[undefined, undefined, undefined, undefined, undefined]
      

• 访问元素：通过索引访问，索引从 0 开始。例如：

  let arr = [1, 2, 3.14, 'Hello', null, true];
  console.log(arr[0]); // 输出 1
  console.log(arr[5]); // 输出 true
  console.log(arr[6]); // 输出 undefined（索引超出范围）
  

二、数组的常用属性和方法

• length 属性：获取数组的长度。length 属性是动态的，会随着数组内容的变化而变化。

  let arr = [1, 2, 3.14, 'Hello', null, true];
  console.log(arr.length); // 输出 6
  

• 修改数组大小：

  • 直接修改 length 属性可以改变数组大小，但不推荐直接操作，因为这可能导致数据丢失或数组中出现 undefined。

    let arr = [1, 2, 3, 4, 'a'];
    console.log(arr); // 输出：[1, 2, 3, 4, 'a']
    arr.length = 3; // 缩小数组长度
    console.log(arr); // 输出：[1, 2, 3]
    arr.length = 7; // 扩大数组长度
    console.log(arr); // 输出：[1, 2, 3, undefined, undefined, undefined, undefined]
    

• 元素修改：通过索引直接赋值修改数组元素。

  let arr = ['A', 'B', 'C'];
  arr[1] = 99; // 修改索引为1的元素
  console.log(arr); // 输出 ['A', 99, 'C']
  

• 索引超出范围：如果通过索引赋值时，索引超过了当前数组的范围，数组会自动调整大小。

  let arr = ['A', 'B', 'C'];
  arr[5] = 'x'; // 索引5超出了当前范围
  console.log(arr); // 输出 ['A', 'B', 'C', undefined, undefined, 'x']
  

三、数组操作方法

1. indexOf()：查找元素的索引，未找到返回 -1。

   let arr = ['a', 1, '30', 5];
   console.log(arr.indexOf(5)); // 输出 3
   console.log(arr.indexOf('a')); // 输出 0
   console.log(arr.indexOf(2)); // 输出 -1
   

2. slice()：截取数组的一部分，返回新数组。不会修改原数组。

   let arr = [1, 2, 3, 4, 'a'];
   console.log(arr.slice(1)); // 输出 [2, 3, 4, 'a']
   console.log(arr.slice(0, 3)); // 输出 [1, 2, 3]
   console.log(arr); // 原数组不变：[1, 2, 3, 4, 'a']
   

3. push()：向数组末尾添加元素，返回新长度。

   let arr = [1, 2, 3, 4, 'a'];
   console.log(arr.push(5, 6)); // 输出 7（新长度）
   console.log(arr); // 输出 [1, 2, 3, 4, 'a', 5, 6]
   

4. pop()：移除数组最后一个元素，返回被移除的元素。

   let arr = [1, 2, 3, 4, 'a'];
   let lastElement = arr.pop();
   console.log(lastElement); // 输出 'a'（被移除的元素）
   console.log(arr); // 输出 [1, 2, 3, 4]
   

5. unshift()：向数组头部添加元素。

   let arr = [1, 2, 'A'];
   arr.unshift(0, 5);
   console.log(arr); // 输出 [0, 5, 1, 2, 'A']
   

6. shift()：移除数组第一个元素。

   let arr = [1, 2, 'A'];
   let firstElement = arr.shift();
   console.log(firstElement); // 输出 1（被移除的元素）
   console.log(arr); // 输出 [2, 'A']
   

7. sort()：对数组进行排序，默认按 ASCII 码排序，可自定义排序规则。

   let arr = ['A', 1, 'a', 2, 'B'];
   arr.sort();
   console.log(arr); // 输出 [1, 2, 'A', 'B', 'a']
   // 自定义排序规则：按数字大小排序
   let numArr = [3, 1, 4, 1, 5, 9];
   numArr.sort((a, b) => a - b);
   console.log(numArr); // 输出 [1, 1, 3, 4, 5, 9]
   

8. reverse()：反转数组。

   let arr = ['one', 'two', 'three'];
   arr.reverse();
   console.log(arr); // 输出 ['three', 'two', 'one']
   

9. splice()：从指定索引开始删除若干元素，再添加若干元素。

   let arr = ['HuaWei', 'Xiaomi', 'OnePlus', 'Apple'];
   arr.splice(3, 1, 'vivo', 'oppo'); // 从索引3开始删除1个元素，添加2个新元素
   console.log(arr); // 输出 ['HuaWei', 'Xiaomi', 'OnePlus', 'vivo', 'oppo']
   

10. concat()：连接多个数组，返回新数组。不会修改原数组。

    let arr1 = ['a', 'b'];
    let arr2 = arr1.concat(['c', 'd']);
    console.log(arr2); // 输出 ['a', 'b', 'c', 'd']
    console.log(arr1); // 原数组不变：['a', 'b']
    

11. join()：将数组元素用指定字符串连接，返回新字符串。

    let arr = ['A', 'B', 'C', 1, 2, 3];
    console.log(arr.join('-')); // 输出 A-B-C-1-2-3
    

四、多维数组

• 数组的元素可以是另一个数组，形成多维数组。

  let arr = [[1, 2, 3], [400, 500, 600], '-'];
  console.log(arr[1][1]); // 输出 500
  // 遍历多维数组
  for (let i = 0; i < arr.length; i++) {
      if (Array.isArray(arr[i])) { // 检查是否为数组
          for (let j = 0; j < arr[i].length; j++) {
              console.log(arr[i][j]); // 输出每个元素
          }
      } else {
          console.log(arr[i]); // 输出非数组元素
      }
  }
  

五、练习

• 在新生欢迎会上，你已经拿到了新同学的名单，请排序后显示：欢迎XXX，XXX，XXX和XXX同学！：

  let arr = ['小明', '小红', '大军', '阿黄'];
  arr.sort(); // 排序
  let last = arr.pop(); // 获取最后一个元素
  let str = `欢迎${arr.join(',')}和${last}同学