← 返回目录

16. 数组与字符串常用方法

数组常用方法和字符串常用方法，这页是查文档级别的工具书。

核心数组方法：
① push/pop/shift/unshift/splice——增删改
② slice——截取不改变原数组
③ indexOf/includes——查找
④ join/split——数组转字符串 / 字符串转数组
⑤ map/filter/forEach——遍历处理

核心字符串方法：
① charAt/substring/slice——截取
② indexOf/includes/startsWith/endsWith——查找
③ replace/split/trim/toUpperCase——替换/分割/去空格/大小写

坑：slice 和 splice 别搞混、字符串方法返回新字符串不改变原串、split 第二个参数限制返回长度。

16.1 互动演示（对 [15,8,23,4,42,16,7] 跑一遍方法）

点按钮看每个方法对原数组的影响和返回结果。

16.2 知识点逐条讲解（配合代码）

① slice vs splice（最高频混淆）

slice（切一片）splice（动刀）
干嘛截一小段出来删/插/替换
动原数组？不动，给你新的直接改原数组
参数(从哪, 到哪，不含) 左闭右开(从哪, 删几个, 插谁...)

② 查找与判断

let arr = [1, 2, 2, 3];

// 找2在几号，找不到返-1
arr.indexOf(2);

// 有没有2？有 → true
arr.includes(2);

// 第一个大于1的 → 2
arr.find(function (item) { return item > 1; });

// 排数字必须传这个回调，否则按字符串排
arr.sort(function (a, b) { return a - b; });

③ 迭代五兄弟（都不动原数组）

方法干嘛的给你什么
forEach纯挨个看啥也不返回，不能 break
map把每项加工一遍一样长的新数组
filter挑出符合的挑出来的新数组
some有没有任意一个满足true / false
reduce一路累积成一个数一个结果
// 先备好这排数据，下面五个方法都拿它练
let list = [15, 8, 23, 4, 42, 16, 7];

// forEach：挨个看，啥也不返回
list.forEach(function (item, index) { console.log(item, index); });

// 挑出大于15的
list.filter(function (item) { return item > 15; });

list.map(function (item) {
  return item * 2;
// 每一项都加工成×2
});

// 一路累加
list.reduce(function (sum, item) { return sum + item; }, 0);

④ join / split 互转 + 字符串常用方法

// 数组拿横线连成字符串
[1, 2, 3].join("-");

// 按逗号切成数组
"10,20,30".split(",");

// 去掉两头多余空格
" hi js ".trim();

// 转大写 → "ABC"
"abc".toUpperCase();

// 只换第一个123
"123,456".replace("123", "a");

// 所有123都换
"123,456".replaceAll("123", "a");

⑥ X.3 实战：用在哪 / 常见坑 / 怎么解决

① 用在哪：列表渲染用 map()、筛选商品用 filter()、算总价用 reduce()。

② 常见坑：把 slice() 和 splice() 搞混；sort() 不传回调把数字按字符串排错。

③ 怎么解决：slice 不动原数组、splice 动原数组；排数字必须写 (a,b)=>a-b。

一句话记住：slice 不动原数组、splice 直接动；sort 排数字必须传 (a,b)=>a-b；map 加工、filter 挑、reduce 攒；join 数组转字符串、split 字符串转数组。

本页重点

API作用参数返回值代码示例
arr.map(f)每一项加工成新数组回调新数组
arr.map(function (x) {
  return x * 2;
});
arr.filter(f)挑出符合条件的回调新数组
arr.filter(function (x) {

  return x > 0;
});
arr.find(f)找第一个符合的回调元素或 undefined
arr.find(function (x) {

  return x > 0;
});
arr.reduce(f,0)累加成一个值回调、初始值结果
arr.reduce(function (s, x) {

  return s + x;
}, 0);
arr.sort(f)原地排序，改原数组回调原数组
arr.sort(function (a, b) {

  return a - b;
});
arr.slice(i,j)切片，不改原数组起、止新数组
arr.slice(0, 2);  // 取前2个
arr.splice(i,n)删/插，改原数组起、删几个被删数组
arr.splice(0, 1);  // 删改原数组
arr.join('-')连成字符串分隔符字符串
arr.join( & #x27; - & #x27;);  // [1,2] 变成 "1-2"