【es6】模块化和【es7】新特性

模块化

将一个大的程序文件，拆分为许多小的文件，然后将小文件组合起来

模块化优势

防止命名冲突

代码复用

高维护性

模块化语法（主要两个命令）

export命令，用于规定模块的对外接口

import命令，用于输入其他模块提供的功能

分别暴露

//之前变量该怎么写就怎么写
//当你想要暴露数据的时候，前面加export
export let name ="模块变量"
export function func() {
	console.log("模块方法")
}

统一暴露

//统一暴露
 let name ="模块变量"
 function func() {
	console.log("模块方法")
}
//花括号统一暴露
export{name,func}

默认暴露

//默认暴露,都是逗号，封号会报错
 export default{
	  name:"模块变量",
	  func:function(){
		  console.log("模块方法")
	  }
 }

页面使用引入

//1. * as 代表全部，通用方式
import * as port from "@/untils/port.js"

//针对默认暴露，也是采取对default使用别名设置
import {default as a} from '@/untils/port.js'
//针对默认暴露，也可以使用简便方式，直接用别名引入，也只能用于默认暴露
import a from '@/untils/port.js'


//解构赋值引用，针对其他暴露方式
import {name,func} from '@/untils/port.js'
//如果引用其他模块的时候，也有name，会有重名现象，此时应该使用别名引入
import {name as a,func} from '@/index/port.js'

游览器使用模块化的另一种方式

若新建all.js页面模块引入，例如：import {name,func} from ‘@/untils/port.js’

import {name,func} from '@/untils/port.js'
console.log(name)

在html接收all.js,入口文件

<script src="/untils/port.js" type="module"></script>//会打印出all.js文件中的name值

ES7新特性

数组方法。用于检测数组中是否包含某个元素，返回布尔类型值

includes方法

//es7
const arr =[1,2,3,4,5,6]
console.log(arr.includes(2))//true
//之前旧方法
indexof(),//返回索引，报告指定字符在此实例中的第一个匹配项的索引

幂运算，**

//es7
console.log(2**10)//1024
//旧方法
console.log(Math.pow(2,10))//1024