資訊專欄INFORMATION COLUMN
摘要：常量變量先說(shuō)說(shuō)常量和變量的概念吧，常量是說(shuō)那種進(jìn)行一次賦值后不會(huì)更改的值，比如說(shuō)游戲賬戶的，變量是說(shuō)賦值后有更改的需求的，比如游戲名，游戲密碼。常用實(shí)例交換變量的值提取數(shù)據(jù)解構(gòu)賦值對(duì)提取對(duì)象中的數(shù)據(jù)，尤其有用。
本系列文章適合快速掌握 ES6 入門(mén)語(yǔ)法，想深入學(xué)習(xí) ES6 的小伙伴可以看看阮一峰老師的《ECMAScript 6 入門(mén)》
學(xué)習(xí) 20% 的知識(shí)完成 80% 的工作
稍微介紹下 ES6 吧，詳細(xì)介紹請(qǐng)自行 baidu 或 Google
ES2015 = ES6
ES6 泛指 ES2015、ES2016、ES2017 等等，JavaScript 的下一代標(biāo)準(zhǔn)
現(xiàn)代瀏覽器支持大部分（90%+）的原生 ES6 ，但是為了兼容老版本的瀏覽器，通常使用 Babel 將 ES6 代碼轉(zhuǎn)為 ES5 代碼。
常量變量 let and const先說(shuō)說(shuō)常量和變量的概念吧，
常量是說(shuō)那種進(jìn)行一次賦值后不會(huì)更改的值，比如說(shuō)游戲賬戶的 ID，
變量是說(shuō)賦值后有更改的需求的，比如游戲名，游戲密碼。
在之前的 JavaScript 中是不區(qū)分常量和變量的統(tǒng)統(tǒng)使用 var 來(lái)定義全局變量，
var userId = 666; var userPassword = "mimabunengshuo";
現(xiàn)在 ES6 中使用 let 定義局部變量，const 定義局部常量
const userId = 666; let userPassword = "wobuzidao";為什么需要使用局部變量與常量
//我希望重復(fù)打印 0 到 9 ，打印10次
//使用 var
function varI(){
for(var i = 0;i < 10;i++){
for(var i = 0;i < 10;i++){
console.log("varI:"+i);
}
}
}
//使用 let
function letI(){
for(let i = 0;i < 10;i++){
for(let i = 0;i < 10;i++){
console.log("letI:"+i);
}
}
}
varI();//結(jié)果打印只有一次 0 到 9
letI();//順利完成
如果非要使用 var 完成這個(gè)需求的話可以使用閉包
關(guān)于閉包本次不多做討論
function varI() {
for (var i = 0; i < 10; i++) {
function test() {
for (var i = 0; i < 10; i++) {
console.log("varI:" + i);
}
}
test();
}
}
varI();//順利完成
結(jié)構(gòu)賦值
左右兩邊必須是一樣的數(shù)據(jù)類型，或者轉(zhuǎn)換后是一樣的類型；
等號(hào)右邊的值應(yīng)該是數(shù)組或?qū)ο?，不是?duì)象或數(shù)組，就先將其轉(zhuǎn)為對(duì)象；
定義和賦值必須同步完成
例如聲明變量
let a = 1; let b = 2; let c = 3;
ES6 允許寫(xiě)成下面這樣。
let [a, b, c] = [1, 2, 3];
常用實(shí)例
1.交換變量的值
let x = 1; let y = 2; [x, y] = [y, x];
2.提取 JSON 數(shù)據(jù)
解構(gòu)賦值對(duì)提取 JSON 對(duì)象中的數(shù)據(jù)，尤其有用。
let jsonData = {
status: true,
data: ["nicai", "wobuzhidao"]
};
let { status, data } = jsonData;
console.log(status, data);// true ["nicai", "wobuzhidao"]
箭頭函數(shù)
在 ES6 之前定義函數(shù)是這樣寫(xiě)
var f = function (i){
return i + 5;
}
有了箭頭函數(shù)可以這樣寫(xiě)（去掉 function 關(guān)鍵詞，在"()"后面加"=>"）
let f = (i) => {
return i + 5;
}
好像沒(méi)有太大區(qū)別？
箭頭函數(shù)只有一個(gè)參數(shù)時(shí),可以省略"()",只寫(xiě)參數(shù)；當(dāng)只有一條返回語(yǔ)句時(shí)，可以省略"{}",以及 return 語(yǔ)句
上面的可以這樣寫(xiě)
let f = i => return i + 5;
箭頭函數(shù)的 this 是固定不變的，就是指向定義時(shí)所在的對(duì)象，而不是使用時(shí)所在的對(duì)象
假如將 ES6 的箭頭函數(shù)轉(zhuǎn)換為 ES5 的普通函數(shù),可以看到，箭頭函數(shù)的 this 是在引用外層的 this
// ES6
function foo() {
setTimeout(() => {
console.log("id:", this.id);
}, 100);
}
// ES5
function foo() {
var _this = this;
setTimeout(function () {
console.log("id:", _this.id);
}, 100);
}
字符串模板
字符串模板主要用來(lái)處理變量和字符串混合的情況
字符串使用反引號(hào)(`字符串`)來(lái)包裹字符串，用$符加大括號(hào) ( ${JavaScript}) 來(lái)包裹任意的 JavaScript 表達(dá)式
字符串模板中可以使用回車
比如用 JavaScript 來(lái)生成 HTML 元素，元素的文本想使用自己 JavaScript 運(yùn)算后的結(jié)果
ES5 中比較麻煩
$("#dom").append(
"你的用戶名是：" + userName + "
" +
"你已經(jīng)注冊(cè)了 " + oNumber +"年"
);
ES6中相對(duì)簡(jiǎn)單
$("#dom").append(
`你的用戶名是：${userName}
你已經(jīng)注冊(cè)了${oNumber}年`
);
面向?qū)ο?/b>
class 用來(lái)定義一個(gè)類
extends 用來(lái)表示繼承哪個(gè)類
constructor 構(gòu)造函數(shù)可以定義私有方法和屬性,此函數(shù)外的為共享的
super() 在 constructor 使用該方法繼承父類的 this 對(duì)象
代碼示例
class user {
constructor() {
this.name = "用戶1";
}
sayHello(say) {
console.log(`${this.name}，有人對(duì)你說(shuō)：${say}`);
}
}
let user1 = new user();
user1.sayHello("你好"); //用戶1，有人對(duì)你說(shuō)：你好
class xiaoming extends user {
constructor() {
super();
this.name = "小明";
}
}
let xiaoming1 = new xiaoming();
xiaoming1.sayHello("你好"); //小明，有人對(duì)你說(shuō)：你好
let user2 = new user();
user2.sayHello("你好")//用戶1，有人對(duì)你說(shuō)：你好
[ES6] 快速掌握常用 ES6 （一）
[ES6] 快速掌握常用 ES6 （二）
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/99951.html
摘要：本系列文章適合快速掌握入門(mén)語(yǔ)法，想深入學(xué)習(xí)的小伙伴可以看看阮一峰老師的入門(mén)本篇文章是對(duì)之前文章的一個(gè)補(bǔ)充，可以使代碼更簡(jiǎn)潔函數(shù)參數(shù)默認(rèn)值在傳統(tǒng)語(yǔ)法中如果想設(shè)置函數(shù)默認(rèn)值一般我們采用判斷的形式在新的語(yǔ)法中我們可以在參數(shù)聲明的同時(shí)賦予默認(rèn)值參數(shù) 本系列文章適合快速掌握 ES6 入門(mén)語(yǔ)法，想深入學(xué)習(xí) ES6 的小伙伴可以看看阮一峰老師的《ECMAScript 6 入門(mén)》 本篇文章是對(duì)之前文章...
摘要：的翻譯文檔由的維護(hù)很多人說(shuō)，阮老師已經(jīng)有一本關(guān)于的書(shū)了入門(mén)，覺(jué)得看看這本書(shū)就足夠了。前端的異步解決方案之和異步編程模式在前端開(kāi)發(fā)過(guò)程中，顯得越來(lái)越重要。為了讓編程更美好，我們就需要引入來(lái)降低異步編程的復(fù)雜性。 JavaScript Promise 迷你書(shū)（中文版） 超詳細(xì)介紹promise的gitbook，看完再不會(huì)promise...... 本書(shū)的目的是以目前還在制定中的ECMASc...
摘要：在繼承的構(gòu)造函數(shù)中，我們必須如上面的例子那么調(diào)用一次方法，它表示構(gòu)造函數(shù)的繼承，與中利用繼承構(gòu)造函數(shù)是一樣的功能。 showImg(https://segmentfault.com/img/remote/1460000009078532); 在實(shí)際開(kāi)發(fā)中，ES6已經(jīng)非常普及了。掌握ES6的知識(shí)變成了一種必須。盡管我們?cè)谑褂脮r(shí)仍然需要經(jīng)過(guò)babel編譯。 ES6徹底改變了前端的編碼風(fēng)格，...
摘要：需要更多地去學(xué)習(xí)應(yīng)用。當(dāng)你調(diào)用一個(gè)時(shí)，它將返回一個(gè)迭代器對(duì)象。這個(gè)迭代器對(duì)象擁有一個(gè)叫做的方法來(lái)幫助你重啟函數(shù)并得到下一個(gè)值。那么問(wèn)題來(lái)了，咱們也不能手動(dòng)一直調(diào)用方法，你需要一個(gè)能夠調(diào)用生成器并啟動(dòng)迭代器的方法。 開(kāi)始用vue或者react，很多時(shí)候我們都會(huì)把ES6這個(gè)大兄弟加入我們的技術(shù)棧中。但是ES6那么多那么多特性，我們需要全部都掌握嗎？秉著二八原則，掌握好常用的，有用的這個(gè)可以...
摘要：以下簡(jiǎn)稱是語(yǔ)言的下一代標(biāo)準(zhǔn)。的繼承機(jī)制，實(shí)質(zhì)是先創(chuàng)造父類的實(shí)例對(duì)象所以必須先調(diào)用方法，然后再用子類的構(gòu)造函數(shù)修改。總結(jié)以上就是最常用的一些語(yǔ)法，可以說(shuō)這的語(yǔ)法，在的日常使用中占了追加十分鐘好的嗎分鐘掌握核心內(nèi)容下 ECMAScript 6（以下簡(jiǎn)稱ES6）是JavaScript語(yǔ)言的下一代標(biāo)準(zhǔn)。因?yàn)楫?dāng)前版本的ES6是在2015年發(fā)布的，所以又稱ECMAScript 2015。 也就是說(shuō)...
閱讀 2305·2021-09-27 13:35
閱讀 586·2019-08-30 15:55
閱讀 838·2019-08-30 15:53
閱讀 581·2019-08-30 15:52
閱讀 2176·2019-08-30 12:59
閱讀 2300·2019-08-29 16:42
閱讀 1485·2019-08-26 18:26
閱讀 2498·2019-08-26 13:48
