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']
三、数组操作方法
-
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
-
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']
-
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]
-
pop()
:移除数组最后一个元素,返回被移除的元素。let arr = [1, 2, 3, 4, 'a']; let lastElement = arr.pop(); console.log(lastElement); // 输出 'a'(被移除的元素) console.log(arr); // 输出 [1, 2, 3, 4]
-
unshift()
:向数组头部添加元素。let arr = [1, 2, 'A']; arr.unshift(0, 5); console.log(arr); // 输出 [0, 5, 1, 2, 'A']
-
shift()
:移除数组第一个元素。let arr = [1, 2, 'A']; let firstElement = arr.shift(); console.log(firstElement); // 输出 1(被移除的元素) console.log(arr); // 输出 [2, 'A']
-
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]
-
reverse()
:反转数组。let arr = ['one', 'two', 'three']; arr.reverse(); console.log(arr); // 输出 ['three', 'two', 'one']
-
splice()
:从指定索引开始删除若干元素,再添加若干元素。let arr = ['HuaWei', 'Xiaomi', 'OnePlus', 'Apple']; arr.splice(3, 1, 'vivo', 'oppo'); // 从索引3开始删除1个元素,添加2个新元素 console.log(arr); // 输出 ['HuaWei', 'Xiaomi', 'OnePlus', 'vivo', 'oppo']
-
concat()
:连接多个数组,返回新数组。不会修改原数组。let arr1 = ['a', 'b']; let arr2 = arr1.concat(['c', 'd']); console.log(arr2); // 输出 ['a', 'b', 'c', 'd'] console.log(arr1); // 原数组不变:['a', 'b']
-
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}同学