es6은 무엇에서 왔습니까?

es6는 2015년 6월에 출시되었습니다. es6의 전체 이름은 "ECMAScript6"입니다. 2015년 6월에 공식적으로 발표된 JavaScript 언어 표준입니다. 공식적으로는 ECMAScript2015(ES2015)라고 불리며, ECMAScript의 6번째 버전이므로 es6이라고 부르기도 합니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, ECMAScript 버전 6, Dell G3 컴퓨터.

"es" 소개

es(전체 이름은 "ECMAScript")는 ECMA-262 표준에 따라 구현된 범용 스크립트 언어로 주로 구문, 유형, 명령문을 규정합니다. , 키워드, 예약어, 연산자, 객체 및 기타 부분에 대해 ECMAScript의 최신 버전은 ECMAScript6(이하 "ES6")입니다.

ES 다음에 숫자가 표시될 때마다 ECMAScript의 다른 버전입니다.

es6/ ES2015

es6은 ECMAScript6(ECMAScript의 6번째 버전)을 의미하며 2015년 6월에 공식적으로 출시된 JavaScript 언어의 표준입니다. 공식적으로는 ECMAScript 2015(ES2015)라고 합니다. 그 목표는 JavaScript 언어를 사용하여 복잡한 대규모 애플리케이션을 작성하고 엔터프라이즈 수준의 개발 언어가 되도록 하는 것입니다.

ECMAScript 6은 기본적으로 ES5보다 인기가 훨씬 빠릅니다. 주된 이유는 최신 브라우저, 특히 이미 ES6의 대부분의 기능을 지원하는 Chrome 및 Firefox 브라우저 때문입니다.

ES6의 새로운 기능:

1. let, const 및 블록 범위

let을 사용하면 블록 수준 범위를 생성할 수 있습니다. ES6에서는 var 대신 let을 사용하여 변수를 정의할 것을 권장합니다. 블록 수준 범위에서도 유효한 변수 선언 방법은 상수를 선언할 수 있는 const입니다. ES6에서 const로 선언된 상수는 참조를 가리킵니다. 이는 이 "상수"가 불변이 아니라는 것을 의미합니다.

var a = 2;
{
  let a = 3;
  console.log(a); // 3
}
console.log(a); // 2

주의해야 할 몇 가지 사항이 있습니다. 키워드로 선언된 변수는 정적이 아닙니다. 변수 호이스팅 기능을 사용하면

let 및 const 선언은 가장 가까운 블록(중괄호 내)에서만 유효합니다.

상수 const 선언을 사용할 때는 다음과 같은 대문자 변수를 사용하세요. CAPITAL_CASING
• const 선언할 때 값을 할당해야 합니다
• 2. 화살표 함수

ES6에서 화살표 함수는 괄호를 사용하여 매개변수를 감싸고 그 뒤에 =>가 옵니다. 함수 본문:

{
  const ARR = [5,6];
  ARR.push(7);
  console.log(ARR); // [5,6,7]
  ARR = 10; // TypeError
}

위 예제의 getPrice 화살표 함수는 return 문이 필요하지 않은 간결한 함수 본문을 사용한다는 점에 유의해야 합니다. 다음 예제에서는 일반 함수 본문을 사용합니다.

var getPrice = function() {
  return 4.55;
};
 
// Implementation with Arrow Function
var getPrice = () => 4.55;

물론 화살표 함수입니다. 코드를 간결하게 만드는 것 이상의 작업을 수행합니다. 함수에서 this는 항상 바인딩되어 있으며 항상 객체 자체를 가리킵니다. 자세한 내용은 다음 예를 참조하세요.

let arr = ['apple', 'banana', 'orange'];
 
let breakfast = arr.map(fruit => {
  return fruit + 's';
});
 
console.log(breakfast); // apples bananas oranges

이를 저장하기 위해 변수를 사용해야 하는 경우가 많으며, 이후 성장 함수에서 이를 참조해야 합니다.

function Person() {
  this.age = 0;
 
  setInterval(function growUp() {
    // 在非严格模式下，growUp() 函数的 this 指向 window 对象
    this.age++;
  }, 1000);
}
var person = new Person();

화살표 함수를 사용하면 이 문제를 줄일 수 있습니다.

function Person() {
  var self = this;
  self.age = 0;
 
  setInterval(function growUp() {
    self.age++;
  }, 1000);
}

3 . 함수 매개변수는 기본값입니다.

ES6에서는 함수 매개변수에 대한 기본값을 설정할 수 있습니다:

function Person(){
  this.age = 0;
 
  setInterval(() => {
    // |this| 指向 person 对象
    this.age++;
  }, 1000);
}
 
var person = new Person();

4. Spread/Rest 연산자

Spread/Rest 연산자는 Spread 또는 나머지는 문맥 언어 영역에 따라 다릅니다.

반복자에 사용되는 경우 Spread 연산자입니다.

let getFinalPrice = (price, tax=0.7) => price + price * tax;
getFinalPrice(500); // 850

