es6 复习

变量声明

• 块级声明 let 只在块级区域有效
• var 声明具有变量提升能力，不管在哪里声明，均视为作用域顶部声明
• 变量提升能力还带来一个区别，就是声明之前使用时，产生的结果不同

console.log(value); //undefined
var value; //变量提升导致逻辑怪异

console.log(count); //引用错误
let count;

---

• 如果在 let 声明前使用变量，这段区域被称为 临时死区(或暂时性死区) -->就是会报错
• 临时死区 简称：TDZ，这段区域使用typeof 也会报错
• 因为平时如果使用 typeof 来判断 未声明的变量，只会输出 undefined

---

• var 声明可以重复声明同一个变量，后面会取代前一个变量
• let 声明不可以重复声明一个变量，会直接报错，就算其中一个是var

---

• 在循环中，var 和let 的区别尤为明显，let 只在循环内部有效
• var 全局有效，导致后续再使用i 会引起干扰，而let 则不会

for (let i = 0; i < 10; i++) {
	console.log(i);
}
console.log(i); //var 声明，则10；let 声明，报错

• 如果在循环体内设置函数方法，体外输出var 会得到不想要的值

var list = [];
for (var i = 0; i < 10; i++) { //把这里改成let，则会得到想要的值
	list[i] = function () {
		console.log(i);
	}
}
list[5](); //这里不管设置多少，结果都是10

---

• const 声明的作用是：创建一个只读的常量，一旦声明不可改变
• 和let 声明一样，const 声明的常量无法提升，也存在临时死区
• 和let 不同的是，const 声明后必须立刻赋值，否则会报错

作用域

全局作用域

• 浏览器环境有一个顶层对象 window，其属性和 var 的全局变量等价
• 如果是 window 对象的内置属性，则输出默认值，而非内置则undefined
• var 如果设置了window 对象的内置属性作为变量，则会直接覆盖

console.log(window.name); //空，内置属性
console.log(window.abcd); //undefined，非内置

console.log(name); //空，内置全局
console.log(abcd); //报错

console.log(window.name === name); //true，等价

var value = 10;
console.log(window.value); //var 的全局变量即window 的属性

var name = 'Mr.Lee';
console.log(window.name); //内置属性值被覆盖

块级作用域

• ES6 之前只有 全局作用域 和 函数作用域，并没有所谓的块级作用域
• 在ES6 之前，采用 自我立即执行匿名函数 的方式来防止变量污染

(function () {
var value = 10;
}());
console.log(value); //报错

解构

• ES6 提供了对 数组和对象字面量 提取相关数据的方法：解构操作
• 为何要使用解构操作？是因为JSON 格式的普及，导致大量数据提取工作,使用 ES6 的解构语法，为提取过程带来了极大的便捷性

数组解构

• 必须一一完美匹配才可以正确赋值 (就是结构要类似)

let [name, age, gender] = ['Mr.Lee', 100, '男']
//当gender 没有赋值时，采用默认值
let [name, age, gender = '男'] = ['Mr.Lee', 100]

let [name, [age, gender]] = ['Mr.Lee', [100, '男']]

//用逗号作为占位符不赋值
let [,, gender] = ['Mr.Lee', 100, '男']

//...var 的语法，可以将没有赋值的内容都赋值给这个变量
//不定元素，将其余都赋值给other
let [name, ...other] = ['Mr.Lee', 100, '男']

对象解构

• 对象字面量 解构时结构要类似

let obj = {
	name : 'Mr.Lee',
	age : 100,
}

//变量名要和属性名一样
let {name, age} = obj 
//或
({name, age} = obj)
//上面两个有啥区别 看下面例子

//若解构的变量名是已经存在的变量，那会导致什么情况
let obj = {
	name : 'Mr.Lee',
	age : 100,
}

let name = 'Mr.Wang'
let {name, age} = obj  //报错
({name, age} = obj) //这样写才行

//设置一个默认值
let {name ,age, gender = '女'} = obj

//若不想要 对象属性名 作为解构变量，可以通过 键值对的方式 更改 变量名 
let {name : myName, age : myage} = obj  //name将失效,不再是变量名

//和数组不同,可以直接省略,不用逗号
let obj = {
	name : 'Mr.Lee',
	age : 100,
	info : {
	id : 1,
	gender : '男'
	}
}
let {age, info : {id, gender}} = obj
let {age, info} = obj //这里的info是变量,上面的info不是变量

常用解构

• 变量交换使用解构

let key = 1
let value = 'Mr.Lee'
//解构操作，变量互换
[key, value] = [value, key]

• 函数参数使用解构

function fn([name, age, gender]) {
	console.log(name);
}
fn(['Mr.Lee', 100, '男'])

function fn2({name, age , gender}) {
console.log(name);
}
fn2({
name : 'Mr.Lee',
age : 100,
gender : '男'
})

• 字符串类型的数据解构

let [x, y, z] = 'ABC';
console.log(x); //A 类似截取操作

let {length : len} = 'ABC'; //长度
console.log(len); //输出3

函数参数

• ES6 之前函数是无法给参数设置默认值的，而ES6 支持了这个特性

function fn(name,
			age = 100,
			arr = [],
			obj = {},
			callback = function () {}) {
			
		//参数1 是必须传递
		//其余参数有默认值，可选传递
		console.log(arr)
		console.log(obj)
		console.log(callback('callback'))
}

fn('Mr.Lee', 200, [1,2,3], {key : 1}, function (info) {
return info;
})

//如果只想传递第二往后的参数，参数一保持默认值，可用undefined 占位
//null，空 都不行
//不推荐使用 其他语言带默认值的都是放在后面/右边
function fn(name = 'Mr.Lee', age) { 
	console.log(name)
	console.log(age)
}

fn(undefined, 100)

//支持参数二使用参数一的值作为默认值
function fn(x, y = x) { //(y = x, x)错误
console.log(y);
}
fn(1)

//函数的参数有不定参数
function fn(name, ...other) { //不定参数之后不可再有参数
	console.log(other);
}
fn('Mr.lee', 100, '男')


// name 属性
function fn() {}
let fn2 = function () {}
let obj = {
	fn3 : function () {}
}
console.log(fn.name)
console.log(fn2.name)
console.log(obj.fn3.name)
console.log((new Function()).name); //匿名函数anonymous

箭头函数和this

• ES6 新增了一个使用 (=>)箭头符号 定义函数的语法特性

let fn = name => name
console.log(fn('Mr.Lee'))

let fn = (x, y) => x + y
console.log(fn(10, 20))

let fn = () => 'Mr.Lee'
console.log(fn())

//如果函数体需要更复杂的操作，可以将箭头符号右边使用传统函数体
let fn = (x, y) => {
return x + y;
}
console.log(fn(10, 20))

//如果箭头符号右边是对象，返回的是对象，则需要用圆括号包含着
let fn = name => ({name : name, age : 100})
console.log(fn('Mr.Lee').name)

• 绑定this
  
  
• 箭头函数的出现，彻底解决了this 在内部指向的问题，直接指向我们所需要
• 因为，箭头函数中的this是在最外层定义的函数的绑定(就是指向最外层函数的调用)，不受内部影响

setTimeout(() => {
console.log(this.name + ', ' + this.age);
}, 500)
//此处的this绑定在obj上,因为最外层函数是fn