ES6：物件增強寫法&解構&let/const

物件的增強寫法

在定義物件的屬性和方法時，有了更方便的簡便寫法

var name = "fzb";
var age = 21;
var address = "address";

var info = {
  name: name,
  // 屬性的簡便寫法
  age,
  say: function () {
    console.log(this.name + " say~");
  },
  // 函式的簡便寫法
  eat() {
    console.log(this.name + " eat~");
  },
  // 計算屬性名
  [address]: "changsha",
};

console.log(info.name); // fzb
console.log(info.age); // 21
info.say(); // fzb say~
info.eat(); // fzb eat~
console.log(info[address]); // changsh

解構

陣列解構

陣列解構

var names = ["fzb", "gj", "sal"];

// 陣列解構
var [name1, name2, name3] = names;
console.log(name1); // fzb
console.log(name2); // gj
console.log(name3); // sal

解構面的元素

用 ,進行占位

var names = ["fzb", "gj", "sal"];

// 只解構后面一個元素
var [, , name3] = names;
console.log(name3); // sal

解構默認值

var names = ["fzb", "gj", "sal"];

// 對解構不到的樹設定一個默認值
var [name1, name2, name3, name4 = "zzw"] = names;
console.log(name1); // fzb
console.log(name2); // gj
console.log(name3); // sal
console.log(name4); // zzw

解構剩余的值

var names = ["fzb", "gj", "sal"];

// 解構部分元素，剩下的元素解構到一個陣列內
var [name1, ...name2] = names;
console.log(name1); // fzb
console.log(name2); // [ 'gj', 'sal' ]

物件解構

物件解構

var info = {
  name: "fzb",
  age: 21,
  address: "changsha",
};

// 物件的解構，與解構順序無關
var { address, name, age } = info;
console.log(address); // changsha
console.log(age); // 21
console.log(name); // fzb

重命名

不想使用物件內的key作為變數名，可以進行重命名

var info = {
  name: "fzb",
  age: 21,
  address: "changsha",
};

// 重命名
var { address: d, name: n, age: a } = info;
console.log(d); // changsha
console.log(n); // 21
console.log(a); // fzb

解構默認值

var info = {
  name: "fzb",
  age: 21,
};

// 解構默認值
var { name, age, address = "china" } = info;
console.log(age); // 21
console.log(name); // fzb
console.log(address); // china

let/const

let/const的基本使用及注意事項

let/const用來申明變數

const name = "fzb";
// 不可二次賦值，報錯：TypeError: Assignment to constant variable.
// name = "gj";
console.log(name); // fzb

let age = 21;
age = age + 1;
console.log(age); // 22

// 注意事項一：用const宣告的是一個物件型別，那么只要只要變數指向的指標地址不變就行，是可以就該物件內部值的
const info = {
  age: 21,
};
// info = {}; // 這樣是一定會報錯的，改變了info的指向
info.age += 10;
console.log(info); // { age: 31 }

// 注意事項二：let/const重復宣告物件是不可以的，但var可以

var address = "china";
var address = "changsha";
console.log(address); // changsha

let score = 70;
// let score = 100; // SyntaxError: Identifier 'score' has already been declared
console.log(score); // 70

let number = 1;
// let number = 2; // SyntaxError: Identifier 'number' has already been declared
console.log(number); // 1

let/const與作用域提升

var是存在作用域提升的，而let和const沒有作用域提升

// 對于 var 關鍵字宣告
console.log(name); // undefined
var name = "fzb";

// 對于 const 關鍵字宣告
// console.log(age);
//報錯: ReferenceError: Cannot access 'age' before initialization
const age = 21;
console.log(age); // 21

// 對于 let 關鍵字宣告
// console.log(height);
//報錯: ReferenceError: Cannot access 'height' before initialization
let height = 188;
console.log(height); // 188

let/const和全域物件window的關系

對于var在全域宣告的變數，會放到window上面，一個改變另一個也改變

var age = 21;
console.log(window.age); // 21
window.age++;
console.log(age); //22

對于const在全域宣告的變數，不會放到window上

const age = 21;
console.log(window.age); // undefind

對于let在全域宣告的變數，不會放到window上

let age = 21;
console.log(window.age); // undefind

在舊版的ECMAScript標準上，GO物件就是window物件，var全域定義的變數就會出現在window上，并且一起改變，

在新版的ECMAScript標準上，已經不存在GO,VO,AO物件的說法，改成了變數環境(VE)和變數環境記錄(VER)，正是因為新的宣告關鍵字的出現，

結合上方的例子，也就是說：現在宣告的變數存盤的地點不再是GO(window),但是var宣告的變數在新的存盤地點存在一份，在window上還是存在一份，并且相互影響，而let和const宣告的物件全在新的存盤地點，在window上不存在了，現在的變數存盤在varable_的地方，varableMap的存盤方式，這是一種hash表，

塊級作用域

在ES6以前，具有作用域的地方只有兩個全域作用域和函式作用域，

在ES6時出現了塊級作用域的概念

let/const/function(有點特殊)/class具有塊級作用域的概念

if/switch/for具有塊級作用域

{
  var name = "fzb";
  const age = 21;
  let height = 188;
  function sum(n1, n2) {
    return n1 + n2;
  }
  class Person {}
}

console.log(name); // fzb
// console.log(age); // Uncaught ReferenceError: age is not defined
// console.log(height); // Uncaught ReferenceError: height is not defined
console.log(sum(1, 2)); // 3
// console.log(new Person()); //Uncaught ReferenceError: Person is not defined

總結：let/const和var有何不同

• let/const不允許重復定義相同名稱的變數，而var可以
• let/const不存在變數提升，而var存在
• let/const定義的變數不會再window上增加一份，而var宣告的變數會
• let/const存在塊級作用域的概念，而var不存在