JS--ES 2015/6 새로운 기능 요약

ES 2015/6에는 새로운 콘텐츠가 많이 포함되어 있습니다. 다음은 이러한 기능에 대한 개요(포괄적이지는 않음) 목록입니다. 사실, 파고드는 지점마다 많은 지식이 있을 것이다. 본 글은 이를 요약하는 것을 목적으로 하기 때문에 이러한 특징에 대해 깊이 있는 논의와 연구를 진행하지는 않을 것이다. 그런 다음 시간이 있으면 몇 개의 별도 블로그를 작성하여 일반적으로 사용되는 요점을 더 깊이 파고들고 모든 사람들과 심도 있는 교류를 하도록 하겠습니다.

Arrow 함수

=> 구문을 통해 구현된 함수의 짧은 형식인 화살표 함수는 C#/JAVA8/CoffeeScript에서 유사한 구문을 갖습니다. 함수와 달리 화살표 함수는 실행 컨텍스트와 동일한 this를 공유합니다. 함수 개체 내부에 화살표 함수가 나타나면 해당 함수와 arguments 변수를 공유합니다. => 语法实现的函数简写形式，C#/JAVA8/CoffeeScript 中都有类似语法。与函数不同，箭头函数与其执行下文环境共享同一个 this。如果一个箭头函数出现在一个函数对象内部，它会与这个函数共享 arguments 变量。

// Expression bodiesvar odds = evens.map(v => v + 1);var nums = evens.map((v, i) => v + i);// Statement bodiesnums.forEach(v => {
  if (v % 5 === 0)    fives.push(v);});// Lexical thisvar bob = {
  _name: "Bob",
  _friends: ['jim'],
  printFriends() {
    this._friends.forEach(f =>
      console.log(this._name + " knows " + f)); // Bob knows jim
  }};// Lexical argumentsfunction square() {
  let example = () => {
    let numbers = [];
    for (let number of arguments) {
      numbers.push(number * number);
    }

    return numbers;
  };

  return example();}square(2, 4, 7.5, 8, 11.5, 21); // returns: [4, 16, 56.25, 64, 132.25, 441]

类 Class

Javascript 类 并不是引入了一个新的面向对象的对象继承模型，而是基于原型继承的语法糖。其提供了一个更简单和清晰的语法来创建对象并处理继承。

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }}

类没有声明提升，必须确保在调用前已经进行了声明。

构造函数 constructor 是一个特殊的方法，其用于创建和初始化类的实例。

静态方法 static 关键字用于声明静态方法

创建子类 extends 关键字用于创建子类，这里要注意：extends 不能用于扩展常规对象(不可构造/非构造的)，如果要继承常规对象，可使用 Object.setPrototypeOf()。

调用超类 super 关键字可以用来调用父类中的方法

Mix-ins 混合

增强的对象字面量

通过字面量形式可以实现，定义prototype、键值对简写、定义方法等、动态属性名称。

var obj = {
    // Sets the prototype. "__proto__" or '__proto__' would also work.
    __proto__: theProtoObj,
    // Computed property name does not set prototype or trigger early error for
    // duplicate __proto__ properties.
    ['__proto__']: somethingElse,
    // Shorthand for ‘handler: handler’
    handler,
    // Methods
    toString() {
     // Super calls
     return "d " + super.toString();
    },
    // Computed (dynamic) property names
    [ "prop_" + (() => 42)() ]: 42};

模板字符串

模板字符串 提供构造字符串的语法糖，在 Prel/python 等语言中也都有类似特性。

// Basic literal string creation
`This is a pretty little template string.`

// Multiline strings
`In ES5 this is
 not legal.`

// Interpolate variable bindings
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

// Unescaped template strings
String.raw`In ES5 "\n" is a line-feed.`

// Construct an HTTP request prefix is used to interpret the replacements and construction
GET`http://foo.org/bar?a=${a}&b=${b}
    Content-Type: application/json
    X-Credentials: ${credentials}
    { "foo": ${foo},
      "bar": ${bar}}`(myOnReadyStateChangeHandler);

解构赋值

Destructuring 法是一个Javascript表达式，这使得可以将值从数组或属性从对象提取到不同的变量中。

// list matching
var [a, ,b] = [1,2,3];
a === 1;
b === 3;

// object matching (用新变量名赋值)
var { op: a, lhs: { op: b }, rhs: c }
       = getASTNode()

// object matching shorthand
// binds `op`, `lhs` and `rhs` in scope
var {op, lhs, rhs} = getASTNode()

// Can be used in parameter position
function g({name: x}) {
  console.log(x);
}
g({name: 5})

// Fail-soft destructuring
var [a] = [];
a === undefined;

// Fail-soft destructuring with defaults
var [a = 1] = [];
a === 1;

// 变量可以先赋予默认值。当要提取的对象没有对应的属性，变量就被赋予默认值。
var {a = 10, b = 5} = {a: 3};
console.log(a); // 3
console.log(b); // 5

