在网页中提取链接的“三板斧”

var list = document.querySelectorAll("a");
var result = "";
for (var i = 0; i < list.length; i++) {
  if (list[i].herf.indexOf("mkv") !== -1) { // 筛选
    result += list[i].href + "\n"; // 收集结果
  }
}
console.log(result);

1. 拿到数据源的列表这里通过浏览器的 Selector API 将 DOM 中所有的链接元素提取出来，由于 document.querySelectorAll 方法返回的对象不是Array 数组类型，所以这里通过 ES6 的 ... 扩展语法，将它变为一个真正的 JS 数组。

[...document.querySelectorAll('a')]

2. 过滤对这个数组执行 filter 方法，传入一个判断函数，这里的判断条件是，链接是否包含 "mkv"（代表视频格式的后缀）。

[...document.querySelectorAll('a')]
  .filter((item) => item.href.indexOf('mkv') !== -1 )

我们可以看到，经过这一段处理，返回一个过滤后只剩下 25 个元素的数组。

3. 将链接元素映射为链接字符串这里的数组的元素全都是 DOM 中的链接元素节点，但我要的是字符串，所以这里需要通过映射(map)的方式把元素转为链接，链接在这里表现为 a 元素的 href 属性。

[...document.querySelectorAll('a')]
  .filter((item) => item.href.indexOf('mkv') !== -1 )
  .map((item) => item.href)

数组执行 map 方法以后，返回的是每一个元素经过映射函数之后的数组。

4. 获得最终结果：由于这里是一个数组，我们最后要的是一个可以复制出来的字符串，所以最后还要进行一个化约(reduce)的操作。JS 数组的 reduce 方法至少需要传入一个接收两个参数的累积函数，每一步累积的变量 accumulator，代表累积过程的当前元素 currentValue，由于这里是给链接字符串之间添加一个换行符，所以累积函数可以写成：

function (accumulator, currentValue) {
  return accumulator + '\n' + currentValue；
}

简化为箭头函数的形式，则是 (accumulator, currentValue) => accumulator + '\n' + currentValue
然后得到最终的代码：

[...document.querySelectorAll('a')]
  .filter((item) => item.href.indexOf('mkv') !== -1 )
  .map((item) => item.href)
  .reduce((accumulator, currentValue) => accumulator + '\n' + currentValue)

reduce 方法执行时，会一个个遍历列表的元素，按照函数所描述的规则去累积结果。