ES6相關概念與ES6新增語法
1.ES6相關概念(★★)
1.1什麼是ES6
ES 的全稱是 ECMAScript , 它是由 ECMA 國際標準化組織,制定的一項指令碼語言的標準化規範。
1.2為什麼使用 ES6 ?
每一次標準的誕生都意味著語言的完善,功能的加強。JavaScript語言本身也有一些令人不滿意的地方。
-
變數提升特性增加了程式執行時的不可預測性
-
語法過於鬆散,實現相同的功能,不同的人可能會寫出不同的程式碼
2.ES6新增語法
2.1let(★★★)
ES6中新增了用於宣告變數的關鍵字
let宣告的變數只在所處於的塊級有效
if (true) { let a = 10; } console.log(a)// a is not defined
注意:使用let關鍵字宣告的變數才具有塊級作用域,使用var宣告的變數不具備塊級作用域特性。
不存在變數提升
console.log(a); // a is not defined let a = 20;
暫時性死區
利用let宣告的變數會繫結在這個塊級作用域,不會受外界的影響
var tmp = 123; if (true) { tmp = 'abc'; let tmp; }
經典面試題
var arr = []; for (var i = 0; i < 2; i++) { arr[i] = function() { console.log(i); } } arr[0](); arr[1]();
經典面試題圖解:此題的關鍵點在於變數i是全域性的,函式執行時輸出的都是全域性作用域下的i值。
let arr = []; for (let i = 0; i < 2; i++) { arr[i] = function () { console.log(i); } } arr[0](); arr[1]();
經典面試題圖解:此題的關鍵點在於每次迴圈都會產生一個塊級作用域,每個塊級作用域中的變數都是不同的,函式執行時輸出的是自己上一級(迴圈產生的塊級作用域)作用域下的i值.
小結
-
let關鍵字就是用來宣告變數的
-
使用let關鍵字宣告的變數具有塊級作用域
-
在一個大括號中 使用let關鍵字宣告的變數才具有塊級作用域 var關鍵字是不具備這個特點的
-
防止迴圈變數變成全域性變數
-
使用let關鍵字宣告的變數沒有變數提升
-
使用let關鍵字宣告的變數具有暫時性死區特性
2.2 const(★★★)
宣告常量,常量就是值(記憶體地址)不能變化的量
具有塊級作用域
if (true) { const a = 10; } console.log(a) // a is not defined
宣告常量時必須賦值
const PI; // Missing initializer in const declaration
常量賦值後,值不能修改
const PI = 3.14; PI = 100; // Assignment to constant variable. const ary = [100, 200]; ary[0] = 'a'; ary[1] = 'b'; console.log(ary); // ['a', 'b']; ary = ['a', 'b']; // Assignment to constant variable.
小結
-
const宣告的變數是一個常量
-
既然是常量不能重新進行賦值,如果是基本資料型別,不能更改值,如果是複雜資料型別,不能更改地址值
-
宣告 const時候必須要給定值
2.3let、const、var 的區別
-
使用 var 宣告的變數,其作用域為該語句所在的函式內,且存在變數提升現象
-
使用 let 宣告的變數,其作用域為該語句所在的程式碼塊內,不存在變數提升
-
使用 const 宣告的是常量,在後面出現的程式碼中不能再修改該常量的值
解構賦值(★★★)
ES6中允許從陣列中提取值,按照對應位置,對變數賦值,物件也可以實現解構
陣列解構
let [a, b, c] = [1, 2, 3]; console.log(a)//1 console.log(b)//2 console.log(c)//3 //如果解構不成功,變數的值為undefined
物件解構
let person = { name: 'zhangsan', age: 20 }; let { name, age } = person; console.log(name); // 'zhangsan' console.log(age); // 20 let {name: myName, age: myAge} = person; // myName myAge 屬於別名 console.log(myName); // 'zhangsan' console.log(myAge); // 20
小結
-
解構賦值就是把資料結構分解,然後給變數進行賦值
-
如果結構不成功,變數跟數值個數不匹配的時候,變數的值為undefined
-
陣列解構用中括號包裹,多個變數用逗號隔開,物件解構用花括號包裹,多個變數用逗號隔開
-
利用解構賦值能夠讓我們方便的去取物件中的屬性跟方法
箭頭函式(★★★)
ES6中新增的定義函式的方式。
() => {} //():代表是函式; =>:必須要的符號,指向哪一個程式碼塊;{}:函式體 const fn = () => {}//代表把一個函式賦值給fn
函式體中只有一句程式碼,且程式碼的執行結果就是返回值,可以省略大括號
function sum(num1, num2) { return num1 + num2; } //es6寫法 const sum = (num1, num2) => num1 + num2;
如果形參只有一個,可以省略小括號
function fn (v) { return v; } //es6寫法 const fn = v => v;
箭頭函式不繫結this關鍵字,箭頭函式中的this,指向的是函式定義位置的上下文this
const obj = { name: '張三'} function fn () { console.log(this);//this 指向 是obj物件 return () => { console.log(this);//this 指向 的是箭頭函式定義的位置,那麼這個箭頭函式定義在fn裡面,而這個fn指向是的obj物件,所以這個this也指向是obj物件 } } const resFn = fn.call(obj); resFn();
小結
-
箭頭函式中不繫結this,箭頭函式中的this指向是它所定義的位置,可以簡單理解成,定義箭頭函式中的作用域的this指向誰,它就指向誰
-
箭頭函式的優點在於解決了this執行環境所造成的一些問題。比如:解決了匿名函式this指向的問題(匿名函式的執行環境具有全域性性),包括setTimeout和setInterval中使用this所造成的問題
面試題
var age = 100; var obj = { age: 20, say: () => { alert(this.age) } } obj.say();//箭頭函式this指向的是被宣告的作用域裡面,而物件沒有作用域的,所以箭頭函式雖然在物件中被定義,但是this指向的是全域性作用域
剩餘引數(★★)
剩餘引數語法允許我們將一個不定數量的引數表示為一個數組,不定引數定義方式,這種方式很方便的去宣告不知道引數情況下的一個函式
function sum (first, ...args) { console.log(first); // 10 console.log(args); // [20, 30] } sum(10, 20, 30)
剩餘引數和解構配合使用
let students = ['wangwu', 'zhangsan', 'lisi']; let [s1, ...s2] = students; console.log(s1); // 'wangwu' console.log(s2); // ['zhangsan', 'lisi']