JavaScript 核心:数组/字符串 API 精要指南

一、数组核心 API 精讲

1. 遍历类方法

javascript 复制代码
// forEach:基本遍历(无返回值)
const arr = [1, 2, 3];
arr.forEach((item, index) => {
  console.log(`索引 ${index} 的值是 ${item}`);
});

// map:映射新数组(重要!)
const doubled = arr.map(num => num * 2); // [2,4,6]

// 实战场景:React 列表渲染
const users = [{id:1,name:'Alice'}, {id:2,name:'Bob'}];
const userList = users.map(user => <div key={user.id}>{user.name}</div>);

具体详解可以看JavaScript的常用数组API原理解析

2. 条件判断类

javascript 复制代码
// filter:过滤数组
const evenNumbers = [1,2,3,4].filter(n => n%2 === 0); // [2,4]返回新数组

// some:至少一个元素满足条件
const hasNegative = [1, -2, 3].some(n => n < 0); // true返回布尔值

// every:所有元素满足条件
const allPositive = [1, 2, -3].every(n => n > 0); // false 返回布尔值

// find:查找首个符合条件的元素
const firstOver5 = [3,7,2,9].find(n => n > 5); // 7返回元素或undefined
方法 返回值类型 是否返回新数组 特点
filter Array ✅ 是 返回所有匹配元素的新数组
some Boolean ❌ 否 判断是否存在匹配元素
every Boolean ❌ 否 判断是否所有元素匹配
find 元素或undefined ❌ 否 返回第一个匹配的元素

实战技巧

  • 表单验证:formFields.every(field => field.valid)
  • 权限校验:user.roles.some(role => allowedRoles.includes(role))

3. 聚合计算类

javascript 复制代码
// reduce:终极聚合器
const sum = [1,2,3].reduce((acc, cur) => acc + cur, 0); // 6

// 高级用法:数组转对象
const users = [
  {id: 'a1', name: 'Alice'},
  {id: 'b2', name: 'Bob'}
];
const userMap = users.reduce((obj, user) => {
  obj[user.id] = user;
  return obj;
}, {});

// 输出:{a1: {id:'a1',name:'Alice'}, b2: {...}}

具体详解可以看JavaScript的常用数组API原理解析

原理流程图

复制代码
初始值 → 回调处理第1个元素 → 累积结果 → 处理第2个元素 → ... → 最终结果

4. 数组操作类

javascript 复制代码
// slice:纯函数截取(不改变原数组)
const arr = [1,2,3,4];
const part = arr.slice(1,3); // [2,3] 

// splice:破坏性操作(改变原数组)
const removed = arr.splice(1, 2, 'a', 'b'); 
// arr变为 [1,'a','b',4], removed为[2,3]

// flatMap:先映射再扁平化
const phrases = ["hello world", "goodbye moon"];
const words = phrases.flatMap(phrase => phrase.split(' ')); 
// ["hello","world","goodbye","moon"]

避坑指南

  • 需要纯操作时优先使用 slice、concat 等非破坏性方法
  • 修改原数组的方法:push/pop/shift/unshift/splice/sort/reverse

二、字符串核心 API 精讲

1. 内容检测类

javascript 复制代码
// includes:是否包含子串(取代 indexOf 检查)
'JavaScript'.includes('Script'); // true

// startsWith/endsWith:前缀/后缀检查
'https://xxx.com'.startsWith('https'); // true
'file.txt'.endsWith('.txt'); // true

// 实战:文件类型校验
function isImageFile(filename) {
  return ['.png','.jpg','.gif'].some(ext => 
    filename.endsWith(ext)
  );
}

2. 字符串操作类

javascript 复制代码
// slice:安全截取(接受负数)
const str = 'abcdef';
str.slice(2,4); // 'cd'
str.slice(-3);  // 'def'

// substring:类似 slice(但负数视为 0)
str.substring(2,4); // 'cd'
str.substring(4,2); // 'cd'(自动交换参数)

// padStart/padEnd:填充字符串
'5'.padStart(3, '0'); // '005'
'hi'.padEnd(5, '!');  // 'hi!!!'

// 实战:金额格式化 
function formatMoney(num) {
  return '¥' + num.toFixed(2).padStart(8, ' ');
}

具体详解可以看JavaScript的常用数组API原理解析

3. 模式匹配类

javascript 复制代码
// match:正则匹配
const email = 'test@example.com';
const match = email.match(/^(\w+)@([\w-]+\.)+[\w-]{2,4}$/);
if (match) {
  console.log(`用户名: ${match[1]}, 域名: ${match[2]}`);
}

