这篇内容是在有道云旧笔记基础上重新整理的 JavaScript 与前端开发 笔记。原始记录偏碎片化，这里补充了使用场景、阅读顺序和落地时需要注意的边界，方便以后在项目里快速复用。
适用场景 ​
- 前端业务中需要快速处理数据、DOM、浏览器能力或通用工具函数时参考。
- 把散落在项目里的小技巧抽成可复用代码片段，减少重复实现。
- 排查兼容性和边界输入问题前，先用本文示例确认核心思路。
核心要点 ​
- 正文以代码或命令片段为主，阅读时建议先确认目标问题，再挑选对应片段验证。
1、.forEach
对数组的每个元素执行一次提供的函数，而且不会改变原数组。
2、.map
原数组中的每个元素都按顺序调用一次 callback 函数。callback 每次执行后的返回值（包括 undefined）组合起来形成一个新数组
const fileList = [ { uid: '1', name: 'xxx.png', status: 'done', url: '123456.png', },{ uid: '2', name: 'xxx.png', status: 'done', url: 'abcdef.png', } ] const image = fileList.map(item => item.url) console.log(image) image = ['123456.png', 'abcdef.png']
3、.filter
过滤回调返回为false的值，每个值都保存在一个新数组中，然后返回。
const dataSource = ['a', 2, 'b', 6, 9 ,'x'] const idx = [2, 'x'] // 过滤 dataSource 中 包含有 idx 数组的 值或者 字符串 data = dataSource.filter(item => ids.indexOf(item) === -1) console.log(data) data = ['a', 'b', 6, 9]
4、.reduce
方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。reduce() 方法接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调用 reduce() 的数组。
注意这里的回调接受两个参数:sum和number。第一个参数总是前一个迭代返回的结果，第二个参数在遍历中的当前数组元素。
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].reduce((sum, number) => { return sum + number; }, 0) // -> 55
5、.findIndex .find
findIndex帮助咱们找到数组中给定值的索引。
find与findIndex的唯一区别在于，它返回的是实际值，而不是索引。实际工作中，咱们可以重用已经实现的findIndex
[1, 2, 3, 4, 5, 6, 7].findIndex(value => value === 5) // 5 => 索引值 [1, 2, 3, 4, 5, 6, 7].find(value => value === 5) // 5 => 实际值
6、.indexOf .lastIndexOf
indexOf是获取给定值索引的另一种方法。然而，这一次，咱们将实际值作为参数而不是函数传递。同样，为了简化实现，可以使用前面实现的findIndex
lastIndexOf的工作方式与indexOf相同，lastIndexOf() 方法返回指定元素在数组中的最后一个的索引，如果不存在则返回 -1
[3, 2, 3].indexOf(3); // -> 0 [3, 2, 3].lastIndexOf(3); // -> 2
7、.indexOf .lastIndexOf
every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试，它返回一个布尔值。
[1, 2, 3].every(value => Number.isInteger(value)); // -> true
8、.some .includes
some 方法与 every 刚好相反，即只要其中一个为true 就会返回true。与every 方法类似，咱们可以将some 方法看作一个等价于逻辑或数组。
includes方法的工作方式类似于 some 方法，但是includes不用回调，而是提供一个参数值来比较元素。
[1, 2, 3, 4, 5].some(number => number === 5); // -> true [1, 2, 3].includes(3); // -> true
9、.concat
concat() 方法用于合并两个或多个数组，此方法不会更改现有数组，而是返回一个新数组。
[1, 2, 3].concat([4, 5], 6, [7, 8]) // -> [1, 2, 3, 4, 5, 6, 7, 8]
10、.join
join() 方法用于把数组中的所有元素放入一个字符串，元素是通过指定的分隔符进行分隔的。
['Brian', 'Matt', 'Kate'].join(',') // -> Brian, Matt, Kate
11、.reverse
reverse() 方法将数组中元素的位置颠倒，并返回该数组，该方法会改变原数组。
12、.reverse
reverse() 方法将数组中元素的位置颠倒，并返回该数组，该方法会改变原数组。
13、.form 数组去重
join() 方法用于把数组中的所有元素放入一个字符串，元素是通过指定的分隔符进行分隔的。
Array.from(new Set([2, 5, 16, 20 ,5 ,3])) // -> [2, 5, 16, 20, 3]
实践检查清单 ​
- 把示例函数放进业务前，先补齐空值、异常输入、异步失败和浏览器兼容性测试。
- 通用工具函数应尽量收敛到项目公共模块，避免多个页面复制出不同版本。
复盘小结 ​
这篇笔记更适合作为问题排查或方案落地前的速查材料。后续如果在真实项目中再次遇到同类问题，可以继续把具体版本、报错信息、最终取舍和验证结果补到对应小节里，让它从代码片段逐步沉淀成完整方案。