es6常用的新特性 let,const,class,模版字串,解構賦值,箭頭函式,for-of, keys values entries, export import, async await
阿新 • • 發佈:2018-12-14
let const class
var命令和function命令宣告的全域性變數,依舊是頂層物件的屬性; 另一方面規定,let命令、const命令、class命令宣告的全域性變數,不屬於頂層物件的屬性。 也就是說,從ES6開始,全域性變數將逐步與頂層物件的屬性脫鉤。
var a = 1; // 如果在Node的REPL環境,可以寫成global.a // 或者採用通用方法,寫成this.a window.a // 1 let b = 1; window.b // undefined //const 生命的變數是不可變得變數 const c = 1; c=2 //會報錯 class MyApp{ constructor(age) { this.name='哈士奇' this.age = age } sayHello(){ console.log(`hello ${this.name}, I am ${this.age} years old`) } } app = new MyApp(18) app.sayHello()
模版字串
let name='哈士奇'
// before
console.log('hello '+name+'! \n thank you!')
// after
console.log(`hello ${name}!
thankyou`)
用tab鍵上面的``代替單引號, ${}可以解析變數, 直接回車就相當於\n換行
解構賦值
######陣列的解構賦值 let [a, b, c] = [1, 2, 3]; console.log(a,b,c) //1,2,3 上面程式碼表示,可以從陣列中提取值,按照對應位置,對變數賦值。 ######物件的解構賦值 物件的解構與陣列有一個重要的不同。陣列的元素是按次序排列的,變數的取值由它的位置決定;而物件的屬性沒有次序,變數必須與屬性同名,才能取到正確的值。
let { bar, foo } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"
####物件的key可以不固定 const name = ‘哈士奇’; const obj = { [name]: ‘愛拆家’ } console.log(obj); // { ‘哈士奇’: ‘愛拆家’ } ####陣列,物件的複製 很多時候在改變一個數組的時候,不希望改變原來的陣列;需要遍歷一下陣列將每個元素push進新的陣列; es6 只需要 […arr]; 即可實現
//陣列 let arrA = [1,2,3]; let arrB = [...arrA]; arrA.push(4); console.log(arrA, arrB); //[ 1, 2, 3, 4 ] [ 1, 2, 3 ]; //物件 let objA = {a:1,b:2,c:3} let objB = {...objA}; objA.d=4; console.log(objA, objB); { a: 1, b: 2, c: 3, d: 4 } { a: 1, b: 2, c: 3 }
箭頭函式
// 帶預設引數的箭頭函式
let hello = (name='world')=>{
console.log(`hello ${name}`)
}
// 直接返回值的箭頭函式
let cal = num=>num*2
// 多個引數
let cal1 = (num1, num2)=>num1*num2
hello()
hello('imooc')
console.log(cal(5))
console.log(cal1(5, 6))
arr = [6, 7]
console.log(cal1(...arr))
迭代器和迴圈
for-in迴圈用來遍歷物件屬性。 for-of迴圈用來遍歷資料—例如陣列中的值。
ES4:
for (var index = 0; index < myArray.length; index++) {
console.log(myArray[index]);
}
ES5:
myArray.forEach(function (value) {
console.log(value);
});
你不能使用break語句中斷迴圈,也不能使用return語句返回到外層函式。
ES6:
for (var value of myArray) {
console.log(value);
}
####物件的擴充套件 keys values entries
let obj = { a:1, b:2, c:3};
console.log(Object.keys(obj));
//返回key陣列 [ 'a', 'b', 'c' ]
console.log(Object.values(obj));
//返回value陣列 [ 1, 2, 3 ]
console.log(Object.entries(obj));
// 返回key,value陣列 [ [ 'a', 1 ], [ 'b', 2 ], [ 'c', 3 ] ]
export import
a檔案
export const name = '哈士奇';//直接匯出
export default const name = '哈士奇';//匯出預設
b檔案
import { name } from './a'; //直接匯出需解構賦值拿到name
import name from './a'; //匯出預設直接拿到的就是name
import name as dogName from './a'; //as重新給一個名字
import * from './a'; //*.name = '哈士奇'; *為引入所有的不建議使用
async await
function timeOut(num) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(2 * num)
}, 2000);
} )
}
//想要得到a + b; 需要如下,算出a, 然後算出b, 然後相加;
function name() {
timeOut(1).then( res => {
let a = res;
timeOut(2).then( res => {
let b = res;
console.log(a + b);
});
});
}
name();
//有了 async await 之後; 當執行到await的時候就會等待timeOut(1);返回值之後再往下執行;
async function name() {
let a = await timeOut(1);
let b = await timeOut(2);
console.log(a + b);
}
name();
注意: await 只能在async函式內使用,而且await後一定要是一個promise函式;