1.ES6簡介

ECMAScript 6（簡稱ES6）是于2015年6月正式發布的JavaScript語言的標準，正式名為ECMAScript 2015（ES2015）。它的目標是使得JavaScript語言可以用來編寫復雜的大型應用程序，成為企業級開發語言 。

另外，一些情況下ES6也泛指ES2015及之后的新增特性，雖然之后的版本應當稱為ES7、ES8等。

ES6語法整理 - 新成 - 博客園

ES6 教程 | 菜鳥教程

2.ES6的基本使用案例

2.1 Let變量定義

var和let的作用域

function test1() {// var 聲明的變量往往會越域// let 聲明的變量有嚴格局部作用域{var a = 1;let b = 2;}console.log(a);  // 1// console.log(b);  // ReferenceError: b is not defined}

執行結果：

如果打印b

var和let聲明變量?

function test1_1() {// var 可以聲明多次// let 只能聲明一次var m = 1;var m = 2;let n = 3;// let n = 4;console.log(m);  // 2console.log(n);  // Identifier 'n' has already been declared}

加上 let n=4;

變量提升的含義：

在 JavaScript 中，變量提升是指變量聲明會被提升到它們所在的函數作用域（使用?var?聲明的變量）或全局作用域（在函數外使用?var?聲明的變量）的頂部。這意味著，無論你在函數中的何處聲明變量，在代碼執行之前，變量的聲明會被移到函數或全局作用域的最開始處。

var和let變量提升?

  function test2() {// var 會變量提升// let 不存在變量提升console.log(x);  // undefinedvar x = 10;console.log(y);  // ReferenceError: y is not definedlet y = 20;}

?var變量的執行流程：

?var x

?console.log(x)

?x=10

const的變量初始化?

 function test3() {// 1. 聲明之后不允許改變// 2. 一旦聲明必須初始化，否則會報錯const a = 1;a = 3;  // Uncaught TypeError: Assignment to constant variable.}

2.2? 結構表達式

數組解構

function test1() {// 數組解構let arr = [1, 2, 3];// let a = arr[0];// let b = arr[1];// let c = arr[2];let [a, b, c] = arr;console.log(a, b, c);}

對象解構?

 function test2() {const person = {name: "jack",age: 21,language: ['java', 'js', 'css']};// const name = person.name;// const age = person.age;// const language = person.language;// 對象解構const { name: abc, age, language } = person;console.log(abc, age, language);}

字符串擴展?

 function test3() {// 4、字符串擴展let str = "hello.vue";console.log(str.startsWith("hello")); // trueconsole.log(str.endsWith(".vue")); // trueconsole.log(str.includes("e")); // trueconsole.log(str.includes("hello")); // true}

字符串中插入變量和表達式

 function fun() {return "這是一個函數";}

function test4() {// 字符串模板let ss = `<div><span>hello world</span></div>`;console.log(ss);const person = {name: "jack",age: 21,language: ['java', 'js', 'css']};// 對象解構const { name: abc, age, language } = person;// 2、字符串插入變量和表達式。變量名寫在 ${} 中，${} 中可以放入 JavaScript 表達式。let info = `我是${abc}，今年${age + 10}了, 我想說：${fun()}`;console.log(info);}

2.3? 函數優化

 function add2(a, b = 1) {return a + b;}console.log(add2(20));
//調用 add2 函數，并將 20 作為參數傳遞給 a。由于沒有為 b 提供值，b 將使用默認值 1。

        // 2）、可變參數function fun(...values) {console.log(values.length);}fun(1, 2);      // 2fun(1, 2, 3, 4);  // 4

?

箭頭函數?

 // 3）、箭頭函數
//單個參數// 傳統函數聲明方式定義一個函數//傳統方式的內部邏輯：定義一個接受單個參數 obj 的匿名函數，然后將這個函數賦值給變量 print。var print = function (obj) {console.log(obj);};print("hello");// 使用箭頭函數重新定義 print 函數// 采用箭頭（=>）語法來定義函數，這是 ES6 引入的新特性。它可以更簡潔地表達函數。var print = obj => console.log(obj);print("hello");
//兩個參數var sum = function (a, b) {c = a + b;return a + c;};var sum2 = (a, b) => a + b;console.log(sum2(11, 12));var sum3 = (a, b) => {c = a + b;return a + c;};console.log(sum3(10, 20));

?

輸出對象的屬性?

 const person = {name: "jack",age: 21,language: ['java', 'js', 'css']};function hello(person) {console.log("hello," + person.name);}hello(person);

箭頭函數+解構?

   // 箭頭函數+解構var hello2 = ({ name }) => console.log("hello," + name);hello2(person);

?

?2.4 對象優化

打印對象

 // 創建一個名為 person 的對象，包含 name、age 和 language 屬性const person = {name: "jack",age: 21,language: ['java', 'js', 'css']};// 打印 person 對象的鍵名數組console.log(Object.keys(person)); //["name", "age", "language"]// 打印 person 對象的值數組console.log(Object.values(person)); //["jack", 21, ['java', 'js', 'css']]// 打印 person 對象的鍵值對數組console.log(Object.entries(person)); //[["name", "jack"], ["age", 21], ["language", ['java', 'js', 'css']]]

合并對象的屬性?

 // 創建三個對象 target、source1 和 source2const target = { a: 1 };const source1 = { b: 2 };const source2 = { c: 3 };// 使用 Object.assign 將 source1 和 source2 的屬性合并到 target 對象中Object.assign(target, source1, source2);// 打印合并后的 target 對象console.log(target); //{a: 1, b: 2, c: 3}

聲明對象的簡寫形式?

// 2）、聲明對象簡寫const age = 23;const name = "張三";// 傳統的對象聲明方式，屬性名和變量名相同const person1 = { age: age, name: name };// 簡潔的對象聲明方式，屬性名和變量名相同時可直接使用變量名const person2 = { age, name };console.log(person2);

?

對象函數屬性的簡寫?

// 3）、對象的函數屬性簡寫let person3 = {name: "jack",// 傳統的函數屬性聲明方式eat: function (food) {console.log(this.name + "在吃" + food);},// 箭頭函數作為對象屬性，this 不綁定到對象，可能導致問題eat2: food => console.log(person3.name + "在吃" + food),// 簡潔的函數屬性聲明方式，this 綁定到對象eat3(food) {console.log(this.name + "在吃" + food);}};// 調用對象的 eat 方法person3.eat("香蕉");// 調用對象的 eat2 方法person3.eat2("蘋果");// 調用對象的 eat3 方法person3.eat3("橘子");

拷貝對象?

  // 1、拷貝對象（深拷貝）let p1 = { name: "Amy", age: 15 };let someone = {...p1 };console.log(someone);  //{name: "Amy", age: 15}

拷貝對象的方式

淺拷貝

淺拷貝會創建一個新對象，新對象的屬性會復制原始對象的屬性。但如果原始對象的屬性是引用類型（如對象或數組），那么新對象和原始對象會共享這些引用類型的屬性，即它們指向內存中的同一個對象。

1. 使用擴展運算符（...）

擴展運算符可以將一個對象的所有可枚舉屬性展開到另一個對象中。

2. 使用?Object.assign()?方法

Object.assign()?方法用于將一個或多個源對象的所有可枚舉屬性復制到目標對象，返回目標對象。

深拷貝

深拷貝會遞歸地復制對象及其所有嵌套的對象和數組，創建一個完全獨立的新對象，新對象和原始對象在內存中是完全分離的，修改其中一個對象不會影響另一個對象。

1. 使用?JSON.parse()?和?JSON.stringify()

這是一種簡單的實現深拷貝的方法，但有一些局限性，例如它不能處理函數、Symbol?類型的屬性、Date?對象、RegExp?對象等

2. 自定義遞歸函數實現深拷貝

通過編寫自定義的遞歸函數，可以處理更復雜的對象結構，包括函數、Date?對象、RegExp?對象等。

合并對象?

 // 2、合并對象let age1 = { age: 15 };let name1 = { name: "Amy" };let p2 = { name: "zhangsan" };p2 = {...age1,...name1 }; console.log(p2);

?

2.5 Map 和Reduce

map方法

// 數組中新增了 map 和 reduce 方法。// map()：接收一個函數，將原數組中的所有元素用這個函數處理后放入新數組返回。let arr = ['1', '20', '-5', '3'];arr = arr.map((item) => {return item * 2;});console.log(arr);arr = arr.map(item => item * 2);console.log(arr);

reduce方法

// arr.reduce(callback,[initialValue])/**1、previousValue （上一次調用回調返回的值，或者是提供的初始值（initialValue））2、currentValue （數組中當前被處理的元素）3、index （當前元素在數組中的索引）4、array （調用 reduce 的數組）*/let result = arr.reduce((a, b) => {console.log("上一次處理后：" + a);console.log("當前正在處理：" + b);return a + b;}, 100);console.log(result);

2.6 promise

<script>// 定義兩個參數一個是 ajax 返回成功數據傳遞 resolve，一個是失敗 rejectlet p = new Promise((resolve, reject) => {// 1、異步操作$.ajax({url: "mock/user.json",success: function (data) {console.log("查詢用戶成功:", data);resolve(data);},error: function (err) {reject(err);}});});p.then((obj) => {return new Promise((resolve, reject) => {$.ajax({url: `mock/user_corse_${obj.id}.json`,success: function (data) {console.log("查詢用戶課程成功:", data);resolve(data);},error: function (err) {reject(err);}});});}).then((data) => {console.log("上一步的結果", data);$.ajax({url: `mock/corse_score_${data.id}.json`,success: function (data) {console.log("查詢課程得分成功:", data);},error: function (err) {}});});function get(url, data) {return new Promise((resolve, reject) => {$.ajax({url: url,data: data,success: function (data) {resolve(data);},error: function (err) {reject(err);}});});}get("mock/user.json").then((data) => {console.log("用戶查詢成功~~~:", data);return get(`mock/user_corse_${data.id}.json`);}).then((data) => {console.log("課程查詢成功~~~:", data);return get(`mock/corse_score_${data.id}.json`);}).then((data) => {console.log("課程成績查詢成功~~~:", data);}).catch((err) => {console.log("出現異常", err);});
</script>

2.7 模塊化

export const util = {sum(a, b) {return a + b;}
}export default {sum(a, b) {return a + b;}
}
// export {util}// export不僅可以導出對象，一切 JS 變量都可以導出。比如：基本類型變量、函數、數組、對象。

var name = "jack";
var age = 21;
function add(a, b) {return a + b;
}export { name, age, add };

import abc from "./hello.js";
import { name, add } from "./use.js";abc.sum(1, 2);
console.log(name);
add(1, 3);

?