前端开发中数组
前端开发中，数组是最基础且强大的数据结构之一。JavaScript提供了丰富的数组操作方法，可以满足各种开发需求。
下面我将从基础操作、高阶函数、动态渲染、过滤搜索和表单处理五个方面，为您详细介绍前端数组的实际应用案例。
一、基础数组操作案例
1. 数组创建与转换
// 字符串转数组
const str = "get-element-by-id";
const arr = str.split("-"); // ["get", "element", "by", "id"]
// 类数组对象转数组
const nodeList = document.querySelectorAll('div');
const nodeArr = Array.from(nodeList); // 将NodeList转换为真正数组2. 数组清空方法
let arrayList = ['a', 'b', 'c', 'd', 'e', 'f']; // 方法1：直接赋值为空数组 arrayList = []; // 方法2：设置length为0 arrayList.length = 0; // 推荐此方法，更简洁高效
3. 数组增删改查
const fruits = ['apple', 'banana'];
// 添加元素
fruits.push('orange'); // 末尾添加
fruits.unshift('grape'); // 开头添加
// 删除元素
fruits.pop(); // 删除最后一个
fruits.shift(); // 删除第一个
// splice方法（会修改原数组）
const removed = fruits.splice(1, 1, 'pear', 'peach');
// 从索引1开始删除1个元素，并添加'pear'和'peach'
// removed是被删除的元素数组['banana']4. 统计学生成绩案例
const scores = [89, 76, 92, 85, 94, 88];
// 计算总分和平均分
const totalScore = scores.reduce((acc, score) => acc + score, 0);
const averageScore = totalScore / scores.length;
// 最高分和最低分
const highestScore = Math.max(...scores);
const lowestScore = Math.min(...scores);
console.log(`平均分: ${averageScore}, 最高分: ${highestScore}, 最低分: ${lowestScore}`);二、数组高阶函数应用案例
1. filter() 过滤方法
// 过滤小于100的数字
const nums = [10, 20, 30, 111, 222, 333];
const newNums = nums.filter(n => n < 100); // [10, 20, 30]
// 过滤素数
function get_primes(arr) {
return arr.filter(num => {
if(num === 1) return false;
for(let i=2; i<=Math.sqrt(num); i++) {
if(num % i === 0) return false;
}
return true;
});
}2. map() 映射方法
// 将数字数组每个元素乘以2
const doubled = newNums.map(n => n * 2); // [20, 40, 60]
// 格式化对象数组
const users = [
{name: 'John', age: 25},
{name: 'Jane', age: 30}
];
const names = users.map(user => user.name); // ['John', 'Jane']3. reduce() 归约方法
// 数组求和
const sum = nums.reduce((acc, n) => acc + n, 0);
// 数组去重
const dupArr = [1, 2, 2, 3, 4, 4, 5];
const uniqueArr = dupArr.reduce((acc, cur) => {
if(!acc.includes(cur)) acc.push(cur);
return acc;
}, []);
// 统计字符出现次数
const str = "javascript";
const charCount = [...str].reduce((acc, char) => {
acc[char] = (acc[char] || 0) + 1;
return acc;
}, {});4. 复合使用案例
// 链式调用：先过滤再映射最后求和 const total = nums .filter(n => n < 100) .map(n => n * 2) .reduce((acc, n) => acc + n, 0);
三、数组动态渲染案例
1. Vue动态渲染表格
// Vue组件数据
data() {
return {
tableData: [
{ date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St' },
{ date: '2016-05-02', name: 'Jerry', address: 'No. 189, Grove St' }
],
columns: [
{ prop: 'date', label: '日期' },
{ prop: 'name', label: '姓名' },
{ prop: 'address', label: '地址' }
]
};
}
// 模板部分
<el-table :data="tableData">
<el-table-column
v-for="column in columns"
:key="column.prop"
:prop="column.prop"
:label="column.label">
</el-table-column>
</el-table>2. 动态添加表单字段
// Vue组件数据
data() {
return {
form: {
name: '水果',
goods: [
{ name: '西瓜', num: 20 },
{ name: '苹果', num: 23 }
]
}
};
}
// 添加新商品方法
methods: {
addGood() {
this.form.goods.push({ name: '', num: 0 });
}
}四、数组过滤搜索案例
1. 单条件筛选
const products = [
{ name: 'iPhone', category: 'electronics', price: 999 },
{ name: 'MacBook', category: 'electronics', price: 1299 },
{ name: 'T-shirt', category: 'clothing', price: 20 }
];
// 筛选电子产品
const electronics = products.filter(p => p.category === 'electronics');
// 筛选价格低于1000的商品
const affordable = products.filter(p => p.price < 1000);2. 多条件复合筛选
// 筛选条件
const filters = {
category: 'electronics',
maxPrice: 1000
};
// 复合筛选
const filtered = products.filter(p => {
return (
p.category === filters.category &&
p.price <= filters.maxPrice
);
});3. Vue实现搜索功能
// Vue组件
new Vue({
el: '#app',
data: {
search: '',
items: ['Apple', 'Banana', 'Orange', 'Mango', 'Pear']
},
computed: {
filteredItems() {
const search = this.search.toLowerCase();
return this.items.filter(item =>
item.toLowerCase().includes(search)
);
}
}
});
// HTML部分
<div id="app">
<input v-model="search" type="text" placeholder="Search...">
<ul>
<li v-for="item in filteredItems">{{ item }}</li>
</ul>
</div>4. 复杂对象数组筛选
const employees = [
{ name: 'John', age: 28, department: 'IT', skills: ['JavaScript', 'React'] },
{ name: 'Jane', age: 32, department: 'HR', skills: ['Communication'] },
{ name: 'Bob', age: 25, department: 'IT', skills: ['JavaScript', 'Node.js'] }
];
// 多条件筛选：IT部门且会JavaScript的员工
const itJsDevs = employees.filter(emp =>
emp.department === 'IT' &&
emp.skills.includes('JavaScript')
);
// 年龄范围筛选
const youngEmployees = employees.filter(emp => emp.age >= 25 && emp.age <= 30);五、数组表单处理案例
1. 表单数组提交
<!-- 前端表单传递数组数据 --> <form action="/submit" method="post"> <input type="text" name="items[]" value="item1"> <input type="text" name="items[]" value="item2"> <input type="text" name="items[]" value="item3"> <button type="submit">提交</button> </form> <!-- 后端接收到的数据格式为数组 -->
2. Vue动态表单验证
// Vue组件数据
data() {
return {
form: {
name: '水果',
goods: [
{ name: '西瓜', num: 20 },
{ name: '苹果', num: 23 }
]
},
rules: {
'goods.*.name': [{ required: true, message: '请输入水果名', trigger: 'blur' }],
'goods.*.num': [{ required: true, message: '请输入数量', trigger: 'blur' }]
}
};
}
// 模板部分
<div v-for="(item, index) in form.goods" :key="index">
<el-form-item
:prop="'goods.' + index + '.name'"
:rules="rules['goods.*.name']">
<el-input v-model="item.name" placeholder="水果名"/>
</el-form-item>
<el-form-item
:prop="'goods.' + index + '.num'"
:rules="rules['goods.*.num']">
<el-input v-model="item.num" placeholder="数量"/>
</el-form-item>
</div>3. 表单数据处理
// 处理多选框数据
const formData = {
name: '用户表单',
hobbies: ['reading', 'swimming', 'coding'] // 多选框选中值
};
// 提交前处理
function prepareSubmit(data) {
// 将数组转换为逗号分隔的字符串
if(Array.isArray(data.hobbies)) {
data.hobbies = data.hobbies.join(',');
}
return data;
}
// 接收后处理
function processReceived(data) {
// 将字符串转换回数组
if(typeof data.hobbies === 'string') {
data.hobbies = data.hobbies.split(',');
}
return data;
}4. 动态表单字段管理
// 添加新字段
function addField(form, fieldName) {
if(!form[fieldName]) {
form[fieldName] = [];
}
form[fieldName].push('');
}
// 删除字段
function removeField(form, fieldName, index) {
if(form[fieldName] && form[fieldName].length > index) {
form[fieldName].splice(index, 1);
}
}
// 示例使用
const myForm = { items: [] };
addField(myForm, 'items'); // 添加一个空项
removeField(myForm, 'items', 0); // 删除第一项