JavaScript

为ES7&ES7+新特性开一个Note

ES语法小特性小记

Posted by Ray on 2017-12-24

前言

ES6较ES5来说可能是一个较大的版本变动，增添了很多特性或者语法糖，使得整个JS语言的使用体验又向前迈了一大步，但是ES6（ECMAScript2015）之后，每一年都会有新的语言强化版本更新出现，所谓的ES7等，这些变动都没有再像ES6那么多。加之很多新特性在正式发布之前就一定会至少有两个成熟的实现支持，使得在ES6之后，新增特性版本上就变得很模糊了，尤其是在Node环境中，有些时候对于一些小的地方的新特性你都已经写了很多次了都有可能不知道用的到底是哪个版本了。

我本地和开发环境都已经迁移和更新到了Node的最新LTS版本8.9.4对新版本的语法支持都做得已经很好了，以下特性虽然归在ES6之后的版本，但是Node已经有了支持。而对于语言的新语法特性来说，个人认为最好的方式就是理解语言重要部分之外多关注语言，然后多积累吧。所以我把这篇文章当做是一个对ES6之后的语法的一些“小地方”的一个笔记，记录积累那些小的特性或者语法，当然一些重要的地方比如说像共享内存和原子操作等这种，感觉内容很多的块就不会在这里记了。

以前刚学PY的时候觉得python中的装饰器这种这么骚气的语法糖为啥JS不弄一个，结果一查JS的Decorator（装饰器）草案已经提出了。

不管是哪一款优秀的开源框架还是哪一门优秀并且开发者使用的多的语言，往前发展都会对其他优秀的框架语言进行借鉴，这种看似竞争实则携手发展的面貌对于开发者来说本身就是一份回馈也是一份督促。

开始

**表示乘方

1
console.log(2**3)//输出8

Trailing commas（函数参数的尾逗号）

之前数组的最后一个元素和对象的最后一个属性后面都可以加逗号，现在函数的最后一个参数后面可以加逗号了

1
2
3
4
function f(
	a,
	b,
)

数组新增了includes()方法

在之前判定数组中是否包含某个元素的方式是indexOf,返回值如果是-1则表示没有包含，现在用[].includes(ele)返回值为Bollean可以判断是否包含了。

1
2
3
let a = [1,2,3]
a.includes(1)//返回值为true
a.includes(4)//返回值为false

str.padStart()和str.padEnd()

字符串新增了两个方法，参数是number，表示当字符串的长度达不到方法的参数的长度时在末尾或者开头用空格补齐长度

1
2
3
let b = 'abc'
b.padStart(5)//返回值为'  abc'
b.padEnd(5)//返回值为'abc  '

对象的Rest&Spread

对于数组的REST和Spread已经是经常用的了，对于对象的属性的Rest和Spread与之类似

1
2
3
4
5
6
7

let {x,y,...z}={x:1,y:2,z:3,d:4}
console.log(x)//1
console.log(z)//输出{ z: 3, d: 4 }

let n = {x,y,...z}
console.log(n)//输出{x:1,y:2,z:3,d:4}

Object.values(obj)和Object.entries(obj)

在ES5引入了遍历对象key的方法Object.keys(obj)之后再ES8新增了新的对应遍历对象值的方法。三者的返回值都是数组。

Object.values(obj)返回的是对应的value数组

1
2
3
4
5
let obj = {a:1,b:2}
Object.values(obj)//输出[ 1, 2 ]
for (let value of Object.values(obj)) {
  console.log(value); // 1, 2
}

Object.entries(obj)返回的是有每一对键值对数组组成的数组。

1
2
3
4
5
let obj = {a:1,b:2}
Object.entries(obj)//输出[ [ 'a', 1 ], [ 'b', 2 ] ]
for (let [key, value] of Object.entries(obj)) {
  console.log([key, value]); // ['a', 1], ['b', 2]
}

Object.getOwnPropertyDescriptors(obj)获取属性信息

由之前的Object.getOwnPropertyDescriptor(obj,'propName')而来返回的是对象所有属性的描述信息,返回值是一个对象。

1
2
3
4
5
6
7
8
9
10
11
12
let a = {x:1,y:1,z:2}
Object.getOwnPropertyDescriptors(a)
||输出值
\/
{ x: { value: 1, writable: true, enumerable: true, configurable: true },
  y: { value: 1, writable: true, enumerable: true, configurable: true },
  z: { value: 2, writable: true, enumerable: true, configurable: true } }
====================================================  
Object.getOwnPropertyDescriptors(a,'x')
||输出值
\/
{ value: 1, writable: true, enumerable: true, configurable: true }

补充：
ES5开始对象的属性都具备了属性描述符

Object.defineProperty定义对象属性

Object.defineProperty( myObject, "a", {
    value: 2,
        writable: true, 
        configurable: true, 
        enumerable: true
     } );

说明：

  1. writable:是否可写；即值是不是能被set变，严格模式下修改writable：false的属性值是会抛出错误

  2. Configurable是否可用Object.defineProperty来配置，改为false之后则不管是不是严格模式下在想来修改属性描述都会抛出错误，并且被修改为不可配置的这个属性不能用delete myObject.a 这种方式删掉

  3. Enumerable控制的是属性是否会出现在对象的属性枚举中，比如for..in 循环（但是可以通过 in 操作符来判断是否存在），“可枚举”相当于“可以出现在对象的属性遍历中”判断是否可枚举myObject.propertyIsEnumerable( “a” );

  • 关于in 和 obj.hasOwnProperty()

in 操作符会检查属性是否在对象及其 Prototype 原型链中。相比之下， hasOwnProperty(..) 只会检查属性是否在 myObject 对象中，不会检查 Prototype 链。

Async&Await

异步的“终极解决方案”，已经是很常用的东西了，在这里就不过多介绍了。

由于Node的主场景（网络IO和文件IO）和JS的语言特性，异步的处理一直都是一个很大的一块，所以关于异步的总结我会尽快梳理成一篇完整的博客。

后续

后续会有更新和补充。

关于学习，语法这种事情最好的方式就是自己多有意识的多用几次，这样遇到符合使用场景的时候就会可以想到，哪怕细节记得不清了也可以很快解决。由于平时主要在Node端写代码所以测试语法最快的方式就是在node REPL中敲一遍，加深了印象也得到了结果，当然有一个方便查看的表也是很重要的ECMAScript compatibility table

本文为原创文章作为学习交流笔记，如有错误请您评论指教
转载请注明来源：https://isliulei.com/article/ES7-ES7next/
CATALOG
    FEATURED TAGS
    JavaScript
    FRIENDS