1.什么是ECMA

1.1 什么是ECMA

ECMA（European Computer Manufacturers Association）中文名稱為歐洲計算機制造商協(xié)會，這個組織的目標(biāo)是評估、開發(fā)和認可電信和計算機標(biāo)準(zhǔn)。1994 年后該組織改名為 Ecma 國際。

1.2 什么是ECMAScript

ECMAScript 是由 Ecma 國際通過 ECMA-262 標(biāo)準(zhǔn)化的腳本程序設(shè)計語言。

1.3 為什么要學(xué)習(xí)ES6

• ES6 的版本變動內(nèi)容最多，具有里程碑意義

• ES6 加入許多新的語法特性，編程實現(xiàn)更簡單、高效

• ES6 是前端發(fā)展趨勢，就業(yè)必備技能

1.4 兼容性

可查看兼容性：http://kangax.github.io/compat-table/es6/

?

2.ECMAScript6新特性

2.1 let關(guān)鍵字

let 關(guān)鍵字用來聲明變量，使用 let 聲明的變量有幾個特點：

不允許重復(fù)聲明

塊級作用域

不存在變量提升

不影響作用域鏈

代碼演示：

? ? ? ?//聲明變量let a;let b,c,d;let e = 100;let f = 521, g = 'iloveyou', h = []; ?//1. 變量不能重復(fù)聲明let star = '羅志祥';let star = '小豬'; ?//2. 塊級作用域 ? (if else while for){let girl = '周揚青';}console.log(girl); ?//3. 不存在變量提升console.log(song);let song = '戀愛達人'; ?//4. 不影響作用域鏈{let school = '清華大學(xué)';function fn(){console.log(school);}fn();}

實踐案例：

? ? ? ?//獲取div元素對象let items = document.getElementsByClassName('item'); ?//遍歷并綁定事件for(let i = 0;i<items.length;i++){items[i].onclick = function(){//修改當(dāng)前元素的背景顏色// this.style.background = 'pink';items[i].style.background = 'pink';}}

當(dāng)我們使用var變量聲明i時，由于變量是全局的，當(dāng)循環(huán)執(zhí)行完畢后，i的值已經(jīng)變?yōu)閕tems.length了，使用items[i]將選不中任何標(biāo)簽。而let聲明的變量只在對應(yīng)的代碼塊生效，互不影響。

應(yīng)用場景：以后聲明變量使用 let 就對了

2.2 const關(guān)鍵字

const 關(guān)鍵字用來聲明常量，const 聲明有以下特點：

聲明必須賦初始值

標(biāo)識符一般為大寫

不允許重復(fù)聲明

值不允許修改

塊級作用域

代碼演示：

? ? ? ?//聲明常量const SCHOOL = '清華大學(xué)'; ?//1. 一定要賦初始值const A;//2. 一般常量使用大寫(潛規(guī)則)const a = 100;//3. 常量的值不能修改SCHOOL = '北京大學(xué)';//4. 塊兒級作用域{const PLAYER = 'UZI';}console.log(PLAYER);//5. 對于數(shù)組和對象的元素修改, 不算做對常量的修改, 不會報錯const TEAM = ['UZI','MLXG','Ming','Letme','XiaoHu'];// TEAM.push('Meiko');

注意： 對象屬性修改和數(shù)組元素變化不會觸發(fā)const錯誤

應(yīng)用場景：聲明對象類型使用 const，非對象類型聲明選擇let

2.3 變量的解構(gòu)賦值

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

? ? ? ?// 1. 數(shù)組的解構(gòu)const F4 = ['小沈陽','劉能','趙四','宋小寶'];let [xiao, liu, zhao, song] = F4;console.log(xiao);console.log(liu);console.log(zhao);console.log(song); ?//2. 對象的解構(gòu)const zhao = {name: '趙本山',age: '不詳',xiaopin: function(){console.log("我可以演小品");}}; ?let {name, age, xiaopin} = zhao;console.log(name);console.log(age);console.log(xiaopin);xiaopin(); ?let {xiaopin} = zhao;xiaopin();

注意：頻繁使用對象方法、數(shù)組元素，就可以使用解構(gòu)賦值形式

2.4 模板字符串

