JavaScript:10个数组方法/属性

1. length (属性)

深度解析：

• 技术原理：动态反映数组当前元素数量，基于最大索引值+1

• 特殊行为：

  • 设置小于当前长度：截断数组（不可逆操作）

  • 设置大于当前长度：创建空位（empty slots），访问返回undefined但迭代跳过

  • 空位与undefined的区别：[,1] vs [undefined,1]

使用场景：

1.快速清空数组（性能最优）：

const data = [/* 大量数据 */];
data.length = 0; // 比 data = [] 更高效

2.数组截断：

const logs = ['log1', 'log2', 'log3', 'log4'];
// 只保留最后2条日志
logs.length = Math.min(logs.length, 2);

3.预分配大数组（谨慎使用）：

const pixelData = new Array(1920*1080); // 创建200万空位
// 后续填充数据（比动态push高效）

注意事项：

// 空位陷阱示例
const sparseArr = [1, , 3];
console.log(sparseArr.length); // 3
console.log(sparseArr[1]);     // undefined// forEach跳过空位
sparseArr.forEach(v => console.log(v)); // 只输出1和3// 解决：显式填充undefined
const denseArr = Array.from(sparseArr); // [1, undefined, 3]

2. push()

深度解析：

• 技术原理：修改原数组，在末尾添加元素，返回新长度

• 性能特点：O(1)时间复杂度（摊销常数时间）

 使用场景：

1.动态数据收集：

const userInputs = [];
inputElement.addEventListener('change', (e) => {userInputs.push(e.target.value);
});

 2.栈操作（LIFO）：

const historyStack = [];
function doAction(action) {historyStack.push(action);// 执行操作...
}

3.批量添加元素：

// 优于多次调用push
const newItems = ['item4', 'item5', 'item6'];
items.push(...newItems); // 扩展运算符

最佳实践：

// 避免在循环中连续push
// 反例（性能差）：
for(let i=0; i<10000; i++) {arr.push(i);
}// 正例（预分配）：
const arr = new Array(10000);
for(let i=0; i<10000; i++) {arr[i] = i;
}

3. pop()

深度解析：

• 技术原理：移除最后一个元素并返回，修改原数组长度

• 边界情况：空数组调用返回undefined

使用场景：

1.栈操作（LIFO）：

function undo() {if(historyStack.length > 0) {const lastAction = historyStack.pop();revertAction(lastAction);}
}

2.处理任务队列：

while(taskQueue.length > 0) {const task = taskQueue.pop();executeTask(task);
}

3.递归处理嵌套结构：

function flatten(arr) {const result = [];while(arr.length) {const next = arr.pop();if(Array.isArray(next)) {arr.push(...next);} else {result.push(next);}}return result.reverse();
}

注意事项：

// 不可逆操作警告
const original = [1, 2, 3];
const last = original.pop(); 
console.log(original); // [1,2] - 永久改变

4. shift()

深度解析：

• 技术原理：移除首元素并返回，所有后续元素前移

• 性能问题：O(n)时间复杂度，大数据量慎用

使用场景：

1.队列处理（FIFO）：

const messageQueue = [];// 入队
socket.on('message', msg => messageQueue.push(msg));// 处理队列
setInterval(() => {if(messageQueue.length > 0) {processMessage(messageQueue.shift());}
}, 100);

2.流式数据处理：

while(dataStream.length) {const packet = dataStream.shift();parsePacket(packet);
}

性能优化：

// 替代方案：使用索引指针
class Queue {constructor() {this.items = {};this.front = 0;this.rear = 0;}enqueue(item) {this.items[this.rear++] = item;}dequeue() {if(this.front >= this.rear) return null;const item = this.items[this.front];delete this.items[this.front++];return item;}
}

5. unshift()

深度解析：

• 技术原理：在数组开头添加元素，所有现有元素后移

• 性能问题：O(n)时间复杂度，大数据量避免使用

使用场景：

1.优先级队列： 

