一 - ES6中的解構賦值的深入理解
1.1- 解構賦值及語法糖的引入：
雖然我們寫是這麼寫，但是最終我們瀏覽器還是會以上面那樣解析，
像這種簡化語法的寫法，就叫做語法糖。
1.2 - 變量的解構賦值小結：
- 1 - 理解:
從對象或數組中提取數據, 並賦值給變量(多個) - 2 - 對象的解構賦值
let {n, a} = {n:'tom', a:12} - 3 - 數組的解構賦值
let [a,b] = [1, 'atguigu']; - 4 - 用途
給多個形參賦值
1.2.1 - 對象的解構賦值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>變量的解構賦值</title>
</head>
<script type="text/javascript">
const person = {
// 假設這個對象裏有很多很多的屬性：
name: 'jack',
age: 18,
sex: '男'
};
// 我們往往要操作對象的時候，都會把這些屬性從對象中給提取出來
const name = person.name;
const age = person.age;
const sex = person.sex;
const a = person.a; //讀取對象中不存在的屬性，值就是undefind
// 像上面這樣一個一個的提取出來，要是有20個屬性，就要寫20條把屬性給提取出來，
// 這樣的代碼太繁瑣和太多了。
// 所以就出現了一個簡寫方式----叫做對象的結構賦值：
// 可以用一句話，就能做到上面的4條語句的代碼：
// 1 - 對象的解構賦值: 可以提取對象的同名屬性賦值，並且將值提取給對應同名變量
// { } 裏面的name，age，sex，a是變量，他們的值等於person.name person.age person.sex person.a
const { name, age, sex, a } = person; //雖然我們寫是這麼寫，但是最終我們還是會以上面那樣解析
console.log(name, age, sex, a); //jack 18 男 undefined
// 這個就是語法，我們不需要去研究這些語法是怎麼實現的，這樣就沒有意義了。
// 語法就是告訴我們這樣用，就是這樣用。不要給你一個for循環，你就去深究for循環是怎麼具體的實現的。
</script>
</body>
</html>
1.2.3 - 數組的解構賦值
// 2 - 數組的解構賦值：按照位置提取數組的值
// 這種方法用的很少，一般我們都是通過遍歷來取數組的值的
const arr = [3, 2, 4, 1];
const [a, b, c, d] = arr
console.log(a, b, c, d); //3 2 4 1
// 即使你只想要對應其中的兩位：也必須按照位置來，你不想要的就空着，
const [a, , , b] = arr;
console.log(a, b); //3 1
1.2.4 - 函數的解構賦值
// 3 - 函數的解構賦值：對函數的第一個參數進行解構賦值
// 這裏還是先定義一個對象：
const person = {
name: 'jack',
age: 18,
sex: '男'
};
function fn(obj) { //在這裏傳入一個obj對象進去
console.log(obj); //所以這裏就會打印出來person {name: "jack",age:18,sex:"男"}
}
fn(person); //在這裏調用了一個fn函數，傳入一個person對象
// 但是我們想要打印的是裏面的name，age，sex
// 所以我們就這樣寫：
function fn(obj) {
const { name, age, sex } = obj; //將這個對象進行解構賦值
console.log(name, age, sex); //jack 18 男
}
// 我們還可以直接寫成下面這樣：更簡潔些：
// 就達到了我們的最終目的---對函數的第一個參數進行解構賦值
// { name, age, sex } 僅僅是一個參數，用大括號包着。
function fn({ name, age, sex }) {
console.log(name, age, sex); //jack 18 男
}
fn(person);
『傳送門』☛ES6的解構賦值的用途總結
