1. JavaScript 数组操作全解析
作为一名前端开发者,我每天都要与数组打交道。数组是JavaScript中最基础也最重要的数据结构之一,掌握它的各种操作方法能极大提升开发效率。下面我将分享我在实际项目中总结的数组操作经验。
1.1 数组创建与初始化
创建数组看似简单,但其中有不少细节需要注意:
javascript复制// 空数组创建
let arr = []; // 最常用方式
let arr2 = new Array(); // 构造函数方式,不推荐
// 带初始值的数组
let nums = [1, 2, 3];
// 指定长度的数组(注意陷阱!)
let emptySlots = new Array(5); // 创建长度为5的空槽数组
console.log(emptySlots); // [empty × 5]
注意:使用new Array(length)创建数组时,会创建一个包含空槽的数组,而不是填充了undefined的数组。这在某些方法(如map)中表现会有差异。
数组浅拷贝的几种方式:
javascript复制const original = [1, 2, 3];
const copy1 = original.slice(); // 方法1
const copy2 = [...original]; // 方法2(ES6扩展运算符)
const copy3 = Array.from(original); // 方法3
1.2 数组增删改查实战技巧
添加/删除元素
javascript复制let fruits = ['apple', 'banana'];
// 末尾添加
fruits.push('orange'); // ['apple', 'banana', 'orange']
// 开头添加
fruits.unshift('pear'); // ['pear', 'apple', 'banana', 'orange']
// 删除末尾
let last = fruits.pop(); // 'orange', fruits变为['pear', 'apple', 'banana']
// 删除开头
let first = fruits.shift(); // 'pear', fruits变为['apple', 'banana']
查找元素
javascript复制let nums = [10, 20, 30, 40, 50];
// 查找索引
let index = nums.indexOf(30); // 2
let lastIndex = nums.lastIndexOf(30); // 2(当有重复值时有用)
// 是否存在
let hasThirty = nums.includes(30); // true
// 条件查找(ES6 find方法)
let firstOver25 = nums.find(num => num > 25); // 30
let firstOver25Index = nums.findIndex(num => num > 25); // 2
截取和拼接
javascript复制// slice - 不改变原数组
let arr = [1, 2, 3, 4, 5];
let subArr = arr.slice(1, 4); // [2, 3, 4]
console.log(arr); // [1, 2, 3, 4, 5](未改变)
// splice - 改变原数组
let removed = arr.splice(1, 2, 'a', 'b'); // 从索引1开始删除2个元素,并插入'a','b'
console.log(arr); // [1, 'a', 'b', 4, 5]
console.log(removed); // [2, 3](被删除的元素)
1.3 高阶函数式编程
现代JavaScript开发中,函数式编程越来越重要。数组的高阶方法让代码更简洁、可读性更强。
map - 数据转换
javascript复制let prices = [100, 200, 300];
// 打8折
let discounted = prices.map(price => price * 0.8);
// [80, 160, 240]
// 提取对象特定属性
let products = [
{id: 1, name: 'iPhone'},
{id: 2, name: 'MacBook'}
];
let productNames = products.map(p => p.name);
// ['iPhone', 'MacBook']
