ECMAScript6
ECMAScript 6 也稱(chēng)為ECMAScript2015锚国，是2015年出版的ECMAScript新的版本。ES6是繼ES5之后的一次主要改進(jìn)俊卤。ES6增添了許多必要的特性嫩挤，例如模塊和類(lèi)，塊級(jí)作用域消恍，常量與變量岂昭。
支持情況：node.js幾乎完全支持ECMAScript 6 ,標(biāo)準(zhǔn)瀏覽器支持大部分語(yǔ)法
變量：let
es6新增的用于變量申明的關(guān)鍵字
-
通過(guò)let申明的變量，不允許重復(fù)申明
var a = 1; var a = 2; console.log(a); //2 let a = 2; let a = 2; console.log(a); //error 已經(jīng)被申明了?
-
不支持變量申明的預(yù)解析狠怨，let變量约啊，必須先申明后使用邑遏，我們把當(dāng)前作用域最開(kāi)始到let申明的變量之間的區(qū)域稱(chēng)為 - 暫存死區(qū)
console.log(a); //預(yù)解析 undefined var a = 1; console.log(b); //error 找不到 let b = 1; -
let支持塊級(jí)作用域
- 全局
- 函數(shù)
- 塊 - 一對(duì){}包含的部分，稱(chēng)為一個(gè)塊恰矩，在這樣的塊中就會(huì)有獨(dú)立的一個(gè)作用域记盒，var不支持塊作用域
{
let a = 1;
var b = 2;
console.log(a); //1
console.log(b); //2
}
console.log(a); //error
console.log(b); //2
常量：const
常量申明，和var與let不一樣外傅，var,let申明的值是可以變化的（后期改變的）纪吮，但是通過(guò)const申明的值是固定的，不能在后期去改變它
const其他的特性與let一致
因?yàn)閏onst定義的是常量值萎胰，所以通過(guò)const定義一個(gè)常量的時(shí)候碾盟，一定需要初始化
const a = 1;
const a = 2;
console.log(a); //error a已經(jīng)被定義
const a = 1;
a = 2;
console.log(a); //error a是一個(gè)常量，不能再重新賦值
const b; //如果不初始化
console.log(b) //那么b就是一個(gè)沒(méi)有值的申明
當(dāng)用常量申明一個(gè)對(duì)象的時(shí)候技竟，對(duì)象本身不能重新修改賦值冰肴，但里面的內(nèi)容是可以修改的
const obj = {x: 1};
/obj = {y: 2}; //不允許
obj.x = 10;
console.log(obj) //Object {x: 10}
如果希望一個(gè)對(duì)象本身以及子數(shù)據(jù)都不能變化，那么通過(guò)const和freeze（凍結(jié)對(duì)象）同時(shí)使用
const obj = {x: 1};
Object.freeze(obj);
obj.x = 10;
console.log(obj) //Object {x: 1}
變量的解構(gòu)賦值
ES6允許按照一定模式榔组，從數(shù)組和對(duì)象中提取值熙尉，對(duì)變量進(jìn)行賦值，這被稱(chēng)為解構(gòu)（Destructuring）瓷患。
/之前獲取一個(gè)對(duì)象的值
var obj = {x: 100,y: 200};
console.log(obj.x);
console.log(obj.x);
let left = getConmputedStyle(document.body).left;
let top = getConmputedStyle(document.body).top;
解構(gòu)賦值
對(duì)象
- 申明{}中的變量
- 根據(jù){}中的變量，去=后面的對(duì)象中提取對(duì)應(yīng)的屬性遣妥，并把該屬性對(duì)應(yīng)的值賦值給前面對(duì)應(yīng)的變量擅编，如果沒(méi)有該屬性，返回undefined
var obj = { foo: "aaa", bar: "bbb" };
var {foo,bar} = obj; //相當(dāng)與是申明了foo,bar兩個(gè)變量
console.log(foo) //aaa 去找=號(hào)后面里面對(duì)應(yīng)變量名的屬性
如果我們希望解構(gòu)出來(lái)的屬性名在使用的時(shí)候是用的另外一個(gè)名稱(chēng)箫踩，那么這個(gè)時(shí)候需要給需要使用的變量名設(shè)置一個(gè)別名
let {left,top} = getComputedStyle(document.body);
console.log(top) //error top是一個(gè)關(guān)鍵字爱态，不能用作變量名
let {left: L, top: T, a} = getComputedStyle(document.body);
console.log(T) //auto
console.log(a) //undefined
數(shù)組
數(shù)組的解構(gòu)賦值和對(duì)象的解構(gòu)賦值：
- 數(shù)組使用[]，對(duì)象使用{}
- 數(shù)組解構(gòu)賦值是一一對(duì)應(yīng)的境钟，而對(duì)象解構(gòu)賦值是按照名稱(chēng)來(lái)進(jìn)行的
let [x,y,z,w] = ["a","b","c"];
console.log(x) // a
console.log(y) // b
console.log(y) // b
函數(shù)參數(shù)擴(kuò)展
函數(shù)參數(shù)的默認(rèn)值
在es6之前锦担，如果一個(gè)函數(shù)的參數(shù)是可選，那么我們通常需要手動(dòng)在該函數(shù)的內(nèi)部處理該參數(shù)的默認(rèn)值
function fn(a,b) {
var a = a||10;
var b = b||10;
console.log(a+b)
}
fn(); //20
fn(20,30) //50
在es6之后慨削，函數(shù)在定義的時(shí)候洞渔，可以直接在參數(shù)上處理默認(rèn)
注意：必傳參數(shù)一般寫(xiě)在前面，可選參數(shù)一般寫(xiě)在最后
function fn(a=20, b=10){
console.log(a+b)
}
fn(); //30
fn(20,20); //40
rest參數(shù)（剩余參數(shù)）
我們通常會(huì)一個(gè)函數(shù)定義一些參數(shù)缚态，有些參數(shù)是確定的磁椒，而有些參數(shù)是不確定（個(gè)數(shù)）的,如arr.splice方法中，前2個(gè)參數(shù)是固定的值玫芦，第2個(gè)后面參數(shù)數(shù)量可以不確定
var arr = ["a","b","c"];
arr.splice(1,1,"e","f","g") //
es6之前浆熔，如果一個(gè)函數(shù)的參數(shù)個(gè)數(shù)不確定，我們?cè)瓉?lái)是通過(guò)anguments,不定參來(lái)處理
function push() { //創(chuàng)建一個(gè)方法桥帆，用來(lái)給第一個(gè)參數(shù)（arr）,添加剩余參數(shù)的內(nèi)容到里面
for (var i=1; i<arguments.length; i++) {
arguments[0].push(arguments[i]);
}
}
var arr = ["a","b","c","d"];
push(arr,1,2,3,4);
console.log(arr); //["a", "b", "c", "d", 1, 2, 3, 4]
es6的rest參數(shù)医增，如果一個(gè)函數(shù)定義了剩余參數(shù)慎皱，那么在調(diào)用該的函數(shù)的時(shí)候傳入的實(shí)參會(huì)賦值給對(duì)應(yīng)形參，剩下沒(méi)有對(duì)應(yīng)的實(shí)參會(huì)全部賦值給剩余參數(shù)
function push(arr,...data) { //注意3個(gè)點(diǎn)
for (var i = 0; i < data.length; i++) {
arr.push(data[i])
}
}
var arr = ["a","b","c"];
push( arr, 1,2,3,x );
console.log(arr);
//...data 就是實(shí)參后叶骨，剩余沒(méi)有對(duì)應(yīng)實(shí)參全部 [1,2,3,x]
注意： 剩余參數(shù)必須是尾參數(shù)茫多，最后面
擴(kuò)展運(yùn)算符
擴(kuò)展運(yùn)算符（spread）是三個(gè)點(diǎn)（...）。它好比rest參數(shù)的逆運(yùn)算邓萨，將一個(gè)數(shù)組轉(zhuǎn)為用逗號(hào)分隔的參數(shù)序列地梨。該運(yùn)算符主要用于函數(shù)調(diào)用。
例如在之前缔恳，想要把一個(gè)數(shù)組里的內(nèi)容用來(lái)做為參數(shù)調(diào)用
function area(w,h) {
console.log(w * h)
}
area(10,10) //100
var arr = [20,30];
area(arr[0],arr[1]) //600
var arr1 = ["a","b","c"];
var arr2 = [1,2,3];
arr1.splice(1,1,arr2);
console.log(arr1)
//這個(gè)時(shí)候宝剖，就會(huì)是["a",[1,2,3],"c"],要想顯示為正常就要
arr1.splice(1,1,arr[0],arr[1],arr[2]) //['a',1,2,3,'c']
es6方法
var arr3 = ["a","b","c"];
var arr4 = [1,2,3];
arr3.splice(1,1,...arr4) //注意三個(gè)點(diǎn)
console.log(arr3) //['a',1,2,3,'c']
//之前把2個(gè)數(shù)組組合在一起
var arr5 = arr3.concat(arr4);
//現(xiàn)在
var arr6 = [...arr3,arr4];
//取最大值
var arr = [5,45,7,8,71,5];
console.log(Math.max(...arr)) //省略了循環(huán)
箭頭函數(shù)
在es6中，提供了一種新的函數(shù)格式：箭頭函數(shù)
之前的定義函數(shù)方法
//函數(shù)申明
function fn(a,b){
console.log(a+b);
}
//函數(shù)表達(dá)式
var fn2 = funciton(a,b) {
console.log(a - b)
}
箭頭函數(shù)
格式要是表達(dá)式方式
var fn3 = (a,b) => {
console.log(a * b)
};
fn3(10,20) //200 省略了function
//*有幾種有條件的簡(jiǎn)化寫(xiě)法,有且僅有一個(gè)形參的時(shí)候歉甚，可以省略參數(shù)的小括號(hào)
//當(dāng)參數(shù)只有一個(gè)的時(shí)候,可以不要()
var fn4 = a => {
console.log(a)
}
//當(dāng)沒(méi)有參數(shù)的時(shí)候万细，要有()
var fn5 = () => {
console.log(1)
}
//只有一條語(yǔ)句的時(shí)候，可以省略{}纸泄，同時(shí)該條語(yǔ)句的結(jié)果將作為該函數(shù)的返回值
var fn6 = r => {
return r * r * Math.PI;
}
//簡(jiǎn)化
var fn7 = r => r * r * Math.PI;
//但是赖钞，如果有多條語(yǔ)句或者返回值是一個(gè)對(duì)象，則必須使用{}
注意：
- 箭頭函數(shù)不能作為構(gòu)造函數(shù)聘裁，也就是箭頭函數(shù)不能使用new運(yùn)算符
- 箭頭函數(shù)的this永遠(yuǎn)指向當(dāng)前申明作用域?qū)ο?
- 普通函數(shù)this指向取決于調(diào)用
- 箭頭函數(shù)this指向取決于申明
- 箭頭函數(shù)沒(méi)有arguments對(duì)象
var todo = function(){
console.log(this)
}
var todo1 = () => {
console.log(this)
}
document.onclick = todo; //this是document
document.onclick = todo; //this是window
//例如我們有個(gè)按鈕
<input type="button" value="看我的顏色"/>
var btn = document.querySelector('input');
btn.onclick = function(){
var _this = this //定時(shí)器里的this是指向window雪营，要存一下當(dāng)前點(diǎn)擊btn
setTimeout(function(){
_this.style.color = "red"
},1000)
}
btn.onclick = function(){
setTimeout(() =>{
this.style.color = 'red' //this是btn 是在它下面的作用域中聲明的
},1000)
}
對(duì)象擴(kuò)展
對(duì)象屬性簡(jiǎn)潔表示法
當(dāng)一個(gè)對(duì)象的key和對(duì)應(yīng)的值（必須是一個(gè)變量名稱(chēng)）同名的話(huà)，那么可以簡(jiǎn)寫(xiě)成一個(gè)key
var a = 1;
var b = 2;
var obj = {
left: 100,
top: 100,
a: a,
b: b
};
console.log(obj) //var a = 1;
var b = 2;
var obj = {
left: 100,
top: 100,
a: a,
b: b
};
console.log(obj) //Object {left: 100, top: 100, a: 1, b: 2}
//*簡(jiǎn)寫(xiě) 衡便，對(duì)象名和對(duì)應(yīng)的值是同名献起，可以省略名
var obj = {
left: 100,
top: 100,
a,
b
};
對(duì)象方法的簡(jiǎn)潔表示法
var a = 10;
let obj2 = {
a: a,
fn: function(){
console.log(1)
}
}
//簡(jiǎn)潔寫(xiě)法,對(duì)象里的方法可以省略掉function
let obj3 = {
a,
fn() {
console.log(1)
}
}
屬性名表達(dá)式
ES6允許字面量定義對(duì)象時(shí)，用表達(dá)式作為對(duì)象的屬性名镣陕，即把表達(dá)式放在方括號(hào)內(nèi)谴餐。
var x = "usename";
let obj = {
x: "小明"
}
console.log(obj); //Object {x: "motao"}
//es6
let obj1 = {
[x]: "小明"
}
console.log(obj1); //Object {usename: "motao"}