함수 매개변수에 사용되는 경우 Rest 연산자입니다.

function foo(x,y,z) {
  console.log(x,y,z);
}
 
let arr = [1,2,3];
foo(...arr); // 1 2 3

5 객체 어휘 확장

ES6에서는 객체 리터럴을 선언할 때 단축 구문을 사용할 수 있습니다. 속성 변수 및 함수의 정의 방법을 초기화하고 객체 속성에서 계산 작업을 허용합니다:

function foo(...args) {
  console.log(args);
}
foo( 1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]

6. 이진 및 8진수 리터럴

ES6은 2진수 및 8진수를 지원합니다. 리터럴은 0o 또는 0O를 추가하여 8진수 값으로 변환할 수 있습니다. 숫자 앞:

function getCar(make, model, value) {
  return {
    // 简写变量
    make,  // 等同于 make: make
    model, // 等同于 model: model
    value, // 等同于 value: value
 
    // 属性可以使用表达式计算值
    ['make' + make]: true,
 
    // 忽略 `function` 关键词简写对象函数
    depreciate() {
      this.value -= 2500;
    }
  };
}
 
let car = getCar('Barret', 'Lee', 40000);
 
// output: {
//     make: 'Barret',
//     model:'Lee',
//     value: 40000,
//     makeBarret: true,
//     depreciate: [Function: depreciate]
// }

7. 객체 및 배열 구조 분해

구조 분해는 객체 할당 중 중간 변수 생성을 방지할 수 있습니다.

let oValue = 0o10;
console.log(oValue); // 8
 
let bValue = 0b10; // 二进制使用 `0b` 或者 `0B`
console.log(bValue); // 2

8 객체 슈퍼 클래스는 슈퍼 메소드 사용을 허용합니다. 객체:

function foo() {
  return [1,2,3];
}
let arr = foo(); // [1,2,3]
 
let [a, b, c] = foo();
console.log(a, b, c); // 1 2 3
 
function bar() {
  return {
    x: 4,
    y: 5,
    z: 6
  };
}
let {x: x, y: y, z: z} = bar();
console.log(x, y, z); // 4 5 6

9. 템플릿 구문 및 구분 기호

ES6에는 여러 문자열과 변수를 조합하는 매우 간결한 방법이 있습니다.

${ ... }는 변수

