一（1）ES6基础入门之初识ES6

一、ES6简介

ECMAScript 是语言的标准，6 是版本号
ES6 = ECMAScript 这门语言的第 6 代标准

1、ECMAScript

ECMA：欧洲计算机制造商协会（标准化组织）
ECMAScript = 由ECMA 这个标准化组织指定的一个语言标准

2、具体是什么

• 语法：
  规定如何声明变量、常量、函数，如何声明数据类型
  

• API：
  简单理解为方法和对象
  

3、历史版本

ES1~3、ES5\6，ES4（太激进，跨度太大）被废弃。
用最多的是 ES3，兼容性最好，规定了 do while、switch、正则表达式等。
ES5 新增了 forEach、map、filter、Object.creat、Object.defineProperty等，兼容性有点问题，用的不多。

4、命名方式

ES6->ES7->ES8->…= ES6+
ES2015->ES2016->ES2017->…

5、ES 与 JavaScript 的关系

JavaScript（浏览器端）= ECMAScript（语法+ API）+ DOM + BOM

6、ES6 的兼容性

主流浏览器的最新版本几乎全部支持ES6。
IE老版本等不支持的浏览器，可以用 Babel 转码。

---

二、let 和 const

1、let 和 const 是什么

声明变量和声明常量。
let 代替 var 声明变量，const（constant）声明常量。

2、let 和 const 的用法

var username = 'Alex';
let age = 18;
const sex = 'male';
console.log(username,age,sex);

3、什么是变量，什么是常量

var username = 'Alex';
let age = 18;
const sex = 'male';
console.log(username,age,sex);
username = 'ZS';
age = 28;
sex = 'female';
console.log(username,age,sex);

var、let 声明的就是变量，初始化后，还可以重新赋值；
let 声明的就是常量，初始化后，不能重新赋值，否则会报错。

4、为什么需要 const

const 就是为了那些一旦初始化就不希望重新赋值的情况设计的。

5、const 的注意事项

1. 使用const 声明常量，一旦声明，就必须立刻初始化，不能留到以后赋值；
2. const 声明的常量，允许在不重新赋值的情况下修改它的值；

// 引用数据类型
const person = {username:'Alex'};
person.username = 'ZhangSan';
console.log(person);  // {username:'ZhangSan'}

6、什么时候用 const，什么时候用let

不确定的时候就尽量使用let 变量。

7、let、const 与 var 的区别

1. 重复声明
   已经存在的变量或常量，又声明了一遍。
   var 允许，let、const 不允许。

2. 变量提升
   var 会提升变量的声明到当前作用域的顶部。
   let 和 const 不存在变量提升。
   养成良好的编程习惯，对于所有的变量或常量，做到先声明，后使用。

3. 暂时性死区
   只要作用域内存在 let、const，它们所声明的变量或常量就自动“绑定”这个区域，不再受外部作用域的影响。

let a = 1;
let b = 1;
function fun(){
   console.log(b);
   console.log(a);
   let a = 1;
}
fun();

4. window 对象的属性和方法
   全局作用域中，var 声明的变量，通过 function 声明的函数，会自动变成 window 对象的属性或方法。
   let、const 不会。

// var/function
var age = 18;
function add(){}
console.log(window.age); // 18
console.log(window.add === add); // true

// let/const
let age2 = 18;
const add2 = function(){};
console.log(window.age2); // undefined
console.log(window.add2 === add); // false

5. 块级作用域

（1）什么是块级作用域

// var 没有块级作用域
for (var i = 0; i < 3; i++){
	console.log(i); // 0,1,2
}
console.log(i); // 3

// let/const 有块级作用域
for (let i = 0; i < 3; i++){
	i = i + 1;
	console.log(i); // 1,3
}
console.log(i); // erro

（2）作用域链

function func(){
	for(let i = 0; i < 3; i++){
		console.log(i); // 0,1,2
	}
}
func();
console.log(i); // erro

作用域链：内层作用域->外层作用域->…->全局作用域
（3）有哪些块级作用域

// {}
{
	let age = 18;
	console.log(age); // 18
}
console.log(age); // erro

// for(){}
// while(){}
// do{}while{}
// if(){}
// switch(){}

8、let 和 const 的应用

实例：点击按钮时，控制台输出对应数字

<button class="btn">0button>
<button class="btn">1button>
<button class="btn">2button>

// 1. var
var btns = document.quertySelectorAll('.btn');
for(var i = 0; i < btns.length; i++){
	btns[i].addEventListener(
	'click',
	function(){
		console.log(i); // 3
	},
	false
	);
}

// 2. 闭包
var btns = document.querySelectorAll('.btn');
for(var i = 0; i < btns.length; i++){
	(function(index){
		btns[index].addEventListener(
			'click',
			function(){
			console.log(index);
			},
			false
		);
	})(i);
}

// 3. let/const
let btns = document.querySelectorAll('.btn');
for(let i = 0; i < btns.length; i++){
	btns[i].addEventListener(
		'click',
		function(){
			console.log(i);
		},
		false
	);
}