如何将数组从 addEventListener 内部导出到另一个 JS 文件？

Question

我的网络应用程序有一个过滤器页面，如果设置了最后一个过滤器的值，addEventListener 使用 filter() 从我的数据集数组 filterArr 创建一个数组，基于select 元素中选择的值。

如何将生成的数组导出到另一个 JS 文件？
使用 export default arrForQuiz 生成错误“意外令牌：导出”。

添加了 addEventListener 的代码和我正在尝试的视觉效果。除此之外，涉及的两个JS文件都有type="module"，如图所示，原始数据集数组已经从第三个文件导入。

我对此很陌生。当我使用一个 JS 文件（两页）时出现各种奇怪的错误，因此切换到目前效果很好的这种方法。如果这不是个好主意，我洗耳恭听。

代码：

chooseSection.addEventListener("input", () => {
    let arrForQuiz = filterArr.filter( function(el) {
        return  el.book === chooseBook.value &&
                el.chapter === chooseChapter.value &&
                el.section === chooseSection.value;
        }); 
    // export arrForQuiz to another file
});

视觉：

Answer 1

我会将 arrForQuiz 定义为导出并将其导入到我要共享的文件中。这样在一个文件中所做的更改将在另一个文件中可见。

例如像这样：

shared-stuff.js

export const sharedObject = [];

file-a.js

import { sharedObject } from './shared-stuff.js';

// moving the pointer will push a `1` into the shared array
window.addEventListener('pointermove', () => sharedObject.push(1);

file-b.js

import { sharedObject } from './shared-stuff.js';

// clicking the window will output the shared arrays current content
window.addEventListener('click', () => console.log(sharedObject));

为此，导出的值需要是一个对象，并且不能在使用它的文件之一中重新分配。否则将不会有到共享内存的公共绑定。

在您的示例中，过滤需要保留原始数组，因此您必须 re-write 过滤。而不是 arrForQuiz = filterArr.filter(...) 你会做这样的事情：

// we iterate over the array in reverse order, as we might change the input array
// and we don't want to mess up the indexing
for (let i = arrForQuiz.length - 1; i < 0; i -= 1) {
    const el = arrForQuiz[i];

    if (el.book === chooseBook.value &&
        el.chapter === chooseChapter.value &&
        el.section === chooseSection.value) {
        continue;
    }
    
    // Array.prototype.splice changes the array in place
    arrForQuiz.splice(i, 1);
}

当导出一个包含数组的字段的对象时，您可以坚持使用更实用的方法来处理数组。下面是我的意思的更多细节：

shared-stuff-2.js

export const state = { sharedArray: [] };

如果您像这样定义导出，对 state 对象的更改将再次在导入之间共享，但需要注意的是，您通常可以将其分配给字段，就像在我们的例子中 sharedArray ，这些更改将传播到导入该对象的其他文件。

Answer 2

经过无数次不同的尝试后，这就是有效的方法。感谢安德烈的灵感。他的回答可能应该有效，我想我只是没有做对。

解决方案：
使用 sessionStorage 将 selected 值传递到另一个 js 文件并在那里进行过滤。

filter.js中的代码：
-> 随着最后一个 select 元素的值发生变化，将所有 selected 值存储在 sessionStorage 中。

chooseSection.addEventListener("input", () => {
    sessionStorage.setItem('storedBook', chooseBook.value);
    sessionStorage.setItem('storedChapter', chooseChapter.value);
    sessionStorage.setItem('storedSection', chooseSection.value);
});

script.js中的代码：
-> 从 sessionStorage 获取 selected 值并使用它们过滤数据数组。

let selectedBook = sessionStorage.getItem('storedBook');
let selectedChapter = sessionStorage.getItem('storedChapter');
let selectedSection = sessionStorage.getItem('storedSection');

let quizArr = mainArr.filter( function(el) {
    return  el.book === selectedBook &&
            el.chapter === selectedChapter &&
            el.section === selectedSection;
});

视觉：

如何将数组从 addEventListener 内部导出到另一个 JS 文件？

How to export array from inside addEventListener to another JS file?

javascript

arrays

events

web-applications