ES6新特性详解
1、var、let、const
var：变量提升，可以先申声明不初始化，可以跨快访问，不能跨函数作用域；
let：有块级作用域，不能跨快访问，可以先声明不初始化，无变量提升
const：声明常量，必须要声明的时候初始化，定义之后值不可改，块级作用域，对于数组和对象的元素修改，不算做对常量的修改，不会报错（因为地址未修改）。
2、变量的解构赋值
es6允许按照一定模式从数组和对象中提取值，对变量进行赋值，这就是解构赋值
// 关于数组解构
const arr=['11','22','33'];
let [yi,er,san]=arr;
console.log(yi);//11
console.log(er);//22
console.log(san);//33
// 对象的解构
const fan={
name1:'yiyi',
age:18,
hobby:function(){
console.log('singing')
}
}
let {name1,age,hobby}=fan;
console.log(name1);//yiyi
console.log(age);//18
console.log(hobby);//[Function: hobby]
hobby();//singing
3、声明字符串的方式(``反引号)
1.可用作声明，2.内容中可以直接出现换行符；3.变量拼接
// 变量声明
let str=`hahahah`;
console.log(str, typeof str);//hahahah string
// 出现换行
let str1=`
- 嘻嘻
- 哈哈
- 呵呵
`
// 变量拼接
let hobby='code';
let question=`你的爱好是什么？${hobby}`
console.log(question);
4、对象的简化写法
允许在大括号里面直接写入变量和函数，作为对象的属性和方法。
let name='tony';
let hobby=function(){
console.log('reading');
}
const things={
name,
hobby,
other(){//把:function省了
console.log('singing')
}
}
console.log(things);
5、箭头函数
1.this是静态的，始终指向函数声明时所在作用域下的this的值，call和apply也无法改变他的指向；
function getName() {
console.log(this.name);
}
var getName2 = () => {
console.log(this.name);
}
window.name = '哈哈哈';
const name1 = { name: '嘻嘻' };
getName();//哈哈哈
getName2();//哈哈哈
getName.call(name1);//嘻嘻
getName2.call(name1);//哈哈哈
2.不能作为构造函数实例化对象，不能使用new来调用
3.不能使用arguments变量；
4.箭头函数的简写：①省略小括号，当形参有且只有一个的时候；②省略花括号，当代码体只有一条语句的时候，且return必须省略，语句执行结果就是函数的返回值。
总结：箭头函数适合与this无关的回调，定时器，数组的方法回调；不适合与this有关的回调，事件回调，对象的方法
6、函数参数的默认值设置
1.形参初始值，具有默认值的参数，一般位置要靠后(潜规则)
2.与解构赋值结合
7、rest参数
引入rest参数，用于获取函数的实参，用来代替arguments。rest参数必须要放到参数的最后，否则会报错。
// rest参数
function data(...args){
console.log(args)
}
data('11','22','33');
8、扩展运算符
能将数组转换成逗号分隔的参数序列。
const arr=['11','22','33'];
function names(){
console.log(arguments);
}
names(...arr);
//[Arguments] { '0': '11', '1': '22', '2': '33' }
**使用：**1.数组的合并，[...arr1,...arr2]
2.数组的克隆(浅拷贝)；let a=[1,2,3];let b=[...a]
3.将伪数组转为真正的数组
9、symbol
基本数据类型，表示独一无二的值。
特点：
1.symbol的值是唯一的，用来解决命名冲突的问题
2.symbol的值不能与其他数据进行运算；
3.symbol定义的对象属性不能使用for…in循环遍历，但是可以使用Reflect.ownKeys来获取对象的所有键名。
// 创建symbol
let s=Symbol();
let s2=Symbol('haha');
// 通过Symbol.for创建
let s3=Symbol.for('xixi');
// symbol创建对象属性
let game={
name:'card',
[Symbol('first')]:function(){
console.log('haha');
},
[Symbol('second')]:function(){
console.log('xixi');
}
}
console.log(game)
10、迭代器
迭代器是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署iterator接口(这个接口就是对象的属性)，就可以完成遍历操作。
1.es6创造了一种新的遍历命令for…of循环，Iterator接口主要提供for…of消费
2.原生具备iterator接口的数据(可用for of遍历)：Array，arguments，Set，Map，string，typedArray，NodeList
3.工作原理：①创建一个指针对象，指向当前数据结构的起始位置，②第一次调用对象的next方法，指针自动指向数据结构的第一个成员；③接下来不断调用next方法，指针一直往后移动，直到指向最后一个成员。
// 迭代器自定义遍历对象
const class1={
name:'一班',
stus:[
'11',
'22',
'33',
'44'
],
[Symbol.iterator](){
// 索引变量
let index=0;
return {
next:()=>{
if(index<this.stus.length){
const result={value:this.stus[index],done:false};
// 下标自增
index++;
// 返回结果
return result;
}else{
return {value:undefined,done:true};
}
}
}
}
}
for(item of class1){
console.log(item);
}
11、生成器函数
生成器函数是一个特殊的函数，用于异步编程，纯回调函数
yield：函数代码的分隔符
next方法可以传入实参
//生成器函数声明与调用
function * gen(){
console.log('hello');
yield '哈哈哈1'
console.log('world');
yield '哈哈哈2';
}
let iterator =gen();
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
// 输出
// hello
// { value: '哈哈哈1', done: false }
// world
// { value: '哈哈哈2', done: false }
// { value: undefined, done: true }
12、promise
是es6引入的异步编程的新解决方案，语法上promise是一个构造函数，用来封装异步操作并可以获取其成功或失败的结果。可以通过链式调用解决回调地狱。
// 实例化promise对象
const p=new Promise(function(resolved,rejected){
setTimeout(() => {
// let data='成功';
// resolved(data);
let error='失败';
rejected(error);
}, 1000);
});
// 调用promise对象的then方法
p.then((value)=>{
console.log(value);
},(error)=>{
console.log(error);
})
//promise封装ajax请求
const p=new Promise((resolve,reject)=> {
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.apiopen.top/getJoke');
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
console.log(xhr.response);
} else {
console.error(xhr.status)
}
}
}
})
p.then((value)=>{
console.log(value);
},(err)=>{
console.log(err)
})
13、Set
新的数据结构Set(集合)。类似于数组，但是成员的值都是唯一的，集合实现了iterator接口，可以使用扩展运算符和for…of进行遍历。集合的属性和方法：
1）size：返回集合的元素个数；
2）add：增加一个新元素，返回当前集合；
3）delete：删除元素，返回Boolen值；
4）has：检测集合中是否包含某个元素，返回Boolen值
5）clear：清空数组里的内容
14、map
map类似于对象，也是键值对的集合。但是’键’的范围不限于字符串，各种类型的值都可以当做键。map也实现了iterator接口，可以使用扩展运算符和for…of进行遍历。map的属性和方法：
1）size：返回map的元素个数；
2）set增加一个新元素，返回当前map；
3）get：返回键名对象的键值；
4）has：检测map中是否包含某个元素，返回Boolen值
5）clear：清空集合，返回underfined
15、class
通过class可以定义类，让对象原型的写法更加清晰、更像面向对象编程的语法。
1）class声明类
2）constructor定义构造函数初始化；
3）extends继承父类；
4）super调用父级构造方法
5）static定义静态方法和属性
6）父类方法可以重写
es6中类的继承：
class Phone{
// 构造方法
constructor(brand,price){
this.brand=brand;
this.price=price;
}
// 父类的成员属性
call(){
console.log('打电话')
}
}
class SmartPhone extends Phone{
// 构造方法
constructor(brand,price,color,size){
// 子类继承父类的方法
super(brand,price);//相当于Phone.call(this,brand,price)
this.color=color;
this.size=size;
}
phone(){
console.log('拍照');
}
playGame(){
console.log('玩游戏');
}
}
const mi=new SmartPhone('米',1999,'white','5.5inch');
console.log(mi);
mi.call();
mi.phone();
mi.playGame();
16、对象方法扩展
1.Object.is 判断两个值是否完全相等 console.log(Object.is(23,23))
2.Object.assign 对象的合并
const f1={
name:'11',
sex:'female',
other:'haha'
}
const f2={
name:'22',
sex:'male',
hobby:'singing'
}
console.log(Object.assign(f1,f2));
3.Object.setPrototypeOf 给实例对象的构造函数设置原型对象 Object.getPrototypeof
17、模块化
模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来
好处：1.防止命名冲突；2.代码复用；3.高维护性
模块功能主要由两个命令构成：export(用于规定模块的对外接口)和import(用于输入其他模块提供的功能)。
// html代码
// js文件代码
//分别暴露
export let name='11';
export function teach(){
console.log('haaahahahaha');
}
//或者:统一暴露
export {name,teach}
//或者：默认暴露
export default{
//在这里写入要暴露的信息
}
