什么是ES6
ECMAScript 6 簡(jiǎn)稱ES6椒惨，在2015年6月正式發(fā)布缤至。ECMAScript 是 JavaScript 語(yǔ)言的國(guó)際標(biāo)準(zhǔn)。
我們本著二八原則康谆，掌握好常用的领斥，有用的就行嫉到。
1、聲明變量 const月洛、let何恶、var
ES6以前用var關(guān)鍵字聲明變量，無(wú)論聲明在何處都存在著變量提升這個(gè)事情（變量提升：會(huì)提前創(chuàng)建變量膊存，但并沒有賦值）作用域也只有全局作用域以及函數(shù)作用域（所以變量會(huì)提升在函數(shù)頂部或者全局作用域的頂部）导而。
let 關(guān)鍵字表示變量，const 表示常量隔崎。都是塊級(jí)作用域今艺，比如一個(gè)函數(shù)內(nèi)部，代碼塊 { } 內(nèi)部爵卒。
// 全局變量的提升
console.log(global)
var global = "global"
console.log(global)
// 函數(shù)內(nèi)變量的提升
function aa() {
if(1){
var test = "test"
}
console.log(test)
}
function bb() {
if(1){
let test ="test";
}
console.log(test)
}
// 在for循環(huán)中 let
var arry = [];
for(var i = 0; i<10; i++){
console.log(i)
arry[i] = function () {
console.log(i)
}
}
// 相當(dāng)于
// var arry = [];
// var i;
// for(i = 0; i<10; i++){
// console.log(i)
// arry[i] = function () {
// console.log(i)
// }
// }
arry[5]()
const name = "gaoxin";
const name = "隨意"
// 報(bào)錯(cuò)
2虚缎、模板字符串
ES6 引入了反引號(hào)
<body>
<div id="head">
</div>
<script>
// 模板字符串進(jìn)行標(biāo)簽字符串的拼接一行搞定
let ele = `
<div>
<h1>模板字符串</h1>
<p>動(dòng)態(tài)添加</p>
</div>
`;
let ele_div = document.getElementById("head");
console.log(ele_div)
ele_div.innerHTML= ele;
// 將表達(dá)式嵌入字符串
let a = 10;
let b = 5;
console.log(`結(jié)果是：${ a + b }, ${ a * b}`)
</script>
</body>
3、函數(shù)
箭頭函數(shù)钓株，是函數(shù)的快捷寫法实牡，類比Python的匿名函數(shù) lambda。
最直觀的三個(gè)特點(diǎn)
- 不需要function關(guān)鍵字來(lái)創(chuàng)建函數(shù)
- 省略 return 關(guān)鍵字
- 繼承當(dāng)前上下文的this關(guān)鍵字（因?yàn)榧^函數(shù)的調(diào)用者是當(dāng)前的上下文轴合，跟普通函數(shù)區(qū)別開）
例子：
// ES6
x => x+1
// 等同于
function test(x) {
return x+1
}
this 例子:
// 函數(shù)在哪里調(diào)用了 才決定this到底引用的是誰(shuí)~~~
// 最后一個(gè)調(diào)用函數(shù)的對(duì)象才是傳到函數(shù)里的上下文對(duì)象this~~~
console.log(this)
function test() {
console.log(this)
};
let obj = {
a: 1,
test: test,
};
let obj2 = {
b: 3,
obj: obj,
};
obj.test();
test();
obj2.obj.test();
4创坞、import 和 export
import 導(dǎo)入模塊、export導(dǎo)出模塊
// main.js
// 導(dǎo)出多個(gè)聲明
export var name = "gaoxin"
export var age = "18"
export function aa() {
return 1
}
// 批量導(dǎo)出
export {name, age, aa}
// test.js
import {name, age, aa} from "./main"
console.log(name)
console.log(age)
console.log(aa())
// 整個(gè)模塊導(dǎo)入 把模塊當(dāng)做一個(gè)對(duì)象
// 該模塊下所有的導(dǎo)出都會(huì)作為對(duì)象的屬性存在
import * as obj from "./main"
console.log(obj.name)
console.log(obj.age)
console.log(obj.aa())
/ 一個(gè)模塊只能有一個(gè)默認(rèn)導(dǎo)出
// 對(duì)于默認(rèn)導(dǎo)出 導(dǎo)入的時(shí)候名字可以不一樣
// main.js
var app = new Vue({
});
export default app
// test.js
// import app from "./main"
import my_app from "./main"
5受葛、數(shù)據(jù)解構(gòu)
數(shù)據(jù)的解構(gòu)類似于Python中的‘解包’
const people = {
name: "提莫",
age: 2,
};
const person = ["瑞文", "刀妹"]
const { name, age } = people
console.log(name)
console.log(age)
const [name1, name2] = person
console.log(name1)
console.log(name2)
6题涨、class extends super
ES6 引入了關(guān)鍵字class來(lái)定義一個(gè)類，constructor是構(gòu)造方法总滩，this代表實(shí)例對(duì)象纲堵。
類之間通過extends繼承，繼承父類的所有屬性和方法闰渔。
super關(guān)鍵字代指父類的this對(duì)象 席函，子類必須在constructor中調(diào)用super方法 ，
否則新建示例時(shí)會(huì)報(bào)錯(cuò)冈涧，因?yàn)樽宇悰]有自己的this對(duì)象茂附。調(diào)用super()得到this，才能進(jìn)行修改督弓。
class Animal{
constructor(){
this.type = "animal"
}
says(say){
console.log(this.type + "says" + say )
}
}
let animal = new Animal()
animal.says("hello")
class Dog extends Animal{
constructor(){
super();
this.type = "dog";
}
}
let dog = new Dog()
dog.says("hello")
