JavaScript入门基础篇-day03

一、为什么需要数组？

在我们正式学习数组之前，先思考一个场景：假设我们要记录一个班级50位同学的期末成绩。如果不用数组，代码会是这样的：

let score1 = 85;
let score2 = 92;
let score3 = 78;
// ... 要写50个变量！
let score50 = 88;

 这显然非常低效！数组的出现完美解决了这个问题：

let scores = [85, 92, 78, ..., 88];

数组就像是一个智能收纳盒，可以帮我们：

1. 统一管理相关数据

2. 保持数据顺序

3. 快速定位和修改元素

二、创建数组的三种姿势

1. 字面量法（最常用）

let fruits = ['苹果', '香蕉', '橙子'];

2. Array构造函数

let colors = new Array('红色', '蓝色', '绿色');

⚠️ 注意陷阱：当参数只有一个且为数字时，表示创建指定长度的空数组

let arr = new Array(5); // 创建包含5个空位的数组
console.log(arr.length); // 5

3. ES6的Array.of()

解决构造函数的歧义问题：

let arr1 = Array.of(5);    // [5]
let arr2 = Array.of(1,2,3); // [1,2,3]

三、数组的基本操作手册

1. 访问元素

let animals = ['猫', '狗', '兔子'];
console.log(animals[0]); // "猫"
console.log(animals[2]); // "兔子"

2. 修改元素

animals[1] = '柯基犬';
console.log(animals); // ['猫', '柯基犬', '兔子']

3. 获取数组长度

console.log(animals.length); // 3

4. 动态长度特性

animals[5] = '熊猫';
console.log(animals); 
// ['猫', '柯基犬', '兔子', 空属性 × 2, '熊猫']
console.log(animals.length); // 6

四、数组方法大全（重点掌握）

1. 增删操作

方法	作用	示例	返回值
push()	尾部添加元素	arr.push('新元素')	新数组长度
pop()	删除尾部元素	arr.pop()	被删除的元素
unshift()	头部添加元素	arr.unshift('新元素')	新数组长度
shift()	删除头部元素	arr.shift()	被删除的元素
splice()	指定位置增删	arr.splice(开始索引, 删除个数, 新增元素)	被删除元素的数组

splice()详解：

let nums = [1, 2, 3, 4, 5];
// 删除：从索引1开始删除2个元素
nums.splice(1, 2); 
// nums变为 [1,4,5]// 新增：在索引1处新增元素
nums.splice(1, 0, 'a', 'b');
// nums变为 [1, 'a', 'b', 4, 5]// 替换：删除并新增
nums.splice(2, 1, 'c');
// nums变为 [1, 'a', 'c', 4, 5]

2. 查找与遍历

forEach()：数组遍历

let prices = [15, 20, 30];
prices.forEach(function(item, index) {console.log(`第${index}个商品价格：${item}元`);
});

map()：数据转换

let discounts = prices.map(price => price * 0.8);
console.log(discounts); // [12, 16, 24]

 filter()：数据过滤

let affordable = prices.filter(price => price < 25);
console.log(affordable); // [15, 20]

find()：查找元素

let firstExpensive = prices.find(price => price > 25);
console.log(firstExpensive); // 30

reduce()：累计计算

let total = prices.reduce((sum, price) => sum + price, 0);
console.log(total); // 65

3. 其他实用方法

slice()：数组切片

let arr = [1, 2, 3, 4, 5];
let part = arr.slice(1, 4); // 截取索引1到3
console.log(part); // [2, 3, 4]

concat()：数组合并

let newArr = arr.concat([6, 7]);
console.log(newArr); // [1,2,3,4,5,6,7]

includes()：存在判断

console.log(arr.includes(3)); // true

 sort()：数组排序

let random = [3, 1, 4, 2];
random.sort(); // 默认按字符串排序
console.log(random); // [1, 2, 3, 4]// 数字排序需要比较函数
let nums = [10, 5, 40, 25];
nums.sort((a, b) => a - b);
console.log(nums); // [5, 10, 25, 40]

五、特别注意事项

（1）引用类型特性

let arr1 = [1, 2];
let arr2 = arr1;
arr2.push(3);
console.log(arr1); // [1, 2, 3] 原数组也被修改！

（2）稀疏数组

let sparseArr = [1,,3];
console.log(sparseArr.length); // 3
console.log(sparseArr[1]);     // undefined

（3）类型自由

六、实战小技巧 

（1）快速去重

let duplicates = [1,2,2,3,3,3];
let unique = [...new Set(duplicates)];

（2）数组转对象

let keyValuePairs = [['name', '张三'], ['age', 25]];
let obj = Object.fromEntries(keyValuePairs);
// {name: "张三", age: 25}

 （3）清空数组

let myArr = [1,2,3];
myArr.length = 0; // 最优雅的方式

七、学习建议

1. 在Chrome控制台多练习数组方法

2. 尝试用数组方法重构日常代码

3. 掌握数组方法链式调用：

let result = [1,2,3,4,5].filter(n => n > 2).map(n => n * 2).reduce((sum, n) => sum + n, 0);
console.log(result); // 24

掌握数组是成为JavaScript高手的必经之路。建议读者创建自己的"数组方法速查表"，在实际项目中多加实践。当你能自如地组合使用各种数组方法时，处理数据将变得游刃有余！

巩固练习：

1. 实现数组反转函数（不要用reverse）

2. 找出数组中出现次数最多的元素

3. 实现二维数组的扁平化