检查是否存在JavaScript变量并检查其值

Question

我觉得这段代码可以在某种程度上被浓缩或者做得更好。事实上可能不是，但我想我会让一些人看看。我的站点上有多个页面，在某些页面中，我设置了一个JavaScript变量：

var header_check = "user-profile";

有些页我没有设置那个变量。在另一个加载到页面上的JavaScript文件中，我检查该变量是否存在，如果存在，则执行各种操作。

这是检查变量是否存在的最佳方法吗？而且，这是查看是否设置了user-profile的最佳方法吗？

var header_cookie = typeof header_check !== 'undefined' ? 'user-profile' : 'admin-profile';
var cookie_check = header_cookie == 'user-profile' ? true : false;

var city_profile = cookie_check ? 'userCity' : 'city';
var state_profile = cookie_check ? 'userState' : 'state';

Answer 1

首先，您的代码实际上分解为这个逻辑，我发现在试图缩短它之前，先写出更长的版本来完全理解逻辑流是有帮助的：

var header_cookie, cookie_check, city_profile, state_profile;
if (typeof header_check !== "undefined") {
    header_cookie = 'user_profile';
    cookie_check = true;
    city_profile = 'userCity';
    state_profile = 'userState';
} else {
    header_cookie = 'admin_profile';
    cookie_check = false;
    city_profile = 'city';
    state_profile = 'state;
}

FYI，我还发现这比你的代码更容易跟踪实际发生的事情。它还保存了几个关于cookie_check值的比较。

有一些方法可以缩短这一点，但还不完全清楚是否有“更好”的定义包括了以前从未见过这段代码的人的可读性，但是您可以决定如何看待这些替代方案的问题：

由于实际上只有两种状态，所以可以预定义每种状态，然后选择使用哪一种状态并访问单个状态对象的属性：

var userState = {
    header_cookie: 'user_profile', city_profile: 'userCity', state_profile: 'userState';
};
var adminState = {
    header_cookie: 'admin_profile', city_profile: 'city', state_profile: 'state';
};
var state = typeof header_check !== "undefined" ? userState: adminState;

这样做，您将访问state.header_cookie、state.city_profile和state.state_profile，而不是独立的变量。

或者，如果希望保留单个变量，可以这样做：

var states = {
    header_cookie: ['user_profile', 'admin_profile'], 
    city_profile: ['userCity', 'city'],
    state_profile: 'userState', 'state'];
};

var stateIndex = typeof header_check !== "undefined" ? 0 : 1;
var header_cookie = states.header_cookie[stateIndex];
var city_profile = states.city_profile[stateIndex];
var state_profile = state.state_profile[stateIndex];