const tasks = [];function addTask(task, isHighPriority) {if(isHighPriority) {tasks.unshift(task); // 高优先级插队} else {tasks.push(task);}
}

2.时间线展示（最新在前）：

const timeline = [];function addEvent(event) {timeline.unshift(event); // 新事件在开头if(timeline.length > 100) timeline.pop(); // 限制长度
}

替代方案：

// 使用reverse + push 替代
const arr = [3,4];
arr.reverse().push(1,2);
arr.reverse(); // [1,2,3,4]// 大数据量使用链表
class LinkedList {// 实现链表结构...
}

6. forEach()

深度解析：

• 技术原理：为每个元素执行回调（元素，索引，原数组）

• 重要特性：

  • 无法用break中断

  • 空位会被跳过

  • 不等待异步操作

使用场景：

1.DOM批量操作：

const buttons = document.querySelectorAll('button');
buttons.forEach(btn => {btn.addEventListener('click', handleClick);
});

2.执行副作用操作：

const users = [/*...*/];
users.forEach(user => {saveToLocalStorage(user.id, user);
});

异步处理：

// 错误：不会等待
items.forEach(async item => {await processItem(item); // 不会顺序执行
});// 正确：使用for...of
async function processAll() {for(const item of items) {await processItem(item);}
}

7. map()

深度解析：

• 技术原理：创建新数组，每个元素是回调返回值

• 核心特性：

  • 不修改原数组（纯函数）

  • 保持数组长度不变

  • 跳过空位

使用场景：

1.数据格式转换：

const apiResponse = [{ id: 1, name: 'Alice' },{ id: 2, name: 'Bob' }
];const userIds = apiResponse.map(user => user.id); // [1,2]

2.JSX列表渲染：

function UserList({ users }) {return (<ul>{users.map(user => (<li key={user.id}>{user.name}</li>))}</ul>);
}

3.数学计算：

const temperaturesC = [0, 25, 100];
const temperaturesF = temperaturesC.map(c => c * 9/5 + 32);

最佳实践：

// 避免在map中产生副作用
// 反例：
items.map(item => {saveItem(item); // 副作用操作return item.id;
});// 正例：使用forEach处理副作用
const ids = [];
items.forEach(item => {saveItem(item);ids.push(item.id);
});

8. filter()

深度解析：

• 技术原理：返回回调返回truthy的元素组成的新数组

• 重要特性：

  • 不修改原数组

  • 结果数组长度 <= 原数组

  • 跳过空位

使用场景： 

1.数据筛选：

const products = [/*...*/];
const availableProducts = products.filter(p => p.stock > 0);

2.搜索功能：

function search(query) {return items.filter(item => item.name.toLowerCase().includes(query.toLowerCase()));
}

3.数据清理：

const userInput = ['', 'valid', null, 'data'];
const validInput = userInput.filter(Boolean); // ['valid','data']

高级用法：

// 链式调用
const result = data.filter(item => item.category === 'electronics').filter(item => item.price < 100).map(item => item.name);// 结合索引去重
const unique = array.filter((item, index) => array.indexOf(item) === index
);

9. find()

深度解析：

• 技术原理：返回第一个使回调返回truthy的元素

• 重要特性：

  • 找到即停止遍历

  • 未找到返回undefined

  • 比filter()[0]更高效

使用场景： 

1.ID查找： 

const users = [/*...*/];
function findUser(id) {return users.find(user => user.id === id);
}

2.条件查找：

const inventory = [{ name: 'apple', color: 'red' },{ name: 'banana', color: 'yellow' }
];const yellowFruit = inventory.find(f => f.color === 'yellow');

3.配置查找：

const configOptions = [{ env: 'dev', apiUrl: 'dev.api.com' },{ env: 'prod', apiUrl: 'api.com' }
];const currentConfig = configOptions.find(c => c.env === process.env.NODE_ENV
);

与findIndex配合：

const index = users.findIndex(user => user.id === 123);
if(index !== -1) {// 更新用户users[index] = updatedUser;
}

10. includes()

深度解析：

• 技术原理：使用SameValueZero算法检查包含性

• 关键特性：

  • NaN可以匹配NaN

  • 区分+0和-0

  • 对象比较引用而非内容

使用场景： 

1.简单值存在检查：

const validStatuses = ['active', 'pending', 'completed'];function isValidStatus(status) {return validStatuses.includes(status);
}

2.功能开关控制：

const enabledFeatures = getUserFeatures();if(enabledFeatures.includes('dark_mode')) {enableDarkMode();
}

 3.白名单验证：

const ALLOWED_FILE_TYPES = ['image/jpeg', 'image/png'];function isValidFile(file) {return ALLOWED_FILE_TYPES.includes(file.type);
}

对象数组处理：

// 无法直接查找对象
const items = [{id:1}, {id:2}];
console.log(items.includes({id:1})); // false// 解决方案：
const target = {id:1};
const itemSet = new Set(items.map(i => i.id));
console.log(itemSet.has(1)); // true// 或使用some
const exists = items.some(item => item.id === 1);

专业级总结：选择指南

高级建议：

1.不可变性原则：优先使用map、filter、slice等非变异方法

2.性能敏感操作：

// 大数组操作使用TypedArray
const buffer = new Float64Array(1000000);// 替代shift/unshift
class CircularBuffer {// 实现循环缓冲区
}

3.函数式编程组合：

import { pipe } from 'lodash/fp';const processData = pipe(filter(validCondition),map(transform),sort(comparator)
);const result = processData(rawData);