企业官网建设流程全解析

长宁微信手机网站制作,杭州网站的制作,长沙网站营销,我的网站百度找不到了JavaScript 数组方法实战教程#xff1a;push()、forEach()、filter()、sort() 你是否在处理 JavaScript 数组数据时#xff0c;不知道该用哪个方法添加元素、遍历数据、筛选内容或排序#xff1f;这篇教程将通过具体场景、可运行代码#xff0c;以及常见错误与解决方案push()、forEach()、filter()、sort()你是否在处理 JavaScript 数组数据时不知道该用哪个方法添加元素、遍历数据、筛选内容或排序这篇教程将通过具体场景、可运行代码以及常见错误与解决方案帮你彻底掌握push()、forEach()、filter()、sort()四个核心数组方法的功能与实际用法学完就能直接在项目中落地。一、push()给数组“尾部追加”元素核心功能push()方法用于向数组的末尾添加一个或多个元素并且会返回更新后数组的长度注意不是更新后的数组本身。它会直接修改原始数组这是一个重要特性。适用场景向列表中追加新数据如用户提交表单后将新用户信息加入用户列表批量补充数据到数组尾部动态构建数组逐步添加元素可运行代码案例// 1. 基础用法添加单个元素constfruitList[苹果,香蕉,橙子];// 调用push()添加单个元素constnewLength1fruitList.push(葡萄);console.log(添加单个元素后的数据,fruitList);// 输出[苹果, 香蕉, 橙子, 葡萄]console.log(更新后数组长度,newLength1);// 输出4// 2. 进阶用法添加多个元素constnumberArr[1,2,3];// 调用push()批量添加多个元素用逗号分隔constnewLength2numberArr.push(4,5,6);console.log(添加多个元素后的数据,numberArr);// 输出[1, 2, 3, 4, 5, 6]console.log(更新后数组长度,newLength2);// 输出6// 3. 实战场景用户列表追加新用户constuserList[{id:1,name:张三,age:25},{id:2,name:李四,age:28}];// 新用户数据constnewUser{id:3,name:王五,age:30};// 追加新用户userList.push(newUser);console.log(追加新用户后的列表,userList);// 输出[{ id:1, ... }, { id:2, ... }, { id:3, ... }]常见错误与解决方案常见错误错误描述解决方案错误1误将push()返回值当作更新后的数组代码示例const newArr fruitList.push(葡萄);此时newArr是数字4数组长度而非数组本身导致后续操作报错1. 先调用push()修改原始数组2. 若需保留原数组先复制原数组const newArr [...fruitList]再对复制后的数组调用push()3. 避免直接接收push()的返回值作为数组使用错误2给非数组类型调用push()代码示例const str abc; str.push(d);字符串不是数组没有push()方法报错Uncaught TypeError: str.push is not a function1. 先确认目标变量是数组类型可用Array.isArray(obj)判断2. 若为类数组/字符串先转换为数组字符串转数组Array.from(str)类数组转数组[...arguments]错误3批量添加数组时直接传入数组导致二维数组代码示例const arr [1,2]; arr.push([3,4]);结果为[1,2,[3,4]]非预期的[1,2,3,4]1. 使用扩展运算符arr.push(...[3,4])将数组展开为单个元素后追加2. 也可使用concat()方法const newArr arr.concat([3,4])不修改原数组二、forEach()遍历数组的“万能工具”核心功能forEach()方法用于遍历数组的每一个元素并对每个元素执行你指定的回调函数。它没有返回值返回undefined仅用于执行遍历操作可选择性地修改原始数组取决于回调函数内的操作。适用场景遍历数组并打印/展示所有元素对数组中每个元素执行统一操作如格式化数据、累加计算无需返回新数组仅需遍历处理的场景可运行代码案例// 1. 基础用法遍历数组并打印每个元素constanimalArr[老虎,大象,熊猫,猴子];console.log(动物列表遍历结果);animalArr.forEach((animal,index){// 回调函数参数item当前元素、index当前索引可选、array原数组可选console.log(索引${index}${animal});});// 输出// 索引0老虎// 索引1大象// 索引2熊猫// 索引3猴子// 2. 进阶用法遍历数组并累加计算constscoreArr[85,92,78,90,88];lettotalScore0;// 遍历分数数组累加总分scoreArr.forEach(score{totalScorescore;});constaverageScoretotalScore/scoreArr.length;console.log(总分,totalScore);// 输出431console.log(平均分,averageScore);// 输出86.2// 3. 实战场景格式化数组元素给商品名称添加前缀constproductList[手机,电脑,平板,耳机];constformatProductList[];// 遍历商品列表格式化后存入新数组productList.forEach(product{formatProductList.push(热销-${product});});console.log(格式化后的商品列表,formatProductList);// 输出[热销-手机, 热销-电脑, 热销-平板, 热销-耳机]常见错误与解决方案常见错误错误描述解决方案错误1试图用return终止forEach()遍历代码示例animalArr.forEach(animal { if (animal 熊猫) return; console.log(animal); })return仅跳过当前循环无法终止整个遍历仍会打印“猴子”1. 若需终止遍历放弃forEach()使用for循环/for...of循环可通过break终止2. 若仅需跳过部分元素return可正常使用错误2误将forEach()当作有返回值的方法代码示例const newArr productList.forEach(p 热销-${p});newArr值为undefined非预期数组1. 先创建空数组在forEach()回调内用push()存入处理后的数据如案例32. 直接使用map()方法专门用于返回处理后的新数组更简洁错误3遍历中修改数组长度导致遍历不完整/死循环代码示例const arr [1,2,3]; arr.forEach(item { arr.push(item * 2); })会无限追加元素导致死循环若删除元素则会跳过部分元素1. 遍历前先复制数组[...arr]遍历复制后的数组修改原始数组2. 避免在forEach()中直接增删原始数组的元素防止破坏遍历结构错误4回调函数中使用this指向丢失普通函数写法代码示例const obj { num: 10 }; arr.forEach(function(item) { console.log(this.num); })此时this指向window非严格模式输出undefined1. 使用箭头函数不绑定自身this继承外部上下文arr.forEach(item console.log(this.num))2. 传入thisArg作为forEach()第二个参数arr.forEach(function(item) {}, obj)三、filter()筛选数组的“精准过滤器”核心功能filter()方法用于根据指定条件筛选数组元素它会返回一个全新的数组包含所有满足条件的元素不会修改原始数组。如果没有满足条件的元素会返回一个空数组。适用场景按条件筛选数据如筛选大于10的数字、筛选成年用户排除数组中的无效数据如筛选非空字符串、排除值为null的元素多条件组合筛选如筛选年龄在20-30岁之间的女性用户可运行代码案例// 1. 基础用法筛选满足单一条件的元素constnumArr[12,5,28,7,35,1,40];// 筛选大于20的数字constbigNumArrnumArr.filter(num{returnnum20;});console.log(原始数组,numArr);// 输出[12,5,28,7,35,1,40]console.log(大于20的数字数组,bigNumArr);// 输出[28,35,40]// 2. 进阶用法多条件组合筛选conststudentList[{name:小明,gender:男,age:18,score:90},{name:小红,gender:女,age:17,score:95},{name:小刚,gender:男,age:19,score:85},{name:小丽,gender:女,age:18,score:92},{name:小亮,gender:男,age:17,score:88}];// 筛选女性 年龄18岁 分数大于90consttargetStudentsstudentList.filter(student{returnstudent.gender女student.age18student.score90;});console.log(满足条件的学生,targetStudents);// 输出[{ name: 小丽, ... }]// 3. 实战场景排除无效数据筛选非空、非undefined的用户名constuserNameList[张三,,李四,undefined,王五,null,赵六];// 筛选有效用户名排除空字符串、undefined、nullconstvalidUserNameListuserNameList.filter(name{returnname!name!undefinedname!null;});console.log(原始用户名列表,userNameList);console.log(有效用户名列表,validUserNameList);// 输出[张三, 李四, 王五, 赵六]常见错误与解决方案常见错误错误描述解决方案错误1忘记在回调函数中返回判断条件代码示例const bigNumArr numArr.filter(num { num 20; })回调函数无返回值默认返回undefined最终返回空数组1. 显式添加return关键字如案例12. 使用箭头函数简写省略大括号自动返回表达式结果numArr.filter(num num 20)错误2混淆filter()与forEach()用filter()执行无返回值的操作代码示例numArr.filter(num console.log(num))虽能遍历打印但会额外生成无意义的空数组造成性能浪费1. 仅当需要筛选并返回新数组时使用filter()2. 若仅需遍历执行操作无返回数组需求使用forEach()/for循环错误3筛选引用类型数据时误判“空对象/空数组”为无效数据代码示例const arr [{}, [], 123]; const newArr arr.filter(item item){}和[]为真值会被保留若需排除空对象/数组则筛选失败1. 排除空对象判断对象自身属性数量Object.keys(item).length 02. 排除空数组判断数组长度item.length 03. 组合判断arr.filter(item !(Array.isArray(item) item.length 0) !(typeof item object item ! null Object.keys(item).length 0))错误4多条件筛选时逻辑运算符使用错误与||混淆代码示例筛选“年龄18或19岁的女生”误写为student.gender 女 student.age 18 student.age 19无满足条件的元素返回空数组1. 明确逻辑关系“且”用“或”用四、sort()排序数组的“灵活排序器”核心功能sort()方法用于对数组元素进行排序默认情况下按「字符串Unicode编码」升序排列注意这是容易踩坑的点它会直接修改原始数组。同时支持传入自定义比较函数实现数字升序/降序、对象属性排序等灵活需求。适用场景数字数组升序/降序排序如分数从高到低排序字符串数组排序如按姓名拼音首字母排序对象数组按指定属性排序如按用户年龄、商品价格排序可运行代码案例// 1. 注意点默认排序字符串Unicode编码不适合数字排序constdefaultNumArr[10,2,35,7,100];defaultNumArr.sort();console.log(数字默认排序结果,defaultNumArr);// 输出[10, 100, 2, 35, 7]不符合预期// 2. 基础用法数字数组升序/降序排序传入自定义比较函数constsortNumArr[10,2,35,7,100];// 数字升序排序a - bsortNumArr.sort((a,b)a-b);console.log(数字升序排序,sortNumArr);// 输出[2, 7, 10, 35, 100]// 数字降序排序b - asortNumArr.sort((a,b)b-a);console.log(数字降序排序,sortNumArr);// 输出[100, 35, 10, 7, 2]// 3. 进阶用法对象数组按指定属性排序constgoodsList[{name:手机,price:4999},{name:电脑,price:7999},{name:平板,price:2999},{name:耳机,price:999}];// 按商品价格升序排序从便宜到贵goodsList.sort((a,b)a.price-b.price);console.log(按价格升序排序的商品,goodsList);// 输出[{ name: 耳机, price:999 }, { name: 平板, price:2999 }, ...]// 按商品价格降序排序从贵到便宜goodsList.sort((a,b)b.price-a.price);console.log(按价格降序排序的商品,goodsList);// 输出[{ name: 电脑, price:7999 }, { name: 手机, price:4999 }, ...]// 4. 实战场景字符串数组排序按姓名排序constnameList[Zhang San,Li Si,Wang Wu,Zhao Liu];// 按字符串Unicode编码升序排序英文姓名适用nameList.sort();console.log(姓名升序排序,nameList);// 输出[Li Si, Wang Wu, Zhang San, Zhao Liu]常见错误与解决方案常见错误错误描述解决方案错误1直接对数字数组使用默认sort()排序结果不符合预期代码示例const arr [10,2,100]; arr.sort();结果为[10,100,2]而非数字升序[2,10,100]1. 传入自定义比较函数实现数字排序升序(a,b) a - b降序(a,b) b - a如案例22. 牢记默认sort()按字符串Unicode编码排序不适用数字场景错误2对象数组排序时直接比较对象而非对象的属性代码示例goodsList.sort((a,b) a - b)a和b是对象无法直接相减报错NaN排序失败1. 排序时指定对象的具体属性(a,b) a.price - b.price如案例32. 若属性是字符串可直接传入属性名或使用localeCompare()优化中文排序错误3忽略sort()会修改原始数组导致原数组数据丢失代码示例需要保留原始数组却直接调用arr.sort()原数组被篡改1. 排序前先复制原始数组使用扩展运算符[...arr]、Array.from(arr)或arr.slice()2. 对复制后的数组执行排序const sortedArr [...arr].sort((a,b) a - b)错误4中文字符串排序时默认sort()结果混乱按Unicode编码非拼音/笔画代码示例const chineseArr [张三, 李四, 王五]; chineseArr.sort();排序结果可能不符合中文使用习惯1. 使用localeCompare()方法优化中文排序chineseArr.sort((a,b) a.localeCompare(b, zh-CN))2. 该方法支持按拼音、笔画排序可配置额外参数五、总结push()尾部追加元素修改原始数组返回新长度避坑重点不接收返回值作为数组批量添加用扩展运算符。forEach()遍历所有元素无返回值避坑重点无法用return终止遍历不用于生成新数组。filter()条件筛选元素返回新数组不修改原数组避坑重点必须返回判断条件区分逻辑运算符与||。sort()数组排序修改原始数组默认按字符串编码排序避坑重点数字排序传自定义比较函数对象排序比较具体属性需保留原数组先复制。这四个方法是 JavaScript 数组操作的基础掌握它们的功能、场景及避坑技巧后能高效处理大部分数组数据处理需求所有代码均可直接复制到浏览器控制台或 Node.js 环境中运行验证。