常用ES6特性

ES6,正式名称叫做ECMAscript2015,ES6这个名称更加简洁。ES6已经不再是JavaScript最新的标准,他已经广泛的用于实际编程中。对ES6常用的特性给一个总结。
ES6常用特性

  • 函数参数默认值
  • 模板字符串
  • 多行字符串
  • 结构赋值
  • 对象属性简写
  • Promise
  • let和const
  • class类
  • 模块化

1参数默认值

不使用ES6

为函数的参数设置默认值

function a(a,b){
  var a = a || ' ';
  var b = b || ' ';
}

这样写一般是没有问题的。但是当参数的布尔值为false时,就会出事情!!!比如这样调用

a(0,1)

因为0的布尔值为false,这样a就是空。你要在进行处理就很麻烦啦。但是使用ES6可以避过这些问题。

使用ES6

function a(a=' ',b=' '){
}

2模板字符串

不使用ES6

在不使用ES6的时候拼接字符串是一件很烦的事情。

var a = 'asd' + str + ' ' + obj + '.';

使用ES6

将变量放在大括号之中

var a = `asd${str}${obj}.`;

ES6的写法更加简单、明了。

3多行字符串

不使用ES6

在不使用ES6的时候换行必须要拼接上\n\t

var a = 'asdasdasdasdasda\n\t'+
        'asdasdasdasdasdasd\n\t'+
        'asdasdasdasdasdasdasd'

使用ES6

使用ES6就方便多啦

var a = `asdasdsadasdas
asdasdasdasda
asdasdasdasdsd`;

4解构赋值

不使用ES6

当需要获取某个对象的属性值时,需要单独获取

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

使用ES6

一次性获取对象子属性

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

对于数组也是一样

var [a,b] = $('.arr');

5对象属性的简写

不使用ES6

对象中必须要有属性和属性值,显得很是多余

var a = 'a ';
var b = function(){}
var obj = {
     a:a,
     b:b
}

使用ES6

使用ES6会变得很简单

var a = 'a ';
var b = function(){}
var obj = {a,b};

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

7Promise对象

不使用ES6

不使用ES6的时候,前端很容易陷入一个回调地狱,比如等这个AJAX调取完,再去调用另一个AJAX,就要基于回调,多个就会出现回调地狱。

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

使用ES6

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"
    });

8let和const

不使用ES6

不使用ES6的时候,js声明变量一般都在使用var,var会有一个变量提升的问题。

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

使用ES6

let定义的变量是块级作用域,const定义的是常量。

{
let a = 10;
}
console.log(a); //报错

let和const都一样都是定于的块级作用域。

9class类

不使用ES6

不使用ES6的时候,是要使用构造函数定义一个类

function aa(x,y){
  this.x = x;
  this.y = y;
  this.add=function(){
    return this.x + this.y;
  }
}
var  p = new aa(1,2);
console.log(p.add()); //输出3

使用ES6

使用class定义类,更加规范,更加方便继承,写法更加偏向后台。

class aa{
     constructor(x,y){
        this.x = x;
        this.y = y;
    },
    add(){
      return this.x + this.y;
    }
}
var  p = new aa(1,2);
console.log(p.add()); //输出3

10模块化

JavaScript中是没有一个模块化的概念的,开发者在实践中主要采用common.js和AMD的规范。但是ES6中定义了模块的概念。
node.js中主要采用common.js规范实现模块化,而前端也可以采用。这里不妨介绍一下common.js的规范。
module.js中使用了module.exports导出a变量和getAjax方法:

module.exports = {
  a:100,
  getAjax (){   //ES6中对象定义方法简写
  }
}

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

var a= require('module.js')
console.log(a.port) // 输出100

使用ES6

ES6中使用export和import关键字来实现模块化。
module.js中使用了module.exports导出a变量和getAjax方法:

export var a = 100;
export function getAjax(){}

main.js中使用import导入module.js,可以指定需要导入的变量:

import {a, getAjax} from 'module'
console.log(a) // 输出100

也可以全局引入

import * as service from 'module'
console.log(service.a) //输出100

推荐阅读更多精彩内容

  • [TOC] 参考阮一峰的ECMAScript 6 入门参考深入浅出ES6 let和const let和const都...
    郭子web阅读 1,059评论 0 1
  • 定义函数 我们先来看一个基本的新特性,在javascript中,定义函数需要关键字function,但是在e...
    花开到咪兔阅读 25评论 1 3
  • 一、ES6简介 ​ 历时将近6年的时间来制定的新 ECMAScript 标准 ECMAScript 6(亦称 ...
    一岁一枯荣_阅读 2,525评论 8 23
  • 以下内容是我在学习和研究ES6时,对ES6的特性、重点和注意事项的提取、精练和总结,可以做为ES6特性的字典;在本...
    科研者阅读 1,973评论 2 9
  • 电脑屏幕上的对话框一条接一条的刷着。我的朋友正火热的聊着,T说她的工资减少了,饭补没有了,难受着呢。我刚要抬手准备...
    BaebaeZoe阅读 77评论 0 0