Detailed introduction to the new features of JavaScript6

JavaScript What’s new in 6? Let’s take a look at some of the new features of JavaScript 6.

• let, const (used to define block-local variables), during the program process function

• Destructuring: let {x, y} = pt; let [s, v, o] = triple();
  ( The premise is let pt = {x:2, y:-5})

• Default parameter value: function f(x, y=1 , z=0) {⋯}

• ##Other parameters: function g(i, j, ...r) { return<a href="http://www.php.cn/wiki/135.html" target="_blank"> r.slice(i, j); }</a>(No need to use
  arguments).

• Data expansion:

  let a = [0,1,2,3], o = new<a href="http://www.php.cn/wiki/165.html" target="_blank"> Something(...a);</a>. Can also be used for array literals: [1, ...array<a href="http://www.php.cn/wiki/1041.html" target="_blank">, 4]</a>.

• ObjectAbbreviation:
  let one = 1; { one, func_one() {return 1;}, ['key<a href="http://www.php.cn/wiki/1051.html" target="_blank"> ' + one]: 1 }</a> .

• FunctionAbbreviation (a) => a * a The effect is equivalent to
  (function(a) { return a * a; }).bind(this)

• map, set: let m = new Map (); m.set(key, value); m.has(key); m.get(key). also includes
  .clear<a href="http://www.php.cn/wiki/917.html" target="_blank">()</a> , .delete<a href="http://www.php.cn/wiki/1298.html" target="_blank">()</a>, .forEach<a href="http://www.php.cn/wiki/127.html" target="_blank">()</a>, .keys().

• Weak map:

  let map = new WeakMap(). Use it when there is a loop referencing . In the same waynew WeakSet().

• promise:

  new Promise((resolve, reject) => {…}).

• When

  promise.then(value => {…}), resolve(valueOrPromise) returns the promised value (or a new promise, forming a chain call)

• When

  promise.then(…).then(…).catch(error => {…})reject(new Error(… ))Interrupt promise

• Quick promise creation:

  Promise.resolve(value), Promise.reject(error).

• Iteration:

  Promise.all<a href="http://www.php.cn/wiki/1483.html" target="_blank">(listOfPromises).then(listOfValues ​​=> …)</a>,
  Promise.race (listOfPromises).then(valueThatResolvedFirst => …)

##Proxy:
• let obj = new Proxy(proto, han

  dler)<a href="http://www.php.cn/wiki/596.html" target="_blank">.</a>Simply put: Use elements of class objects for overloading
  (can bring all accessible attributes.)

• Generator

  : function* gen() { yield 1; yield 2; }In fact, gen()
  will Returns an object containing the next()<a href="http://www.php.cn/wiki/1071.html" target="_blank"> function. </a>

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

  .

Class definitions use

• extends<a href="http://www.php.cn/wiki/166.html" target="_blank">, </a>super<a href="http://www.php.cn/code/8202.html" target="_blank">, and </a>static<a href="http://www.php.cn/wiki/188.html" target="_blank">:</a><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">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] &amp;&amp; this[py] === p[py]; } }</pre><div class="contentsignin">Copy after login</div></div>

Symbol object, creates a private key, which can be used in maps and classes (private members
• members).

  let a = Map();
  {
    let k = Symbol();
    a.set(k, 'value');
    // 这里你可以访问和设置'value'，比如a.get(k)。
  }
  //这里不行，k是不可见的。

  
  

• Modular

  :

  module math {
    export function sum(x, y) {
      return x + y;
    }
    export var pi = 3.141593;
  }
  
  import {sum, pi} from math;
  alert(sum(pi,pi));

Template style
• String

  : Can be multiple lines, And can embed variables. `You are ${age} years old.`
  .<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">// 多行字符串 re`line1: (words )* line2: \w+` // It desugars to: re({raw:&amp;#39;line1: (words )*\nline2: \w+&amp;#39;, cooked:&amp;#39;line1: (words )*\nline2: \w+&amp;#39;})</pre><div class="contentsignin">Copy after login</div></div>

Typed array

The above is the detailed content of Detailed introduction to the new features of JavaScript6. For more information, please follow other related articles on the PHP Chinese website!