十八、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)