ES6重点总结

ES6最重要最复杂的知识点： 1. 类和继承 2.promise 3. ES6模块化

与深拷贝相关的知识点

1. Object.assgin()方法: 可以实现第一层对象的深拷贝
2. 简单粗暴的深拷贝

 

JSON.parse(JSON.stringify(obj))

1. 完整的深拷贝： 参考网上资料

常见的数组方法

下面的方法都有回调函数，回调的两个形参分别为项目值和索引
除了forEach, 其它的方法都需要return

1. arr.forEach()
2. arr.map()
3. arr.filter()
4. arr.some()
5. arr.every()
6. arr.reduce()

let: 声明块级作用域

• 不存在声明提前的问题
• 在同一个块中，不能重复声明
• 通过let可获取正确的索引

 

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

const: 声明常量

• const也是块级作用域
• 声明的同时要赋值

箭头函数

 

arr.forEach(()=>{})
setInterval(()=>{},1000)

let fun = ()=>{}
let fun = x => {}
let fun = (x,y) => {}
let fun = (x,y) => 3
let fun = (x,y) => ({
        name: 1,
        age: 2
    })

箭头函数的this指向

箭头函数自身没有this,它内部的this是定义箭头函数所在环境的this

 

        box.onclick = function(){
            // console.log(this);
            let i  = 0
            setInterval(()=>{
                this.innerHTML = i;  //this是box
                i++
            },1000)
        }

对象字面量的简写

 

    let color = 'red',
        age = 18;

    let obj = {
        color,
        age,
        run(){
            console.log('run')
        }
    }

类和继承

定义父类

 

class Animal {
    constructor(color){
        this.type = 'animal';
        this.eye = true;
        this.color = color;
    }
    sound(){
        console.log('sound')
    }
}

var ani = new Animal('red')

定义子类

 

class Cat extends Animal{
    constructor(nickname,age,color){
        super(color);
        this.nickname = nickname;
        this.age = age;
    }
    eat(){
        console.log('eat')
    }
}
var cat = new Cat('小猫咪',5,'white')
cat.sound()

模板字符串

 

    let color = 'red';
    let str = `this is ${color}`

解构赋值

 

    let obj = {
            title: 'aaaa',
            price: 300,
            discount: 200
        }

    let {title,price} = obj;

展开运算符

把数组中的值打散，一个一个罗列

 

        let arr = [34, 56, 78];

        function total(Ch, En, Math) {
            return Ch + En + Math;
        }
        let result = total(...arr)

 

        let divList = document.querySelectorAll("div");

        //伪数组可以调用 forEach,不能调用其它数组的遍历方法
        divList.forEach((el)=>{
            console.log(el);
        })

        var arr = [...divList].map((el)=>{
            return el.innerHTML
        })
        console.log(arr);

默认参数

 

        function draw(radius=100){
            console.log(radius);
        }
        draw(30)

        // 默认(default)参数必须设置在最后
        function draw(y,x=2,z=20){
            console.log(x,y,z);
        }

        draw(1)
        draw(1,3)

剩余参数

 

        function total(...args){
            console.log(args);
            console.log(args instanceof Array);  //true
        }
        total(23,45)

Symbol数据类型

获取唯一的不会重复的变量，是ES6新增的基本数据类型

 

        // Symbol的应用场景

        //第三方的库中定义了一个对象(对用户来讲是隐蔽的)

        let obj = {
            name: '23',
            count() {
                console.log('count');
            }
        }

        // 对对象的功能进行扩展：希望用一个一定不会和对象已有属性重复的属性名

        let count = Symbol();

        obj[count] = function(){
            console.log('数量');
        }

        obj.count()  // count
        obj[count]();  //数量

Set类型的数据

是ES6中新增的集合的数据类型，用来存放数组。但是，数组的元素不允许重复

数组去重

 

    var arr = [1,2,3,2,5,1]
    var result = [...new Set(arr)]
    console.log(result);

