10个最佳ES6特性 ES7与ES8的特性

时间  2019-11-11
标签 最佳 es6 特性 es7 es8 栏目 JavaScript 繁體版
原文   原文链接

10个最佳ES6特性原文连接：https://blog.fundebug.com/201...
与ES8特性原文连接：https://blog.fundebug.com/201...
译者按: 人生苦短，我用ES6。前端

原文: Top 10 ES6 Features Every Busy JavaScript Developer Must Knowvue

译者: Fundebugreact

为了保证可读性，本文采用意译而非直译，而且对源代码进行了大量修改。另外，本文版权归原做者全部，翻译仅用于学习。ios

小编推荐：Fundebug专一于JavaScript、微信小程序、微信小游戏，Node.js和Java线上bug实时监控。真的是一个很好用的bug监控服务，众多大佬公司都在使用。es6

ES6，正式名称是ECMAScript2015，可是ES6这个名称更加简洁。ES6已经再也不是JavaScript最新的标准，可是它已经普遍用于编程实践中。若是你还没用过ES6，如今还不算太晚…编程

下面是10个ES6最佳特性，排名不分前后：axios

函数参数默认值
模板字符串
多行字符串
解构赋值
对象属性简写
箭头函数
Promise
Let与Const
类
模块化小程序

1. 函数参数默认值

不使用ES6
为函数的参数设置默认值：微信小程序

function foo(height, color)
{
    var height = height || 50;
    var color = color || 'red';
    //...
}

这样写通常没问题，可是，当参数的布尔值为false时，是会出事情的！好比，咱们这样调用foo函数：数组

foo(0, "", "")
由于0的布尔值为false，这样height的取值将是50。同理color的取值为‘red’。

使用ES6

function foo(height = 50, color = 'red')
{
    // ...
}

2. 模板字符串

不使用ES6
使用+号将变量拼接为字符串：

var name = 'Your name is ' + first + ' ' + last + '.'
使用ES6
将变量放在大括号之中：

var name = Your name is ${first} ${last}.
ES6的写法更加简洁、直观。

3. 多行字符串

不使用ES6
使用“nt”将多行字符串拼接起来：

var roadPoem = 'Then took the other, as just as fair,\n\t'
    + 'And having perhaps the better claim\n\t'
    + 'Because it was grassy and wanted wear,\n\t'
    + 'Though as for that the passing there\n\t'
    + 'Had worn them really about the same,\n\t'

使用ES6
将多行字符串放在反引号之间就行了：

var roadPoem = `Then took the other, as just as fair,
    And having perhaps the better claim
    Because it was grassy and wanted wear,
    Though as for that the passing there
    Had worn them really about the same,`

4. 解构赋值

不使用ES6
当须要获取某个对象的属性值时，须要单独获取：

var data = $('body').data(); // data有house和mouse属性
var house = data.house;
var mouse = data.mouse;

使用ES6
一次性获取对象的子属性：

var { house, mouse} = $('body').data()

对于数组也是同样的：

var [col1, col2]  = $('.column')；

5. 对象属性简写

不使用ES6
对象中必须包含属性和值，显得很是多余：

var bar = 'bar';
var foo = function ()
{
    // ...
}

var baz = {
  bar: bar,
  foo: foo
};

使用ES6
对象中直接写变量，很是简单：

var bar = 'bar';
var foo = function ()
{
    // ...
}

var baz = { bar, foo };

6. 箭头函数

不使用ES6
普通函数体内的this，指向调用时所在的对象。

function foo() 
{
    console.log(this.id);
}

var id = 1;

foo(); // 输出1

foo.call({ id: 2 }); // 输出2

使用ES6
箭头函数体内的this，就是定义时所在的对象，而不是调用时所在的对象。

var foo = () => {
  console.log(this.id);
}

var id = 1;

foo(); // 输出1

foo.call({ id: 2 }); // 输出1

7. Promise

不使用ES6
嵌套两个setTimeout回调函数：

setTimeout(function()
{
    console.log('Hello'); // 1秒后输出"Hello"
    setTimeout(function()
    {
        console.log('Fundebug'); // 2秒后输出"Fundebug"
    }, 1000);
}, 1000);

使用ES6
使用两个then是异步编程串行化，避免了回调地狱：

var wait1000 = new Promise(function(resolve, reject)
{
    setTimeout(resolve, 1000);
});

