本系列可作为前端学习系列的笔记，代码的运行环境是在HBuilder中，小编会将代码复制下来，大家复制下来就可以练习了，方便大家学习。
HTML和CSS系列文章 已经收录在前端专栏，有需要的宝宝们可以点击前端专栏查看！
点赞关注不迷路！您的点赞、关注和收藏是对小编最大的支持和鼓励！
系列文章目录
JavaScript- 1.1 行内、内部、外部三种引用方式
JavaScript- 3.1 定时器函数 window.settimeout & window.settinterval
JavaScript- 3.2 JavaScript实现不同显示器尺寸的响应式主题和页面
JavaScript- 4.1 DOM-document对象
目录
前言
小编作为新晋码农一枚，会定期整理一些写的比较好的代码，作为自己的学习笔记，会试着做一下批注和补充，如转载或者参考他人文献会标明出处，非商用，如有侵权会删改！欢迎大家斧正和讨论！
一、JavaScript 数组应用详解
数组是 JavaScript 中最基础且强大的数据结构之一，广泛应用于各种场景。下面从多个角度详细讲解数组的实际应用。
一、基础数据存储与操作
1. 存储有序数据
javascript
// 存储用户ID列表
let userIds = [101, 102, 103, 104];
// 存储商品价格
let prices = [19.99, 29.99, 39.99, 49.99];2. 批量处理数据
javascript
// 批量计算平方
let numbers = [1, 2, 3, 4, 5];
let squares = numbers.map(num => num * num); // [1, 4, 9, 16, 25]
// 批量过滤偶数
let evens = numbers.filter(num => num % 2 === 0); // [2, 4]二、常用应用场景
1. 栈(Stack)实现
javascript
let stack = [];
// 入栈
stack.push('A');
stack.push('B');
stack.push('C');
// 出栈
let last = stack.pop(); // 'C'
console.log(stack); // ['A', 'B']2. 队列(Queue)实现
javascript
let queue = [];
// 入队
queue.push('Task 1');
queue.push('Task 2');
queue.push('Task 3');
// 出队
let first = queue.shift(); // 'Task 1'
console.log(queue); // ['Task 2', 'Task 3']3. 矩阵表示
javascript
// 2x3 矩阵
let matrix = [
[1, 2, 3],
[4, 5, 6]
];
// 访问元素
console.log(matrix[1][2]); // 6三、高级应用场景
1. 数据转换与聚合
javascript
let orders = [
{id: 1, amount: 100, category: 'Electronics'},
{id: 2, amount: 200, category: 'Clothing'},
{id: 3, amount: 150, category: 'Electronics'},
{id: 4, amount: 50, category: 'Food'}
];
// 按类别汇总金额
let totals = orders.reduce((acc, order) => {
acc[order.category] = (acc[order.category] || 0) + order.amount;
return acc;
}, {});
console.log(totals);
// {
// Electronics: 250,
// Clothing: 200,
// Food: 50
// }2. 查找与过滤
javascript
let products = [
{id: 1, name: 'Laptop', inStock: true},
{id: 2, name: 'Phone', inStock: false},
{id: 3, name: 'Tablet', inStock: true}
];
// 查找第一个有货商品
let firstAvailable = products.find(p => p.inStock);
console.log(firstAvailable.name); // 'Laptop'
// 过滤所有有货商品
let availableProducts = products.filter(p => p.inStock);
console.log(availableProducts.map(p => p.name)); // ['Laptop', 'Tablet']3. 排序与分组
javascript
let students = [
{name: 'Alice', score: 85},
{name: 'Bob', score: 92},
{name: 'Charlie', score: 78},
{name: 'David', score: 92}
];
// 按分数降序排序
students.sort((a, b) => b.score - a.score);
// 按分数分组
let grouped = students.reduce((acc, student) => {
let score = student.score;
if (!acc[score]) acc[score] = [];
acc[score].push(student);
return acc;
}, {});
console.log(grouped);
/*
{
92: [
{name: 'Bob', score: 92},
{name: 'David', score: 92}
],
85: [{name: 'Alice', score: 85}],
78: [{name: 'Charlie', score: 78}]
}
*/四、性能优化技巧
1. 预分配数组大小
javascript
// 预分配1000个元素的数组
let largeArray = new Array(1000);
// 填充数据（比push更快）
for (let i = 0; i < 1000; i++) {
largeArray[i] = i * 2;
}2. 使用正确的遍历方法
javascript
let arr = new Array(1000000).fill(0);
// 慢：forEach
console.time('forEach');
arr.forEach(x => {});
console.timeEnd('forEach'); // 约5ms
// 快：for循环
console.time('for');
for (let i = 0; i < arr.length; i++) {}
console.timeEnd('for'); // 约0.5ms
// 更快：缓存length
console.time('for cached');
for (let i = 0, len = arr.length; i < len; i++) {}
console.timeEnd('for cached'); // 约0.3ms3. 避免不必要的数组操作
javascript
// 不好的做法 - 每次循环都创建新数组
let result = [];
for (let i = 0; i < 1000; i++) {
result = result.concat([i]); // 每次循环都创建新数组
}
// 好的做法 - 先收集元素，最后一次性处理
let temp = [];
for (let i = 0; i < 1000; i++) {
temp.push(i);
}
let result = temp; // 或进一步处理五、特殊应用场景
1. 环形缓冲区实现
javascript
class CircularBuffer {
constructor(size) {
this.buffer = new Array(size);
this.size = size;
this.start = 0;
this.count = 0;
}
push(value) {
const index = (this.start + this.count) % this.size;
this.buffer[index] = value;
if (this.count < this.size) {
this.count++;
} else {
this.start = (this.start + 1) % this.size;
}
}
getValues() {
const values = [];
for (let i = 0; i < this.count; i++) {
const index = (this.start + i) % this.size;
values.push(this.buffer[index]);
}
return values;
}
}
// 使用示例
const cb = new CircularBuffer(3);
cb.push(1);
cb.push(2);
cb.push(3);
cb.push(4); // 会覆盖第一个元素
console.log(cb.getValues()); // [2, 3, 4]2. 多维数组模拟
javascript
// 模拟二维数组（矩阵）
let matrix = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
// 访问元素
console.log(matrix[1][2]); // 6
// 遍历矩阵
for (let i = 0; i < matrix.length; i++) {
for (let j = 0; j < matrix[i].length; j++) {
console.log(`matrix[${i}][${j}] = ${matrix[i][j]}`);
}
}六、现代JavaScript中的数组应用
1. 解构赋值
javascript
let colors = ['red', 'green', 'blue'];
let [first, second] = colors;
console.log(first); // 'red'
console.log(second); // 'green'
// 交换变量
let a = 1, b = 2;
[a, b] = [b, a];
console.log(a, b); // 2 12. 展开运算符
javascript
let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]
// 合并数组
let fruits = ['apple', 'banana'];
let moreFruits = ['orange', ...fruits, 'grape']; // ['orange', 'apple', 'banana', 'grape']
// 函数参数
function sum(a, b, c) {
return a + b + c;
}
let nums = [1, 2, 3];
console.log(sum(...nums)); // 63. 数组空位处理
javascript
// ES5中空位会被跳过
let arr = [1, , 3];
console.log(arr.length); // 3
console.log(arr[1]); // undefined
// ES6中明确空位处理
let newArr = [1, ...[], 3]; // 相当于[1, 3]
console.log(newArr.length); // 2七、最佳实践建议
- 选择合适的方法：根据操作类型选择合适的方法（如查找用
find，过滤用filter，聚合用reduce） - 避免滥用数组：对于固定大小的键值对数据，使用对象或Map可能更合适
- 注意性能：处理大数据量时，考虑使用
for循环而非高阶函数 - 利用现代特性：合理使用展开运算符、解构赋值等简化代码
- 保持不可变性：优先使用
map、filter等返回新数组的方法，而非直接修改原数组
数组是JavaScript编程的核心数据结构，掌握其各种应用场景和技巧可以显著提高代码的效率和可读性。
二、代码实践
代码如下：
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数组应用</title>
</head>
<body>
<!-- a.1-100中能被7整除的放入数组中
b.从1-100包括100中取10个随机整数放入数组中
c.将上面随机生成的10个数按照奇数偶数分开两个数组
e.1-100随机生成10个数，并排序 -->
<script type="text/javascript">
//a.1-100中能被7整除的放入数组中
var myArray=new Array();
var myArray1=new Array();//偶数
var myArray2=new Array();//奇数
for(var i=1;i<=100;i++){
if(i%2===0){
myArray1[myArray1.length]=i;
}else{
myArray2[myArray2.length]=i;
}
}
console.log(myArray1);
console.log(myArray2);
//b.从1-100包括100中取10个随机整数放入数组中
//c.将上面随机生成的10个数按照奇数偶数分开两个数组
var myArray3=new Array();//奇数
var myArray4=new Array();//偶数
for(var i=0;i<10;i++){
var myRam=parseInt((100-1+1)*Math.random()+1);//生成随机数
myArray[myArray.length]=myRam;//把随机数放入数组中
if(myRam%2===0){
myArray3[myArray3.length]= myRam;
}else{
myArray4[myArray4.length]= myRam;
}
}
console.log(myArray);
console.log(myArray3);
console.log(myArray4);
//e.并排序 冒泡
for(var i=0;i<myArray.length-1;i++){//控制几趟
for(var j=0;j<myArray.length-1-i;j++){//每一趟比几个数
if(myArray[j]>myArray[j+1]){
var temp=myArray[j];//把大数放在temp中
myArray[j]=myArray[j+1];//小数放进j位置
myArray[j+1]=temp;//大数放进j+1位置
}
}
}
console.log(myArray);
</script>
</body>
</html>
代码运行如下：
总结
以上就是今天要讲的内容，本文简单记录了数组应用 ，仅作为一份简单的笔记使用，大家根据注释理解
扫一扫
1027
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
