谈一谈ES6常用语法与小技巧

ES6出来已经很多年了,最近有点时间,就顺便总结一下ES6的语法特性。知识多回归感觉还是不一样的,俗话说:“温故而知新,可以为师矣”。现在就来温故一下~

1.let与const

let 用来声明变量,并且会在当前作用域形成代码块.
conts 用来声明常量,所谓常量就是物理指针不可以更改的变量

对于不变的常量都用const,如: const PI = 3.14159;

对于当前作用域下的变量要用let, 如:

在这里顺便提一下let和const都是块作用域,在作用域之外输出是会报错的,如:

const除了不变的特性外其余的都跟let一样,但const还是可以这样用的,如:

顺便提一下语法规范,用const的时候记得和let隔开一行,如:

2.字符串

e6为我们提供了模板字符串,这个特性很大的方便了我们的一些日常需求,以前我们拼接字符串的时候都是

3.数组

Array.from

Array.from可以将两类对象转为真正的数组, 类似数组的对象(array-like object)和可遍历(iterable)的对象(包括ES6新增的数据结构Set和Map,他们都部署了iterator接口,字符串等),如:

Array.from也接受第二个参数,作用就相当于遍历整个数组对每一项值做出相应的操作,并返回原数组,如:

Array.of

Array.of() 方法创建一个具有可变数量参数的新数组实例,而不考虑参数的数量或类型。

Array.of() 和 Array 构造函数之间的区别在于处理整数参数:Array.of(7) 创建一个具有单个元素 7 的数组,而 Array(7) 创建一个长度为7的空数组(注意:这是指一个有7个空位的数组,而不是由7个undefined组成的数组), 如:

find()与findIndex()

find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。

数组扩展运算符

includes()

includes() 方法用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回false。

4.函数

函数传参可赋默认值

参数扩展运算符书写

扩展运算符可以明确指定你需要哪些参数,并且得到的是一个真实的数组,而不是 arguments 这样的类数组对象, 如:

箭头函数

箭头函数提供了更简洁的语法,并且箭头函数中 this 对象的指向是不变的,this对象绑定定义时所在的对象。

关于什么时候不能用箭头函数,可以参考一下这篇文章(链接标题),这里不多阐述

5.对象

属性的简洁表示法

ES6 允许直接写入变量和函数,作为对象的属性和方法。如:

属性名表达式

ES6 允许字面量定义对象时,用表达式作为对象的属性名,即把表达式放在方括号内, 如:

Object.is()

Object.is()方法判断两个值是否是相同的值。如果下列任何一项成立,则两个值相同:

两个值都是 undefined
两个值都是 null
两个值都是 true 或者都是 false
两个值是由相同个数的字符按照相同的顺序组成的字符串
两个值指向同一个对象
两个值都是数字并且
都是正零 +0
都是负零 -0
都是 NaN
都是除零和 NaN 外的其它同一个数字
这种相等性判断逻辑和传统的 == 运算符所用的不同,== 运算符会对它两边的操作数做隐式类型转换(如果它们类型不同),然后才进行相等性比较,(所以才会有类似 "" == false 为 true 的现象),但 Object.is 不会做这种类型转换。

这与===运算符也不一样。===运算符(和==运算符)将数字值-0和+0视为相等,并认为Number.NaN不等于NaN。如:

Object.assign()

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

Object.assign拷贝的属性是有限制的,只拷贝源对象的自身属性(不拷贝继承属性),也不拷贝不可枚举的属性(enumerable: false)。如:

Object.assign方法实行的是浅拷贝,而不是深拷贝。也就是说,如果源对象某个属性的值是对象,那么目标对象拷贝得到的是这个对象的引用。如:

Object.values()

Object.values()方法返回一个给定对象自身的所有可枚举属性值的数组,值的顺序与使用for...in循环的顺序相同 ( 区别在于 for-in 循环枚举原型链中的属性 )。如:

对象的扩展运算符

如果想完整克隆一个对象,还拷贝对象原型的属性,可以采用下面的写法。如:

解构赋值

对象的解构赋值用于从一个对象取值,相当于将目标对象自身的所有可遍历的(enumerable)、但尚未被读取的属性,分配到指定的对象上面。所有的键和它们的值,都会拷贝到新对象上面。

6.Promise对象

Promise 对象是一个代理对象(代理一个值),被代理的值在Promise对象创建时可能是未知的。它允许你为异步操作的成功和失败分别绑定相应的处理方法(handlers)。 这让异步方法可以像同步方法那样返回值,但并不是立即返回最终执行结果,而是一个能代表未来出现的结果的promise对象。

接下来看一个基本粒子,如:

Promise实例生成以后,可以用then方法分别指定resolved状态和rejected状态的回调函数。如:

Promise 新建后就会立即执行,如:

使用Promise包装了一个图片加载的异步操作。如果加载成功,就调用resolve方法,否则就调用reject方法。如:

一般来说,调用resolve或reject以后,Promise 的使命就完成了,后继操作应该放到then方法里面,而不应该直接写在resolve或reject的后面。所以,最好在它们前面加上return语句,这样就不会有意外。如:

then()

then方法返回的是一个新的Promise实例(注意,不是原来那个Promise实例)。因此可以采用链式写法,即then方法后面再调用另一个then方法。

采用链式的then,可以指定一组按照次序调用的回调函数。这时,前一个回调函数,有可能返回的还是一个Promise对象(即有异步操作),这时后一个回调函数,就会等待该Promise对象的状态发生变化,才会被调用。如:

catch()

catch() 方法返回一个Promise,并且处理拒绝的情况。它的行为与调用Promise.prototype.then(undefined, onRejected) 相同。 (事实上, calling obj.catch(onRejected) 内部calls obj.then(undefined, onRejected))

一般来说,不要在then方法里面定义 Reject 状态的回调函数(即then的第二个参数),总是使用catch方法, 如:

catch方法之中,还能再抛出错误,如:

finally()

finally() 方法返回一个Promise,在执行then()和catch()后,都会执行finally指定的回调函数。避免同样的语句需要在then()和catch()中各写一次的情况。

finally() 虽然与 .then(onFinally, onFinally) 类似,它们不同的是:

调用内联函数时,不需要多次声明该函数或为该函数创建一个变量保存它。
由于无法知道promise的最终状态,所以finally的回调函数中不接收任何参数,它仅用于无论最终结果如何都要执行的情况。

与Promise.resolve(2).then(() => {}, () => {}) (resolved的结果为undefined)不同,Promise.resolve(2).finally(() => {}) resolved的结果为 2。
同样,Promise.reject(3).then(() => {}, () => {}) (resolved 的结果为undefined), Promise.reject(3).finally(() => {}) rejected 的结果为 3。

在finally回调中抛出(或返回被拒绝的promise)将拒绝新的promise,并在调用throw()时指定拒绝原因

all()

Promise.all(iterable) 方法返回一个 Promise 实例,此实例在 iterable 参数内所有的 promise 都“完成(resolved)”或参数中不包含 promise 时回调完成(resolve);如果参数中 promise 有一个失败(rejected),此实例回调失败(reject),失败原因的是第一个失败 promise 的结果。

race()

race()函数返回一个 Promise,它将与第一个传递的 promise 相同的完成方式被完成。它可以是完成( resolves),也可以是失败(rejects),这要取决于第一个完成的方式是两个中的哪个。

如果传的迭代是空的,则返回的 promise 将永远等待。如果迭代包含一个或多个非承诺值和/或已解决/拒绝的承诺,则 Promise.race 将解析为迭代中找到的第一个值,如:

(继续完善....)

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复