ES6重点知识点总结

2021-02-23 本文已影响0人 alicemum

ES6最重要最复杂的知识点： 1. 类和继承 2.promise 3. ES6模块化(在vue中讲)

与深拷贝相关的知识点

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

JSON.parse(JSON.stringify(obj))

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

常见的数组方法

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

arr.forEach()
arr.map()
arr.filter()
arr.some()
arr.every()
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

Object.assign: 合并对象
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)
  ```