ECMAScript6新特性有哪些

ECMAScript 6新特性有哪些，很多新手對此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

鎮(zhèn)康網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián),鎮(zhèn)康網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為鎮(zhèn)康1000+提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)營銷網(wǎng)站建設(shè)要多少錢，請找那個(gè)售后服務(wù)好的鎮(zhèn)康做網(wǎng)站的公司定做！

簡介

ECMAScript 6.0（以下簡稱 ES6）是 JavaScript 語言的下一代標(biāo)準(zhǔn)，正式發(fā)布與2015年6月。它的目標(biāo)，是使得JavaScript語言可以用來編寫復(fù)雜的大型應(yīng)用程序，成為企業(yè)級開發(fā)語言。

今天我們將會(huì)講解一下ES6中引入的語法新特性。

ECMAScript和JavaScript的關(guān)系

1996年11月，JavaScript 的創(chuàng)造者 Netscape 公司，決定將 JavaScript 提交給國際標(biāo)準(zhǔn)化組織ECMA.

1997年, ECMA 發(fā)布262號標(biāo)準(zhǔn)文件 ECMAScript 1.0。

ECMAScript 和 JavaScript 的關(guān)系是，前者是后者的規(guī)格，后者是前者的一種實(shí)現(xiàn)。

我們看一下ECMAScript的發(fā)行歷史：

從2015年ES2015，也就是ES6發(fā)布以來，ECMAScript以每年一個(gè)版本的發(fā)行速度發(fā)行到了ES2020。

后面的文章我們會(huì)講解一下這些新版本的ECMAScript的新特性。

let和const

ES6中引入了let和const,是為了解決之前的var變量的種種問題。

在ES6之前，JS中變量的作用域有兩種：全局作用域和函數(shù)作用域。

全局作用域很好理解，我們在瀏覽器控制臺(tái)或者 Node.js 交互終端中開始編寫 JavaScript 時(shí)，即進(jìn)入了所謂的全局作用域。

全局作用域的變量可以在任何其他作用域中訪問。

函數(shù)作用域就是定義在函數(shù)內(nèi)部的變量，在函數(shù)內(nèi)部都可以訪問到該變量。

這兩種作用域會(huì)有一些問題：

1. 變量提升

var命令會(huì)發(fā)生”變量提升”現(xiàn)象，即變量可以在聲明之前使用，值為undefined.

// var 的情況 
console.log(foo);  // 輸出undefined 
var foo = 2;

2. 變量覆蓋

當(dāng)我們在函數(shù)作用域使用全局變量的時(shí)候，如果函數(shù)作用域中定義了同樣名字的變量，不管是在哪里定義的，都會(huì)覆蓋掉全局的變量。如下所示：

var tmp = new Date(); 
function f() { 
console.log(tmp); 
if (false) { var tmp = "hello world"; 
} } 
f(); // undefined

3. 變量泄露

變量泄露的意思是，我們本來只希望在小范圍作用域使用的變量，結(jié)果泄露到了范圍外面，如下所示：

var s = 'hello'; 
for (var i = 0; i < s.length; i++) { 
console.log(s[i]); 
} 
console.log(i); // 5
~~

為了解決上面兩個(gè)問題，ES6引入了let和const。

這兩個(gè)都是塊級作用域。不同的是const定義的變量初始化之后就不能變化了。

什么是塊級作用域呢？類似于 if、switch 條件選擇或者 for、while 這樣的循環(huán)體即是所謂的塊級作用域,或者更簡單一點(diǎn)使用大括號括起來的就叫做塊級作用域。

塊級作用域的最大好處就是不會(huì)產(chǎn)生作用域提升，如下所示：

~~~js
{ 
let a = 10; 
var b = 1; 
} 
a // ReferenceError: a is not defined. 
b // 1

解構(gòu)賦值

什么是解構(gòu)賦值呢？

ES6 允許按照一定模式，從數(shù)組和對象中提取值，對變量進(jìn)行賦值，這被稱為解構(gòu)。

如下所示：

let [a, b, c] = [1, 2, 3];
let [ , , third] = ["foo", "bar", "baz"];
let [x, , y] = [1, 2, 3];
let [head, ...tail] = [1, 2, 3, 4];

let [x, y] = [1, 2, 3];

解構(gòu)賦值還可以設(shè)定默認(rèn)值，我們來看下面的幾個(gè)例子：

let [foo = true] = []; 
foo // true

let [x, y = 'b'] = ['a']; 
// x='a', y='b' 

let [x, y = 'b'] = ['a', undefined]; 
// x='a', y='b’

let [x = 1] = [undefined]; 
x // 1
let [x = 1] = [null]; 
x // null

如果解構(gòu)的默認(rèn)值是一個(gè)函數(shù)，那么可以觸發(fā)惰性賦值：

function f() { 
console.log('aaa'); 
} 

let [x = f()] = [1];

上面的例子中，f函數(shù)將不會(huì)被執(zhí)行。

除了結(jié)構(gòu)變量之外，還可以結(jié)構(gòu)對象：

let { bar, foo } = { foo: "aaa", bar: "bbb" }; 
foo // "aaa" 
bar // "bbb" 

let { baz } = { foo: "aaa", bar: "bbb" }; 
baz // undefined

var { foo: baz } = { foo: 'aaa', bar: 'bbb' }; 
baz // "aaa" 

let obj = { first: 'hello', last: 'world' }; 
let { first: f, last: l } = obj; 
f // 'hello' 
l // 'world'

解構(gòu)還支持嵌套的結(jié)構(gòu)：

let obj = { p: [ 'Hello', { y: 'World' } ] }; 

