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}同学
posted @ 2025-03-19 22:49  kyle_7Qc  阅读(49)  评论(0)    收藏  举报