如何将PHP数组转化成Javascript变量

在我们前端开发的时候，经常需要从后端拉取数据，那么在获取数据的时候，怎么将PHP数组转化成Javascript变量呢？

答案很简单，使用PHP自带的json_encode函数：

string json_encode ( mixed $value [, int $options = 0 [, int $depth = 512 ]] )

以上函数取自官方文档。

该函数可以输入一个PHP数组，并将数组转化为JSON格式。
举例来说，假设我们有一个PHP数组：

$example_array =                
[                
    'managers'     => ['Eagle', 'Tom', 'Mike'],                
    'staff'        => ['Mary', 'John', 'Tony'],                
]

我们调用json_encode，然后看看$example_array变成了什么样子：

$result_array = json_encode($example_array);          
var_dump($result_array);

{"managers":["Eagle","Tom","Mike"],"staff":["Mary","John","Tony"]}

我们看到，数组已经成为了JSON形式，那么怎么样将其转化为Javascript变量呢？
很简单，只需要直接将其赋值给Javascript变量即可。我们一起来操作一下。

首先我们打开浏览器（我以Chrome作为演示工具），右键审查元素，点开与Elements（元素）并排的Console一栏，点击空白处出现光标，输入以下代码：

var employees = {"managers": ["Eagle", "Tom", "Mike"], "staff":["Mary", "John", "Tony"]};

按回车键，我们会看到undefined字样，没有关系，我们继续输入

employees

这个时候你会发现浏览器输出：

{managers: Array(3), staff: Array(3)}              
managers: (3) ["Eagle", "Tom", "Mike"]              
staff: (3) ["Mary", "John", "Tony"]              
__proto__: Object

我们看到，这个时候employees已经是一个包含了我们数组数据的对象了。
如果我们输入employees.managers或者employees.staff，浏览器将返回给我们对应的数组：
Console output

上面的示例中，我们看到的是将多维数组传递进json_encode产生的结果。
如果我们传入一维数组，在json_encode后赋值给Javascript变量，我们将直接得到一个一维数组，而非一个对象。

那么，我们在代码中应该如何实现从php到javascript的转化呢？
通常可以使用ajax函数回传数据或者在php框架中利用模板语言赋值：

//利用ajax将JSON格式数据回传              
//resp.employees即JSON格式的数据              
.axios({              
    url: 'array-conversion',              
    method: 'GET'              
})              
.then(function(resp) {              
    let resp = resp.data;              
    if (resp.success) {              
        let employees =  resp.employees;              
        console.log(employees.managers);              
        console.log(employees.staff);              
    }              
});

上面代码段我们使用了axios库调用了ajax函数获取JSON格式的数组数据。可以看到，我们直接将其赋值给了本地变量employees。这样一来我们就可以直接通过employees.managers及employees.staff来获取相应的数组数据了。