蓝桥杯web常用数组方法

| filter() | 筛选符合条件的元素返回新数组 | 数据筛选如找大于10的数、筛选符合条件的商品 | javascript// 场景筛选数组中大于10的数字const arr [5,12,8,15];const res arr.filter(item item 10);console.log(res); // [12,15] || reduce() | 遍历数组累计计算求和、求积、去重、扁平化 | 求和/求平均值、数组去重、二维数组转一维 | javascript// 场景1数组求和const arr [1,2,3,4];const sum arr.reduce((total, item) total item, 0);console.log(sum); // 10// 场景2数组去重const arr [1,2,2,3,3,3];const uniqueArr arr.reduce((acc, item) {if (!acc.includes(item)) acc.push(item);return acc;}, []);console.log(uniqueArr); // [1,2,3] || forEach() | 遍历数组无返回值 | 遍历渲染页面如循环生成DOM元素、批量修改数组元素 | javascript// 场景遍历数组打印每个元素索引const arr [a,b,c];arr.forEach((item, index) {console.log(索引${index}${item});}); || find() | 找第一个符合条件的元素找不到返回undefined | 按条件查找数据如找id为1的用户 | javascript// 场景找数组中第一个大于10的数const arr [5,12,8,15];const res arr.find(item item 10);console.log(res); // 12 || indexOf() | 找元素在数组中的索引找不到返回-1 | 判断元素是否存在、去重、删除指定元素 | javascript// 场景判断元素是否在数组中const arr [1,2,3];if (arr.indexOf(2) ! -1) {console.log(元素存在);} else {console.log(元素不存在);} || splice() | 修改原数组增/删/改元素 | 数组增删改如删除指定索引元素、插入新元素 | javascript// 场景1删除索引1的元素从索引1开始删1个const arr [1,2,3];arr.splice(1,1);console.log(arr); // [1,3]// 场景2在索引1插入元素9从索引1开始删0个插9arr.splice(1,0,9);console.log(arr); // [1,9,3] |#### 2. 高频次考掌握用法即可| 方法 | 作用 | 常见场景 ||------|------|----------|| includes() | 判断数组是否包含某元素返回布尔值 | 替代indexOf做存在性判断更直观 || sort() | 数组排序默认按字符串排序需传比较函数 | 数字升序/降序、对象数组按字段排序 || join() | 数组转字符串指定分隔符 | 拼接字符串如把 [1,2,3] 转成 1,2,3 || push()/pop() | 数组尾部增/删元素修改原数组 | 栈结构模拟、动态添加/删除数组元素 || shift()/unshift() | 数组头部增/删元素修改原数组 | 队列结构模拟 || slice() | 截取数组返回新数组不修改原数组 | 数组分页如截取前5个元素 |#### 3. 了解即可concat()数组合并、reverse()数组反转、flat()数组扁平化、every()/some()判断数组元素是否全部/部分满足条件。### 二、字符串方法仅次于数组常和数组配合考察字符串方法常考「格式处理、正则匹配、截取拼接」多和数组方法联动如字符串转数组处理后再转回字符串。#### 1. 核心必考| 方法 | 作用 | 真题常见场景 | 示例代码 ||------|------|--------------|----------|| split() | 字符串转数组指定分隔符 | 分割字符串如把 1,2,3 转成 [1,2,3] | javascript// 场景1按逗号分割字符串const str 1,2,3;const arr str.split(,);console.log(arr); // [1,2,3]// 场景2按空字符分割转成字符数组const str abc;const arr str.split();console.log(arr); // [a,b,c] || replace()/replaceAll() | 替换字符串replace替换第一个replaceAll替换所有 | 替换敏感词、格式化字符串如把-转成/ | javascript// 场景1替换第一个a为*const str aabbaa;const res1 str.replace(a, *);console.log(res1); // *abbaa// 场景2替换所有a为*ES6const res2 str.replaceAll(a, *);console.log(res2); // **bb** || match() | 正则匹配字符串返回数组/null | 提取指定内容如提取所有数字、字母 | javascript// 场景提取字符串中所有数字const str 年龄28身高180cm;const nums str.match(/\d/g);console.log(nums); // [28,180] || test()正则方法 | 判断字符串是否匹配正则返回布尔值 | 格式验证手机号、邮箱、身份证 | javascript// 场景验证手机号简单规则const phoneReg /^1\d{10}$/;console.log(phoneReg.test(13800138000)); // trueconsole.log(phoneReg.test(123456)); // false || substring()/slice() | 截取字符串返回新字符串 | 截取指定长度的字符串如截取前6位手机号 | javascript// 场景截取字符串索引1到3的部分含1不含3const str abcdef;const res str.substring(1,3);console.log(res); // bc || trim() | 去除字符串首尾空格 | 表单输入去空格如用户名、密码去首尾空格 | javascript// 场景去除输入框的首尾空格const input hello world ;const res input.trim();console.log(res); // hello world |#### 2. 高频次考| 方法 | 作用 | 常见场景 ||------|------|----------|| indexOf() | 找字符/子串在字符串中的索引找不到返回-1 | 判断字符串是否包含某子串 || includes() | 判断字符串是否包含某子串返回布尔值 | 更直观的存在性判断 || toUpperCase()/toLowerCase() | 转大写/小写 | 统一字符串大小写如验证码验证 || charAt() | 获取指定索引的字符 | 遍历字符串字符、判断某位置的字符 |#### 3. 了解即可charCodeAt()获取字符ASCII码、startsWith()/endsWith()判断字符串以某子串开头/结尾、padStart()/padEnd()补全字符串长度。### 三、蓝桥杯高频考察组合场景1. **字符串转数组处理后转回字符串**如 split() map()/filter() join()示例把字符串 1,2,3,4 转成 2,4,6,8每个数乘2。2. **数据筛选求和/统计**filter() reduce()示例筛选数组中大于10的数再求和。3. **格式验证**test()正则 trim()示例验证邮箱格式先去空格再用正则匹配。4. **数组去重排序**reduce()/filter() sort()示例数组去重后按升序排列。### 总结1. 数组方法核心掌握map()/filter()/reduce()/forEach()/find()/splice()/indexOf()尤其是 reduce() 能解决多类场景2. 字符串方法核心掌握split()/replace()/match()/test()/trim()/substring()常和正则、数组联动3. 蓝桥杯考察重点是「方法的实际应用」而非死记语法建议结合真题场景多练比如用这些方法实现数据处理、格式验证等功能。