ES6一些新特性記錄

1.箭頭操作符

箭頭操作符左邊是需要輸入的參數(shù)，右邊是返回值

比如運用到j(luò)s回調(diào)函數(shù)中可以使書寫更加方便

var array=[1,3,5]; //標準寫法 array.foreach(function(v,i,a){console.log(v); }); //es6寫法 array.foreach(v => console.log(v));

?

又比如一塊簡單的代碼：

function (i){ return i + 1} //es5寫法 (i) => i + 1;

?

?

如果方程式比較復(fù)雜，則需要用{}把代碼包起來。

//es5寫法： function (x, y){x++;y--;return x + y ; } //es6寫法： （x, y) => {x++; y--; return x + y}

?

?

2.增強對象字面量

es6新特性中對象字面量被增強了，使用更為簡潔靈活

a.可以直接在對象字面量里定義原型

b.定義方法可以不用function關(guān)鍵字

c.直接調(diào)用父類方法

var human = {breath(){console.log('breathing')} }; var worker = {//直接使用對象字面兩定義原型為human，相當(dāng)于繼承human __proto__:human,company:Earth;//定義方法不再需要function work(){console.log("working")};}; human.breath(); //breathing //調(diào)用繼承來的human的breath方法 worker.breath(); //breathing

?

?

3.字符串模版

es6新特性中，可以使用反引號``來創(chuàng)建字符串，這種方法可以包含用$和花括號{}包裹的變量

//生成一個隨機數(shù) var num = Math.random(); //將這個數(shù)輸出到控制臺 console.log(`your num is ${num}`);

?

4.解構(gòu)

自動解析數(shù)組或?qū)ο笾械闹?#xff0c;比如我們平時若要一個函數(shù)返回多個值，常規(guī)的做法是返回一個對象，將每個值作為對象中的屬性返回。但中es6中，可以利用解構(gòu)這一特性，直接返回一個數(shù)組，然后數(shù)組中的值回自動被解析到接收該值的變量中。

?

5.let

var name = 'zach' ? while (true) {var name = 'obama'console.log(name) //obamabreak } ? console.log(name) //obama

?

?

es5中只有全局作用域和函數(shù)作用域，這樣帶來了很多不合理的場景，比如上面demo中，內(nèi)層變量覆蓋外層變量，而let實際上為JS新增了塊級作用域，用它所聲明的變量，只在let命令所在的代碼塊內(nèi)有效。

let name = "shark"; while(true){let name = "Jan";console.log(name); //Janbreak; } console.log(name); //shark

?

var另一個不合理場景就是：用來計數(shù)的循環(huán)變量，泄露為全局變量，比如

var a = []; for( var i = 0; i <= 10; i++){a[i] = function(){console.log(i);} }; a[6](); //10

?

上面變量中，變量i是var聲明的，在全局范圍內(nèi)有效，所以每一次循環(huán)，新的值都會覆蓋舊的值，這就導(dǎo)致，最后循環(huán)結(jié)束時輸出的是10.而使用let則不會出現(xiàn)這個問題。

var a = []; for( let i = 0; i <= 10; i++){a[i] = function(){console.log(i);} }; a[6](); //5

?

因為let只在自己所在的塊級作用域有效，所以i不會泄露成全局變量，最后輸出的仍然是數(shù)組a中下標為6的值。

?

6.const

const也可以用來聲明變量，只不過它聲明的是變量，一旦聲明就不能夠改變

const PI = Math.PI PI = 24; //ERROR

?

當(dāng)我們想去改變const聲明的常量時，瀏覽器就會報錯。

const有一個很好的應(yīng)用場景，當(dāng)我們使用第三方庫聲明的變量時，可以避免不小心重命名而導(dǎo)致出現(xiàn)的bug.

?

7.默認參數(shù)值

es6可以直接在定義函數(shù)時指定參數(shù)的默認值，而不需要邏輯運算符了

// 常規(guī)做法 function sayHello(){var name = name || "Jan";console.log('hello '+name); } // es6寫法 function sayHello(name = "Jan"){console.log('hello ${name}'); } ? // 常規(guī) result： sayHello():hello Jan ; sayHello('Jack'):hello Jack ; ? // es6 result sayHello(): hello Jan ; sayHello('Tony'): hello Tony ;

?

8.template語法

當(dāng)我們要引入大段html到文檔中時，傳統(tǒng)的寫法是：

$("#result").append("There are <b>" + basket.count + "</b> " +"items in your basket, " +"<em>" + basket.onSale +"</em> are on sale!" );

?

我們需要引一大堆的+號用來連接文本與變量。而使用es6中模版字符串后，我們可以這樣寫

$('result').append(' There are <b>${basket.count}</b> items in your basket<em>${basket.onSale}</em> are on sale! ')

?

9.for of 值遍歷

es5中我們都知道用for in 遍歷數(shù)組，對象，es6中提供的for of與其功能相似，只不過它遍歷的不是序號而是值。

?

var arr = [a, c, e, g]; for (v of arr){console.log(v); //a , c , e ,g }

?

轉(zhuǎn)載于:https://www.cnblogs.com/sharkJan/p/7502126.html

總結(jié)

以上是生活随笔為你收集整理的ES6一些新特性记录的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。