大標題補充描述

一、 ES6 中新增的聲明方式：let、const	var、let、const之間的區別
二、 ES6 字符串擴展	1. 子串的識別：includes()、startsWith()、endsWith()； 2. 重復字符串：repeat()； 3. 字符串補全：padStart()、padEnd()； 4. 中文和字符編碼的轉換：codePointAt()、String.fromCodePoint()； 5. 字符串的拼接：``； 6. 遍歷字符串：for-of
三、正則的擴展	u，y
四、箭頭函數
五、解構賦值	1. 解構數組； 2. 解構對象
六、Symbol()
七、Set 和 Map	1. Map； 2. Set

ES6

目前各大瀏覽器基本上都支持 ES6 的新特性，其中 Chrome 和 Firefox 瀏覽器對 ES6 新特性最友好，IE7~11 基本不支持 ES6。

一、 ES6 中新增的聲明方式：let、const

let 、const 的基本用法和 var 相同。

1.1 let

let 聲明的變量只在 let 命令所在的代碼塊內有效。
let 特點：
（1）let 聲明的變量不存在變量提升問題；
（2）在同一個作用域下，不允許重復聲明（在不同作用域，或不同塊級作用域中是可以重新聲明賦值的）；
（3）let 聲明的變量具有塊級作用域（只在 let 命令所在的代碼塊 {} 內有效）；
（4）存在暫時性死區（類似變量提升問題）；
（5）自帶閉包特性（使用let解決for循環中的）

（1）let 聲明的變量不存在變量提升問題；

console.log(a); //undefined var a = 10; console.log(a); //10console.log(b); //報錯 Uncaught ReferenceError: Cannot access 'b' before initialization let b = 20;

（2）在同一個作用域下，let 不允許重復聲明；

var a = 10; var a = 20; console.log(a); //20let b = 10; let b = 20; console.log(b); //Uncaught SyntaxError: Identifier 'b' has already been declared

（3）let 聲明的變量具有塊級作用域；

if(true){ var a = 10; } console.log(a); //10if(true){ let b = 10; } console.log(b); //Uncaught ReferenceError: b is not defined

（4）let 存在暫時性死區；

function fna(){console.log(a);var a = 10;console.log(a); } fna(); //undefined 10function fnb(){console.log(b);let b = 20;console.log(b); } fnb(); //Uncaught ReferenceError: Cannot access 'b' before initialization

（5）let 自帶閉包特性；

