ES6重点知识总结

最新推荐文章于 2022-10-21 22:12:05 发布

錯過一個夏天

最新推荐文章于 2022-10-21 22:12:05 发布

阅读量150

点赞数 1

文章标签： javascript vue.js html5

本文链接：https://blog.csdn.net/ply6686/article/details/120634960

版权

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)

Promise.all() Promise.race()

Promise.all() 两个异步操作都成功完成后，再执行的逻辑
Promise.race() 最先得到结果的异步操作执行成功，即执行下面的逻辑
all()和race()中的参数必须是promise实例

   Promise.all([ajax1(),ajax2()])
           .then(function(data){
               console.log('两个请求都成功后的数据',data);
               task(data)
           })
           .catch(err)

   Promise.race([ajax1(), ajax2()])
           .then(function (data) {
               console.log('请求返回最快的任务的结果', data);
               task(data)
           })
           .catch(err)

async和await的用法

async: 定义一个异步函数,消除promise中then的链式调用，让代码更加清晰，优雅
await后面接一个会return new promise的函数并执行它
await只能放在async函数里
async函数通过try...catch处理失败时要执行的逻辑

    var flag1 = false;
        var flag2 = true;
        function ajax1() {
            return new Promise((resolve, reject) => {
                setTimeout(function () {
                    console.log('ajax1任务执行完毕');
                    if (flag1) {
                        resolve('ajax1的结果')
                    } else {
                        reject('ajax1错误')
                    }
                }, 1000)
            })
        }
        function ajax2(data) {
            return new Promise((resolve, reject) => {
                setTimeout(function () {
                    console.log('ajax2', data);
                    console.log('ajax2任务执行完毕');
                    if (flag2) {
                        resolve('ajax2的结果')
                    } else {
                        reject('ajax2错误')
                    }
                }, 2000)
            })
        }
        function task(data) {
            console.log('task任务执行完毕');
            console.log('task', data);
        }
       

        async function render() {
            try {
                let result1 = await ajax1()
                await ajax2(result1)
                task()
            }catch(err){
                console.log('catch',err);
            }
        }
        render()

Object.defineProperty()

定义对象的属性

let obj = {
    name: '西游记',
    addTime: '739754975945489'
}

//必须使用一个临时变量，来存储name属性的值
let temp = obj.name;


// 拦截器
Object.defineProperty(obj,"name",{
    //存取器
    get: function(){
        console.log('get');
        //get中一定要有return,return的结果即为name属性的新值
        return "《" + temp + "》"
    },
    set: function(newVal){
        console.log('set');
        temp = newVal;
    }
})

obj.name = "窗边的小豆豆";
console.log(obj.name);