ES6笔记

let和var的区别

let是ES6新增的用于声明变量的关键字

1、let不存在变量提升（当前作用域中，不能在let声明前使用变量）

2、let解决了typeof 死区

3、同一个作用域中let不能重复声明

4、全局作用域中使用let,没有给window增加对应的属性

5、let会存在块作用域

箭头函数与this问题

const fn = function(){

}
const fn = ([形参]) => {
		函数体（return）
}

对象中的this指向的是Windows，对象不能产生作用域，对象中的方法定义在了全局作用域下

CONST关键字声明常量

值不能修改的变量，为常量

1、一定要赋值

2、一般常量使用大写(潜规则)

3、常量值不能修改

4、块级作用域

5、对数组和对象的元素 修改，不算是对常量的修改（常量的地址没有改变）

const TEAM = ["2","3","4","5","6"];
TEAM.push("6");

变量解构赋值

//1数组的解构
const numList = ["2","3","4","5","6"];
let [two,three,four,five] = numList;

//output :  2 3 4 5
//2、对象的解构
const info = {
	name:"张三",
	age:"68",
	do: function(){
	console.log("我可以");
	}
	
};
let {name,age,do} = info;
console.log(name);
console.log(age);
console.log(do);

do();

模板字符串

1、可以直接出现换行符

2、变量拼接${变量}

简化对象写法

允许大括号中直接写变量和函数，作为对象的属性和方法

let name = "123";
let change = function(){
	console.log("110");
}
const school = {
	name,
	change,
    //直接用（）{}，不用加：function
    improve(){
        console.log("110");
    }
}

模块化开发

一、为什么使用模块化开发

1. 不同js 文件有相同的变量不会冲突,需要划分独立的作用域
2. 一个JS文件有很多功能,但是在某一个时刻,只需要使用其中一部分的功能,这个模块化开发可以做到

二、模块的基本使用

let title = "tn";
let url = "baidu.com";
function show(){
	console.log("tn")
}
export {title,title,show }
//1.js

<script type="module">
	import {title} from "./1.js"
</script>
//需要加上type, title使用花括号包裹

三、模块的延迟解析与严格模式

1. 正常html解析

​ 但是,加上了module后,则不受影响,因为module存在一定的依赖关系,所以会在DOM全部加载之后,在执行,其运行机制是后解析

​ 2.使用type="module"默认是严格模式

四、模块的作用域

1.都是独立的

五、模块的加载只有一次

模块在第一次被引入时才会执行，且只会执行一次。这种“延迟加载”可以带来性能和资源方面的优势。

六、导出导入

1.具名导出

export let site = "tn";
//函数是要有名字的,否则会报错
export function show(){
	return "show function"
}
//ex.js

//或者这样
let site = "tn";
//函数是要有名字的,否则会报错
function show(){
	return "show function"
}
export {site , show}

2.批量

let site = "tn";
//函数是要有名字的,否则会报错
function show(){
	return "show function"
}
export {site , show}
//1.js

<script type="module">
	import * as api form "./1.js"
	//use it like this:
	api.site
	api.show()
</script>

3.别名

<script type="module">
	import {site as s,show} form "./1.js"
	//use it like this:
	api.site
	api.show()
</script>
/*也可以在JS中使用export {site as s }*/

4.默认导出
模块可以有一个默认导出，通过 export default 语法。导入时可以使用任意名称。

export default class User(){{
	static render(){
		return "a"
	}
}
//或者 
class User(){{
	static render(){
		return "a"
	}
}
export default User
export User as default 

<script type="module">
	import User form "./1.js"
	//或者任意的变量接 import any form "./1.js"
</script>

5.混合

<script type="module">
	import User, {site} form "./1.js"//带花括号则是具名,不带则是默认
	import * as api form "./1.js"
	//use it like this:
	api.default.site//默认导出加上default
	api.show()
</script>