前端开发中数组
前端开发中，数组是最基础且强大的数据结构之一。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为0arrayList.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() 映射方法
// 将数字数组每个元素乘以2const 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); // 删除第一项