ES6：对象增强写法&解构&let/const

Posted 2021-10-20 还是不会呀

对象增强写法&解构&let/const

• • 对象的增强写法
  • 解构
  • • 数组解构
    • 对象解构
  • let/const
  • • let/const的基本使用及注意事项
    • let/const与作用域提升
    • let/const和全局对象window的关系
    • 块级作用域
    • 总结：let/const和var有何不同

对象的增强写法

在定义对象的属性和方法时，有了更方便的简便写法

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不存在