wait1000
    .then(function()
    {
        console.log("Hello"); // 1秒后输出"Hello"
        return wait1000;
    })
    .then(function()
    {
        console.log("Fundebug"); // 2秒后输出"Fundebug"
    });

8. Let与Const

使用Var
var定义的变量未函数级做用域：

{
  var a = 10;
}

console.log(a); // 输出10

使用let与const
let定义的变量为块级做用域，所以会报错：(若是你但愿实时监控JavaScript应用的错误，欢迎无偿使用Fundebug)

{
  let a = 10;
}

console.log(a); // 报错“ReferenceError: a is not defined”
const与let同样，也是块级做用域。

9. 类

不使用ES6
使用构造函数建立对象：

function Point(x, y)
{
    this.x = x;
    this.y = y;
    this.add = function()
    {
        return this.x + this.y;
    };
}

var p = new Point(1, 2);

console.log(p.add()); // 输出3

使用ES6
使用Class定义类，更加规范，且你可以继承：

class Point
{
    constructor(x, y)
    {
        this.x = x;
        this.y = y;
    }

    add()
    {
        return this.x + this.y;
    }
}

var p = new Point(1, 2);

console.log(p.add()); // 输出3

10. 模块化

JavaScript一直没有官方的模块化解决方案，开发者在实践中主要采用CommonJS和AMD规范。而ES6制定了模块(Module)功能。

不使用ES6
Node.js采用CommenJS规范实现了模块化，而前端也能够采用，只是在部署时须要使用Browserify等工具打包。这里不妨介绍一下CommenJS规范。

module.js中使用module.exports导出port变量和getAccounts函数：

module.exports = {
  port: 3000,
  getAccounts: function() {
    ...
  }
}

main.js中使用require导入module.js：

var service = require('module.js')
console.log(service.port) // 输出3000

使用ES6
ES6中使用export与import关键词实现模块化。

module.js中使用export导出port变量和getAccounts函数：

export var port = 3000
export function getAccounts(url) {
  ...
}

main.js中使用import导入module.js，能够指定须要导入的变量：

import {port, getAccounts} from 'module'
console.log(port) // 输出3000

也能够将所有变量导入：

import * as service from 'module'
console.log(service.port) // 3000

Es7与Es8的特性

ES7只有2个特性:
includes()
指数操做符

ES8的一些特性：

Object.values()
Object.entries()
padStart()
padEnd()
Object.getOwnPropertyDescriptors()
函数参数列表结尾容许逗号
Async/Await
Array.prototype.includes()
不使用ES7
使用indexOf()验证数组中是否存在某个元素，这时须要根据返回值是否为-1来判断：

let arr = ['react', 'angular', 'vue'];

if (arr.indexOf('react') !== -1)
{
    console.log('React存在');
}

使用ES7
使用includes()验证数组中是否存在某个元素，这样更加直观简单：

let arr = ['react', 'angular', 'vue'];

if (arr.includes('react'))
{
    console.log('React存在');
}

指数操做符
不使用ES7
使用自定义的递归函数calculateExponent或者Math.pow()进行指数运算：

function calculateExponent(base, exponent)
{
    if (exponent === 1)
    {
        return base;
    }
    else
    {
        return base * calculateExponent(base, exponent - 1);
    }
}

console.log(calculateExponent(7, 3)); // 输出343
console.log(Math.pow(7, 3)); // 输出343

使用ES7
使用指数运算符**，就像+、-等操做符同样：

console.log(7**3);
Object.values()

不使用ES8
使用Object.keys()遍历对象的属性值，须要经过属性名key去获取属性值：

let obj = {a: 1, b: 2, c: 3};

Object.keys(obj).forEach((key) =>
{
    console.log(obj[key]); // 输出1, 2, 3
});

使用ES8
使用Object.values()遍历对象的属性值，无需使用使用属性名：

let obj = {a: 1, b: 2, c: 3}
Object.values(obj).forEach(value =>
{
    console.log(value); // 输出1, 2, 3
});
Object.entries()

不使用ES8
使用Object.keys()遍历对象的属性名和属性值：

let obj = {a: 1, b: 2, c: 3};

Object.keys(obj).forEach((key) =>
{
    console.log(key + ": " + obj[key]); // 输出a: 1, b: 2, c: 3
})

使用ES8
使用Object.entries()遍历对象的属性名和属性值：

let obj = {a: 1, b: 2, c: 3};

Object.entries(obj).forEach(([key, value]) =>
{
    console.log(key + ": " + value); // 输出a: 1, b: 2, c: 3
})
padStart()