// split:字符串分割
const csv = 'a,b,c,d';
const arr = csv.split(','); // ['a','b','c','d']

// 高级拆分:使用正则
const str = 'one two    three';
str.split(/\s+/); // ['one','two','three']

三、API 原理深度解析

1. 数组方法实现原理(手写核心)

javascript 复制代码
// 手写 filter 方法
Array.prototype._filter = function(callback) {
  const result = [];  // 1. 创建空数组存储结果
  for (let i = 0; i < this.length; i++) {  // 2. 遍历原数组
    if (callback(this[i], i, this)) {  // 3. 执行回调函数判断
      result.push(this[i]);  // 4. 符合条件的元素加入结果数组
    }
  }
  return result;  // 5. 返回结果数组
};

// 使用示例
const nums = [1,2,3,4];
const evens = nums._filter(n => n%2 === 0); // [2,4]

2. 字符串不可变性原理

javascript 复制代码
let str = 'hello';
str[0] = 'H'; // 无效!字符串不可变
console.log(str); // 仍然是 'hello'

// 正确修改方式
str = 'H' + str.slice(1); // 'Hello'

四、综合应用场景

场景 1:表格数据处理

javascript 复制代码
const data = [
  {id:1, name:'Alice', age:25},
  {id:2, name:'Bob', age:30},
  {id:3, name:'Charlie', age:28}
];

// 1. 获取所有年龄小于30的用户名
const names = data
  .filter(user => user.age < 30)
  .map(user => user.name); // ['Alice', 'Charlie']

// 2. 生成年龄统计
const ageStats = data.reduce((stats, user) => {
  stats.total += user.age;
  stats.max = Math.max(stats.max, user.age);
  stats.min = Math.min(stats.min, user.age);
  return stats;
}, {total:0, max: -Infinity, min: Infinity});

// 结果:{total:83, max:30, min:25}

场景 2:URL 参数解析

javascript 复制代码
function parseQueryParams(url) {
  const queryStr = url.split('?')[1] || '';
  return queryStr.split('&').reduce((params, pair) => {
    const [key, value] = pair.split('=');
    if (key) {
      params[key] = decodeURIComponent(value || '');
    }
    return params;
  }, {});
}

// 使用示例
const url = 'https://example.com?name=John&age=30';
console.log(parseQueryParams(url)); 
// {name: 'John', age: '30'}

五、常见误区警示

  1. forEach 与 map 混淆

    javascript 复制代码
    // 错误:试图用 forEach 返回新数组
    const badMap = arr.forEach(item => item * 2); // 返回 undefined
    
    // 正确:使用 map
    const goodMap = arr.map(item => item * 2);
  2. slice vs splice 混淆

    javascript 复制代码
    const arr = [1,2,3];
    arr.slice(1);    // 返回 [2,3],原数组不变
    arr.splice(1,1); // 返回 [2],原数组变为 [1,3]
  3. 字符串方法误用

    javascript 复制代码
    // 错误:试图用字符串方法操作数组
    [1,2,3].join('').includes('23'); // "123".includes('23') → true
    
    // 正确:数组应使用数组方法
    [1,2,3].slice(1).includes(2); // true
相关推荐
Mintopia几秒前
Three.js 射线拾取原理:像素世界的侦探故事
前端·javascript·计算机图形学
掘金安东尼19 分钟前
前端周刊第421期(2025年7月1日–7月6日)
前端·面试·github
摸鱼仙人~22 分钟前
深入理解 classnames:React 动态类名管理的最佳实践
前端·react.js·前端框架
未来之窗软件服务24 分钟前
chrome webdrive异常处理-session not created falled opening key——仙盟创梦IDE
前端·人工智能·chrome·仙盟创梦ide·东方仙盟·数据调式
kymjs张涛24 分钟前
零一开源|前沿技术周报 #6
前端·ios·harmonyos
玲小珑28 分钟前
Next.js 教程系列(十)getStaticPaths 与动态路由的静态生成
前端·next.js
天天鸭34 分钟前
写个vite插件自动处理系统权限,降低99%重复工作
前端·javascript·vite
蓝婷儿39 分钟前
每天一个前端小知识 Day 23 - PWA 渐进式 Web 应用开发
前端
无奈何杨1 小时前
CoolGuard风控中新增移动距离和移动速度指标
前端·后端
恋猫de小郭1 小时前
Google I/O Extended :2025 Flutter 的现状与未来
android·前端·flutter