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

这一页是数组和字符串的「武器库」：slice 和 splice 别再搞混、find/filter/map/reduce 一行处理数据、join 和 split 互相转换。关键记住哪些会动原数组、哪些会给你一个新的。

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

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

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

① slice vs splice（最高频混淆）

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

② 查找与判断

let arr = [1,2,2,3];
arr.indexOf(2);        // 找2在几号，找不到返-1
arr.includes(2);       // 有没有2？有 → true
arr.find(item => item > 1);   // 第一个大于1的 → 2
arr.sort((a,b)=>a-b); // 排数字必须传这个回调，否则按字符串排

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

方法	干嘛的	给你什么
forEach	纯挨个看	啥也不返回，不能 break
map	把每项加工一遍	一样长的新数组
filter	挑出符合的	挑出来的新数组
some	有没有任意一个满足	true / false
reduce	一路累积成一个数	一个结果

// forEach：挨个看，啥也不返回
list.forEach((item, index) => console.log(item, index));
list.filter(item => item > 15);   // 挑出大于15的
list.map(item => item * 2);       // 每一项都加工成×2
list.reduce((sum, item) => sum + item, 0);  // 一路累加

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

[1,2,3].join("-");          // 数组拿横线连成字符串
"10,20,30".split(",");       // 按逗号切成数组

"  hi js  ".trim();          // 去掉两头多余空格
"abc".toUpperCase();         // 转大写 → "ABC"
"123,456".replace("123","a");   // 只换第一个123
"123,456".replaceAll("123","a");// 所有123都换

⑥ 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 字符串转数组。