不使用ES8

console.log('0.00')             
console.log('10,000.00')    
console.log('250,000.00')
输出结果以下：

0.00
10,000.00
250,000.00

使用ES8
使用padStart()能够在字符串前面填充指定的字符串：

console.log('0.00'.padStart(20))             
console.log('10,000.00'.padStart(20))    
console.log('250,000.00'.padStart(20))
输出结果以下：

      0.00
 10,000.00
250,000.00
padEnd()

不使用ES8

console.log('0.00 ' + '0.00' )             
console.log('10,000.00 ' + '10,000.00' )    
console.log('250,000.00 ' + '250,000.00')
输出以下：

0.00 0.00
10,000.00 10,000.00
250,000.00 250,000.00

使用ES8
使用padEnd()能够在字符串后面填充指定的字符串：

console.log('0.00'.padEnd(20) + '0.00' )             
console.log('10,000.00'.padEnd(20) + '10,000.00' )    
console.log('250,000.00'.padEnd(20) + '250,000.00')
输出以下：

0.00                0.00
10,000.00           10,000.00
250,000.00          250,000.00

Object.getOwnPropertyDescriptors()

azatsBooks对象的定义以下：

let azatsBooks = {
    books: ['React Quickly'],
    get latest()
    {
        let numberOfBooks = this.books.length;
        if (numberOfBooks == 0) return undefined;
        return this.books[numberOfBooks - 1];
    }
};

不使用ES8
使用Object.getOwnPropertyDescriptor()获取单个属性的属性描述符。

获取azatsBooks对象的books属性的属性描述符：

console.log(Object.getOwnPropertyDescriptor(azatsBooks, 'books'));

/** 输出books属性的属性描述
[object Object] {
  configurable: true,
  enumerable: true,
  value: ["React Quickly"],
  writable: true
}
**/
获取azatsBooks对象的lastest方法的属性描述符：

console.log(Object.getOwnPropertyDescriptor(azatsBooks, 'latest'));

/** 输出lastest方法的属性描述
[object Object] {
  configurable: true,
  enumerable: true,
  get: function get latest() {
    let numberOfBooks = this.books.length
    if (numberOfBooks == 0) return undefined
    return this.books[numberOfBooks - 1]
  },
  set: undefined
}
**/

使用ES8
Object.getOwnPropertyDescriptors()至关于Object.getOwnPropertyDescriptor()的复数形式，能够获取对象的全部自身属性的描述符：

console.log(Object.getOwnPropertyDescriptors(azatsBooks))

/** 输出azatsBooks对象全部自身属性的属性描述
[object Object] {
  books: [object Object] {
    configurable: true,
    enumerable: true,
    value: ["React Quickly"],
    writable: true
  },
  latest: [object Object] {
    configurable: true,
    enumerable: true,
    get: function get latest() {
      let numberOfBooks = this.books.length
      if (numberOfBooks == 0) return undefined
      return this.books[numberOfBooks - 1]
    },
    set: undefined
  }
}
**/

函数参数列表结尾容许逗号
不使用ES8

var f = function(a,
  b,
  c,
  d // d以后不能带逗号
   ) { 
  console.log(d)
}

使用ES8

var f = function(a,
  b,
  c,
  d, // d以后容许带逗号
) { 
  console.log(d)
}

容许逗号以后，能够避免一些没必要要的报错。(若是你但愿实时监控JavaScript应用的错误，欢迎无偿使用Fundebug)

Async/Await
使用Promise
使用Promise写异步代码，会比较麻烦：

axios.get(`/q?query=${query}`)
    .then(response => response.data)
    .then(data =>
    {
        this.props.processfetchedData(data);
    })
    .catch(error => console.log(error));

使用Async/Await
Async/Await使得异步代码看起来像同步代码，这正是它的魔力所在：

async fetchData(query) =>
{
    try
    {
        const response = await axios.get(`/q?query=${query}`);
        const data = response.data;
        return data;
    }
    catch (error)
    {
        console.log(error)
    }
}

fetchData(query).then(data =>
{
    this.props.processfetchedData(data)
})

Async/Await是写异步代码的新方式，之前的方法有回调函数和Promise。相比于Promise，它更加简洁，而且处理错误、条件语句、中间值都更加方便，所以有望替代Promise，成为新一代的一步代码编写方式。对细节感兴趣的话，能够查看Fundebug翻译的《Async/Await替代Promise的6个理由》。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程