Javascript 使用js或jquery对数组进行迭代并附加到html的更好方法

我想知道是否有一种更短/更好的方法来迭代包含{key:[array]，key2:[array]}的数组

var ray = {'A':['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'],
'B': ['m', 'n', 'b', 'v', 'c', 'x', 'z'],
'C': ['o', 'i', 'd', 'f', 'j', 'a', 'l', 'a', 'd']
}

目前我有

    function(data) {
        var ray = data.result;
        $.each(ray, function() {
          if(this == ray.A){
            $.each(this, function(i, v) {
              $("#list1").append('<span class="tag">' + v + "</span>");
            });
          }
          if(this == ray.B){
            $.each(this, function(i, v) {
              $("#list2").append('<span class="tag2">' + v + "</span>");
            });
          }

        });
    }

功能（数据）{
var-ray=data.result；
$.each（光线，函数（）{
if（this==ray.A）{
$。每个（此，函数（i，v）{
$（“#列表1”）。附加（“+v+”）；
});
}
if（this==ray.B）{
$。每个（此，函数（i，v）{
$（“#列表2”）。附加（“+v+”）；
});
}
});
}

等等

有没有更好的方法来避免过度重复

使用

$（“#list”+j）。由于
列表
具有相同的名称，因此使用循环追加

var-ray={'A'：['A'，'b'，'c'，'d'，'e'，'f'，'g'，'h'，'i']，
‘B’：[m’、‘n’、‘B’、‘v’、‘c’、‘x’、‘z’]，
‘C’：[‘o’、‘i’、‘d’、‘f’、‘j’、‘a’、‘l’、‘a’、‘d’]
}
函数arr（）{
var j=0；
$.each（光线，函数（）{
j++；
$。每个（此，函数（i，v）{
$（“#list”+j）.append（“+v+”）；
});
});
}
arr（）
根据您的数据类型，您通常可以执行以下操作

Object.keys(ray).forEach(k => ray[k].forEach(e => doSomethingWith(k,e)))

我会试试看！不知道javascript有这个！它是否得到广泛的浏览器支持？@Fanna1119唯一的新功能是作为ES6规范一部分的箭头功能。很长一段时间以来，几乎所有浏览器都可以使用箭头。（最新支持的是MAC中的Safari 10+）不过，将箭头转换为经典函数定义并不重要。例如
x=>x
是
函数（x）{returnx；}
那么它就完美了！我就换几块吧！非常感谢。正如我所注意到的，IE11并不支持它，尽管其他所有的IE11都支持它。结合@jafarbtech answer，我走上了正确的道路。非常感谢。