在 for...of 对象循环中使用变量答案

【问题标题】：Use variables in for...of object loop在 for...of 对象循环中使用变量
【发布时间】：2020-10-14 05:30:55
【问题描述】：

我有一个对象的 for...of 循环。

for(const {site, dt, cat, ...vals} of obj[key]) {
   ...
}

在@user120242 的帮助下编写代码：原代码

let obj= {
  'Jan 01': [
             {dt: 'Jan 01', cat: 'abc', site: 'google', val1:10, val2:20, val3:30},
             {dt: 'Jan 01', cat: 'abc', site: 'bing', val1:23, val2:12, val3:14},
             {dt: 'Jan 01', cat: 'abc', site: 'jeeves', val1:67, val2:78, val3:12},
             {dt: 'Jan 01', cat: 'pqr', site: 'google', val1:10, val2:20, val3:30},
             {dt: 'Jan 01', cat: 'pqr', site: 'bing', val1:23, val2:12, val3:14},
             {dt: 'Jan 01', cat: 'pqr', site: 'jeeves', val1:67, val2:78, val3:12},
             {dt: 'Jan 01', cat: 'xyz', site: 'google', val1:10, val2:20, val3:30},
             {dt: 'Jan 01', cat: 'xyz', site: 'bing', val1:23, val2:12, val3:14},
             {dt: 'Jan 01', cat: 'xyz', site: 'jeeves', val1:67, val2:78, val3:12}
            ],
  'Feb 01': [
             {dt: 'Feb 01', cat: 'abc', site: 'google', val1:12, val2:11, val3:41},
             {dt: 'Feb 01', cat: 'abc', site: 'bing', val1:45, val2:67, val3:0},
             {dt: 'Feb 01', cat: 'abc', site: 'jeeves', val1:78, val2:34, val3:41},
             {dt: 'Feb 01', cat: 'pqr', site: 'google', val1:44, val2:88, val3:5},
             {dt: 'Feb 01', cat: 'pqr', site: 'bing', val1:56, val2:11, val3:99},
             {dt: 'Feb 01', cat: 'pqr', site: 'jeeves', val1:22, val2:34, val3:77},
             {dt: 'Feb 01', cat: 'xyz', site: 'google', val1:33, val2:99, val3:34},
             {dt: 'Feb 01', cat: 'xyz', site: 'bing', val1:77, val2:55, val3:14},
             {dt: 'Feb 01', cat: 'xyz', site: 'jeeves', val1:33, val2:23, val3:98}
            ],
  'Mar 01': [
             {dt: 'Mar 01', cat: 'abc', site: 'google', val1:11, val2:20, val3:6},
             {dt: 'Mar 01', cat: 'abc', site: 'bing', val1:22, val2:91, val3:89},
             {dt: 'Mar 01', cat: 'abc', site: 'jeeves', val1:33, val2:81, val3:12},
             {dt: 'Mar 01', cat: 'pqr', site: 'google', val1:44, val2:71, val3:33},
             {dt: 'Mar 01', cat: 'pqr', site: 'bing', val1:55, val2:61, val3:14},
             {dt: 'Mar 01', cat: 'pqr', site: 'jeeves', val1:66, val2:51, val3:43},
             {dt: 'Mar 01', cat: 'xyz', site: 'google', val1:77, val2:41, val3:98},
             {dt: 'Mar 01', cat: 'xyz', site: 'bing', val1:88, val2:31, val3:23},
             {dt: 'Mar 01', cat: 'xyz', site: 'jeeves', val1:99, val2:21, val3:4}
            ]
}

for(const key of Object.keys(obj)) {
  const catMap = new Map()
  for(const {site, dt, cat, ...vals} of obj[key]) {
    const row = catMap.get(dt+','+cat)||{dt, cat}
    Object.entries(vals).forEach(([k,v])=>row[k]=(row[k]||0)+v)
    catMap.set(dt+','+cat, row)
  }
  obj[key] = [...catMap.values()]
}

console.log(obj);

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

带变量的代码：