var i = 6; for(var i=0;i<5;i++){setTimeout( function(){console.log(i); //打印5次結果都是5},1000) } console.log("全局",i) //5let i = 6; for(let i=0;i<5;i++){setTimeout( function(){console.log(i); //打印結果：0 1 2 3 4},1000) } console.log("全局",i) //6

1.2 const

具體可以參考菜鳥教程。

const 聲明一個只讀的常量，一旦聲明，常量的值就不能改變。【使用 const 定義的對象或者數組，其實是可變的，但是我們不能對常量對象重新賦值】
const 特點：
（1）const 聲明的變量不存在變量提升問題；
（2）在同一個作用域下，不允許重復聲明（在不同作用域，或不同塊級作用域中是可以重新聲明賦值的）；
（3）具有塊級作用域（花括號就是塊級作用域）；
（4）存在暫時性死區（類似變量提升問題）；
（5）用來聲明常量，聲明后值不能修改，但是內地址可以；

let a = 10; a =20; console.log(a); //20const b = 10; b = 20; console.log(b); //Uncaught TypeError: Assignment to constant variable.

• ① const 定義的對象或者數組：

  // 創建常量對象 const car = {type:"Fiat", model:"500", color:"white"}; // 修改屬性: car.color = "red"; // 添加屬性 car.owner = "Johnson";car = ["Toyota", "Volvo", "Audi"]; // 重新賦值錯誤

• ② const 如何做到變量在聲明初始化之后不允許改變的？
  其實 const 其實保證的不是變量的值不變，而是保證變量指向的內存地址所保存的數據不允許改動。此時，你可能已經想到，簡單類型和復合類型保存值的方式是不同的。

  • 對于簡單類型（數值 number、字符串 string 、布爾值 boolean）,值就保存在變量指向的那個內存地址，因此 const 聲明的簡單類型變量等同于常量。
  • 而復雜類型（對象 object，數組 array，函數 function），變量指向的內存地址其實是保存了一個指向實際數據的指針，所以 const 只能保證指針是固定的，至于指針指向的數據結構變不變就無法控制了

• 所以 使用 const 聲明復雜類型對象時要慎重。

1.3 var、let、const 之間的區別

序號var、let、const 之間的區別

1. 兼容性	var 兼容所有主流瀏覽器，let 在 ie11 及以下版本上不兼容，const 在 ie10 及以下版本上不兼容；
2. 變量提升	var 聲明的變量會產生變量提升問題，let 和 const 不存在變量提升；
3. 是否可以重復聲明	var 在同一個作用域下可以重復聲明變量，let 和 const在同一個作用域下不可以；
4. 作用域	var 聲明的變量是全局或者局部變量，let 和 const聲明的變量會產生塊級作用域；
5. 變量和常量	var 和 let 聲明的變量值可以重新被賦值，初始時可以不賦初值，而const聲明的是常量，且初始就要賦值，不能再被重新賦值。

---

二、ES6字符串擴展

2.1 子串的識別：includes()、startsWith()、endsWith()

1. 使用方法：字符串.includes("要識別的子串");
2. 注意：
（1）這三個方法都可以接受兩個參數，需要搜索的字符串，和可選的搜索起始位置索引。
（2）這三個方法只返回布爾值，如果需要知道子串的位置，還是得用 indexOf 和 lastIndexOf。
（3）這三個方法如果傳入正則表達式而不是字符串，會報錯。而 indexOf 和 lastIndexOf 這兩個方法，它們會將正則表達式轉換為字符串并搜索它。

let string = "apple,banana,orange"; console.log(string.includes("ban")); // true console.log(string.startsWith("apple")); // true console.log(string.endsWith("apple")); // false console.log(string.startsWith("banana",6)) // true

2.2 重復字符串：repeat()

1. repeat()：返回新的字符串，表示將字符串重復指定次數返回。
2. 使用方法：字符串.repeat(n);。
3. 參數 n 可以是： ①正整數，②-1~0~1之間的小數，③大于1的小數，④字符或字符形式的數字。
參數為：①負數或者 Infinity報錯，②NaN，等同于 repeat 零次。

（1）參數 n 為正整數：表示把字符串重復 n 次。

console.log("you;".repeat(.2)); //you;you;

（2）參數 n 是 -1~0~1 的小數：會進行取整運算得到 0。等同于 repeat 零次結果為""

console.log("you;".repeat(-0.5)); //"" 空字符串 console.log("you;".repeat(0.5)); //"" 空字符串

（3）參數 n 是 >1 的小數：向下取整。

console.log("you;".repeat(3.8)); //you;you;you;

（4）參數 n 是字符或字符形式的數字：字符轉換為0，字符形式的數字會轉換為數字。

console.log("you;".repeat("hello")); //"" 空字符串 console.log("you;".repeat("2")); //you;you;

2.3 字符串補全：padStart()、padEnd()

1. padStart()：返回新的字符串，表示用參數從字符串頭部（左側）開始補全原字符串。常用于補全位數。
padEnd()：返回新的字符串，表示用參數從字符串尾部（右側）補全原字符串。
2. 使用方法：字符串.padStart(父字符串長度, "用來補全的字符串");。
3. 參數：
（1）第一個參數：① 指定的長度 <= 原字符串的長度，則返回原字符串；② 指定的長度 > 原字符串的長度，則截去超出位數的補全字符串；
（2）第二個參數：如果沒有，就會用空格填充。

補全位數：console.log("123".padStart(10,"0")); // “0000000123”

console.log("h".padStart(5,"o")); // "ooooh" console.log("h".padEnd(5,"o")); // "hoooo" console.log("h".padStart(5)); // " h"

（1）第一個參數：指定的長度<=原字符串的長度，返回原字符串；

console.log("you".padStart(3, "abc")); //"you" console.log("you".padEnd(3, "abc")); //"you"

（2）第一個參數：指定的長度 > 原字符串的長度，截去超出位數的補全字符串；

console.log("you".padStart(6, "ab")); //"abayou" console.log("you".padEnd(6, "ab")); //"youaba"

2.4 中文和字符編碼的轉換：codePointAt()、String.fromCodePoint()

字符串的 Unicode 表示方式： \u+四位十六進制；中文是：\u2E80-\u9FFFF。
codePointAt()，生僻字轉換時會丟失一部分
String.fromCodePoint()，將Unicode 編碼轉成中文；

console.log('\u0061'); //打印a"中".charCodeAt().toString(16); //4e2d “中”轉 Unicode，Unicode轉16進制 '\u4e2d' //中

2.5 字符串的拼接：反引號``

注意：
（1）模板字符串中的換行和空格都是會被保留的。
（2）變量名寫在 ${} 中，${} 中可以放入 JavaScript 表達式。

for(var i=0; i<json.length; i++){oul.innerHTML = `<li><img src = "${json[i].src}" /><h3>${json[i].name}</h3><p>${json[i].price}</p></li>` }

2.6 遍歷字符串：for-of（類似for-in）

for-in可以用來遍歷對象、數組、字符串。for-of 遍歷對象會報錯，但是可以遍歷數組和字符串，且它主要是用來遍歷 set 和 map 結構，用來遍歷ES6方法中的一些數據結構。

for(var i of str){console.log(i);//返回的是值 }

---

三、正則的擴展

• u 表示 Unicode 模式
• y

/^\S$/.test('告'); //false /^\S$/u.test('告'); //true

---

四、箭頭函數

4.1 只能通過賦值的方式創建： var fn = ()=>{};

var fn = function(a,b){return a+b; } //相當于 var fn = (a,b) => a+b; console.log(fn(3,4));

無名函數： 回調函數、傳參、事件處理函數、計時器、賦值式創建函數；

注意：

• （1）當箭頭函數沒有參數或者有多個參數，要用 () 括起來。
• （2）當箭頭函數函數體只有一行語句，并且需要返回結果時，可以省略 {} , 結果會自動返回。若有多行語句，要用 {} 包裹起來。
• （3）當箭頭函數要返回對象的時候，為了區分于代碼塊，要用 () 將對象包裹起來。例如：var test = () =>({id:1,name:'admin'})
• （4）不能被 new ，意味著不能創造對象。function fn(){} var a = new fn(); console.log(a); //fn {}var fn = ()=>{} var a = new fn(); console.log(a); //報錯

4.2 優點：
（1） 自動綁定外層 this；

var obj = {name: "admin",age: 18,show: function(){setTimeout(()=>{console.log(this); },100)} } obj.show(); //這里的this指向obj，而不是window.

（2）省略了關鍵字 function、return 和大括號。

var f = v => v; //等價于 var f = function(a){return a; }

4.3 適用場景
ES6 之前，在回調函數中，經常看到 var that= this 這樣的代碼，因此為了將外部 this 傳遞到回調函數中，就有了箭頭函數，直接使用 this 就行。

// 回調函數 var Person = {'age': 18,'sayHello': function () {setTimeout(function () {console.log(this.age);});} }; var age = 20; Person.sayHello(); // 20//箭頭函數 var Person1 = {'age': 18,'sayHello': function () {setTimeout(()=>{console.log(this.age);});} }; var age = 20; Person1.sayHello(); // 18

---

五、解構賦值

解構賦值：他是一種針對數組或者對象進行模式匹配，然后對其中的變量進行賦值。
優點：在代碼書寫上簡潔且易讀，語義更加清晰明了；也方便了復雜對象中數據字段獲取。

5.1 數組的解構

數組模型的解構包括幾種類型：基本、可嵌套、可忽略、不完全解構、剩余運算符、字符串等、解構默認值。

（1）基本

var arr = ["hello",true,{},11,function(){}]; var [a,b,c,d,e] = arr; //a,b,c,d,e分別與 arr 中的arr[0],arr[1]...依次對應 console.log(a,b,c,d,e);//hello true {} 11 ? (){}

（2）可嵌套可忽略

//可嵌套 let [a, [[b], c]] = [1, [[2], 3]]; console.log(a,b,c); //分別返回數字1 2 3//可忽略 let [a, , b] = [1, 2, 3]; console.log(a,b); //分別返回數字1 3

（3）不完全解構

let [a = 1, b] = []; console.log(a,b); //返回值分別為：1 和 undefined

（4）剩余運算符

let [a, ...b] = [1, 2, 3]; console.log(a); //數字1 console.log(b); //返回數組：(2) [2, 3]

（5）字符串

let [a, b, c, d, e] = 'hello'; console.log(a, b, c, d, e); //分別返回對應字符：a b c d e

（6）解構默認值

當解構模式有匹配結果，且匹配結果是 undefined 時，會觸發默認值作為返回結果。

//對應下面的① let [a = 2] = [undefined]; // 返回a為2 let [a = 3, b = a] = []; // 返回a為3, b為3 //對應下面的② let [a = 3, b = a] = [1]; // 返回a為1,b為1 //對應下面的③ let [a = 3, b = a] = [1, 2]; // 返回a為1,b為2

① a 與 b 匹配結果為 undefined ，觸發默認值：a = 3; b = a =3；
② a 正常解構賦值，匹配結果為a = 1，b = undefined ，觸發默認值：b = a =1；
③ a 與 b 正常解構賦值，匹配結果：a = 1，b = 2。

5.2 解構對象（注意：解析時變量的值與位置無關）

對象模型的解構包括幾種類型：基本、可嵌套可忽略、不完全解構、剩余運算符、解構默認值。

（1）基本

var obj = {name:"admin",age:18,sex:1,skill:"籃球" } var {name,age,sex,skill} = obj; console.log(name,age,sex,skill); //admin 18 1 籃球 console.log(skill,age,name,sex); //籃球 18 admin 1

（2）可嵌套可忽略

//可嵌套 let obj = {p: ['hello', {y: 'world'}] }; let {p: [x, { y }] } = obj; //返回：x = 'hello'，y = 'world'//可忽略 let obj = {p: ['hello', {y: 'world'}] }; let {p: [x, { }] } = obj; //返回：x = 'hello'

（3）不完全解構

let obj = {p: [{y: 'world'}] }; let {p: [{ y }, x ] } = obj; //返回：x = undefined，y = 'world'

（4）剩余運算符

let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}; console.log(a,b,rest); //返回a = 10，b = 20，rest = {c: 30, d: 40}

（5）解構默認值

let {a = 10, b = 5} = {a: 3}; //返回a = 3; b = 5; let {a: aa = 10, b: bb = 5} = {a: 3}; //返回：aa = 3; bb = 5;

---

六、Symbol() 標志

ES6 引入了一種新的原始數據類型 Symbol ，表示獨一無二的值，最大的用法是用來定義對象的唯一屬性名。
ES6 數據類型除了 Number 、 String 、 Boolean 、 Object、 null 和 undefined ，還新增了 Symbol 。

1. 使用：任意兩個 Symbol() 不相等，但是可以自己=自己；
Symbol 函數棧不能用 new 命令，因為 Symbol 是原始數據類型，不是對象。

var s1 = Symbol(); var s2 = Symbol(); console.log(s1); //Symbol() console.log(s2); //Symbol() console.log(s1 == s2); //false console.log(s1 == s1); //true

2. 應用場景：

var SIZE = {MIDDLE : Symbol(),SMALL : Symbol(),LARGE : Symbol(), } function fn(type){var str = "";switch(type){case SIZE.MIDDLE: str = "小號";break;case SIZE.SMALL: str = "中號";break;case SIZE.LARGE: str = "大號";break;}return str; } console.log(fn(SIZE.MIDDLE));

---

七. Set 和 Map

抽象成數組和對象；
Set() 和 Map() 沒有索引，不適合用數組的方法，這里用 for-of 進行遍歷。

7.1 Map()

Map 對象保存鍵值對。任何值(對象或者原始值) 都可以作為一個鍵或一個值。

1. 使用：
（1）聲明：var m = new Map();

console.log(m); //Map(0) {}

（2）設置： set();

m.set("name","admin"); console.log(m); //Map(1) {"name" => "admin"} map結構，php數據結構

（3）獲取： get()

console.log(m.get("name")); //admin

（4）遍歷： for-of

• ① 直接遍歷：返回的是長度為2的數組，前者為鍵，后者是值。for(var i of m){console.log(i); //(2) ["name", "admin"] }m.set("age",18); for(var i of m){console.log(i); //(2) ["name", "admin"] (2) ["age", 18] }
• ② keys() 和 values() 用來遍歷 Map() 的索引和值；

for(var i of m.keys()){ //遍歷索引console.log(i); //name age } for(var i of m.values()){ //遍歷值console.log(i); //admin 18 } for(var i of m.entries()){ //遍歷自身console.log(i); //(2) ["name", "admin"] (2) ["age", 18] }

7.2 Set()

Set 對象允許你存儲任何類型的唯一值，無論是原始值或者是對象引用。

Set() 中不允許出現重復選項。（即可以利用此功能進行去重操作）

使用：
（1）聲明

var s = new Set(); console.log(s); //Set(0) {}var s = new Set([3,45,2]); console.log(s); //Set(3) {3, 45, 2}

（2）操作：for-of

• 遍歷

for(var i of s){console.log(i);//3 45 2 }

• 設置： add()

var s = new Set(); s.add(1); console.log(s); //Set(1) {1}

2. 去重

function norepeat(arr){var s = new Set(arr);var newArr = [];for(var i of s){newArr.push(i);}return newArr; }

3. 并集

var a = new Set([1, 2, 3]); var b = new Set([4, 3, 2]); var union = new Set([...a, ...b]); // {1, 2, 3, 4}

4. 交集

var a = new Set([1, 2, 3]); var b = new Set([4, 3, 2]); var intersect = new Set([...a].filter(x => b.has(x))); // {2, 3}

總結

以上是生活随笔為你收集整理的js笔记（八）ES6的全部內容，希望文章能夠幫你解決所遇到的問題。

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