模板字符串（template string）是增強版的字符串，用反引號（`）標(biāo)識，特點：

1) 字符串中可以出現(xiàn)換行符

2) 可以使用 ${xxx} 形式輸出變量

代碼演示：

? ? ? ?//2. 內(nèi)容中可以直接出現(xiàn)換行符let str = `<ul><li>艾倫</li><li>三笠</li><li>阿爾敏</li><li>利威爾</li></ul>`;//3. 變量拼接let lovest = '周星馳';let out = `${lovest}是我心目中最搞笑的演員!!`;console.log(out);

2.5 簡化對象寫法

ES6 允許在大括號里面，直接寫入變量和函數(shù)，作為對象的屬性和方法。這樣的書寫更加簡潔。

? ? ? ?let name = '調(diào)查兵團';let change = function(){console.log('為人類獻出心臟!!');} ?const school = {name,change,improve(){console.log("我們可以提高你的技能");}} ?console.log(school);

2.6 箭頭函數(shù)

ES6 允許使用「箭頭」（=>）定義函數(shù)。

? ? ? ?let fn = (a,b) => {return a + b;}//調(diào)用函數(shù)let result = fn(1, 2);console.log(result);

箭頭函數(shù)的注意點:

• 如果形參只有一個，則小括號可以省略

• 函數(shù)體如果只有一條語句，則花括號可以省略，函數(shù)的返回值為該條語句的執(zhí)行結(jié)果

• 箭頭函數(shù) this 指向聲明時所在作用域下 this 的值

• 箭頭函數(shù)不能作為構(gòu)造函數(shù)實例化

• 不能使用 arguments

代碼演示：

? ? ? ?//1. this 是靜態(tài)的. this 始終指向函數(shù)聲明時所在作用域下的 this 的值function getName(){console.log(this.name);}let getName2 = () => {console.log(this.name);} ?//設(shè)置 window 對象的 name 屬性window.name = '美職籃';const school = {name: "NBA"} ?//直接調(diào)用getName();getName2(); ?//call 方法調(diào)用getName.call(school);getName2.call(school); ?//2. 不能作為構(gòu)造實例化對象let Person = (name, age) => {this.name = name;this.age = age;}let me = new Person('xiao',30);console.log(me); ?//3. 不能使用 arguments 變量let fn = () => {console.log(arguments);}fn(1,2,3); ?//4. 箭頭函數(shù)的簡寫//1) 省略小括號, 當(dāng)形參有且只有一個的時候let add = n => {return n + n;}console.log(add(9));//2) 省略花括號, 當(dāng)代碼體只有一條語句的時候, 此時 return 必須省略// 而且語句的執(zhí)行結(jié)果就是函數(shù)的返回值let pow = n => n * n; ?console.log(pow(8));

2.6 函數(shù)初始值

ES6 允許給函數(shù)參數(shù)賦值初始值

? ? ? ?//1. 形參初始值 具有默認值的參數(shù), 一般位置要靠后(潛規(guī)則)function add(a,c=10,b) {return a + b + c;}let result = add(1,2);console.log(result); ?//2. 與解構(gòu)賦值結(jié)合function connect({host="127.0.0.1", username,password, port}){console.log(host)console.log(username)console.log(password)console.log(port)}connect({host: '182.127.71.134',username: 'root',password: 'root',port: 3306})

2.7 rest參數(shù)

ES6 引入 rest 參數(shù)，用于獲取函數(shù)的實參，用來代替 arguments

? ? ? ? // ES5 獲取實參的方式function date(){console.log(arguments);}date('白芷','阿嬌','思慧'); ?// rest 參數(shù)function date(...args){console.log(args);// filter some every map}date('阿嬌','柏芝','思慧'); ?// rest 參數(shù)必須要放到參數(shù)最后function fn(a,b,...args){console.log(a);console.log(b);console.log(args);}fn(1,2,3,4,5,6); ?

2.8 spread 擴展運算符

擴展運算符（spread）也是三個點（...）。它好比 rest 參數(shù)的逆運算，將一個數(shù)組轉(zhuǎn)為用逗號分隔的參數(shù)序列，對數(shù)組進行解包。

? ? ? ?// 『...』 擴展運算符能將『數(shù)組』轉(zhuǎn)換為逗號分隔的『參數(shù)序列』//聲明一個數(shù)組 ...const tfboys = ['易烊千璽','王源','王俊凱'];// => '易烊千璽','王源','王俊凱' ?// 聲明一個函數(shù)function chunwan(){console.log(arguments);} ?chunwan(...tfboys);// chunwan('易烊千璽','王源','王俊凱') ?

2.9 Symbol

2.9.1 基本使用

ES6 引入了一種新的原始數(shù)據(jù)類型 Symbol，表示獨一無二的值。它是JavaScript 語言的第七種數(shù)據(jù)類型，是一種類似于字符串的數(shù)據(jù)類型。

Symbol 特點

• Symbol 的值是唯一的，用來解決命名沖突的問題

• Symbol 值不能與其他數(shù)據(jù)進行運算

• Symbol 定義的對象屬性不能使用 for…in 循環(huán)遍歷 ，但是可以使用Reflect.ownKeys 來獲取對象的所有鍵名

代碼演示：

? ? ? ?//創(chuàng)建Symbollet s = Symbol();console.log(s, typeof s);let s2 = Symbol('海賊王');let s3 = Symbol('海賊王');console.log(s2===s3); ?//false//Symbol.for 創(chuàng)建// 通過 Symbol.for() 方法創(chuàng)建可共享的 Symbollet s4 = Symbol.for('柯南');let s5 = Symbol.for('柯南');console.log(s4===s5); ?//true//不能與其他數(shù)據(jù)進行運算let result = s + 100; ?//報錯let result = s > 100; ?//報錯let result = s + s; ? ?//報錯

2.9.2 內(nèi)置值

除了定義自己使用的 Symbol 值以外，ES6 還提供了 11 個內(nèi)置的 Symbol 值，指向語言內(nèi)部使用的方法?？梢苑Q這些方法為魔術(shù)方法，因為它們會在特定的場景下自動執(zhí)行。

Symbol.hasInstance：一個在執(zhí)行 instanceof 時調(diào)用的內(nèi)部方法，用于檢測對象的繼承信息。

Symbol.isConcatSpreadable：一個布爾值，用于表示當(dāng)傳遞一個集合作為 Array.prototype.concat() 方法的參數(shù)時，是否應(yīng)該將集合內(nèi)的元素規(guī)整到同一層級。

Symbol.iterator()：檢查指定對象中是否存在默認的函數(shù)類型迭代器。

Symbol.match(regex)：一個在調(diào)用 String.prototype.match() 方法時調(diào)用的方法，用于比較字符串。

Symbol.replace(regex, replacement)：一個在調(diào)用 String.prototype.replace() 方法時調(diào)用的方法，用于替換字符串的子串。

Symbol.search(regex)：一個在調(diào)用 String.prototype.search() 方法時調(diào)用的方法，用于在字符串中定位子串。

Symbol.species(regex)：用于創(chuàng)建派生對象的構(gòu)造函數(shù)。

Symbol.split：一個在調(diào)用 String.prototype.split() 方法時調(diào)用的方法，用于分割字符串。

Symbol.toPrimitive：一個返回對象原始值的方法。

Symbol.toStringTag：一個在調(diào)用 String.prototype.toString() 方法時使用的字符串，用于創(chuàng)建對象描述。

Symbol.unscopables：一個定義了一些不可被 with 語句引用的對象屬性名稱的對象集合。

代碼演示：

? ? ? ?class Person{static [Symbol.hasInstance](param){console.log(param);console.log("我被用來檢測類型了");return false;}} ?let o = {}; ?console.log(o instanceof Person); ?const arr = [1,2,3];const arr2 = [4,5,6];arr2[Symbol.isConcatSpreadable] = false;//false則為不展開 concat后為[1,2,3,[4,5,6]] true為展開，concat后為[1,2,3,4,5,6]console.log(arr.concat(arr2));

2.10 迭代器

遍歷器（Iterator）就是一種機制。它是一種接口，為各種不同的數(shù)據(jù)結(jié)構(gòu)提供統(tǒng)一的訪問機制。任何數(shù)據(jù)結(jié)構(gòu)只要部署 Iterator 接口，就可以完成遍歷操作。

1) ES6 創(chuàng)造了一種新的遍歷命令 for...of 循環(huán)，Iterator 接口主要供 for...of 消費

2) 原生具備 iterator 接口的數(shù)據(jù)(可用 for of 遍歷)：Array、Arguments、Set、Map、String、TypedArray、NodeList

3) 工作原理

a) 創(chuàng)建一個指針對象，指向當(dāng)前數(shù)據(jù)結(jié)構(gòu)的起始位置

b) 第一次調(diào)用對象的 next 方法，指針自動指向數(shù)據(jù)結(jié)構(gòu)的第一個成員

c) 接下來不斷調(diào)用 next 方法，指針一直往后移動，直到指向最后一個成員

d) 每調(diào)用 next 方法返回一個包含 value 和 done 屬性的對象

代碼演示：

? ? ? ?//聲明一個數(shù)組const xiyou = ['唐僧','孫悟空','豬八戒','沙僧']; ?//使用 for...of 遍歷數(shù)組for(let v of xiyou){console.log(v);} ?let iterator = xiyou[Symbol.iterator](); ?//調(diào)用對象的next方法console.log(iterator.next());console.log(iterator.next());console.log(iterator.next());console.log(iterator.next());console.log(iterator.next());

?

總結(jié)

以上是生活随笔為你收集整理的ECMAScript6入门教程（一）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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