let obj= {
  'Jan 01': [
             {dt: 'Jan 01', cat: 'abc', site: 'google', val1:10, val2:20, val3:30},
             {dt: 'Jan 01', cat: 'abc', site: 'bing', val1:23, val2:12, val3:14},
             {dt: 'Jan 01', cat: 'abc', site: 'jeeves', val1:67, val2:78, val3:12},
             {dt: 'Jan 01', cat: 'pqr', site: 'google', val1:10, val2:20, val3:30},
             {dt: 'Jan 01', cat: 'pqr', site: 'bing', val1:23, val2:12, val3:14},
             {dt: 'Jan 01', cat: 'pqr', site: 'jeeves', val1:67, val2:78, val3:12},
             {dt: 'Jan 01', cat: 'xyz', site: 'google', val1:10, val2:20, val3:30},
             {dt: 'Jan 01', cat: 'xyz', site: 'bing', val1:23, val2:12, val3:14},
             {dt: 'Jan 01', cat: 'xyz', site: 'jeeves', val1:67, val2:78, val3:12}
            ],
  'Feb 01': [
             {dt: 'Feb 01', cat: 'abc', site: 'google', val1:12, val2:11, val3:41},
             {dt: 'Feb 01', cat: 'abc', site: 'bing', val1:45, val2:67, val3:0},
             {dt: 'Feb 01', cat: 'abc', site: 'jeeves', val1:78, val2:34, val3:41},
             {dt: 'Feb 01', cat: 'pqr', site: 'google', val1:44, val2:88, val3:5},
             {dt: 'Feb 01', cat: 'pqr', site: 'bing', val1:56, val2:11, val3:99},
             {dt: 'Feb 01', cat: 'pqr', site: 'jeeves', val1:22, val2:34, val3:77},
             {dt: 'Feb 01', cat: 'xyz', site: 'google', val1:33, val2:99, val3:34},
             {dt: 'Feb 01', cat: 'xyz', site: 'bing', val1:77, val2:55, val3:14},
             {dt: 'Feb 01', cat: 'xyz', site: 'jeeves', val1:33, val2:23, val3:98}
            ],
  'Mar 01': [
             {dt: 'Mar 01', cat: 'abc', site: 'google', val1:11, val2:20, val3:6},
             {dt: 'Mar 01', cat: 'abc', site: 'bing', val1:22, val2:91, val3:89},
             {dt: 'Mar 01', cat: 'abc', site: 'jeeves', val1:33, val2:81, val3:12},
             {dt: 'Mar 01', cat: 'pqr', site: 'google', val1:44, val2:71, val3:33},
             {dt: 'Mar 01', cat: 'pqr', site: 'bing', val1:55, val2:61, val3:14},
             {dt: 'Mar 01', cat: 'pqr', site: 'jeeves', val1:66, val2:51, val3:43},
             {dt: 'Mar 01', cat: 'xyz', site: 'google', val1:77, val2:41, val3:98},
             {dt: 'Mar 01', cat: 'xyz', site: 'bing', val1:88, val2:31, val3:23},
             {dt: 'Mar 01', cat: 'xyz', site: 'jeeves', val1:99, val2:21, val3:4}
            ]
}

let site_val = 'site';
let dt_val = 'dt'
let cat_val = 'cat'

for(const key of Object.keys(obj)) {
  const catMap = new Map()
  for(const {site_val, dt_val, cat_val, ...vals} of obj[key]) {
    const row = catMap.get(dt_val+','+cat_val)||{dt_val, cat_val}
    Object.entries(vals).forEach(([k,v])=>row[k]=(row[k]||0)+v)
    catMap.set(dt_val+','+cat_val, row)
  }
  obj[key] = [...catMap.values()]
}

console.log(obj);

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

我想使用变量而不是site、dt、cat 使其更具动态性。当我使用变量时，我得到undefined。如何使用变量？

【问题讨论】：

不清楚你的意思。在上面的代码中，site、dt、cat等是变量
供参考：stackoverflow.com/questions/62545906/…
您的意思是：{site: newVarName}？或者您是说要自定义要提取的键，例如 {[keyNameVar]: myVar}？
也许您可以通过editing your question 的 “当我使用变量时，我得到未定义” 来显示您的意思，以实际显示该代码
不，你没有。您说“当我使用变量时，我会变得未定义”，但您没有解释这意味着什么，也没有显示该代码

