ES6学习笔记（四）：教你了解ES6的新添加语法

let

ES6新添加的用于公告变量的关键字

let公告的变量只在所处于的块级有效
不存在变量提升
暂时性死区

// 使用let公告的变量具备块级作用域if(true) {    let a = 10  console.log(a) // 10  if(true) {   let c= 30  }  console.log(c) // c is not defined}console.log(a) // a is not defined

注意：使用let 关键字公告的变量才具备块级作用域，使用var公告的变量不具有块级作用域特性。

在一个大括号中，使用let 关键字公告的变量才具备块级作用域，var关键字是不具有这个特点的。

if(true) {    let num = 100  var abc = 200}console.log(abc) // 200console.log(num) // num is not defined

防止循环变量变成全局变量

for(var i=0; i<2; i++) {    }console.log(i) //2 for(let j=0; j<2; j++) {    }console.log(j) //j is not defined

使用let公告的变量不存在变量提升

console.log(a); //a is not definedlet a = 20

使用let公告的变量有暂时性死区特性

var tmp = 123;if(true) {    tmp = 'abc'  let tmp;   // Cannot access 'tmp' before initialization}

经典面试例子

用var 公告

var arr = []for(var i = 0; i<2; i++){    arr[i] = function () {    console.log(i)  }}arr[0](); // 2arr[1](); // 2

因为变量i具体有全局作用，所以最终循环后得到i都是2，执行完也是2，如下图<br />

image.png

用let公告变量

let arr = []for(let i = 0; i<2; i++){    arr[i] = function () {    console.log(i)  }}arr[0](); // 0arr[1](); // 1

代码每次循环都会产生一个块级作用域，每个块级作用域中的变量都是不同的，函数执行时输出的事自己上一级（循环产生的块级作用域）作用域下的i值<br />

image.png

const

作用：公告常量，常量就是值（内存地址）不能变化的量

与let一样，具备块级作用域
公告常量时必需赋值
常量赋值后，值不能修改

// 使用const 关键字公告的常量必需赋初始值const PI //Missing initializer in const declaration

const公告的常量赋值后，值不能再改变

const PI = 3.14PI = 100  // Assignment to constant variable.

当const公告事数组或者对象时候，内部值可以改变，但内存中存储地址没变

const arr = [100, 200];arr[0] = 'a';arr[1] = 'b';console.log(arr) // ['a', 'b]arr = ['c','d'] //Assignment to constant variable.

let、const、var的区别

使用 var 公告的变量，其作用域为该语句所在的函数内，且存在变量提升现象。
使用 let 公告的变量，其作用域为该语句所在的代码块内，不存在变量提升。
使用 const 公告的是常量，在后面出现的代码中不能再修改该常量的值。

image.png

解构赋值

ES6中允许从数组中提取值，按照对应位置，对变量赋值，对象也可以实现解构。

数组解构

数值解构允许我们按照逐个对应的关系从数组中提取值而后将值赋值给变量

let [a, b, c] = [1, 2, 3]console.log(a) // 1console.log(b) //2console.log(c) //3

假如解构不成功，变量值为undefined

let [foo] = [];let [bar, foo] = [1]console.log(bar) //1console.log(foo) //undefined

对象解构

对象解构允许我们使用变量的名字匹配对象的属性，匹配成功将对象属性的值赋值给变量

let person = { name: 'lanfeng', age: 20 }let { name, age} = personconsole.log(name) //lanfengconsole.log(age) // 20

对象解构的另外一种写法

let person = { name: 'lanfeng', age: 20 } let { name: myName, age: myAge = 0} = person  //myName，myAge属于别名console.log(myName) //lanfengconsole.log(myAge) // 20

箭头函数

ES6中新添加的定义函数的方式

() => {}const fn = () => {}

箭头函数事用来简化函数定义语法的

const fn = () => {    console.log(123)}fn() //123

函数体中只有一个代码，且代码中的执行结果就是返回值，可以省略大括号

// ES6之前的定义方法function sum(num1, num2) {    return num1+ num2}const sum = (num1, num2) => num1 + num2

假如形参只有一个，可以省略小括号

function fn(v) { return v}const fn v => v

箭头函数不绑定this关键字，箭头函数中的this，指向的是函数定义位置的上下文this

//箭头函数不绑定this,箭头函数没有自己的this关键字，假如在箭头函数中使用this,this关键字将指向箭头函数定义位置中的thisconst obj = {name: 'lanfeng'}function fn() {    console.log(this)  return () => {    console.log(this)  }}const resFn = fn.call(obj) // 指向objresFn() //this指向obj

箭头函数的经典例子：

var obj = {    age: 20,  say: () => {     console.log(this.age)  }}obj.say() //undefined,由于指向的是window

剩余参数

剩余参数语法允许我们将一个不定数量的参数表示为一个数组，

function sum(first, ...args) {    console.log(first) // 10  console.log(args) //[20, 30]}sum(10, 20, 30)

剩余参数和解构配合使用

let arr = ['lanfeg','qianduan', 'yanfa']let [s1, ...s2] = arrconsole.log(s1) //lanfegconsole.log(s2) // ['qianduan', 'yanfa']

总结

本篇文章主要分享了ES6新添加的少量语法，比方let、const公告变量常量，解构赋值、箭头函数、剩余函数等它们的各自用法及特点。如想理解更多，请扫描下面的二维码：<br />

qrcode_for_gh_4d3763fa9780_258 (1).jpg