JavaScript高级|ES6（对象增强写法&解构&let/const） es6|对象增强写法|解构|let和c

对象增强写法&解构&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

【JavaScript高级|ES6（对象增强写法&解构&let/const）】解构默认值

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); // fzblet 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); // changshalet score = 70; // let score = 100; // SyntaxError: Identifier 'score' has already been declared console.log(score); // 70let 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有何不同