ES6 7 8 9 10常用新特性總結 更新中

2021-09-23 20:41:48 字數 4093 閱讀 1088

1、變數宣告let && const,增加新的詞法作用域(es6)

2、解構賦值(es6)

陣列解構賦值:let [a, b, c] = [1, 2, 3];//等同於let a = 1;let b = 2;let c = 3; 讓**看起來更優美,有種python賦值的既視感。

物件的解構賦值:var  = react; 等同於var stylesheet =react.stylesheet;  var text = react.text;

3、箭頭函式(es6)

es6中新增箭頭操作符除了用於簡化函式的寫法,還修復了this的指向,使其永遠指向詞法作用域。

var obj =  

}; obj.getage(); // 25

4、...操作符(es6)

通過它可以將陣列作為引數直接傳入函式

var people = ['lily', 'lemon', 'terry'];

function sayhello(people1, people2, people3) ,$,$`);

}sayhello(...people);//輸出:hello lily,lemon,terry

5、iterable【可迭代】型別(es6)

為了統一集合型別,es6標準引入了新的iterable型別,array、map和set都屬於iterable型別,具有iterable型別的集合可以通過新的for … of迴圈來遍歷

var a = ['a', 'b', 'c'];

var s = new set(['a', 'b', 'c']);

var m = new map([[1, 'x'], [2, 'y'], [3, 'z']]);

for (var x of a)

for (var x of s)

for (var x of m)

var m = new map(); // map相關操作如下, set同理

m.set('adam', 67); // 新增新的key-value

m.set('bob', 59);

m.has('adam'); // 是否存在key 'adam': true

m.get('adam'); // 67

m.delete('adam'); // 刪除key 'adam'

m.get('adam'); // undefined

set陣列去重

var arr = [1, 2, 3, 3, 3, 3, 14]

var set = new set(arr)

var arr = array.from(set)

console.log(arr) // 1,2,3,14

6、類(es6)

es6提供了更接近傳統語言的寫法,引入了class(類)這個概念,作為物件的模板。通過class關鍵字,可以定義類,與多數傳統語言類似。

//定義類

class point

tostring()

}

7、object.values/object.entries (es6)

es5 引入了object.keys方法,返回乙個陣列,成員是引數物件自身的(不含繼承的)所有可遍歷( enumerable )屬性的鍵名。object.values方法返回乙個陣列,成員是引數物件自身的(不含繼承的)所有可遍歷( enumerable )屬性的鍵值。object.entries方法返回乙個陣列,成員是引數物件自身的(不含繼承的)所有可遍歷( enumerable )屬性的鍵值對陣列。

let  = object;

let obj = ;

for (let key of keys(obj))

for (let value of values(obj))

for (let [key, value] of entries(obj))

8、array.prototype.includes(es7)

在乙個陣列或者列表中檢查是否存在乙個值

let arr = ['react', 'angular', 'vue']

if (arr.includes('react'))

還能在字串中使用includes,除了增強了可讀性語義化,實際上給開發者返回布林值,而不是匹配的位置。

let str = 'react quickly'

if (str.tolowercase().includes('react'))

includes也可以在nan(非數字)使用。最後 ,includes第二可選引數fromindex,這對於優化是有好處的,因為它允許從特定位置開始尋找匹配。

console.log([1, 2, 3].includes(2)) // true

console.log([1, 2, 3].includes(4)) // false

console.log([1, 2, nan].includes(nan)) // true

console.log([1, 2, -0].includes(+0)) // true

console.log([1, 2, +0].includes(-0)) // true

console.log(['a', 'b', 'c'].includes('a')) // true

console.log(['a', 'b', 'c'].includes('a', 1)) // false

9、exponentiation operator(求冪運算)(es7)

let a = 7 ** 12

let b = 2 ** 7

console.log(a === math.pow(7, 12)) // true

console.log(b === math.pow(2,7)) // true

// 開發者還可以操作結果:

let a = 7

a **= 12

let b = 2

b **= 7

console.log(a === math.pow(7,12)) // true

console.log(b === math.pow(2,7)) // true

10、string padding(字串填充) (es7)

padstart()方法用另乙個字串填充當前字串(重複,如果需要的話),以便產生的字串達到給定的長度。填充從當前字串的開始(左側)應用的。

padend()~~填充從當前字串的開始(左側)應用的。

'abc'.padstart(10);         // "       abc"

'abc'.padstart(10, "foo"); // "foofoofabc"

'abc'.padstart(6,"123465"); // "123abc"

'abc'.padend(10);          // "abc       "

'abc'.padend(10, "foo"); // "abcfoofoof"

11、async/await (es7)

因為 async 函式返回乙個 promise 物件,所以 await 可以用於等待乙個 async 函式的返回值。注意到 await 不僅僅用於等 promise 物件,它可以等任意表示式的結果,所以,await 後面實際是可以接普通函式呼叫或者直接量的。等到乙個 promise 物件,它會阻塞後面的**,等著 promise 物件 resolve,然後得到 resolve 的值,作為 await 表示式的運算結果。

function getsomething() 

async function testasync()

async function test()

test();

ES6 7 8常用新特性總結 超實用

let 命令也用於變數宣告,但是作用域為區域性 在函式外部可以獲取到b,獲取不到a,因此例如for迴圈計數器就適合使用let。const用於宣告乙個常量,設定後值不會再改變 const pi 3.1415 pi 3.1415 pi 3 typeerror assignment to constant...

ES6常用的新特性

let const let和const都是塊級作用域,定義的變數不會被變數提公升 不會產生在定義之前就使用的情況 let定義的變數只在 自己所在的 塊內有效,const定義的常量不能被修改。並且不允許被重複宣告。import匯入模組,export匯出模組。export 寫法一 export var ...

ES6新特性 學習總結

let s hello world s.startswith hello true s.endswith true s.includes o true這三個方法都支援第二個引數,表示開始搜尋的位置。let s hello world s.startswith world 6 true s.endsw...