首頁 > web前端 > js教程 > 具體介紹JavaScript6的新特性

具體介紹JavaScript6的新特性

黄舟
發布: 2017-03-16 14:36:41
原創
1734 人瀏覽過

JavaScript 6裡都有啥新鮮東西?讓我們一起來看看JavaScript 6的一些新功能。

  • letconst (用來定義block-local變數), 程式過程中的 function

  • 解構: let {x, y} = pt; let [s, v, o] = triple();
    #(前提是let pt = {x:2, y:-5})

  • #預設參數值: function f(x, y=1 , z=0) {⋯}

  • 其它參數: function g(i, j, ...r) { <a href="//m.sbmmt.com/wiki/135.html" target="_blank">return</a> r.slice(i, j); }
    (不需要再使用 arguments )。

  • 資料展開: let a = [0,1,2,3], o = <a href="//m.sbmmt.com/wiki/165.html" target="_blank">new</a> Something(...a);。也可以用在陣列字面上: [1, ...<a href="//m.sbmmt.com/wiki/1041.html" target="_blank">array</a>, 4].


  • #物件簡寫:<a href="//m.sbmmt.com/wiki/1051.html" target="_blank"></a>let one = 1; { one, func_one() {return 1;}, ['key

    ' + one]: 1 }
  • .
  • 函數簡寫 
    (a) => a * a 效果等同

    (function(a) { return a * a; }).bind(this)
  • map, set
    let m = new Map (); m.set(key, value); m.has(key); m.get(key).<a href="//m.sbmmt.com/wiki/917.html" target="_blank">也包含 </a>.clear()<a href="//m.sbmmt.com/wiki/1298.html" target="_blank"> , </a>.delete()<a href="//m.sbmmt.com/wiki/127.html" target="_blank">, </a>.forEach()

    .keys()
  • .
  • 弱map: let map = new WeakMap()。當有循環引用時使用它。同理

    new WeakSet()
  • promise: 

    new Promise((resolve, reject) => {…})
  • .
    • 當 promise.then(value => {…})時,

      resolve(valueOrPromise)
    •  傳回承諾的值(或是新的promise,形成鍊式呼叫)
    • promise.then(…).then(…).catch(error => {…})

      reject(new Error(… ))
    • 中斷promise
    • 快速promise 建立: Promise.resolve(value)

      Promise.reject(error)
    • .
    • <a href="//m.sbmmt.com/wiki/1483.html" target="_blank">迭代: </a>Promise.all
      (listOfPromises).then(listOfValues => …),

      Promise.race (listOfPromises).then(valueThatResolvedFirst => ...)
  • ##代理: <a href="//m.sbmmt.com/wiki/596.html" target="_blank">let obj = new Proxy(proto, han</a>dl #er)
    .簡單地說: 使用類別物件的元素進行重載(能夠帶來所有可存取的屬性

    .)

  • <a href="//m.sbmmt.com/wiki/1071.html" target="_blank"></a>

  • <a href="//m.sbmmt.com/wiki/166.html" target="_blank">產生器</a>: function* gen() { yield 1; yield 2; }<a href="//m.sbmmt.com/code/8202.html" target="_blank">事實上,</a>gen() 會傳回一個含有 <a href="//m.sbmmt.com/wiki/188.html" target="_blank">next</a>() 函數的物件。

  • 循環: 
    for (var [key, val] of items(x)) { alert(key + ',' + val); }

  • 類別定義中使用

    extends
  • super
    , 和  #static

  • :
  • class Point extends Base {
      constructor(x,y) {
        super();
        this[px] = x, this[py] = y;
        this.r = function() { return Math.sqrt(x*x + y*y); }
      }
      get x() { return this[px]; }
      get y() { return this[py]; }
      proto_r() { return Math.sqrt(this[px] * this[px] +
          this[py] * this[py]); }
      equals(p) { return this[px] === p[px] &&
          this[py] === p[py]; }
    }
    登入後複製

  • 符號(Symbol)對象,建立私有的key,可用於map和類別中(私有成員
members)。
let a = Map();
{
  let k = Symbol();
  a.set(k, &#39;value&#39;);
  // 这里你可以访问和设置&#39;value&#39;,比如a.get(k)。
}
//这里不行,k是不可见的。
登入後複製
#########模組化###:###
module math {
  export function sum(x, y) {
    return x + y;
  }
  export var pi = 3.141593;
}

import {sum, pi} from math;
alert(sum(pi,pi));
登入後複製
#########模板式###字串###: 可以多行,並能嵌入變數。 ######`You are ${age} years old.`###.###
// 多行字符串
re`line1: (words )*
line2: \w+`

// It desugars to:
re({raw:&#39;line1: (words )*\nline2: \w+&#39;,
    cooked:&#39;line1: (words )*\nline2: \w+&#39;})
登入後複製
#########類型化陣列############# ##

以上是具體介紹JavaScript6的新特性的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板