JavaScript如何通过字符串变量名遍历多个不同命名的数组

需要实现遍历多个不同名称数组的需求：PHP中可通过$$name可变变量语法实现该操作，尝试在JavaScript中实现相同效果时遇到问题，初始编写的代码无法正常运行。

初始问题代码：

...
// rest of the code
var books = [
 {'h':'book 1','i':[ {'s':'1','w':'some text'}, {'s':'2','w':'other text'} ] }
];
var infos = [
 {'h':'HERE','i':[ {'h':'something','i':[ {'v':[{'g':1,'b':0}],'h':'text X','a':['bla','bla', 'bla']}]} ] }
];

var arrNames = ['books','infos'];

let z = document.getElementById('output');
for( i=0;i<arrNames.length;i++ ){
  arr = localStorage.getItem(arrNames[i]).split(','); // 运行失败
  html += arr[0]['h']+'<br>';
}
z.innerHTML = html;

预期输出结果：

book 1
HERE

问题原因 #

初始代码错误尝试从localStorage读取变量，实际上books、infos是代码中直接声明的变量，并未存入本地存储，因此无法读取到对应内容。

JavaScript中全局作用域声明的变量会挂载到顶层window对象上，可通过[变量名字符串]的方括号属性访问语法，实现类似PHP可变变量的效果，核心写法如下：

arr = window[arrNames[i]][0]['h'];

修正后的可运行完整代码：

var books = [
 {'h':'book 1','i':[ {'s':'1','w':'some text'}, {'s':'2','w':'other text'} ] }
];
var infos = [
 {'h':'HERE','i':[ {'h':'something','i':[ {'v':[{'g':1,'b':0}],'h':'text X','a':['bla','bla', 'bla']}]} ] }
];

var arrNames = ['books','infos'];
let html = '';
let z = document.getElementById('output');
for( let i=0;i<arrNames.length;i++ ){
  const currentArr = window[arrNames[i]];
  html += currentArr[0]['h']+'<br>';
}
z.innerHTML = html;

更稳妥的推荐写法 #

如果变量声明在函数、块级等非全局作用域下，无法通过window对象访问，更推荐提前将需要遍历的数组统一存入一个映射对象，通过key名匹配对应数组，不依赖全局环境，兼容性和可维护性更好：

// 统一管理待遍历的数组
const arrayStore = {
  books: [
    {'h':'book 1','i':[ {'s':'1','w':'some text'}, {'s':'2','w':'other text'} ] }
  ],
  infos: [
    {'h':'HERE','i':[ {'h':'something','i':[ {'v':[{'g':1,'b':0}],'h':'text X','a':['bla','bla', 'bla']}]} ] }
  ]
};

const arrNames = ['books','infos'];
let html = '';
let z = document.getElementById('output');
for( let i=0;i<arrNames.length;i++ ){
  const currentArr = arrayStore[arrNames[i]];
  html += currentArr[0]['h']+'<br>';
}
z.innerHTML = html;

内容的提问来源于stack exchange，提问作者trash2