前端基礎_ES6

聲明

• 三大關鍵字

聲明變量：
 var （ES5語法） 
 let （ES6語法）

聲明常量：
 const  (ES6語法)

• var 聲明變量

特性
一、支持 函數做用域
二、支持 JS預解析 （所謂變量提高）
三、支持 重複聲明 （同域同名變量）

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

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

三、重複聲明
var a = '123';
var a = '4565';

• let 聲明變量 （推薦）

特性
一、支持 塊做用域
二、不支持 JS預解析
三、不支持 重複聲明 （同域同名變量）

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

二、不支持JS預解析
必須聲明後才能使用，不然報錯

• const 聲明常量

從ES6開始引入常量概念
特性
一、 let全部特性
二、 聲明時必須賦值，不然報錯
三、 定義常量後，不再能更改值

一、聲明時必須賦值，不然報錯
const a;  //報錯
const a = 11;   //正確

二、定義常量後，基本類型是不能改了，但若是是對象或數組，是能夠改對象內或數組內的值
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);

函數

• 默認值
• 剩餘值
• 箭頭函數

模塊化

• 注意事項

一、在一個項目裏，多個不一樣模塊導入（依賴）某個相同模塊時，該模塊只會加載並執行一次，
二、在同一個模塊中，屢次導入相同模塊，只會加載並執行一次
三、在模塊中，不管import（導入語句）寫在哪一個位置，執行時都會提早
四、模塊有模塊做用域

• 導入語法

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模塊

一、導入普通js文件

type="application/javascript"
默認省略
默認同步加載

二、導入模塊js文件

type="module"
默認異步加載（defer）