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

作者: 前端AC | 原文: https://juejin.cn/post/7493086074685521935

一、数组核心 API 精讲

1. 遍历类方法

// 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. 条件判断类

// 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. 聚合计算类

// 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. 数组操作类

// 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. 内容检测类

// 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. 字符串操作类

// 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. 模式匹配类

// 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. 数组方法实现原理（手写核心）

// 手写 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. 字符串不可变性原理

let str = 'hello';
str[0] = 'H'; // 无效！字符串不可变
console.log(str); // 仍然是 'hello'

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

---

四、综合应用场景

场景 1：表格数据处理

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 参数解析

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 混淆

   // 错误：试图用 forEach 返回新数组
   const badMap = arr.forEach(item => item * 2); // 返回 undefined
   
   // 正确：使用 map
   const goodMap = arr.map(item => item * 2);

2. slice vs splice 混淆

   const arr = [1,2,3];
   arr.slice(1);    // 返回 [2,3]，原数组不变
   arr.splice(1,1); // 返回 [2]，原数组变为 [1,3]

3. 字符串方法误用

   // 错误：试图用字符串方法操作数组
   [1,2,3].join('').includes('23'); // "123".includes('23') → true
   
   // 正确：数组应使用数组方法
   [1,2,3].slice(1).includes(2); // true