如何将页面带src的Script统一存入单个对象（类图片存储形式）

嘿，我明白你的问题啦！你现在的代码每次遍历script标签都会往resources数组里推入一个单独的{js: src}对象，导致数组里分散着一堆独立的JS项——而你想要的是像images那样，把所有JS链接都集中存放在单个对象的数组属性里对吧？

方法一：预先创建JS容器再填充 #

如果resources已经包含了你的images对象，你可以先给它添加一个空的JS数组容器，再把所有script元素推进去：

// 假设你的resources已经有了images项，先添加JS容器对象
resources.push({ js: [] });

// 遍历所有带src的script标签，把它们推入JS数组
[].forEach.call(document.querySelectorAll("script[src]"), function(src) {
  // 找到resources里的JS容器，把当前src加进去
  resources.find(item => item.hasOwnProperty('js')).js.push(src);
});

方法二：更简洁的批量处理 #

你也可以先把所有script元素转成数组，再直接创建包含这个数组的对象推入resources，代码更清爽：

// 一次性获取所有带src的script元素并转成数组
const allJsScripts = Array.from(document.querySelectorAll("script[src]"));

// 将整个JS数组存入单个对象，再推入resources
resources.push({ js: allJsScripts });

效果对比 #

修改后你的resources结构会变成这样：

0: {images: Array(61)}
1: {js: Array(n)}  // n是页面中带src的script数量

而不是原来那种每个JS单独占一个数组项的分散结构啦～

内容的提问来源于stack exchange，提问作者Sireini