十八、ES6新增语法（里面含ES5的JSON）（下）

模块（module）

通过Live Server插件来运行网页 （走http协议）


明确需求


■ 实战：封装工具（util.js）或网页头部（head.vue或head.jsx）或底部（版权信息）如果每个页面单独写后期维护麻烦，这时候我们就需要模块化 封装起来 然后直接导入使用。

■ 解决：通过es6的模块（module）

准备：必须走HTTP网址，vscode安装live server插件

语法说明

-说明：通过import 和export实现导入导出功能（必须走http协议访问）

导出：

导出单个数据
export 修饰符 变量名 = 值
//...

批量导出数据
修饰符 变量名 = 值
// ..
export {变量名,...,变量名}

导入：

导入默认数据
export default 数据
使用语法：
script type="module" /script
import {变量名,...,变量名} from '路径及文件.js'
import 随便写个名字 from '路径及文件.js'

步骤分析

这里我们主要通过es6的模块化语法，来实现代码相互调用，从而减少冗余，提高代码复用率便于后期维护开发。实现过程非常简单，一共只需要2个步骤：

1.定义模块文件，导出成员
2.导入模块文件，使用成员

JSON方法 (ES5中的)

明确需求
明确需求：在实战工作中，我们需要获取对象里面的数据，但头疼的时候，由于各种原因对象变成了字符串，没办法通过.调用属性（导致原因：1-获取网页数据都是字符串，2-从文件获取也是字符串）


语法

字符串里面对象/数组 -> 真对象/数组     JSON.parse(数据)

真对象/数组  -> 字符串里面是对象/数组  JSON.stringify(数据)

练习

需求

var jsonObj = ‘{ “name”: “Jack”, “age”: 18, “gender”: “男” }’
var jsonArr = ‘[{ “name”: “Jack”, “age”: 18, “gender”: “男” }, { “name”: “Jack”, “age”: 18, “gender”: “男” }, { “name”: “Jack”, “age”: 18, “gender”: “男” }]’

var jsonObj = '{ "name": "Jack", "age": 18, "gender": "男" }'
// var jsonObj = "{ 'name': 'Jack', 'age': 18, 'gender': '男' }"

console.log(jsonObj.name)

let realObj = JSON.parse(jsonObj)
console.log(realObj.name)

var jsonArr = '[{ "name": "Jack", "age": 18, "gender": "男" }, { "name": "Jack", "age": 18, "gender": "男" }, { "name": "Jack", "age": 18, "gender": "男" }]'

console.log(jsonArr)

let realArr = JSON.parse(jsonArr)
console.log(realArr[0])
console.log(realArr[1])
console.log(realArr[2])

let obj = {a:1,b:2}
let strObj = JSON.stringify(obj)
console.log(strObj)
console.log(typeof strObj)

真对象/数组 -> 字符串里面是对象/数组 JSON.stringify(数据)

let obj = {a:1,b:2}
let strObj = JSON.stringify(obj)
console.log(strObj)
console.log(typeof strObj)