es6新特性是什么

小編給大家分享一下es6新特性是什么，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

es6新特性：1、ES6 引入了class，讓JavaScript的面向?qū)ο缶幊套兊酶雍唵魏鸵子诶斫猓?、模塊化Module；3、箭頭Arrow函數(shù)；4、函數(shù)參數(shù)默認值；5、模板字符串。

es6新特性：

1、類（class）

對熟悉Java，object-c，c#等純面向?qū)ο笳Z言的開發(fā)者來說，都會對class有一種特殊的情懷。ES6 引入了class（類），讓JavaScript的面向?qū)ο缶幊套兊酶雍唵魏鸵子诶斫狻?/p>

  class Animal {
    // 構(gòu)造函數(shù)，實例化的時候?qū)徽{(diào)用，如果不指定，那么會有一個不帶參數(shù)的默認構(gòu)造函數(shù).
    constructor(name,color) {
      this.name = name;
      this.color = color;
    }
    // toString 是原型對象上的屬性
    toString() {
      console.log('name:' + this.name + ',color:' + this.color);
    }
  }
 var animal = new Animal('dog','white');//實例化Animal
 animal.toString();
 console.log(animal.hasOwnProperty('name')); //true
 console.log(animal.hasOwnProperty('toString')); // false
 console.log(animal.__proto__.hasOwnProperty('toString')); // true
 class Cat extends Animal {
  constructor(action) {
    // 子類必須要在constructor中指定super 函數(shù)，否則在新建實例的時候會報錯.
    // 如果沒有置頂consructor,默認帶super函數(shù)的constructor將會被添加、
    super('cat','white');
    this.action = action;
  }
  toString() {
    console.log(super.toString());
  }
 }
 var cat = new Cat('catch')
 cat.toString();
 // 實例cat 是 Cat 和 Animal 的實例，和Es5完全一致。
 console.log(cat instanceof Cat); // true
 console.log(cat instanceof Animal); // true

2、模塊化(Module)

ES5不支持原生的模塊化，在ES6中模塊作為重要的組成部分被添加進來。模塊的功能主要由 export 和 import 組成。每一個模塊都有自己單獨的作用域，模塊之間的相互調(diào)用關(guān)系是通過 export 來規(guī)定模塊對外暴露的接口，通過import來引用其它模塊提供的接口。同時還為模塊創(chuàng)造了命名空間，防止函數(shù)的命名沖突。

導(dǎo)出(export)

ES6允許在一個模塊中使用export來導(dǎo)出多個變量或函數(shù)。

導(dǎo)出變量

//test.js
export var name = 'Rainbow'

ES6將一個文件視為一個模塊，上面的模塊通過 export 向外輸出了一個變量。一個模塊也可以同時往外面輸出多個變量。

 //test.js
 var name = 'Rainbow';
 var age = '24';
 export {name, age};

導(dǎo)出函數(shù)

// myModule.js
export function myModule(someArg) {
  return someArg;
}

導(dǎo)入(import)

定義好模塊的輸出以后就可以在另外一個模塊通過import引用。

import {myModule} from 'myModule';// main.js
import {name,age} from 'test';// test.js

心得:一條import 語句可以同時導(dǎo)入默認函數(shù)和其它變量。import defaultMethod, { otherMethod } from 'xxx.js';

3、箭頭（Arrow）函數(shù)

這是ES6中最令人激動的特性之一。=>不只是關(guān)鍵字function的簡寫，它還帶來了其它好處。箭頭函數(shù)與包圍它的代碼共享同一個this,能幫你很好的解決this的指向問題。有經(jīng)驗的JavaScript開發(fā)者都熟悉諸如var self = this;或var that = this這種引用外圍this的模式。但借助=>，就不需要這種模式了。

箭頭函數(shù)的結(jié)構(gòu)

箭頭函數(shù)的箭頭=>之前是一個空括號、單個的參數(shù)名、或用括號括起的多個參數(shù)名，而箭頭之后可以是一個表達式（作為函數(shù)的返回值），或者是用花括號括起的函數(shù)體（需要自行通過return來返回值，否則返回的是undefined）。

