ES6在工作中会用到的核心知识点讲解

一、var, let, const

谈到ES6,估计大家首先肯定会想到var,let,const
咱就先谈谈这三者的区别

var a = 3;
{
    var a = 4;
}
console.log(a);//4

let b = 5;
{
    let b = 6;
}
console.log(b);//5

const c = 7;
{
    const c = 8;
}
console.log(c);//7
c = 9;//报错 Uncaught TypeError: Assignment to constant variable.

很简单吧,
var声明的变量可以重新声明,并且是全局作用域
let声明的变量不可以重新声明,并且是局部作用域
const声明的变量不可以重新声明,并且不可以更改值局部作用域(声明的是对象的话,可以更改对象里面某个属性的值)
针对const,再举个例子:

const d = {
    id: 123
};
console.log(d.id);//123
d.id = 456;
console.log(d.id);//456
d = 567;//报错 Uncaught TypeError: Assignment to constant variable.

在实际中,let经常用在for循环上

二、Promise

谈到Promise,首先先谈一下jQuery的Ajax请求,工作中采用Ajax的通常都会在success回调函数之后,进行一系列的DOM相关操作,实际中,可能还会遇到在success后,再次发送一个Ajax请求,接着继续在success里面写一些其他代码,如果多的话,便会产生回调地狱,而引入Promise就是为了解决以上的问题。毕竟异步请求大多采用这个了。回调函数已经不香了
在Vue项目中,我想axios大家不会陌生吧,这个便是使用Promise结合XMLHttpRequest进行的封装。Ajax是XMLHttpRequest进行的封装。
其实很简单的,稍微介绍下

Promsie(function(resolved, rejected){});//使用方法,Promise是构造函数,不是基础类型。参数是一个具有两个函数参数的一个函数。

在Promise中,有三种状态:Pending(进行中)、Resolved(已完成)和Rejected(已失败)。一旦执行,返回的结果只有后面两种的其中的一个。这正好印证了Promise英文承诺的意思。
这个构造函数有两个参数,第一个参数指的是成功后执行resolve方法,失败后执行rejected方法。这两个参数是方法,就是所谓的回调函数。
Promise的本质就是回调函数。
举个例子:

var pro = new Promise(function (resolve, reject) {
    try {
        var a = 3;//可以更改值,触发reject函数
        if (a == 3) {//a==3
            setTimeout(() => {
                a = 6;
                resolve(a);//异步执行获取到的数据,传递到resolve函数里面
            }, 3000);
        }
        else {//a!=3
            reject(8);
        }

    }
    catch (err) {
        console.log(err);
    }
});
pro.then(function (data) {
    console.log(data);//then的第一个参数就是上面的promise中,resolve调用的数据
}, function (err) {
    console.log(err);//道理同上,是reject调用的数据
});

三、箭头函数跟this

关于this,只需要记住一句话:
this指向调用它的对象。
想要彻底理解,还是需要一定的时间多思考思考的。
怎么理解呢?
举个例子

//先来个闭包
var name = "The Window";
var object = {
    name: "My Object",
    getNameFunc: function () {
        var that = this;
        return function () {
            console.log(this.name);
            console.log(that.name);
        }
    }
};
object.getNameFunc()();//先打印出 The Window 再打印出 My Object

上面用到了闭包,理解闭包
首先分析下代码,执行object.getNameFunc()返回的是一个函数,然后再执行返回的这个函数。在这里,执行返回的函数其实是由window调用的,所以这里的this指向的是window,而不是object。
那么箭头函数到底解决了什么样的问题?
请继续看下面的代码

var name = "The Window";
var object = {
    name: "My Object",
    getNameFunc: function () {
        //var that = this;
        return () => {           
            console.log(this.name);
        }
    }
};
object.getNameFunc()();//打印出My Object

正如上面的代码,省略了var that=this; 不需要再通过变量来保存this了。关于this跟that在Vue项目中,我们经常会用到,而且经常会碰到this指向问题,需要再定义一个that保存this指向。而ES6引入箭头函数,便很好地解决了这个问题。

call跟apply,更改this指向

关于this指向问题,不得不谈下call跟apply这两个方法。因为这两个方法是可以改变this指向。
详细介绍下:
举个例子

var name = "The Window";
var object = {
    name: "My Object",
    getNameFunc: function () {
        //var that = this;
        return function (x, y) {
            console.log(this.name);
            console.log(x + y);
            //console.log(that.name);
        }
    }
};
object.getNameFunc().call(object, 1, 2);//call的使用,将this指向object
object.getNameFunc().apply(object, [1,2]);//apply的使用    call跟apply一样的,仅仅是参数不同。

四、三个点(...)的使用

啰嗦一句,这三个点叫法,还挺多的,有的叫展开运算符,有的叫剩余运算符、解构运算符啥的等。
说下实际使用场景,也就是为啥ES6要引入这个。
1、数组合并

let a = [1, 2, 3];
let b = [4, 5, 6];
let c = [...a, ...b];
let d = a.concat(b);
console.log(c);//[1, 2, 3, 4, 5, 6]
console.log(d);//[1, 2, 3, 4, 5, 6]

正如代码,使用...可以代替concat。
2、解构赋值

var res.data={
    "animals": {
        "dog": [
            {
                "name": "Rufus",
                "age":15
            },
            {
                "name": "Marty",
                "age": null
            }
        ]
    }
};
//要取到animals的值,我们通常是怎么做的?
var animals = res.data.animals;
var { animals } = res.data;//以下是使用ES6的做法,这便是优势,如果是数组的话,道理一样

let [a, [[b], c], ...d] = [1, [[2], 3], 4, 5, 6];
console.log(a);//1
console.log(b);//2
console.log(c);//3
console.log(d);//[4,5,6]

3、两数交换
顺便复习下选择排序算法。

//选择排序
function selectionSort(arr) {
    var len = arr.length;
    var minIndex, temp;
    for (let i = 0; i < len - 1; i++) {
        minIndex = i;
        for (let j = i + 1; j < len; j++) {
            if (arr[j] < arr[minIndex]) {
                minIndex = j;
            }
        }
        temp = arr[i];
        arr[i] = arr[minIndex];
        arr[minIndex] = temp;

        //这里的两数交换,3行代码可以写成1行
        [arr[i]] = [arr[minIndex]];
    }
    return arr;
}

在vuex中,经常会遇到的。

...mapGetters({
  // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
  doneCount: 'doneTodosCount'
})
人生莫惧少年穷,趁着年轻,好好规划自己的人生!!!

本篇完 End!

posted @ 2021-01-26 13:31  打游戏也要有梦想  阅读(426)  评论(0编辑  收藏  举报