ES6新增語法

2021-10-05 04:48:15 字數 4202 閱讀 4735

逆戰es6新語法概覽

語法箭頭函式、this

es6中可以使用 => 作為函式表達形式,極簡風格,引數+ => +函式體。

var foo = function();

//等價於

let foo = () => 1;

let nums = [1,2,3,5,10];

let fives = ;

nums.foreach(v => );

console.log(fives); //[5,10]

箭頭函式中的 this 指的不是window,是物件本身。

function aa(),500);

}aa(); //2

let、const

es6 推薦在函式中使用 let 定義變數

const 用來宣告乙個常量,但也並非一成不變的

let 和 const 只在最近的乙個塊中(花括號中)有效

var a = 1;

console.log(a); //1

const a = [1,2];

a.push = 3;

console.log(a); //[1,2,3]

a = 10; //error

classes

es6中增加了類的概念,其實es5中已經可以實現類的功能了,只不過使用class實現可以更加清晰,更像物件導向的寫法。

class animal

}class person extends animal

}let aa = new person();

//我是乙個動物

//我是乙個程式設計師

解構解構賦值是es6中推出的一種高效、簡潔的賦值方法

沒啥說的,直接上**:

//通常情況下

var first = somearray[0];

var second = somearray[1];

var third = somearray[2];

//解構賦值

let [first, second, third] = somearray; //比上面簡潔多了吧

//還有下面例子

let [,third] = [1,2,3];

console.log(third); //3

let [first,…last] = [1,2,3];

console.log(last); //[2,3]

//物件解構

let = ;

console.log(name); //lisi

console.log(age); //20

let = {};

console.log(ept); //undefined

rest + spread

「…」//rest

function f(x, …y)

f(3, 「hello」, true) == 6

//spread

function f(x, y, z)

f(…[1,2,3]) == 6

物件字面量擴充套件

可以在物件字面量裡面定義原型

定義方法可以不用function關鍵字

直接呼叫父類方法

//通過物件字面量建立物件

var human =

};var worker =

};human.breathe();//輸出 『breathing…』

//呼叫繼承來的breathe方法

worker.breathe();//輸出 『breathing…』

模版字串

es6中提供了用反引號`來建立字串,裡面可包含$等

this is a pretty little template string.

in es5 this is not legal.

let name = 「bob」, time = 「today」;

hello $, how are you $?

iterators(迭代器)

es6 中可以通過 symbol.iterator 給物件設定預設的遍歷器,直到狀態為true退出。

var arr = [11,12,13];

var itr = arrsymbol.iterator;

itr.next(); //

itr.next(); //

itr.next(); //

itr.next(); //

generators

es6中非常受關注的的乙個功能,能夠在函式中間暫停,一次或者多次,並且之後恢復執行,在它暫停的期間允許其他**執行,並可以用其實現非同步。

run-stop-run…

function *foo(x)

var it = foo( 5 );

console.log( it.next() ); //

console.log( it.next( 12 ) ); //

console.log( it.next( 13 ) ); //

generator能實現好多功能,如配合for…of使用,實現非同步等等,我在這裡就不多說了,詳見。

for…of && for…in

for…of 遍歷(陣列)

let arr = [1,2,3];

for (let itr of arr)

for…in 遍歷物件中的屬性

let arr = [1,2,3];

arr.aa = 『bb』;

for (let itr in arr)

map + set + weakmap + weakset

set 物件是一組不重複的值,重複的值將被忽略,值型別可以是原始型別和引用型別

weakset是一種弱引用,同理weakmap

// sets

var s = new set();

s.add(「hello」).add(「goodbye」).add(「hello」);

s.size === 2;

s.has(「hello」) === true;

// maps

var m = new map();

m.set(「hello」, 42);

m.set(s, 34);

m.get(s) == 34;

// weak maps

var wm = new weakmap();

wm.set(s, );

wm.size === undefined

// weak sets

var ws = new weakset();

ws.add();

proxies

proxy可以監聽物件身上發生了什麼事情,並在這些事情發生後執行一些相應的操作。

//定義被偵聽的目標物件

var engineer = ;

//定義處理程式

var interceptor =

};//建立**以進行偵聽

engineer = proxy(engineer, interceptor);

//做一些改動來觸發**

engineer.salary = 60;

//控制台輸出:salary is changed to 60

symbols

symbol 是一種新的資料型別,它的值是唯一的,不可變的。es6 中提出 symbol 的目的是為了生成乙個唯一的識別符號,不過你訪問不到這個識別符號.

var sym = symbol( 「symbol」 );

console.log(typeof sym); // symbol

如果要獲取物件 symbol 屬性,需要使用object.getownpropertysymbols(o)

promises

es6 對 promise 有了原生的支援,乙個 promise 是乙個等待被非同步執行的物件,當它執行完成後,其狀態會變成 resolved 或者 rejected

promises是處理非同步操作的一種模式,之前在很多三方庫中有實現,比如jquery的 deferred 物件。當你發起乙個非同步請求,並繫結了.when(), .done()等事件處理程式時,其實就是在應用promise模式

function timeout(duration = 0) )

}var p = timeout(1000).then(() => ).then(() => ).catch(err => )

ES6新增語法

es6中新增的宣告變數的方式 let關鍵字用來宣告變數,類似於var,但是使用let宣告的變數有以下幾點特性 1.不存在變數提公升 2.暫時性死區 3.不允許重複宣告,同一作用域內只能宣告一次 4.新增的塊級作用域 for 作用域a 迴圈的應用 const關鍵字用來宣告常量,其使用規則除了宣告之後不...

ES6新增語法

es6中 新增的用於宣告變數的關鍵字。使用let關鍵字宣告的變數的特點 1 let宣告的變數只在所處於的塊級有效 使用let關鍵字宣告的變數具有塊級作用域 if true console.log a 報錯注意 使用let關鍵字宣告的變數才具有塊級作用域,使用var宣告的變數不具備塊級作用域特性。擁有...

es6新增的語法

es6將弱型別的js提公升為中弱型別。我們也一定要學習es6.es6新增知識點 1 定義變數 之前定義變數一直用的是var,但是es6中可以使用let和const 但是let有幾個特點 不允許宣告變數 const的特點 不允許重複宣告 不允許重新賦值 可以給物件中新增屬性 宣告的時候必須賦值 不存在...