标签： javascript jquery for-loop object ecmascript-6

【解决方案1】：

使用computed property name 语法 { [computedName+'str']: varName } ：

let obj= {
  'Jan 01': [
             {dt: 'Jan 01', cat: 'abc', site: 'google', val1:10, val2:20, val3:30},
             {dt: 'Jan 01', cat: 'abc', site: 'bing', val1:23, val2:12, val3:14},
             {dt: 'Jan 01', cat: 'abc', site: 'jeeves', val1:67, val2:78, val3:12},
             {dt: 'Jan 01', cat: 'pqr', site: 'google', val1:10, val2:20, val3:30},
             {dt: 'Jan 01', cat: 'pqr', site: 'bing', val1:23, val2:12, val3:14},
             {dt: 'Jan 01', cat: 'pqr', site: 'jeeves', val1:67, val2:78, val3:12},
             {dt: 'Jan 01', cat: 'xyz', site: 'google', val1:10, val2:20, val3:30},
             {dt: 'Jan 01', cat: 'xyz', site: 'bing', val1:23, val2:12, val3:14},
             {dt: 'Jan 01', cat: 'xyz', site: 'jeeves', val1:67, val2:78, val3:12}
            ],
  'Feb 01': [
             {dt: 'Feb 01', cat: 'abc', site: 'google', val1:12, val2:11, val3:41},
             {dt: 'Feb 01', cat: 'abc', site: 'bing', val1:45, val2:67, val3:0},
             {dt: 'Feb 01', cat: 'abc', site: 'jeeves', val1:78, val2:34, val3:41},
             {dt: 'Feb 01', cat: 'pqr', site: 'google', val1:44, val2:88, val3:5},
             {dt: 'Feb 01', cat: 'pqr', site: 'bing', val1:56, val2:11, val3:99},
             {dt: 'Feb 01', cat: 'pqr', site: 'jeeves', val1:22, val2:34, val3:77},
             {dt: 'Feb 01', cat: 'xyz', site: 'google', val1:33, val2:99, val3:34},
             {dt: 'Feb 01', cat: 'xyz', site: 'bing', val1:77, val2:55, val3:14},
             {dt: 'Feb 01', cat: 'xyz', site: 'jeeves', val1:33, val2:23, val3:98}
            ],
  'Mar 01': [
             {dt: 'Mar 01', cat: 'abc', site: 'google', val1:11, val2:20, val3:6},
             {dt: 'Mar 01', cat: 'abc', site: 'bing', val1:22, val2:91, val3:89},
             {dt: 'Mar 01', cat: 'abc', site: 'jeeves', val1:33, val2:81, val3:12},
             {dt: 'Mar 01', cat: 'pqr', site: 'google', val1:44, val2:71, val3:33},
             {dt: 'Mar 01', cat: 'pqr', site: 'bing', val1:55, val2:61, val3:14},
             {dt: 'Mar 01', cat: 'pqr', site: 'jeeves', val1:66, val2:51, val3:43},
             {dt: 'Mar 01', cat: 'xyz', site: 'google', val1:77, val2:41, val3:98},
             {dt: 'Mar 01', cat: 'xyz', site: 'bing', val1:88, val2:31, val3:23},
             {dt: 'Mar 01', cat: 'xyz', site: 'jeeves', val1:99, val2:21, val3:4}
            ]
}

let site_key = 'site';
let dt_key = 'dt'
let cat_key = 'cat'

for(const key of Object.keys(obj)) {
  const catMap = new Map()
  for(const {
       [site_key]:site_val,
       [dt_key]:dt_val,
       [cat_key]:cat_val, ...vals} of obj[key]) {
    const row = catMap.get(dt_val+','+cat_val)||{dt_val, cat_val}
    Object.entries(vals).forEach(([k,v])=>row[k]=(row[k]||0)+v)
    catMap.set(dt_val+','+cat_val, row)
  }
  obj[key] = [...catMap.values()]
}

console.log(obj);

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：