1. 程式人生 > >es6常用的新特性 let,const,class,模版字串,解構賦值,箭頭函式,for-of, keys values entries, export import, async await

es6常用的新特性 let,const,class,模版字串,解構賦值,箭頭函式,for-of, keys values entries, export import, async await

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函式;