// Destructuring + defaults arguments
function r({x, y, w = 10, h = 10}) {
  return x + y + w + h;
}
r({x:1, y:2}) === 23

// 对象属性计算名和解构
let key = "z";
let { [key]: foo } = { z: "bar" };

console.log(foo); // "bar"

Default + Rest + Spread

为函数参数提供默认值 & ... 定数量参数

function f(x, y=12) {
  // y is 12 if not passed (or passed as undefined)
  return x + y;
}
f(3) == 15


function f(x, ...y) {
  // y is an Array
  return x * y.length;
}
f(3, "hello", true) == 6



function f(x, y, z) {
  return x + y + z;
}
// Pass each elem of array as argument
f(...[1,2,3]) == 6

Let + Const

let 用于声明块级作用域变量。 const

function f() {
  {
    let x;
    {
      // this is ok since it's a block scoped name
      const x = "sneaky";
      // error, was just defined with `const` above
      x = "foo";
    }
    // this is ok since it was declared with `let`
    x = "bar";
    // error, already declared above in this block
    let x = "inner";
  }
}

Class Class

Javascript Class는 새로운 객체 지향 객체 상속 모델을 도입하지 않고 프로토타입 상속 구문을 기반으로 합니다. 설탕. 객체 생성 및 상속 처리를 위한 더 간단하고 명확한 구문을 제공합니다.

let fibonacci = {
  [Symbol.iterator]() {
    let pre = 0, cur = 1;
    return {
      next() {
        [pre, cur] = [cur, pre + cur];
        return { done: false, value: cur }
      }
    }
  }
}

for (var n of fibonacci) {
  // truncate the sequence at 1000
  if (n > 1000)
    break;
  console.log(n);
}

클래스는 승격을 선언하지 않으므로 호출하기 전에 승격이 선언되었는지 확인해야 합니다.

생성자 <code>생성자</code>는 클래스의 인스턴스를 생성하고 초기화하는 데 사용되는 특수 메서드입니다. 🎜🎜정적 메서드 <code>static</code> 키워드는 정적 메서드를 선언하는 데 사용됩니다. 🎜🎜하위 클래스 만들기 <code>extends</code> 키워드는 하위 클래스를 만드는 데 사용됩니다. 여기서 참고하세요: 확장은 일반 개체를 확장하는 데 사용할 수 없습니다. (비구성 가능/비구성 가능), 일반 객체에서 상속하려면 <code>Object.setPrototypeOf()</code>를 사용할 수 있습니다. 🎜🎜호출 슈퍼 클래스 <code>super</code> 키워드를 사용하여 상위 클래스의 메소드를 호출할 수 있음 🎜🎜<code>믹스인</code> 혼합 🎜🎜향상된 객체 리터럴 🎜🎜리터럴 형식을 통해 가능 프로토타입, 키-값 쌍 약어, 메소드 정의 등 및 동적 속성 이름을 정의하여 구현됩니다. 🎜<p class="sourceCode">🎜🎜<pre class="brush:js;toolbar:false;">function* quips(name) {
  yield "你好 " + name + "!";
  yield "希望你能喜欢这篇介绍ES6的译文";
  if (name.startsWith("X")) {
    yield "你的名字 " + name + "  首字母是X，这很酷！";
  }
  yield "我们下次再见！";
}

🎜🎜🎜🎜템플릿 문자열🎜🎜템플릿 문자열은 문자열 구성을 위한 구문 설탕을 제공하며 Prel/python과 같은 언어에서 유사한 기능을 제공합니다. 🎜

🎜🎜rrreee🎜구조 분해 할당🎜🎜구조 분해 방법은 배열의 값이나 객체의 속성을 다른 변수로 추출할 수 있게 해주는 자바스크립트 표현식입니다. 🎜rrreee🎜Default + Rest + Spread🎜🎜함수 매개변수 및 ... 고정 개수의 매개변수에 대한 기본값 제공🎜rrreee🎜Let + Const🎜🎜let은 선언 블록 수준 범위 변수에 사용됩니다. const는 상수를 선언하는 데 사용됩니다. 🎜rrreee🎜Iterator🎜🎜symbol.iterator를 사용하여 사용자 정의 반복자를 만드세요. 🎜rrreee🎜🎜🎜🎜Generators🎜🎜일반 함수는 함수 선언을 사용하는 반면, 생성기 함수는 function* 선언을 사용합니다. 🎜🎜생성기 함수 안에는 return과 유사한 구문이 있습니다. 바로 키워드 Yield입니다. 둘 사이의 차이점은 일반 함수는 한 번만 반환할 수 있는 반면, 생성기 함수는 여러 번 반환할 수 있다는 것입니다(물론 한 번만 반환할 수도 있습니다). 생성기 실행 중에 항복 표현식이 나타나면 즉시 일시 중지되며 나중에 실행 상태를 재개할 수 있습니다. 🎜rrreee🎜Unicode🎜🎜// ES5.1과 동일 "

위 내용은 JS--ES 2015/6 새로운 기능 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!