> 웹 프론트엔드 > JS 튜토리얼 > JavaScript6의 새로운 기능에 대한 자세한 소개

JavaScript6의 새로운 기능에 대한 자세한 소개

黄舟
풀어 주다: 2017-03-16 14:36:41
원래의
1733명이 탐색했습니다.

JavaScript JavaScript 6의 새로운 기능은 무엇인가요? JavaScript 6의 새로운 기능 중 일부를 살펴보겠습니다.

  • let, const(블록 로컬변수 정의에 사용), 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); }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/%20165.html" target="_blank">새로운<p> 뭔가(...a);</p></a>. 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"> 배열</a>, 4].[1, ...<a href="//m.sbmmt.com/wiki/1041.html" target="_blank">array</a>, 4]
  • 객체 약어: let one = 1; {return 1;}, ['<a href="//m.sbmmt.com/wiki/1051.html" target="_blank">key<br> ' + one]: 1 }</a> .let one = 1; { one, func_one() {return 1;}, ['<a href="//m.sbmmt.com/wiki/1051.html" target="_blank">key</a> ' + 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"> 지우기<br>()</a>, .<a href="//m.sbmmt.com/wiki/1298.html" target="_blank">삭제<code>.<a href="//m.sbmmt.com/wiki/917.html" target="_blank">clear</a>()( ) 코드>, .<a href="//m.sbmmt.com/wiki/127.html" target="_blank">forEach<code>.<a href="//m.sbmmt.com/wiki/1298.html" target="_blank">delete</a>()(), .<a href="//m.sbmmt.com/wiki/127.html" target="_blank">forEach</a>()..keys()

  • 약한 맵:

    . let map = new WeakMap()루프참조가 있을 때 사용하세요. 마찬가지 . new WeakSet()

  • promise:

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

    • promise.then(value => {…})에서 약속된 값(또는 New promise)을 반환하는 경우 , 연쇄 호출 형성) resolve(valueOrPromise)

    • promise.then(…).then(…).catch(error => {…})이 약속을 어길 때 reject(new Error(…))

    • 빠른 약속 생성:

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

    • 반복: 약속.<a href="//m.sbmmt.com/wiki/1483.html" target="_blank">all<p>(listOfPromises).then(listOfValues ​​​​=> …)</p></a>,Promise.<a href="//m.sbmmt.com/wiki/1483.html" target="_blank">all</a>(listOfPromises).then(listOfValues => …)
      Promise.race(listOfPromises).then(valueThatResolvedFirst => …)
  • 에이전트: let obj = new Proxy(proto, han<a href="//m.sbmmt.com/wiki/596.html" target="_blank">dl<p>er)</p></a>.let obj = new Proxy(proto, han<a href="//m.sbmmt.com/wiki/596.html" target="_blank">dl</a>er)간단히 말하면:
    오버로딩 클래스 객체의 요소 사용(접근 가능한 모든 속성 가져오기)
  • Generator: function* gen() { yield 1; yield 2; } 실제로
    <a href="//m.sbmmt.com/wiki/1071.html" target="_blank">next <code>gen()()가 포함된 메시지를 반환합니다. > 함수의 객체입니다. <a href="//m.sbmmt.com/wiki/1071.html" target="_blank">next</a>()

  • 루프:

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

  • 클래스 정의에 사용<a href="//m.sbmmt.com/wiki/166.html" target="_blank">확장<p> </p></a>, <a href="//m.sbmmt.com/code/8202.html" target="_blank">super<code><a href="//m.sbmmt.com/wiki/166.html" target="_blank">extends</a><a href="//m.sbmmt.com/wiki/188.html" target="_blank">정적<code><a href="//m.sbmmt.com/code/8202.html" target="_blank">super</a>:<a href="//m.sbmmt.com/wiki/188.html" target="_blank">static</a>
    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 ) 객체 , 맵과 클래스(비공개 멤버

    멤버)에서 사용할 수 있는 개인 키를 생성합니다.

    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.`아아앙

  • 형식배열

위 내용은 JavaScript6의 새로운 기능에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