let { p: [x, { y }] } = obj; 

x // "Hello" 
y // "World"

解構(gòu)賦值有兩個(gè)非常重要的作用。

第一就是交換變量：

let x = 1; 
let y = 2; 
[x, y] = [y, x];

我們就可以不再使用中間變量，直接進(jìn)行兩個(gè)變量值的交互。

第二個(gè)作用就是從函數(shù)中返回多個(gè)值：

// 返回一個(gè)數(shù)組 
function example() { return [1, 2, 3]; } 
let [a, b, c] = example(); 

// 返回一個(gè)對象 
function example() { return { foo: 1, bar: 2 }; } 
let { foo, bar } = example();

//提取JSON數(shù)據(jù)
let jsonData = { id: 42, status: "OK", data: [867, 5309] }; 
let { id, status, data: number } = jsonData;

數(shù)組的擴(kuò)展

ES6中的Array.from方法用于將下面兩類對象轉(zhuǎn)為真正的數(shù)組：

• 類似數(shù)組的對象（array-like object）

• 可遍歷（iterable）的對象（包括ES6新增的數(shù)據(jù)結(jié)構(gòu)Set和Map）。

什么是類似數(shù)組對象呢？

所謂類似數(shù)組的對象，本質(zhì)特征只有一點(diǎn)，即必須有l(wèi)ength屬性。因此，任何有l(wèi)ength屬性的對象，都可以通過Array.from方法轉(zhuǎn)為數(shù)組。

下面的變量就是類數(shù)組變量：

let arrayLike = { '0': 'a', '1': 'b', '2': 'c', length: 3 };

這個(gè)類數(shù)組對象怎么轉(zhuǎn)換成為數(shù)組呢？

// ES5的寫法 
var arr1 = [].slice.call(arrayLike); 
// ['a', 'b', 'c']

// ES6的寫法 let arr2 = Array.from(arrayLike); 
// ['a', 'b', 'c']

我們看下通常的使用場景：

// NodeList對象 
let ps = document.querySelectorAll('p'); 
Array.from(ps).forEach(function (p) { console.log(p); }); 

// arguments對象 
function foo() { var args = Array.from(arguments); 
// ... 
}

什么是可遍歷對象呢？

只要是部署了Iterator接口的數(shù)據(jù)結(jié)構(gòu)，都叫做可遍歷對象。

我們看下下面的例子：

Array.from('hello') // ['h', 'e', 'l', 'l', 'o'] 
let namesSet = new Set(['a', 'b']) 
Array.from(namesSet) // ['a', 'b']

同時(shí)還引入了擴(kuò)展運(yùn)算符（...），通過擴(kuò)展運(yùn)算符，也可以很方便的轉(zhuǎn)換為數(shù)組對象：

function foo() { var args = [...arguments]; } // arguments對象 
[...document.querySelectorAll('div')] // NodeList對象

Array.from方法還可以接收第二個(gè)參數(shù)，用來對數(shù)組中的元素進(jìn)行操作：

Array.from(arrayLike, x => x * x); 
// 等同于 
Array.from(arrayLike).map(x => x * x); 

Array.from([1, 2, 3], (x) => x * x) 
// [1, 4, 9]

Array.of方法可以很方便的創(chuàng)建新的數(shù)組：

Array.of(3, 11, 8) // [3,11,8] 
Array.of(3) // [3] 
Array.of(3).length // 1

Array() // [] 
Array(3) // [, , ,] 
Array(3, 11, 8) // [3, 11, 8]

函數(shù)的擴(kuò)展

ES6，可以支持函數(shù)的默認(rèn)值了：

function log(x, y = 'World') { console.log(x, y); } 
function Point(x = 0, y = 0) { this.x = x; this.y = y; }

函數(shù)的默認(rèn)值可以和解構(gòu)賦值默認(rèn)值組合起來使用：

function foo({x, y = 5}) { console.log(x, y); } 
foo({}) // undefined, 5 
foo({x: 1}) // 1, 5 
foo({x: 1, y: 2}) // 1, 2 
foo() // TypeError: Cannot read property 'x' of undefined

接下來，我們看一個(gè)復(fù)雜的例子：

// 寫法一 
function m1({x = 0, y = 0} = {}) 
{ return [x, y]; } 

// 寫法二 
function m2({x, y} = { x: 0, y: 0 }) 
{ return [x, y]; }

我們來看一下，上面的兩種寫法有什么不同呢？

當(dāng)函數(shù)沒有參數(shù)的情況：

m1() // [0, 0] 
m2() // [0, 0]

當(dāng)x和y都有值的情況：

m1({x: 3, y: 8}) // [3, 8] 
m2({x: 3, y: 8}) // [3, 8]

當(dāng)x有值，y無值的情況 ：

m1({x: 3}) // [3, 0] 
m2({x: 3}) // [3, undefined]

當(dāng)x和y都無值的情況：

m1({}) // [0, 0]; 
m2({}) // [undefined, undefined] 
m1({z: 3}) // [0, 0] 
m2({z: 3}) // [undefined, undefined]

看出區(qū)別了嗎？ m1的解構(gòu)賦值，對于x,y來說是有默認(rèn)值0的。而m2的解構(gòu)賦值對于x,y來說是沒有默認(rèn)值的。

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對創(chuàng)新互聯(lián)的支持。

網(wǎng)頁標(biāo)題：ECMAScript6新特性有哪些
文章地址：http://muchs.cn/article4/jejioe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、App設(shè)計(jì)、營銷型網(wǎng)站建設(shè)、ChatGPT、網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)