資訊專欄INFORMATION COLUMN
摘要：它是一個(gè)通用標(biāo)準(zhǔn)，奠定了的基本語法。年月發(fā)布了的第一個(gè)版本，正式名稱就是標(biāo)準(zhǔn)簡稱。結(jié)語的基本擴(kuò)展還有一些沒有在這里詳細(xì)介紹。
前言
ES6標(biāo)準(zhǔn)以及頒布兩年了，但是，好像還沒有完全走進(jìn)我們的日常開發(fā)。這篇文章從ES6的基本類型擴(kuò)展入手，逐步展開對ES6的介紹。
ECMAScript和JavaScriptJavaScript是由Netscape創(chuàng)造的，該公司1996年11月將JavaScript語言提交國際標(biāo)準(zhǔn)化組織ECMA。于是ECMA次年就發(fā)布了ECMAScript 1.0版本。之所以不采用JavaScript命名，原因有兩個(gè)，一個(gè)是版權(quán)問題，另一個(gè)也是想通過ECMAScript表明制定者是ECMA而非Netscape。當(dāng)然，這不是我們關(guān)注的重點(diǎn)。
1998年，發(fā)布了ECMAScript 2.0，1999年發(fā)布了ECMAScript 3.0。這是ECMAScript自頒布以來最廣為支持的版本，我們現(xiàn)在所使用的JavaScript語法和規(guī)定大部分都來源于這個(gè)版本。它是一個(gè)通用標(biāo)準(zhǔn)，奠定了JavaScript的基本語法。2000年后，4.0開始提上日程，但是由于各方分歧很大，導(dǎo)致4.0草案流產(chǎn)，只在最后發(fā)布了一個(gè)小的改進(jìn)版本，即ES 3.1，不久后更名為ECMAScript 5.0。
2011年，ECMAScript 5.1版發(fā)布后，就開始制定6.0版了。2015年6月發(fā)布了ES6的第一個(gè)版本，正式名稱就是《ECMAScript 2015標(biāo)準(zhǔn)》（簡稱 ES2015）。2016年6月，小幅修訂的《ECMAScript 2016標(biāo)準(zhǔn)》（簡稱 ES2016）如期發(fā)布，這個(gè)版本可以看作是 ES6.1 版，因?yàn)閮烧叩牟町惙浅Ｐ。旧鲜峭粋€(gè)標(biāo)準(zhǔn)。根據(jù)計(jì)劃，2017年6月發(fā)布 ES2017 標(biāo)準(zhǔn)。因此，ES6 既是一個(gè)歷史名詞，也是一個(gè)泛指，含義是5.1版以后的 JavaScript 的下一代標(biāo)準(zhǔn)，涵蓋了ES2015、ES2016、ES2017等等，而ES2015 則是正式名稱，特指該年發(fā)布的正式版本的語言標(biāo)準(zhǔn)。
let和const 變量提升在ES6之前，JavaScript的作用域只有兩種：全局作用域和函數(shù)作用域。而在這兩個(gè)作用域里，存在一種奇怪的現(xiàn)象--變量提升。MDN上的介紹是 在編譯階段將變量和函數(shù)聲明放入內(nèi)存中，但仍然保留在編碼中鍵入的位置。
function(){
console.log(a);
var a= "hello";
}
function(){
var a = undefined;
console.log(a);
a= "hello";
}
上面的兩段代碼是等價(jià)的，也說明了變量提升的本質(zhì)。在函數(shù)作用域內(nèi)，函數(shù)或者變量的聲明會(huì)被放到作用域頂部，而其他操作仍然保留在原來的鍵入位置。
塊級作用域ES6中引入塊級作用域的概念，和Java或者C語言中的局部變量作用域很像。因此，ES6中的塊級作用域存在以下特點(diǎn)：暫時(shí)性死區(qū)、不可重復(fù)命名、不存在變量提升。通過關(guān)鍵字let和const聲明的變量只在塊級作用域內(nèi)有效。
{
let i = 1;
}
console.log(i);//Error
上面的代碼塊解釋了ES6中的塊級作用域的概念，一個(gè){}即為一個(gè)塊級作用域，作用域內(nèi)的變量在作用域外無法被訪問。
暫時(shí)性死區(qū)塊級作用域首先帶來的問題就是暫時(shí)性死區(qū)。從作用域開始到變量被聲明之前的空間內(nèi)是該變量的死區(qū)，在這個(gè)空間內(nèi)不能對該變量進(jìn)行任何操作。例如：
{
//死區(qū)開始
i = 2;//Error
console.log(i);//Error
let i = 1;//死區(qū)結(jié)束
}
不可重復(fù)命名
這個(gè)很容易理解，var聲明的變量可以重復(fù)命名，后來的命名可以把之前的覆蓋掉，但是let聲明的變量如果出現(xiàn)重復(fù)命名的情況，會(huì)直接報(bào)錯(cuò)。
constconst用來聲明常量，一旦聲明，值就不可改變。因此，const一旦聲明，就必須立即初始化。這一點(diǎn)和Java或者C語言很像。
但是對于復(fù)合型變量，變量名不是指向數(shù)據(jù)，而是指向數(shù)據(jù)所在的地址。因此，const定義的復(fù)合型變量，只能保證變量名指向的地址不變，并不能確保改地址的內(nèi)存儲(chǔ)的數(shù)據(jù)不變。
const foo = {};
foo.a = 1;
foo = {}//Error
const b = [];
b.length = 1;
b = [];//Error
上面的一段代碼中，分別用const聲明了一個(gè)對象和一個(gè)數(shù)組。我們可以給對象或者數(shù)組的一個(gè)屬性賦值，但是不能直接給對象或者數(shù)組整體賦值。
變量的解構(gòu)賦值 數(shù)組的解構(gòu)賦值結(jié)構(gòu)賦值是ES6引入的一種新的變量賦值方式， MDN上的解釋是：解構(gòu)賦值語法是一個(gè)Javascript表達(dá)式，這使得可以將值從數(shù)組或?qū)傩詮膶ο筇崛〉讲煌淖兞恐小?/strong>
let [a, b, c] = [1, 2, 3];
console.log(a,b,c);//1 2 3
let [foo, [[bar], baz]] = [1, [[2], 3]];
console.log(foo, bar, baz);//1 2 3
上面的代碼是兩種數(shù)組解構(gòu)賦值，只要等號左邊的變量在右邊的數(shù)組中能夠找到對應(yīng)的位置，就可以進(jìn)行解構(gòu)賦值。
對象的解構(gòu)賦值對象的結(jié)構(gòu)賦值和數(shù)組略有不同。let { key:name } = obj。等價(jià)于 let name = obj[key]。
let obj = { first: "hello", second: "world" };
let { first: f, second: s } = obj;
console.log(f, s);//hello world
console.log(first, second);//Error
let { foo, bar } = { foo: "aaa", bar: "bbb" };
console.log(foo, bar);// aaa bbb
let { bar, foo } = { foo: "aaa", bar: "bbb" };
console.log(foo, bar);// aaa bbb
后兩段代碼是對象屬性名和值相同時(shí)的簡潔寫法。從后兩段代碼我們可以了解到對象解構(gòu)賦值的本質(zhì)：先在對象內(nèi)部找到和變量名相同的屬性，然后再把屬性值賦給變量。對象的解構(gòu)賦值本身是一次變量賦值運(yùn)算。
解構(gòu)賦值也可以設(shè)置默認(rèn)值，當(dāng)結(jié)構(gòu)失敗時(shí)，直接取默認(rèn)值。例如：
var {x = 3} = {};
console.log(x); //3
var {x, y = 5} = {x: 1};
console.log(x, y) // 1 5
解構(gòu)賦值的用處
用作變量交換。 [x, y] = [y, x];
函數(shù)返回多個(gè)值。 [x, y] = func();
對象的快速賦值。 let a={x:1,y:2,z:3,w:4}; let {x,y}=a; let b={x,y};
導(dǎo)入模塊的部分功能。 import {getOS} from "../utils";
函數(shù)的解構(gòu)參數(shù)（函數(shù)的擴(kuò)展里詳解）
函數(shù)的擴(kuò)展 函數(shù)參數(shù)默認(rèn)值ES6中為函數(shù)加入了添加默認(rèn)值的功能。
function log(x, y = "World") {
console.log(x, y);
}
log("Hello");//Hello World
下邊的代碼有點(diǎn)意思，是函數(shù)解構(gòu)參數(shù)的默認(rèn)值寫法。
// 寫法一
function m1({x = 0, y = 0} = {}) {
return [x, y];
}
// 寫法二
function m2({x, y} = { x: 0, y: 0 }) {
return [x, y];
}
m1({x: 3});
m2({x: 3});
兩種寫法略有不同，所表達(dá)的意思也不一樣。首先，函數(shù)的解構(gòu)參數(shù)的寫法是這樣的：
function add({x, y}){
return x + y;
}
當(dāng)然，這里也可以是數(shù)組解構(gòu)，上面的代碼拿對象解構(gòu)做事例。
寫法一，兩個(gè)大括號相等，表達(dá)的意思是函數(shù)參數(shù)擁有默認(rèn)值，當(dāng)m1函數(shù)被調(diào)用時(shí)沒有傳遞參數(shù)時(shí)，區(qū)默認(rèn)值即{}。之后，進(jìn)行解構(gòu)賦值。方法一里的解構(gòu)賦值是帶有默認(rèn)值的解構(gòu)賦值，因此，當(dāng)解構(gòu)失敗時(shí)，x和y分別取默認(rèn)值0。所以m1({x: 3})的執(zhí)行結(jié)果是[3,0]。
寫法二，兩個(gè)大括號相等，同樣表達(dá)的意思是函數(shù)參數(shù)擁有默認(rèn)值，當(dāng)m2函數(shù)被調(diào)用時(shí)沒有傳遞參數(shù)時(shí)，區(qū)默認(rèn)值即{ x: 0, y: 0}。方法二里的解構(gòu)賦值沒有默認(rèn)值，因此，當(dāng)解構(gòu)失敗時(shí)，x和y的值都是undefined。所以，m2()的值是[0,0]，但是m2({x: 3})的則是[3,undefined]。
函數(shù)的解構(gòu)參數(shù)最大的意義在于，我可以不用關(guān)心傳遞過來的數(shù)組或者對象內(nèi)部的解構(gòu)，只要內(nèi)部有我想要的屬性值就夠了，這樣在一定程度上降低了邏輯函數(shù)之間的耦合。例如：
let obj = {
name: "hello",
age: 18,
address: "BeiJing",
mobile: "123123123",
timestamp: "1496940548319"
}
function getName({name}){
return name;
}
getName(obj);
rest參數(shù)
ES6為函數(shù)參數(shù)引入rest寫法。也就是我們偶爾會(huì)在ES6代碼里見到的 ...
function add(...values) {
let sum = 0;
for (let val of values) {
sum += val;
}
return sum;
}
rest參數(shù)用于獲取函數(shù)的多余參數(shù)，類似于arguments對象。與之不同的是，rest參數(shù)是一個(gè)數(shù)組，也就意味著我們可以對rest參數(shù)使用數(shù)組的所有方法。
箭頭函數(shù)ES6的函數(shù)擴(kuò)展里，最引人注意的應(yīng)該就是箭頭函數(shù)了。一個(gè)最簡單的箭頭函數(shù)：let f = v => v 等價(jià)于
let f = function(v){
return v
}
當(dāng)箭頭函數(shù)沒有參數(shù)或者有多個(gè)參數(shù)時(shí)，使用圓括號把參數(shù)括起來。當(dāng)箭頭函數(shù)的函數(shù)體多于一行代碼時(shí)，就采用花括號把函數(shù)體括起來，并使用return語句返回值。
箭頭函數(shù)的出現(xiàn)，主要是為了簡化函數(shù)的書寫。對于開發(fā)而言，最大的好處是簡單易讀，同時(shí)匿名函數(shù)寫起來也更加舒服自然。
結(jié)語ES6的基本擴(kuò)展還有一些沒有在這里詳細(xì)介紹。總體感覺，ES6做了一些語法的豐富，使得JavaScript寫起來更加舒服了，特別是結(jié)構(gòu)賦值和箭頭函數(shù)的引入，用習(xí)慣了以后，完全是另外一種編程體驗(yàn)。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/90445.html
摘要：相當(dāng)于一個(gè)放置在與中的墊片。之所以稱之謂副作用呢，就是為了不讓觸發(fā)一個(gè)時(shí)，立即執(zhí)行。也就是在與之間做一個(gè)事情，比如異步獲取數(shù)據(jù)等。使用了中的功能，避免了像的回調(diào)地獄。把放入中最后再實(shí)現(xiàn)相就的即可在線示例推薦閱讀手稿 Redux-Saga redux-saga 是一個(gè)用于管理應(yīng)用程序副作用（例如異步獲取數(shù)據(jù)，訪問瀏覽器緩存等）的javascript庫，它的目標(biāo)是讓副作用管理更容易，執(zhí)行更...
摘要：屬性是必須的。需要一個(gè)與的一致。必須在的返回原。調(diào)試插件日志安裝組件。然后加入到中即可例如擴(kuò)展程序需要在應(yīng)用市場安裝然后在中使用增強(qiáng)功能將加入即可在線實(shí)例推薦閱讀手稿 React-Redux Redux Action function addTodo(text) { return { type: ADD_TODO, text } } type 屬性是必須的。...
摘要：類型檢查是為了確保傳入組件的參數(shù)正確性。通常在項(xiàng)目中可以使用或者來實(shí)現(xiàn)。示例以上內(nèi)容在實(shí)現(xiàn)一個(gè)通用組件時(shí)非常有用。類型檢查和參數(shù)默認(rèn)值一起使用，保證組件的正常運(yùn)行。 Typechecking With PropTypes 類型檢查是為了確保傳入組件的參數(shù)正確性。 通常在項(xiàng)目中可以使用Flow或者TypeScript來實(shí)現(xiàn)。 React提供了PropTypes來檢查類型。 示例： imp...
摘要：官方也陳述，接下來的的工作會(huì)投入到中。從目前官方的文檔可以看出，從以下四個(gè)方面來提高的編碼。生命周期自定義方法的主要用途是替代之前版本的組件。說明到目前為止，在已發(fā)布的版本中有該功能，想體驗(yàn)該功能，必須安裝。 React Hooks React在16.7.0-alpha.0版本中提到了Hooks的概念，目前還是Proposal階段。 官方也陳述，接下來的90%的工作會(huì)投入到React ...
摘要：和其實(shí)是一個(gè)東西，只是中要是用的擴(kuò)展不一樣年左右有人豐富的用法和性能，編寫了一個(gè)是獨(dú)立第三方，才有了用法也有了很大的改進(jìn)比如添加了批量獲取鍵值下只能安裝擴(kuò)展并不存在所以中只能使用不能使用類打開一個(gè)到服務(wù)器的持久化連接連接不會(huì)在腳本執(zhí)行結(jié) Memcache和Memcached 其實(shí)是一個(gè)東西，只是php中要是用的擴(kuò)展不一樣, 2009年左右有人豐富memcache的用法和性能，編寫了一個(gè)...
閱讀 2009·2021-11-24 09:39
閱讀 1878·2019-08-30 15:55
閱讀 2168·2019-08-30 15:53
閱讀 565·2019-08-29 13:16
閱讀 983·2019-08-26 12:20
閱讀 2379·2019-08-26 11:58
閱讀 3129·2019-08-26 10:19
閱讀 3296·2019-08-23 18:31
