JS变量存在则执行否则跳过的实现及Google Charts柱状图代码咨询

一、JavaScript中实现「变量存在则执行代码，否则跳过」的逻辑 #

在JS里，根据变量的类型和使用场景，有几种实用的实现方式，我给你梳理一下：

• 基础存在性判断（避免未声明报错）
  如果变量可能根本没被声明，一定要用typeof来做前置判断，防止抛出ReferenceError：

  // 检查变量是否已定义且不为空/假值
  if (typeof myVariable !== 'undefined' && myVariable) {
    // 变量存在时执行的代码
    console.log('变量有效，执行对应操作');
  }
  

  要是你只关心变量是否被定义（不管值是0、''这类假值），去掉后面的&& myVariable就行。

• 对象属性的存在性判断（可选链语法）
  如果你要判断的是对象的嵌套属性，ES2020+的可选链操作符?.会非常省心，它会自动处理属性不存在的情况，不会报错：

  const user = { name: 'Bob' };
  
  // 如果user.contact.phone存在，就执行打印操作
  user.contact?.phone && console.log('用户手机号：', user.contact.phone);
  
  // 或者用if语句做更复杂的处理
  if (user?.contact?.phone) {
    // 执行代码逻辑
  }
  

• 简洁的短路求值写法
  利用逻辑与&&的短路特性，只有左边表达式为真时，才会执行右边的代码，适合简单场景：

  // 当myVar存在且为真时，调用doSomething()
  myVar && doSomething();
  

二、优化你的Google Charts柱状图代码 #

看你的代码，核心问题是PHP输出的$type[0]到$type[3]可能为空，会导致图表出现无效的空标签行，甚至破坏数据结构。另外你动画配置的代码也没写完，我帮你调整并优化：

修改后的完整代码如下：

function drawChart() {
  // 先把PHP输出的类型转为JS数组
  const types = [
    '<?php echo $type[0]; ?>',
    '<?php echo $type[1]; ?>',
    '<?php echo $type[2]; ?>',
    '<?php echo $type[3]; ?>'
  ];
  
  // 初始化基础数据结构
  let dataArray = [['Task', 'Weak Area'], ['web', 3]];
  
  // 遍历类型数组，只添加非空的有效项
  types.forEach((type, index) => {
    // 过滤掉空字符串（trim()处理空格情况）
    if (type.trim()) {
      // 数值可以根据实际需求调整，这里给第一个非空项设为5，其余为4
      dataArray.push([type, index === 0 ? 5 : 4]);
    }
  });
  
  // 转换为Google Charts支持的数据表
  var data = google.visualization.arrayToDataTable(dataArray);
  
  // 补全完整的动画配置
  var options = {
    'title': 'Weak Areas',
    'width': 550,
    'height': 400,
    animation: {
      duration: 1000,
      easing: 'out', // 可选缓动效果：linear、in、out
      startup: true // 页面加载时自动执行动画
    }
  };
  
  // 初始化图表实例并绘制（你原来的代码漏了这关键一步）
  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

关键优化点说明： #

1. 动态过滤无效数据：把PHP输出的类型存到JS数组后，遍历过滤掉空值，避免图表出现无意义的空标签行。
2. 补全动画配置：你原来的animation语法不完整，这里补充了常用的easing和startup参数。
3. 完善图表绘制流程：添加了初始化图表实例和调用draw()的代码，这是图表显示的必要步骤。

另外，如果你在PHP端就能提前处理空值，也可以直接在PHP里过滤后再输出到JS，这样JS代码会更简洁：

<?php
// PHP端先过滤非空的type项
$filteredTypes = array_filter($type, function($item) {
  return trim($item) !== '';
});
?>

<script>
function drawChart() {
  const types = <?php echo json_encode($filteredTypes); ?>;
  let dataArray = [['Task', 'Weak Area'], ['web', 3]];
  
  types.forEach(type => {
    dataArray.push([type, 4]); // 统一数值，可按需调整
  });
  
  // 后续代码和上面一致...
}
</script>

这样处理后，不管$type里有没有空值，图表都只会显示有效的数据项，不会出现异常。

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