前端基础_ES6

声明

• 三大关键字

声明变量：
 var （ES5语法） 
 let （ES6语法）

声明常量：
 const  (ES6语法)

• var 声明变量

特性
1、支持 函数作用域
2、支持 JS预解析 （所谓变量提升）
3、支持 重复声明 （同域同名变量）

1、函数作用域（局部作用域）
function show(){
    var a = '34';
}
console.log(a);      //underfind

2、JS预解析
console.log(name);   //underfind
var name = '1234';

3、重复声明
var a = '123';
var a = '4565';

• let 声明变量 （推荐）

特性
1、支持 块作用域
2、不支持 JS预解析
3、不支持 重复声明 （同域同名变量）

1、块作用域（局部作用域）
if(true){
    var a = '34';
}
console.log(a);      //underfind

2、不支持JS预解析
必须声明后才能使用，否则报错

• const 声明常量

从ES6开始引入常量概念
特性
1、let所有特性
2、声明时必须赋值，否则报错
3、定义常量后，再也不能更改值

1、声明时必须赋值，否则报错
const a;  //报错
const a = 11;   //正确

2、定义常量后，基本类型是不能改了，但如果是对象或数组，是可以改对象内或数组内的值
const a = ['22','bb'];
a[0] = '你好';  //['你好','bb'];

• 只声明，不赋值

var a;  //undefined 
let b;  //undefined

• JS预解析

解构赋值

• 应用场景

对象 与 数组

• ES5 做法

var obj = {
    name:"bbb",
    age:12
};
var name = obj.name;
var age = obj.age;

var arr = [123,'wtao'];
var a = arr[0];
var b = arr[1];

• ES6 做法

let obj = {
    name:"bbb",
    age:12
};
let {name,age} = obj;
console.log(name);
console.log(age);

let arr = [123,'wtaddo'];
let [name,age] = arr;
console.log(name);
console.log(age);

函数

• 默认值
• 剩余值
• 箭头函数

模块化

• 注意事项

1、在一个项目里，多个不同模块导入（依赖）某个相同模块时，该模块只会加载并执行一次，
2、在同一个模块中，多次导入相同模块，只会加载并执行一次
3、在模块中，无论import（导入语句）写在哪个位置，执行时都会提前
4、模块有模块作用域

• 导入语法

import defaultExport from "module-name";
import * as name from "module-name";
import { export } from "module-name";
import { export as alias } from "module-name";
import { export1 , export2 } from "module-name";
import { foo , bar } from "module-name/path/to/specific/un-exported/file";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";

• 导出语法

export { name1, name2, …, nameN };
export { variable1 as name1, variable2 as name2, …, nameN };
export let name1, name2, …, nameN; // also var, const
export let name1 = …, name2 = …, …, nameN; // also var, const
export function FunctionName(){...}
export class ClassName {...}

export default expression;
export default function (…) { … } // also class, function*
export default function name1(…) { … } // also class, function*
export { name1 as default, … };

export * from …;
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;
export { default } from …;

• 异步加载延迟执行

defer

<script src="./a.js" defer></script>

在所有html DOM结构渲染完成和其他脚步执行完成再执行js代码

• html导入js模块

1、导入普通js文件

type="application/javascript"
默认省略
默认同步加载

2、导入模块js文件

type="module"
默认异步加载（defer）