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

2022-08-21 22:03:13 字數 4036 閱讀 6177

let 命令也用於變數宣告,但是作用域為區域性

在函式外部可以獲取到b,獲取不到a,因此例如for迴圈計數器就適合使用let。

const用於宣告乙個常量,設定後值不會再改變

const pi = 3.1415;

pi // 3.1415

pi = 3; //typeerror: assignment to constant variable.

es6 允許按照一定模式,從陣列和物件中提取值,對變數進行賦值,這被稱為解構(destructuring)。 

例如陣列:

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;

var view = react.text;

es6中新增箭頭操作符用於簡化函式的寫法,操作符左邊為引數,右邊為具體操作和返回值。

var sum = (num1, num2) =>

//等同於

var sum = function(num1, num2) ;

箭頭函式還修復了this的指向,使其永遠指向詞法作用域:

var obj =

};obj.getage(); // 25

這個的引入幾乎不會用到extend這個函式來。通過它可以將陣列作為引數直接傳入函式:

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

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

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

為了統一集合型別,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

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

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

//定義類

class point

tostring()

}

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

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

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

// correct

if (arr.includes('react'))

還能在字串中使用includes:

let str = 'react quickly'

// correct

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)

et 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

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))

使用promise

使用promise寫非同步**,會比較麻煩:

axios.get(`/q?query=$`)

.then(response => response.data)

.then(data =>

).catch(error => console.log(error));

使用async/await

async/await使得非同步**看起來像同步**,這正是它的魔力所在:

async fetchdata(query) =>

`);const data = response.data;

return data;

}catch (error)}

fetchdata(query).then(data =>

)async/await是寫非同步**的新方式,以前的方法有**函式和promise。相比於promise,它更加簡潔,並且處理錯誤、條件語句、中間值都更加方便

3 1ES6 7 8新特性之Symbol

1.symbol的概念 1.symbol是es6中新增的一種資料型別,被劃分到了基本資料型別中.基本資料型別 字串 數值 布林 undefined null symbol 引用資料型別 object 2.symbol的作用 用來表示乙個獨一無二的值 3.如果生成乙個獨一無二的值?let symbol...

3 3ES6 7 8新特性之Generator函式

1.概念 generator 函式是 es6 提供的一種非同步程式設計解決方案 generator 函式內部可以封裝多個狀態,因此又可以理解為是乙個狀態機。2.定義 generator 函式 在普通函式的function後面加上 即可 eg function gen 3.generator函式和普通...

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

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...