`를 구분 기호로 렌더링하는 데 사용됩니다.

var parent = {
  foo() {
    console.log("Hello from the Parent");
  }
}
 
var child = {
  foo() {
    super.foo();
    console.log("Hello from the Child");
  }
}
 
Object.setPrototypeOf(child, parent);
child.foo(); // Hello from the Parent
             // Hello from the Child

10 for...of VS for...in

• for...of는 다음과 같이 사용됩니다. 배열과 같은 반복자 탐색:

• let user = 'Barret';
  console.log(`Hi ${user}!`); // Hi Barret!

for...in은 객체의 속성을 탐색하는 데 사용됩니다:

let nicknames = ['di', 'boo', 'punkeye'];
nicknames.size = 3;
for (let nickname of nicknames) {
  console.log(nickname);
}
// 结果: di, boo, punkeye

11 Map 및 WeakMap

ES6에는 Map 및 WeakMap이라는 두 가지 새로운 데이터 구조 세트가 있습니다. . 실제로 모든 객체는 맵으로 볼 수 있습니다.

객체는 여러 개의 키-값 쌍으로 구성됩니다. Map에서는 다음과 같이 모든 유형을 객체의 키로 사용할 수 있습니다.

let nicknames = ['di', 'boo', 'punkeye'];
nicknames.size = 3;
for (let nickname in nicknames) {
  console.log(nickname);
}
Result: 0, 1, 2, size

WeakMapWeakMap은 Map이지만 모든 키는 약한 참조입니다. WeakMap의 내용은 가비지 수집 중에 고려되지 않으므로 사용할 때 메모리 누수에 대해 걱정할 필요가 없습니다.

另一个需要注意的点是，WeakMap 的所有 key 必须是对象。它只有四个方法 delete(key),has(key),get(key) 和set(key, val)：

let w = new WeakMap();
w.set('a', 'b'); 
// Uncaught TypeError: Invalid value used as weak map key
 
var o1 = {},
    o2 = function(){},
    o3 = window;
 
w.set(o1, 37);
w.set(o2, "azerty");
w.set(o3, undefined);
 
w.get(o3); // undefined, because that is the set value
 
w.has(o1); // true
w.delete(o1);
w.has(o1); // false

12. Set 和 WeakSet

Set 对象是一组不重复的值，重复的值将被忽略，值类型可以是原始类型和引用类型：

let mySet = new Set([1, 1, 2, 2, 3, 3]);
mySet.size; // 3
mySet.has(1); // true
mySet.add('strings');
mySet.add({ a: 1, b:2 });

可以通过 forEach 和 for...of 来遍历 Set 对象：

mySet.forEach((item) => {
  console.log(item);
    // 1
    // 2
    // 3
    // 'strings'
    // Object { a: 1, b: 2 }
});
 
for (let value of mySet) {
  console.log(value);
    // 1
    // 2
    // 3
    // 'strings'
    // Object { a: 1, b: 2 }
}

Set 同样有 delete() 和 clear() 方法。

WeakSet

类似于 WeakMap，WeakSet 对象可以让你在一个集合中保存对象的弱引用，在 WeakSet 中的对象只允许出现一次：

var ws = new WeakSet();
var obj = {};
var foo = {};
 
ws.add(window);
ws.add(obj);
 
ws.has(window); // true
ws.has(foo);    // false, foo 没有添加成功
 
ws.delete(window); // 从结合中删除 window 对象
ws.has(window);    // false, window 对象已经被删除

13. 类

ES6 中有 class 语法。值得注意是，这里的 class 不是新的对象继承模型，它只是原型链的语法糖表现形式。

函数中使用 static 关键词定义构造函数的的方法和属性：

class Task {
  constructor() {
    console.log("task instantiated!");
  }
 
  showId() {
    console.log(23);
  }
 
  static loadAll() {
    console.log("Loading all tasks..");
  }
}
 
console.log(typeof Task); // function
let task = new Task(); // "task instantiated!"
task.showId(); // 23
Task.loadAll(); // "Loading all tasks.."

类中的继承和超集：

class Car {
  constructor() {
    console.log("Creating a new car");
  }
}
 
class Porsche extends Car {
  constructor() {
    super();
    console.log("Creating Porsche");
  }
}
 
let c = new Porsche();
// Creating a new car
// Creating Porsche

extends 允许一个子类继承父类，需要注意的是，子类的constructor 函数中需要执行 super() 函数。

当然，你也可以在子类方法中调用父类的方法，如super.parentMethodName()。

在 这里 阅读更多关于类的介绍。

有几点值得注意的是：

• 类的声明不会提升（hoisting)，如果你要使用某个 Class，那你必须在使用之前定义它，否则会抛出一个 ReferenceError 的错误
• 在类中定义函数不需要使用 function 关键词

14. Symbol

Symbol 是一种新的数据类型，它的值是唯一的，不可变的。ES6 中提出 symbol 的目的是为了生成一个唯一的标识符，不过你访问不到这个标识符：

var sym = Symbol( "some optional description" );
console.log(typeof sym); // symbol

注意，这里 Symbol 前面不能使用 new 操作符。

如果它被用作一个对象的属性，那么这个属性会是不可枚举的：

var o = {
    val: 10,
    [ Symbol("random") ]: "I'm a symbol",
};
 
console.log(Object.getOwnPropertyNames(o)); // val

如果要获取对象 symbol 属性，需要使用Object.getOwnPropertySymbols(o)。

15. 迭代器（Iterators）

迭代器允许每次访问数据集合的一个元素，当指针指向数据集合最后一个元素时，迭代器便会退出。它提供了 next() 函数来遍历一个序列，这个方法返回一个包含 done 和 value 属性的对象。

ES6 中可以通过 Symbol.iterator 给对象设置默认的遍历器，无论什么时候对象需要被遍历，执行它的 @@iterator 方法便可以返回一个用于获取值的迭代器。

数组默认就是一个迭代器：

var arr = [11,12,13];
var itr = arr[Symbol.iterator]();
 
itr.next(); // { value: 11, done: false }
itr.next(); // { value: 12, done: false }
itr.next(); // { value: 13, done: false }
 
itr.next(); // { value: undefined, done: true }

你可以通过 [Symbol.iterator]() 自定义一个对象的迭代器。

16. Generators

Generator 函数是 ES6 的新特性，它允许一个函数返回的可遍历对象生成多个值。

在使用中你会看到 * 语法和一个新的关键词 yield:

function *infiniteNumbers() {
  var n = 1;
  while (true){
    yield n++;
  }
}
 
var numbers = infiniteNumbers(); // returns an iterable object
 
numbers.next(); // { value: 1, done: false }
numbers.next(); // { value: 2, done: false }
numbers.next(); // { value: 3, done: false }

每次执行 yield 时，返回的值变为迭代器的下一个值。

17. Promises

ES6 对 Promise 有了原生的支持，一个 Promise 是一个等待被异步执行的对象，当它执行完成后，其状态会变成 resolved 或者rejected。

var p = new Promise(function(resolve, reject) {  
  if (/* condition */) {    // fulfilled successfully
    resolve(/* value */);  
  } else {    // error, rejected
    reject(/* reason */);  
  }});

每一个 Promise 都有一个 .then 方法，这个方法接受两个参数，第一个是处理 resolved 状态的回调，一个是处理 rejected 状态的回调：

p.then((val) => console.log("Promise Resolved", val),
       (err) => console.log("Promise Rejected", err));

【相关推荐：javascript视频教程、web前端】

위 내용은 es6은 무엇에서 왔습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!