JS如何使用嵌套地图？答案

【问题标题】：JS How to use nested map?JS如何使用嵌套地图？
【发布时间】：2018-06-17 12:55:54
【问题描述】：

这是代码，console.log 部分下面是我的问题。

它会在这样的标签中注销所有 3 类偏移量：

<tag id="id1" class="$offset1, $offset2, $offset3">

但我只需要这样的标签中的一类偏移量：

<tag id="id1" class="$offset1">

我该如何解决这个问题？

说明：

向 html 元素添加新类

function $addClsls(element, ...newClass) {
    return element.classList.add(...newClass);
}

从 html 元素中移除类

function $rmClsls(element, ...rmClass) {
    return element.classList.remove(...rmClass);
}

选择一个元素 id 或类

function $select(element) {
    return document.querySelector(element);
}

从选定元素中添加或删除类的函数

function $switch(selectEle, eleClass, indexNum) {
    switch (indexNum) {
        case 0:
            $addClsls(selectEle, eleClass);
            break;
        case 1:
            $rmClsls(selectEle, eleClass);
            break;
        default:
    }
}

将 3 个元素 id 放入数组中

let groupElements = [$select('#id-1'), $select('#id-2'), $select('#id-
3')];

将3个元素类放入数组（无需放入。）

let groupOffsets = ['offset1', 'offset2', 'offset3'];

设置初始化时间值

let addTime = 0;

检查是否为 true 以通过 groupElements 和 groupOffsets 进行映射并设置延迟时间

if (true) {
    groupElements.map( i => {
      setTimeout( () => {
        $switch(i, groupOffsets.map( x => x ), 0)
        console.log(i) // <= logs out results
      }, 0 + addTime );
      addTime += 1000;
    });
}

目标是这样退出：

<tag id="id-1" class="offset1"> </tag>
<tag id="id-2" class="offset2"> </tag>
<tag id="id-3" class="offset3"> </tag>

但是问题是这样的：

<tag id="id-1" class="offset1,offset2,offset3"></tag>
<tag id="id-2" class="offset1,offset2,offset3"></tag>
<tag id="id-3" class="offset1,offset2,offset3"></tag>

【问题讨论】：

请提供一个可运行的minimal reproducible example，并更好地解释如何确定使用哪个类
groupOffests[i] 而不是 groupOffsets.map(x =>x) ?
我试过 groupOffsets[i]，它注销 undefined :(

标签： javascript ecmascript-6 map-function nested-map

【解决方案1】：

嗯，我把它修好了。所以我要回答我自己的问题。 ;)

我尝试了另一种方法来做地图功能，我使用了一个二维数组而不是 2 个单独的数组

let groupItems = [ 
    [$select('#id-1'), 'offset1'],
    [$select('#id-2'), 'offset2'],
    [$select('#id-3'), 'offset3']
]
groupitems.map( items => {
            setTimeout( () => {
                // destruct first dimensional
                let [ x ] = [items];
                // destruct second dimensional
                let [ i, j ] = x;
                // first round i = $select('#id-1'); j = 'offset2';
                // second and third round so forth
                sectionSwitch( i, j, 1);
            }, 0 + addTime);
            addTime += 1000;
        })

【讨论】：