Javascript 6里的4個(gè)新語法
JS 的 ES6版本已經(jīng)被各大瀏覽器廣泛支持，很多前端框架也已經(jīng)使用 ES6，并且還有 Babel 可以做兼容處理，所以ES6已經(jīng)進(jìn)入了應(yīng)用階段
如果您對(duì) ES6 還不太熟悉，下面4個(gè)簡(jiǎn)單的基礎(chǔ)用法可以幫助您快速了解ES6
1.使用 let 和 const 聲明變量
在傳統(tǒng)的 ES5 代碼中，變量的聲明有兩個(gè)主要問題
（1）缺少塊兒作用域的支持
（2）不能聲明常量
ES6中，這兩個(gè)問題被解決了，增加了兩個(gè)新的關(guān)鍵字：let 和 const
塊兒作用域使用 let
var a = 1;
if (true) {
var b = 2;
}
console.log(a); // 1
console.log(b); // 2
ES5 中 if 塊兒內(nèi)聲明的變量 b 可以在塊兒外訪問
// in ES6
let a = 1;
if (true) {
let b = 2;
}
console.log(a); // 1
console.log(b); // ReferenceError: b is not defined
ES6 中 if 塊兒內(nèi)使用 let 聲明的變量 b 不能在塊兒外訪問
下面這段代碼是常見的一個(gè)比較迷惑人的情況
var a = [];
for (var i=0; i< 5; i++) {
a.push(function() {
console.log(i);
});
}
a.forEach(function(value) {
value();
});
運(yùn)行結(jié)果是：5, 5, 5, 5, 5
使用 let 聲明循環(huán)中的變量 i
var b = [];
for ( let i=0; i< 5; i++) {
b.push(function() {
console.log(i);
});
}
b.forEach(function(value) {
value();
});
運(yùn)行結(jié)果是：0, 1, 2, 3, 4
定義常量使用 const
// in ES5 var MY_CONSTANT = true; MY_CONSTANT = false;
ES5 中不能定義常量，值可以被改，只能靠我們自己來保證
// in ES6 const MY_CONSTANT = true; MY_CONSTANT = false; // Uncaught TypeError: Assignment to constant variable
ES6 中使用 const 聲明的常量是不可以被改的
2.模板字符串
下面這種字符串與變量的拼接方式是比較常見的
var url = ‘http://www.' + domain + ‘.com/' + path + ‘?' + queryParams;
ES6 提供了簡(jiǎn)潔的用法
let url = `http://www.${domain}.com/${path}?${queryParams}`;
3.新的 Set 和 Map 對(duì)象
ES5 中我們經(jīng)常使用數(shù)組來存儲(chǔ)動(dòng)態(tài)數(shù)據(jù)，例如
var collection = []; collection.push(1, 2, 1); console.log(collection); // [ 1, 2, 1]
其中包含了重復(fù)數(shù)據(jù)，如果不想有重復(fù)數(shù)據(jù)，需要使用代碼判斷
function addToCollection(collection, value) {
if (collection.indexOf(value) < 0) {
collection.push(value)
}
}
ES6 提供了 Set 對(duì)象，處理這個(gè)情況就方便多了
let collection = new Set();
collection.add(1);
collection.add(2);
collection.add(1);
console.log(collection); // Set {1, 2}
Set 還可以方便的遍歷集合，和處理集合中的數(shù)據(jù)
ES5 中通常使用 object 來存儲(chǔ)鍵值對(duì)數(shù)據(jù)，例如
var collection = {};
collection.a = ‘a(chǎn)bc';
collection.b = ‘xyz';
ES6 有了 Map，就可以這樣使用
let collection = new Map(); collection.set(‘a(chǎn)', ‘a(chǎn)bc'); collection.set(‘b', ‘xyz');
遍歷也很簡(jiǎn)單
collection.forEach(function(value, key) {
console.log(key + ":" + value);
});
console.log(collection.size);
4.函數(shù)參數(shù)
ES6 中函數(shù)的參數(shù)有兩個(gè)新特性
默認(rèn)值
function doSomething(someObject) {
console.log(someObject);
}
這里有可能會(huì)出現(xiàn)運(yùn)行時(shí)錯(cuò)誤，需要驗(yàn)證參數(shù)
function doSomething(someObject) {
if (someObject === undefined) {
someObject = {};
}
console.log(someObject);
}
這類的驗(yàn)證代碼非常普遍，ES6 中可以給參數(shù)設(shè)置默認(rèn)值，就簡(jiǎn)單了很多
function doSomething(someObject = {}) {
console.log(someObject);
}
對(duì)象解構(gòu)
我們常會(huì)把一個(gè)包含鍵值對(duì)的對(duì)象做為參數(shù)傳給某個(gè)函數(shù)，然后在函數(shù)內(nèi)獲取對(duì)象的各個(gè)屬性
function doSomething(someObject) {
var one = someObject.propOne;
console.log(one);
var two = someObject.propTwo;
console.log(two);
var three = someObject.propThree;
console.log(three);
}
ES6 可以讓我們直接在參數(shù)中解構(gòu)對(duì)象參數(shù)
function doSomething({ propOne, propTwo, propThree }) {
console.log(propOne);
console.log(propTwo);
console.log(propThree);
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了解決小程序無法觸發(fā)SESSION問題,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-02-02
javascript 事件處理程序介紹，學(xué)習(xí)js的朋友可以參考下2012-06-06
事件機(jī)制是幾乎所有開發(fā)語言都有的機(jī)制，并不是deviceone的獨(dú)創(chuàng)，在某些語言稱之為消息(Event),有些地方稱之為(Message).接下來通過本文給大家介紹JS事件機(jī)制的理解 ，需要的朋友一起學(xué)習(xí)吧2023-04-04
innerHTML,outerHTML,innerText,outerText的用法及區(qū)別解析
本篇主要是對(duì)innerHTML,outerHTML,innerText,outerText的用法及區(qū)別進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2013-12-12
非常不錯(cuò)的思路，用js實(shí)現(xiàn)表格的隨機(jī)排序，建議大家看代碼，學(xué)習(xí)編程思路2008-09-09
通過 JS 獲取頁面相關(guān)的尺寸是比較常見的操作,尤其是在動(dòng)態(tài)計(jì)算頁面布局時(shí),今天我們就來學(xué)習(xí)一下幾個(gè)獲取頁面尺寸的基本方法,需要的朋友可以參考下2023-09-09
JavaScript實(shí)現(xiàn)網(wǎng)頁跨年倒計(jì)時(shí)
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)網(wǎng)頁跨年倒計(jì)時(shí)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
原生js實(shí)現(xiàn)簡(jiǎn)單貪吃蛇小游戲
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)貪吃蛇小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
本文給大家介紹的是javascript中的靜態(tài)屬性和原型屬性，并附上示例分析，十分的實(shí)用，有需要的小伙伴可以參考下。2015-05-05
JS之判斷是否為對(duì)象或數(shù)組的幾種方式總結(jié)
這篇文章主要介紹了JS之判斷是否為對(duì)象或數(shù)組的幾種方式總結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04