javascript - 在 for...of 对象循环中使用变量

Question

我有一个对象的 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);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

带变量的代码：

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);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

标签： javascriptjqueryfor-loopobjectecmascript-6

Answer 1

使用计算属性名称语法 { [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);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>