如果不存在，则将 js 添加到数组 - Javascript

概述

在 Javascript 编程中，我们经常需要将某些脚本文件添加到一个数组中。但是，有时这些脚本文件并非每个页面都所需，因此我们需要在添加脚本文件到数组之前，先判断该脚本文件是否存在。本文将介绍如何在 Javascript 中实现这一功能。

实现

在 Javascript 中，我们可以使用 document.createElement("script") 方法创建一个脚本标签，并将它添加到 HTML 页面中。在脚本标签加载完毕后，我们可以将包含脚本的对象添加到数组中。以下是我们如何实现该方法：

function addScriptToPage(src, callback) {
  // 检查脚本是否存在于页面中
  var scripts = document.querySelectorAll('script[src="' + src + '"]');
  if (scripts.length > 0) {
    // 如果脚本已经存在于页面中，执行回调函数
    if (typeof callback === 'function') {
      callback();
    }
    return;
  }

  // 如果脚本不存在于页面中，创建一个新的脚本标签并添加到页面中
  var script = document.createElement('script');
  script.src = src;
  script.onload = function () {
    // 加载完毕后执行回调函数
    if (typeof callback === 'function') {
      callback();
    }
  };
  document.body.appendChild(script);
}

该函数接受两个参数：脚本的 URL 和回调函数。如果你想在脚本加载完成后执行某些操作，可以将回调函数传入该函数的第二个参数中。

函数首先检查脚本是否已经存在于页面中。如果脚本已经存在于页面中，则直接执行回调函数（如果有）并返回。否则，将创建一个新的脚本标签，同时为脚本标签指定 URL。然后将脚本标签添加到页面中，并在脚本加载完毕后执行回调函数（如果有）。

以下是如何使用该函数：

var scriptUrls = [
  'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js',
  'https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.min.js',
  'https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js',
];

var loadedScripts = [];

for (var i = 0; i < scriptUrls.length; i++) {
  addScriptToPage(scriptUrls[i], function () {
    console.log(scriptUrls[i] + ' 已经加载完毕');
    loadedScripts.push(scriptUrls[i]);
  });
}

以上代码将 scriptUrls 数组中的每个 URL 传入 addScriptToPage 函数中。在脚本加载完成后，将把该 URL 添加到 loadedScripts 数组中，并输出 '已经加载完毕' 的信息。

结论

本文介绍了如何在 Javascript 中实现，“如果不存在，则将 js 添加到数组”的方法。如有任何问题，欢迎给我们留言。谢谢！