09 —— ES6新增语法 + let关键字 + const关键字 + 数据解构赋值 + 箭头函数

ES 的全称是 ECMAScript , 它是由 ECMA 国际标准化组织,制定的 一项脚本语言的标准化规范 。

ES6 实际上是一个泛指，泛指 ES2015 及后续的版本。

为什么使用 ES6 ?

每一次标准的诞生都意味着语言的完善，功能的加强。JavaScript语言本身也有一些令人不满意的地方。

1. let 关键字

let关键字就是用来声明变量的
			使用let关键字声明的变量具有块级作用域
			在一个大括号中 使用let关键字声明的变量才具有块级作用域 var关键字是不具备这个特点的
			防止循环变量变成全局变量
			使用let关键字声明的变量没有变量提升
			使用let关键字声明的变量具有暂时性死区特性


/* --------let关键字就是用来声明变量的-------- */
		// let a = 10;
		// console.log(a);
		
		/* --------使用let关键字声明的变量具有块级作用域-------- */
		// if (true) {
		// 	let b = 20;
		// 	console.log(b)
		// 	if (true) {
		// 		let c = 30;
		// 	}
		// 	console.log(c);
		// }
		// console.log(b)
		
		/* -------在一个大括号中 使用let关键字声明的变量才具有块级作用域 var关键字是不具备这个特点的--------- */

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


		/* -------防止循环变量变成全局变量--------- */
		// for (let i = 0; i < 2; i++) {}
		// console.log(i);
		

		/*-----使用let关键字声明的变量没有变量提升------*/
		// console.log(a);
		// let a = 100;
		

		/* -------使用let关键字声明的变量具有暂时性死区特性------- */
		var num = 10
		if (true) {
			console.log(num);
			let num = 20;
		}

2.let面试题 

<script type="text/javascript">
		let arr = [];

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

		arr[0]();  // 输出0
		arr[1]();  // 输出1

		// 当for循环里面的关键字是var时，当i = 2 时，才会跳出循环，arr[0]()输出为2  arr[1]()输出为2

3.const关键字

// 使用const关键字声明的常量具有块级作用域	
		// 使用const关键字声明的常量必须赋初始值
		
		const PI = 3.14;
		// PI = 100;  // 常量声明后值不可更改 
		const ary = [100, 200];
		ary[0] = 123; // 复杂数据可以更改
		ary = [1, 2]  // 常量声明后值不可更改 ，就是不能直接赋值
		console.log(ary);

4.let、const、var 的区别

1. 使用 var 声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象。 
2. 使用 let 声明的变量，其作用域为该语句所在的代码块内，不存在变量提升。 
3. 使用 const 声明的是常量，在后面出现的代码中不能再修改该常量的值。数学公式计算属性

var	let	const
函数作用域	块级作用域	块级作用域
变量提升	不存在变量提升	不存在变量提升
值可更改	值可更改	值不可更改

5.数组结构

// 数组解构允许我们按照一一对应的关系从数组中提取值 然后将值赋值给变量
		let ary = [1,2,3];
		let [a, b, c, d, e] = ary;
		console.log(a)  // 输出1
		console.log(b)  // 输出2
		console.log(c)  // 输出3
		console.log(d)  // 输出undefind
		console.log(e)  // 输出undefind

6.对象解构

// 对象解构允许我们使用变量的名字匹配对象的属性 匹配成功 将对象属性的值赋值给变量
		
		let person = {name: 'lisi', age: 30, sex: '男'};
		// let { name, age, sex } = person;
		// console.log(name)   输出‘lisi’
		// console.log(age)
		// console.log(sex)
		
		let {name: myName} = person;
		console.log(myName)  输出‘lisi’

7.箭头函数  () => {}

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

// 箭头函数是用来简化函数定义语法的
		// const fn = () => {
		// 	console.log(123)
		// }
		// fn();   输出123
		
		// 在箭头函数中 如果函数体中只有一句代码 并且代码的执行结果就是函数的返回值 函数体大括号可以省略
		// const sum = (n1, n2) => n1 + n2;	 
		// const result = sum(10, 20);    
		// console.log(result)   输出30
		
		// 在箭头函数中 如果形参只有一个 形参外侧的小括号也是可以省略的
		// const fn = v => {
		// 	alert(v);
		// }
		// fn(20)
		
		// 箭头函数不绑定this 箭头函数没有自己的this关键字 如果在箭头函数中使用this this关键字将指向箭头函数定义位置中的this
		
		function fn () {
			console.log(this);
			return () => {
				console.log(this)
			}
		}

		const obj = {name: 'zhangsan'};

		const resFn = fn.call(obj);

		resFn();

8.箭头函数面试题

var age = 100;

		var obj = {
			age: 20,
			say: () => {
				alert(this.age)
			}
		}

		obj.say();   // 输出100，this指向全局作用域下的变量var ，对象属性中没有全局变量