ES6入门教程
本次ES6入门教程可以帮助大家快速认识学习ES6，但涉及的深度还需要挖掘，一些代码的底层原理还需要剖析出来，但仅凭一门编程语言，很不容易涵盖全部要点，我也会随着不断的学习，进行思考辩证，回溯更新文章的内容。
目录
ES6介绍
let变量声明以及声明特性
let实践案例练习
const声明常量以及特点
变量的解构赋值
模板字符串
对象的简化写法
箭头函数以及声明特点
箭头函数的实践及应用
ES6 允许给函数参数赋值初始值
rest参数
拓展运算符
Symbol介绍与创建
Symbol的内置属性
迭代器
生成器
生成器函数参数
生成器函数实例1
生成器函数实例2
Promise介绍与基本使用
Promise封装读取文件
Promise封装Ajax请求
Promise.prototype.then方法
Promise实践练习
Promise对象catch方法
集合介绍与API
集合实践
Map的介绍与API
class介绍与初体验
class的类继承
ES6的数值拓展
ES6的对象方法拓展
模块化
ES6介绍
ES全称ECMAScript，是脚本语言的规范，而平时经常编写的javaScript是ECMAScript的一种实现，所以ES新特性其实指的就是javaScript的新特性。
ES6是其中的一个重要版本，变动内容最多，具有里程碑意义，加入许多新的语法特性，就业必备。
let变量声明以及声明特性
let a;//声明变量//1、变量不能重复声明
let star="123";
let star="345";//由于变量已经存在，则再声明的话会报错//2、块级作用域
{
let let_test=123;
}
console.log(let_test);//因为let是块级作用域，所以或报错
/*-----------------------------------------------------*/
{
var var_test=123;
}
console.log(var_test);//var是函数作用域，所以在整个函数内都是有效的//3、声明变量不会提升到代码块顶部，即不存在变量提升
console.log(song);
var song="恋爱达人";//输出undefined 但如果是 let song="恋爱达人"；则会报错//4、不影响作用域链
{
let school="望子成龙小学"；
function fn(){
console.log(school);//会先在该作用域下寻找变量school,若没有找到，则到它的上层作用域寻找
}
fn();
}let实践案例练习
问题很简单，点击其中一个的方格，方格颜色变为粉红色。
let案例实战
点击切换颜色
这里对注释中的部分进行一个解释：因为let是块作用域，所以for循环中使用let也就等价于在代码块中先使用let进行变量的声明，然后再赋予点击事件，那对应的i肯定是块作用域的i。
const声明常量以及特点
const常量：值不能修改的量
const SCHOOL='望子成龙小学';
//1、一定要赋初始值
//2、一般常量使用大写
//3、常量的值不能修改
//4、块级作用域
//5、对于数组和对象的元素修改，不算作对常量的修改，不会报错
const TEAM=['UZI','MXLG','Ming','Letme'];
TEAM.push('Meiko');
//常量地址没有改变
//TEAM=100;这样就会报错变量的解构赋值
ES6允许按照一定模式从数组和对象中提取值，对变量进行赋值，这被称为解构赋值
模板字符串
ES6引入新的声明字符串的方式 ` `
对象的简化写法
箭头函数以及声明特点
//声明函数
let fn=function(a,b){
return a+b;
}
//箭头函数
let fn_row=(a,b)=>{
return a+b;
}
// 调用函数
let result=fn_row(1,2);
console.log(result);
// 1、箭头函数this是静态的，this始终指向函数声明时所在作用域下的this的值
function getName(){
console.log(this.name);
}
let getName2=()=>{
console.log(this.name);
}
window.name='望子成龙小学';
// 直接调用(上面两个例子this指的都是window)
getName();// 望子成龙小学
getName2();//望子成龙小学
const school={
name:"SCHOOL"
}
// call方法调用 使用 call() 方法，可以编写能够在不同对象上使用的方法。
getName.call(school);//SCHOOL
getName2.call(school);//望子成龙小学
// 2、不能作为构造实例化对象
let Person=(name,age)=>{
this.name=name;
this.age=age;
}
// 3、不能使用arguments变量
let fn_a=()=>{
console.log(arguments);
}
fn_a(1,2,3);
// 4、(1)省略小括号：当形参有且只有一个的时候
let add=n=>{
return n+n;
};
console.log(add(9));
// (2)省略花括号，当代码体只有一条语句的时候,此时return必须省略
let pow=n=> n*n;
console.log(pow(9));箭头函数的实践及应用
箭头函数实战
ES6 允许给函数参数赋值初始值
rest参数
拓展运算符
拓展运算符
Symbol介绍与创建
Symbol表示独一无二的值，类似于字符串的数据类型
// 不能与其他数据进行运算
let result=s+s;
//七大类型 USONB you are so niubility
//u underfined
//s symbol string
//o object
//n null number
//b booleanSymbol的内置属性
其实就是在特定情况下，通过改变对象的属性，来改变对象的表现
迭代器
const xiyou = ["唐僧", "孙悟空", "猪八戒", "沙僧"];
// 使用for of来遍历数组
for (let v of xiyou) {
console.log(v);
}
//迭代器方法
//(1)创建一个指针对象，指向当前数据结构的起始位置
let iterator=xiyou[Symbol.iterator]();
//(2)调用对象的next的方法
// 第一次调用对象的next方法，指针自动指向数据结构的第一个成员
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
生成器
生成器是ES6中新增的一种函数控制、使用的方案，它可以让我们更加灵活的控制函数什么时候继续执行、暂停执行等。
生成器函数参数
生成器函数实例1
生成器函数实例2
Promise介绍与基本使用
Promise是ES6引入的异步编程的新解决方案。语法上Promise是一个构造函数，用来封装异步操作并可以获取其成功或失败的结果。
Promise封装读取文件
// 1、引入fs模块
const fs=require('fs');
// // 2、调用方法读取文件
// fs.readFile('./resource/为学.md',(err,data)=>{
// // 如果失败，则抛出错误
// if(err) throw err;
// // 如果没有出错，则输出内容
// console.log(data.toString());
// });
// 使用Promise封装
const p=new Promise(function(resolve,reject){
fs.readFile('./resource/为学.md',(err,data)=>{
if(err)reject(err);
resolve(data);
});
});
p.then(function(value){
console.log(value.toString());
},function(reason){
console.log(reason);
});Promise封装Ajax请求
Ajax:Asynchronous JavaScript + XML（异步 JavaScript 和 XML）, 其本身不是一种新技术，而是一个在 2005 年被 Jesse James Garrett 提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括：HTML ,CSS, JavaScript, DOM, XML(en-US), XSLT, 以及最重要的 XMLHttpRequest。
发送Ajax请求
Promise.prototype.then方法
rest参数
Promise实践练习
读取多个文件
const fs=require('fs');
const p=new Promise(function(resolve,reject){
fs.readFile('./resource/为学.md',(err,data)=>{
resolve(data);
});
});
p.then(value=>{
return new Promise((resolve,reject)=>{
fs.readFile('./resource/静夜思.md',(err,data)=>{
resolve([value,data]);
})
})
}).then(value=>{
return new Promise((resolve,reject)=>{
fs.readFile('./resource/咏鹅.md',(err,data)=>{
value.push(data);
resolve(value);
})
})
}).then(value=>{
console.log(value.join('\r\n'));
})Promise对象catch方法
Promise catch
集合介绍与API
ES6提供了新的数据结构Set(集合)。它类似于数组，但成员的值都是唯一的，集合实现了iterator接口，所以可以使用【拓展运算符】和【for...of】进行遍历。
Promise catch
集合实践
Set集合实践
Map的介绍与API
Map 对象保存键值对，并且能够记住键的原始插入顺序。任何值（对象或者基本类型）都可以作为一个键或一个值。
Set集合实践
class介绍与初体验
class
class Phone{
// 静态属性
static name='手机';
static change(){
console.log("可以改变世界");
}
}
// 静态属性属于类，而不属于实例对象
let nokia=new Phone();
console.log(nokia.name);//undefined
console.log(Phone.name);//手机class的类继承
对象继承
ES6的数值拓展
数值拓展
ES6的对象方法拓展
对象的方法
模块化
模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来。
export命令用于规定模块的对外接口
//在t1.js这个文件下
//多行暴露
export let name='望子成龙小学';
export let teach=function(){
console.log("teaching");
}//在t2.js这个文件下
// 统一暴露
let name='望子成龙小学';
let teach=function(){
console.log("teaching");
}
export{name,teach};//在t3.js这个文件下
// 默认暴露
export default{
school:'KAVEN',
sing:function(){
console.log("sing a song");
}
}
import命令用于输入其他模块提供的功能
模块化