1.什么是ECMA

1.1 什么是ECMA

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

1.2 什么是ECMAScript

ECMAScript 是由 Ecma 國際通過 ECMA-262 標準化的腳本程序設計語言。

1.3 為什么要學習ES6

• ES6 的版本變動內容最多，具有里程碑意義

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

• ES6 是前端發展趨勢，就業必備技能

1.4 兼容性

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

?

2.ECMAScript6新特性

2.1 let關鍵字

let 關鍵字用來聲明變量，使用 let 聲明的變量有幾個特點：

不允許重復聲明

塊級作用域

不存在變量提升

不影響作用域鏈

代碼演示：

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

實踐案例：

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

當我們使用var變量聲明i時，由于變量是全局的，當循環執行完畢后，i的值已經變為items.length了，使用items[i]將選不中任何標簽。而let聲明的變量只在對應的代碼塊生效，互不影響。

應用場景：以后聲明變量使用 let 就對了

2.2 const關鍵字

const 關鍵字用來聲明常量，const 聲明有以下特點：

聲明必須賦初始值

標識符一般為大寫

不允許重復聲明

值不允許修改

塊級作用域

代碼演示：

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

注意： 對象屬性修改和數組元素變化不會觸發const錯誤

應用場景：聲明對象類型使用 const，非對象類型聲明選擇let

2.3 變量的解構賦值

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

? ? ? ?// 1. 數組的解構const F4 = ['小沈陽','劉能','趙四','宋小寶'];let [xiao, liu, zhao, song] = F4;console.log(xiao);console.log(liu);console.log(zhao);console.log(song); ?//2. 對象的解構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();

注意：頻繁使用對象方法、數組元素，就可以使用解構賦值形式

2.4 模板字符串

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

1) 字符串中可以出現換行符

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

代碼演示：

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

2.5 簡化對象寫法

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

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

2.6 箭頭函數

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

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

箭頭函數的注意點:

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

• 函數體如果只有一條語句，則花括號可以省略，函數的返回值為該條語句的執行結果

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

• 箭頭函數不能作為構造函數實例化

• 不能使用 arguments

代碼演示：

? ? ? ?//1. this 是靜態的. this 始終指向函數聲明時所在作用域下的 this 的值function getName(){console.log(this.name);}let getName2 = () => {console.log(this.name);} ?//設置 window 對象的 name 屬性window.name = '美職籃';const school = {name: "NBA"} ?//直接調用getName();getName2(); ?//call 方法調用getName.call(school);getName2.call(school); ?//2. 不能作為構造實例化對象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. 箭頭函數的簡寫//1) 省略小括號, 當形參有且只有一個的時候let add = n => {return n + n;}console.log(add(9));//2) 省略花括號, 當代碼體只有一條語句的時候, 此時 return 必須省略// 而且語句的執行結果就是函數的返回值let pow = n => n * n; ?console.log(pow(8));

2.6 函數初始值

ES6 允許給函數參數賦值初始值

? ? ? ?//1. 形參初始值 具有默認值的參數, 一般位置要靠后(潛規則)function add(a,c=10,b) {return a + b + c;}let result = add(1,2);console.log(result); ?//2. 與解構賦值結合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參數

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

? ? ? ? // ES5 獲取實參的方式function date(){console.log(arguments);}date('白芷','阿嬌','思慧'); ?// rest 參數function date(...args){console.log(args);// filter some every map}date('阿嬌','柏芝','思慧'); ?// rest 參數必須要放到參數最后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 參數的逆運算，將一個數組轉為用逗號分隔的參數序列，對數組進行解包。

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

2.9 Symbol

2.9.1 基本使用

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

Symbol 特點

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

• Symbol 值不能與其他數據進行運算

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

代碼演示：

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

2.9.2 內置值

除了定義自己使用的 Symbol 值以外，ES6 還提供了 11 個內置的 Symbol 值，指向語言內部使用的方法。可以稱這些方法為魔術方法，因為它們會在特定的場景下自動執行。

Symbol.hasInstance：一個在執行 instanceof 時調用的內部方法，用于檢測對象的繼承信息。

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

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

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

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

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

Symbol.species(regex)：用于創建派生對象的構造函數。

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

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

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

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）就是一種機制。它是一種接口，為各種不同的數據結構提供統一的訪問機制。任何數據結構只要部署 Iterator 接口，就可以完成遍歷操作。

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

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

3) 工作原理

a) 創建一個指針對象，指向當前數據結構的起始位置

b) 第一次調用對象的 next 方法，指針自動指向數據結構的第一個成員

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

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

代碼演示：

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

?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。