// 箭頭函數(shù)的例子

()=>1
v=>v+1
(a,b)=>a+b
()=>{
    alert("foo");
}
e=>{
    if (e == 0){
        return 0;
    }
    return 1000/e;
}

心得：不論是箭頭函數(shù)還是bind，每次被執(zhí)行都返回的是一個新的函數(shù)引用，因此如果你還需要函數(shù)的引用去做一些別的事情（譬如卸載監(jiān)聽器），那么你必須自己保存這個引用。

卸載監(jiān)聽器時的陷阱(react為例)

錯誤的做法

class PauseMenu extends React.Component{
    componentWillMount(){
        AppStateIOS.addEventListener('change', this.onAppPaused.bind(this));
    }
    componentWillUnmount(){
        AppStateIOS.removeEventListener('change', this.onAppPaused.bind(this));
    }
    onAppPaused(event){
    }
}

+正確的做法

class PauseMenu extends React.Component{
    constructor(props){
        super(props);
        this._onAppPaused = this.onAppPaused.bind(this);
    }
    componentWillMount(){
        AppStateIOS.addEventListener('change', this._onAppPaused);
    }
    componentWillUnmount(){
        AppStateIOS.removeEventListener('change', this._onAppPaused);
    }
    onAppPaused(event){
    }
}

除上述的做法外，我們還可以這樣做：

class PauseMenu extends React.Component{
    componentWillMount(){
        AppStateIOS.addEventListener('change', this.onAppPaused);
    }
    componentWillUnmount(){
        AppStateIOS.removeEventListener('change', this.onAppPaused);
    }
    onAppPaused = (event) => {
        //把函數(shù)直接作為一個arrow function的屬性來定義，初始化的時候就綁定好了this指針
    }
}

4、函數(shù)參數(shù)默認值

ES6支持在定義函數(shù)的時候為其設(shè)置默認值：

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

這樣寫一般沒問題，但當(dāng)參數(shù)的布爾值為false時，就會有問題了。比如，我們這樣調(diào)用foo函數(shù)：

foo(0, "")

因為0的布爾值為false，這樣height的取值將是50。同理color的取值為‘red’。

所以說，函數(shù)參數(shù)默認值不僅能是代碼變得更加簡潔而且能規(guī)避一些問題。

5、模板字符串

ES6支持模板字符串，使得字符串的拼接更加的簡潔、直觀。

不使用模板字符串：

var name = 'Your name is ' + first + ' ' + last + '.'

使用模板字符串：

var name = `Your name is ${first} ${last}.`

在ES6中通過${}就可以完成字符串的拼接，只需要將變量放在大括號之中。

6、解構(gòu)賦值

解構(gòu)賦值語法是JavaScript的一種表達式，可以方便的從數(shù)組或者對象中快速提取值賦給定義的變量。

獲取數(shù)組中的值

從數(shù)組中獲取值并賦值到變量中，變量的順序與數(shù)組中對象順序?qū)?yīng)。

var foo = ["one", "two", "three", "four"];
var [one, two, three] = foo;
console.log(one); // "one"
console.log(two); // "two"
console.log(three); // "three"
//如果你要忽略某些值，你可以按照下面的寫法獲取你想要的值
var [first, , , last] = foo;
console.log(first); // "one"
console.log(last); // "four"
//你也可以這樣寫
var a, b; //先聲明變量
[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2

如果沒有從數(shù)組中的獲取到值，你可以為變量設(shè)置一個默認值。

var a, b;
[a=5, b=7] = [1];
console.log(a); // 1
console.log(b); // 7

通過解構(gòu)賦值可以方便的交換兩個變量的值。

var a = 1;
var b = 3;
[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1
獲取對象中的值
const student = {
  name:'Ming',
  age:'18',
  city:'Shanghai'  
};
const {name,age,city} = student;
console.log(name); // "Ming"
console.log(age); // "18"
console.log(city); // "Shanghai"

以上是“es6新特性是什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！