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=`<ul>
          <li>嘻嘻</li>  
          <li>哈哈</li>  
          <li>呵呵</li>  
        </ul>`

// 变量拼接
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代码
<script type="module">
	import * as test from './test.js';//通用的导入方式
	import {name,teach} from './test.js'//解构赋值形式
	import test from './test.js';//简便形式，针对默认暴露
	console.log(test)
</script>
// js文件代码
//分别暴露
export let name='11';
export function teach(){
    console.log('haaahahahaha');
}
//或者:统一暴露
export {name,teach}
//或者：默认暴露
export default{
//在这里写入要暴露的信息
}