Set常用的API

 

        1. add
        2. delete
        3. has
        4. clear

for...of语句

• for: （1）需要明确遍历次数 (2)不能遍历对象，可以遍历对象以外的集合 array,伪数组 （3）可以使用break和continue
• forEach: (1) 可以遍历对象以外的集合 （数组，Set, NodeList--->dom集合） （2）不能使用break和continue
• for...in (1)遍历对象 (2)不能直接访问对象的属性值 (3)（3）可以使用break和continue
• 新增的for...of:
  (1) 自定义的对象不能使用for...of,但大部分原生的数据集合都可以使用 (数组、字符串、Set类型、Map类型、NodeList)
  (2)可以使用break和continue

 

    //作用于数组
    var arr = ['a','c','d']
        for(let i of arr){
            console.log(i);
        } 

 

//作用于元素节点NodeList
    let divList = document.querySelectorAll("div");
        for (let el of divList){
            console.log(el);
        }

Object的API

1. Object.assign: 合并对象
2. Object.keys()： 返回对象所有键组成的集合

 

        let obj = {
            name: 'Peppa',
            age: 4,
            sex: '女'
        }
        // ["name","age","sex"]
        console.log(Object.keys(obj));

Map类型的数据

类似于对象，用来存储键值对。

对象只能使用字符串作为属性名，而Map可以使用任意类型的数据做为属性名

 

//第一个键是"a",值是1, 第二个键是b,值是2
        var map1 = new Map([["a",1],["b",2]]);
        console.log(map1);

Map的API

 

        属性: size 
        方法: set , get , has, delete ,clear

for...of 遍历

 

    var map1 = new Map([["a", 1], ["b", 2]]);
        
        //只遍历键
        for (let key of map1.keys()){
            console.log(key);
        }

        // 只遍历值
        for (let val of map1.values()){
            console.log(val);
        }


        // val是数组，存储了每一个的键和值
        for (let val of map1){
            console.log(val[0]);
            console.log(val[1]);
        }

        //同时返回键值对
        for (let [key,value] of map1){
            console.log(key);
            console.log(value);
        }

        // 等价于上面的写法
        for (let [key,value] of map1.entries()){
            console.log(key);
            console.log(value);
        }

Promise:

• promise用来解决回调地狱的问题，把异步的代码用同步的方式来实现

    - Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。
    它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。
  
    - 一个Promise的三种状态
    pending: 初始状态，既不是成功，也不是失败状态。
    fulfilled: 意味着操作成功完成。
    rejected: 意味着操作失败。
  
    - Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由 JavaScript 引擎提供，不用自己部署。
    Resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；
    Reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。
  
    - Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。
  
  
    ```
        // 需求： ajax1执行完再执行ajax2,ajax2执行完再执行task
        function ajax1() {
            setTimeout(function () {
                console.log('ajax1');
            }, 1000)
        }
        function ajax2() {
            setTimeout(function () {
                console.log('ajax2');
            }, 2000)
        }
        function task() {
            console.log('task');
        }
    ```
  
    用Promise实现
    ```
    var flag1 = true;
    var flag2 = false;
  
    function error(err) {
        console.log(err);
    }
    function ajax1() {
        return new Promise((resolve, reject) => {
            setTimeout(function () {
                if (flag1) {
                    resolve('ajax1的结果')
                } else {
                    reject('ajax1错误')
                }
            }, 1000)
        })
    }
  
    function ajax2(data) {
        return new Promise((resolve, reject) => {
            setTimeout(function () {
                console.log('ajax2接收ajax1的参数', data);
                if (flag2){
                    resolve()
                }else{
                    reject('ajax2错误')
                }
            }, 2000)
        })
    }
  
    function task() {
        console.log('task');
    }
  
    ajax1()
        .then(ajax2)
        .then(task)
        .catch(error)
    ```