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!
ES6在工作中会用到的核心知识点讲解的更多相关文章
- 学习ES6笔记──工作中常用到的ES6语法
学习博客:https://segmentfault.com/a/1190000016068235
- 工作中,ES6 可能掌握这些就足够了
刚开始用vue或者react,很多时候我们都会把ES6这个大兄弟加入我们的技术栈中.但是ES6那么多那么多特性,我们需要全部都掌握吗?秉着二八原则,掌握好常用的,有用的这个可以让我们快速起飞. 接下来 ...
- ES6工作中常用知识点
好久不动笔了 第一个知识点:import 和 export import导入模块.export导出模块 //全部导入 import people from './example' //有一种特殊情况, ...
- 随机记录工作中常见的sql用法错误(一)
没事开始写博客,留下以前工作中常用的笔记,内容不全或者需要补充的可以留言,我只写我常用的. 网上很多类似动软生成器的小工具,这类工具虽然在表关系复杂的时候没什么软用,但是在一些简单的表结构关系还是很方 ...
- 工作中常用的js、jquery自定义扩展函数代码片段
仅记录一些我工作中常用的自定义js函数. 1.获取URL请求参数 //根据URL获取Id function GetQueryString(name) { var reg = new RegExp(&q ...
- 工作中那些提高你效率的神器(第二篇)_Listary
引言 无论是工作还是科研,我们都希望工作既快又好,然而大多数时候却迷失在繁杂的重复劳动中,久久无法摆脱繁杂的事情. 你是不是曾有这样一种想法:如果我有哆啦A梦的口袋,只要拿出神奇道具就可解当下棘手的问 ...
- 工作中那些提高你效率的神器(第一篇)_Everything
引言 无论是工作还是科研,我们都希望工作既快又好,然而大多数时候却迷失在繁杂的重复劳动中,久久无法摆脱繁杂的事情. 你是不是曾有这样一种想法:如果我有哆啦A梦的口袋,只要拿出神奇道具就可解当下棘手的问 ...
- Atitit 软件开发中 瓦哈比派的核心含义以及修行方法以及对我们生活与工作中的指导意义
Atitit 软件开发中 瓦哈比派的核心含义以及修行方法以及对我们生活与工作中的指导意义 首先我们指明,任何一种行动以及教派修行方法都有他的多元化,只看到某一方面,就不能很好的评估利弊,适不适合自己使 ...
- C# 工作中遇到的几个问题
C# 工作中遇到的几个问题 1.将VS2010中的代码编辑器的默认字体“新宋体”改为“微软雅黑”后,代码的注释,很难对齐,特别是用SandCastle Help File Builder生成帮助文档 ...
随机推荐
- pandas的学习2-选择数据
import pandas as pd import numpy as np dates = pd.date_range('20130101', periods=6) df = pd.DataFram ...
- js 点击按钮下载图片,另存为
js: 1 $(document).on('click',"#xiazai",function(){ 2 imgurl = $(".img-box").find ...
- zabbix学习(一)——LNMP环境搭建及zabbix安装
第一部分:LNMP环境搭建 一.环境说明: OS: centos7.6_x64nginx:nginx-1.16.0php: php-7.1.11mysql:mysql-5.6.44 zabbi ...
- 给小白整理的一篇Python知识点
1.基本概念 1.1 四种类型 python中数有四种类型:整数.长整数.浮点数和复数. python中数有四种类型:整数.长整数.浮点数和复数. 整数, 如 1 长整数 是比较大的整数 浮点数 如 ...
- NET 5 原子操作、接口限流Semaphore以及性能测试JMeter
一.Semaphore 限流也可使用令牌桶算法+redis 1.Semaphore定义 类似互斥锁,但它可以允许多个线程同时访问一个共享资源 通过使用一个计数器来控制对共享资源的访问,如果计数器大于0 ...
- Sentinel并发限流不精确-之责任链
在之前调研Sentinel的过程中,为了准备分享内容,自己就简单的写了一些测试代码,不过在测试中遇到了一些问题,其中有一个问题就是Sentinel流控在并发情况下限流并不精确,当时我还在想,这个我 ...
- 超详细的第一个Servlet程序
Servlet的第一个程序! 首先查看官方文档,来编写我们的第一段代码 1.先启动Tomcat,确保我们能够正常访问. 2.http://localhost:8080/examples/ 查看 ...
- java 反射给字段重新赋值
1.获取实体的所有字段,遍历 2.获取字段类型 3.调用字段的get方法,判断字段值是否为空 4.如果字段值为空,调用字段的set方法,为字段赋值 Field[] field = model.getC ...
- [Machine Learning] 单变量线性回归(Linear Regression with One Variable) - 线性回归-代价函数-梯度下降法-学习率
单变量线性回归(Linear Regression with One Variable) 什么是线性回归?线性回归是利用数理统计中回归分析,来确定两种或两种以上变量间相互依赖的定量关系的一种统计分析方 ...
- Keil4 uVision软件生成hex文件
keil4下载地址:http://www.pc6.com/softview/SoftView_236836.html 按图操作即可,注意文件夹选择. 1.选择工程,选择第一个new uvision p ...