如何将PHP文件中的数组传递转换为JS文件可使用的JavaScript数组

PHP是服务端运行的语言，JS是客户端运行的语言，你可以通过以下3种常用方式实现数组传递，推荐优先使用第一种实现，成本最低：

方式1：在PHP中输出全局JS变量，供外部JS调用 #

这是最通用的方案，利用服务端渲染顺序，在引入data.js前先把PHP数组转成JS可识别的JSON格式，赋值给全局变量即可。
修改后的dataInput.php代码：

<?php
 $phpArray=[[1,2,3,4,5],
           [2,3,5,6,7]];
?>
<!-- 以下代码必须放在引入data.js的标签之前 -->
<script>
// json_encode会自动把PHP数组转成标准JS数组格式，加JSON_HEX_TAG参数避免特殊字符破坏JS语法
const jsArray = <?php echo json_encode($phpArray, JSON_HEX_TAG); ?>;
</script>
<!-- 再引入你的data.js文件 -->
<script src="data.js"></script>

修改后的data.js代码：

function getRaceResults1(){
    // 直接使用提前定义好的全局变量即可
    return jsArray;
}

注意：必须保证定义jsArray的script标签，在引入data.js的标签之前加载，否则会报变量未定义错误
不要手动拼接数组字符串，PHP内置的json_encode()会自动处理所有特殊字符、引号转义，是最安全的转换方式

方式2：动态生成JS文件，避免污染全局变量 #

如果不希望定义全局变量，可以把data.js改成PHP动态输出的JS资源：

1. 把data.js重命名为data.php，代码修改为：

<?php
// 声明当前文件返回JS内容类型
header("Content-Type: application/javascript");
// 引入存储数组的PHP文件
require_once "dataInput.php";
$jsArrayStr = json_encode($phpArray, JSON_HEX_TAG);
?>
function getRaceResults1(){
    const jsArray = <?php echo $jsArrayStr; ?>;
    return jsArray;
}

2. 页面引入时直接引入该PHP文件即可：

<script src="data.php"></script>

方式3：异步请求拉取数据（适合页面加载后动态获取数据的场景） #

如果需要页面加载完成后再按需获取数据，可以用AJAX请求拉取：
修改dataInput.php增加返回JSON的逻辑：

<?php
$phpArray=[[1,2,3,4,5],
          [2,3,5,6,7]];
// 判断是AJAX请求时直接返回JSON数据
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
    header("Content-Type: application/json");
    echo json_encode($phpArray);
    exit;
}
?>

修改data.js代码：

async function getRaceResults1(){
    const response = await fetch('dataInput.php');
    const jsArray = await response.json();
    return jsArray;
}

该方法返回的是Promise对象，调用时需要用await或者.then()处理返回结果

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