저에게 최신 표준 ES6_javascript 기술을 배워보세요

ES6는 아직 출시되지 않았지만 이미 ES6에서 재작성된 프로그램이 있고, ES789에 대한 다양한 제안이 이미 시작됐다는 것이 믿어지시나요? 트렌드는 우리나 대중이 따라잡을 수 있는 것이 아닙니다.

트렌드가 너무 빠르더라도, 학습의 속도를 멈추지 않는다면, 우리는 트렌드에 뒤처지지 않을 것입니다. 차세대 JS인 ES6의 새로운 기능을 살펴보겠습니다.

화살 연산자

C#이나 Java를 알고 있다면 람다 표현식을 알아야 합니다. ES6의 새로운 화살표 연산자 =>도 같은 목적을 가지고 있습니다. 쓰기 기능을 단순화합니다. 연산자의 왼쪽은 입력 매개변수이고, 오른쪽은 수행된 연산과 반환값이 입력=>출력입니다.

JS에서는 콜백이 일반적이고 일반적으로 콜백이 익명 함수의 형태로 나타나는 것을 알고 있습니다. 매번 함수를 작성해야 하는데 이는 매우 번거롭습니다. 화살표 연산자를 도입하면 콜백을 쉽게 작성할 수 있습니다. 아래 예를 참조하세요.

var array = [1, 2, 3];
//传统写法
array.forEach(function(v, i, a) {
 console.log(v);
});
//ES6
array.forEach(v = > console.log(v));

글 시작 부분에 언급된 Traceur 온라인 코드 번역 페이지를 열고 코드를 입력하면 효과를 확인할 수 있습니다.

수업지원

ES6에서는 클래스에 대한 지원을 추가하고 클래스 키워드를 도입했습니다. (사실 클래스는 항상 JavaScript에서 예약어였으며, 향후 새 버전에서 사용될 수 있다는 점을 고려하기 위한 목적이었는데 이제 드디어 들어왔습니다. 편리함) . JS 자체는 객체 지향적이며 ES6에서 제공되는 클래스는 실제로 JS 프로토타입 패턴의 래퍼일 뿐입니다. 이제 네이티브 클래스 지원이 제공되므로 개체 생성 및 상속이 더욱 직관적이고 부모 클래스 메서드 호출, 인스턴스화, 정적 메서드 및 생성자와 같은 개념이 더욱 시각적입니다.

다음 코드는 ES6의 클래스 사용을 보여줍니다. 이번에도 코드를 Traceur에 붙여넣어 결과를 직접 확인할 수 있습니다.

//类的定义
class Animal {
 //ES6中新型构造器
 constructor(name) {
 this.name = name;
 }
 //实例方法
 sayName() {
 console.log('My name is '+this.name);
 }
}
//类的继承
class Programmer extends Animal {
 constructor(name) {
 //直接调用父类构造器进行初始化
 super(name);
 }
 program() {
 console.log("I'm coding...");
 }
}
//测试我们的类
var animal=new Animal('dummy'),
wayou=new Programmer('wayou');
animal.sayName();//输出 ‘My name is dummy'
wayou.sayName();//输出 ‘My name is wayou'
wayou.program();//输出 ‘I'm coding...'
 

향상된 객체 리터럴

객체 리터럴이 향상되고 작성 방법이 더욱 간결하고 유연해졌으며 객체 정의 시 더 많은 작업을 수행할 수 있습니다. 구체적인 내용은 다음과 같습니다.

• 프로토타입은 객체 리터럴로 정의할 수 있습니다
• 함수 키워드 없이 메소드를 정의할 수 있습니다
• 상위 클래스 메서드 직접 호출
  

이런 방식으로 객체 리터럴은 위에서 언급한 클래스 개념과 더 일치하므로 객체 지향 JavaScript를 더 쉽고 편리하게 작성할 수 있습니다.

//通过对象字面量创建对象
var human = {
 breathe() {
 console.log('breathing...');
 }
};
var worker = {
 __proto__: human, //设置此对象的原型为human,相当于继承human
 company: 'freelancer',
 work() {
 console.log('working...');
 }
};
human.breathe();//输出 ‘breathing...'
//调用继承来的breathe方法
worker.breathe();//输出 ‘breathing...'

문자열 템플릿

문자열 템플릿은 비교적 간단하고 이해하기 쉽습니다. ES6에서는 백틱 `을 사용하여 문자열을 생성할 수 있습니다. 이러한 방식으로 생성된 문자열에는 달러 기호와 중괄호로 묶인 변수 ${vraible}이 포함될 수 있습니다. C#과 같은 강력한 형식의 백엔드 언어를 사용해 본 적이 있다면 이 기능에 익숙할 것입니다.

//产生一个随机数
var num=Math.random();
//将这个数字输出到console
console.log(`your num is ${num}`);

해체

배열이나 객체의 값을 자동으로 구문 분석합니다. 예를 들어, 함수가 여러 값을 반환하려는 경우 일반적인 접근 방식은 개체를 반환하고 각 값을 개체의 속성으로 반환하는 것입니다. 하지만 ES6에서는 구조 분해 기능을 사용하면 배열을 직접 반환할 수 있으며, 그러면 배열의 값이 자동으로 값을 받는 해당 변수로 구문 분석됩니다.

var [x,y]=getVal(),//函数返回值的解构
 [name,,age]=['wayou','male','secrect'];//数组解构

function getVal() {
 return [ 1, 2 ];
}

console.log('x:'+x+', y:'+y);//输出：x:1, y:2 
console.log('name:'+name+', age:'+age);//输出： name:wayou, age:secrect 

매개변수 기본값, 가변 매개변수, 확장 매개변수

1. 기본 매개변수 값

이제 함수를 정의할 때 이전처럼 논리 OR 연산자를 사용하는 대신 매개변수의 기본값을 지정할 수 있습니다.

function sayHello(name){
 //传统的指定默认参数的方式
 var name=name||'dude';
 console.log('Hello '+name);
}
//运用ES6的默认参数
function sayHello2(name='dude'){
 console.log(`Hello ${name}`);
}
sayHello();//输出：Hello dude
sayHello('Wayou');//输出：Hello Wayou
sayHello2();//输出：Hello dude
sayHello2('Wayou');//输出：Hello Wayou

2. 부정확한 매개변수

무한 매개변수는 이름이 지정되지 않은 매개변수를 무한정 수신하면서 함수에서 이름이 지정된 매개변수를 사용하는 것입니다. 이것은 단지 구문상의 설탕일 뿐이며 이전 JavaScript 코드에서는 인수 변수를 통해 이를 달성할 수 있었습니다. 변수 매개변수의 형식은 세 개의 마침표 뒤에 모든 변수 매개변수를 나타내는 변수 이름이 오는 형식입니다. 예를 들어, 다음 예에서...x는 add 함수에 전달된 모든 매개변수를 나타냅니다.

//将所有参数相加的函数
function add(...x){
 return x.reduce((m,n)=>m+n);
}
//传递任意个数的参数
console.log(add(1,2,3));//输出：6
console.log(add(1,2,3,4,5));//输出：15 

3. 확장 매개변수

확장 매개변수는 또 다른 형태의 구문 설탕으로, 적용을 거치지 않고 배열 또는 배열과 유사한 매개변수를 함수 매개변수로 직접 전달할 수 있습니다.

var people=['Wayou','John','Sherlock'];
//sayHello函数本来接收三个单独的参数人妖，人二和人三
function sayHello(people1,people2,people3){
 console.log(`Hello ${people1},${people2},${people3}`);
}
//但是我们将一个数组以拓展参数的形式传递，它能很好地映射到每个单独的参数
sayHello(...people);//输出：Hello Wayou,John,Sherlock 

//而在以前，如果需要传递数组当参数，我们需要使用函数的apply方法
sayHello.apply(null,people);//输出：Hello Wayou,John,Sherlock 

let 및 const 키워드

let이 정의하는 변수는 특정 범위 내에서만 사용할 수 있고 이 범위 밖에서는 유효하지 않다는 점을 제외하면 let을 var로 생각할 수 있습니다. const는 매우 직관적이며 상수, 즉 값을 변경할 수 없는 변수를 정의하는 데 사용됩니다.

for (let i=0;i<2;i++)console.log(i);//输出: 0,1
console.log(i);//输出：undefined,严格模式下会报错

값 순회

우리 모두는 for in 루프가 배열, 유사 배열 또는 객체를 탐색하는 데 사용된다는 것을 알고 있습니다. ES6에 새로 도입된 for of 루프는 반복할 때마다 일련 번호를 제공하지 않는다는 점이 다릅니다. 그러나 가치.

var someArray = [ "a", "b", "c" ];
 
for (v of someArray) {
 console.log(v);//输出 a,b,c
}

注意，此功能google traceur并未实现，所以无法模拟调试,下面有些功能也是如此

iterator, generator

这一部分的内容有点生涩，详情可以参见这里。以下是些基本概念。

• iterator:它是这么一个对象，拥有一个next方法，这个方法返回一个对象{done,value}，这个对象包含两个属性，一个布尔类型的done和包含任意值的value
• iterable: 这是这么一个对象，拥有一个obj[@@iterator]方法，这个方法返回一个iterator
• generator: 它是一种特殊的iterator。反的next方法可以接收一个参数并且返回值取决与它的构造函数（generator function）。generator同时拥有一个throw方法
• generator 函数: 即generator的构造函数。此函数内可以使用yield关键字。在yield出现的地方可以通过generator的next或throw方法向外界传递值。generator 函数是通过function*来声明的
• yield 关键字：它可以暂停函数的执行，随后可以再进进入函数继续执行

模块

在ES6标准中，JavaScript原生支持module了。这种将JS代码分割成不同功能的小块进行模块化的概念是在一些三方规范中流行起来的，比如CommonJS和AMD模式。

将不同功能的代码分别写在不同文件中，各模块只需导出公共接口部分，然后通过模块的导入的方式可以在其他地方使用。下面的例子来自tutsplus:

// point.js
module "point" {
 export class Point {
 constructor (x, y) {
  public x = x;
  public y = y;
 }
 }
}
 
// myapp.js
//声明引用的模块
module point from "/point.js";
//这里可以看出，尽管声明了引用的模块，还是可以通过指定需要的部分进行导入
import Point from "point";
 
var origin = new Point(0, 0);
console.log(origin);

Map，Set 和 WeakMap，WeakSet

这些是新加的集合类型，提供了更加方便的获取属性值的方法，不用像以前一样用hasOwnProperty来检查某个属性是属于原型链上的呢还是当前对象的。同时，在进行属性值添加与获取时有专门的get，set 方法。

下方代码来自es6feature

// Sets
var s = new Set();
s.add("hello").add("goodbye").add("hello");
s.size === 2;
s.has("hello") === true;

// Maps
var m = new Map();
m.set("hello", 42);
m.set(s, 34);
m.get(s) == 34;

有时候我们会把对象作为一个对象的键用来存放属性值，普通集合类型比如简单对象会阻止垃圾回收器对这些作为属性键存在的对象的回收，有造成内存泄漏的危险。而WeakMap,WeakSet则更加安全些，这些作为属性键的对象如果没有别的变量在引用它们，则会被回收释放掉，具体还看下面的例子。

正文代码来自es6feature

// Weak Maps
var wm = new WeakMap();
wm.set(s, { extra: 42 });
wm.size === undefined

// Weak Sets
var ws = new WeakSet();
ws.add({ data: 42 });//因为添加到ws的这个临时对象没有其他变量引用它，所以ws不会保存它的值，也就是说这次添加其实没有意思

Proxies

Proxy可以监听对象身上发生了什么事情，并在这些事情发生后执行一些相应的操作。一下子让我们对一个对象有了很强的追踪能力，同时在数据绑定方面也很有用处。

以下例子借用自这里。

//定义被侦听的目标对象
var engineer = { name: 'Joe Sixpack', salary: 50 };
//定义处理程序
var interceptor = {
 set: function (receiver, property, value) {
 console.log(property, 'is changed to', value);
 receiver[property] = value;
 }
};
//创建代理以进行侦听
engineer = Proxy(engineer, interceptor);
//做一些改动来触发代理
engineer.salary = 60;//控制台输出：salary is changed to 60

上面代码我已加了注释，这里进一步解释。对于处理程序，是在被侦听的对象身上发生了相应事件之后，处理程序里面的方法就会被调用，上面例子中我们设置了set的处理函数，表明，如果我们侦听的对象的属性被更改，也就是被set了，那这个处理程序就会被调用，同时通过参数能够得知是哪个属性被更改，更改为了什么值。

Symbols

我们知道对象其实是键值对的集合，而键通常来说是字符串。而现在除了字符串外，我们还可以用symbol这种值来做为对象的键。Symbol是一种基本类型，像数字，字符串还有布尔一样，它不是一个对象。Symbol 通过调用symbol函数产生，它接收一个可选的名字参数，该函数返回的symbol是唯一的。之后就可以用这个返回值做为对象的键了。Symbol还可以用来创建私有属性，外部无法直接访问由symbol做为键的属性值。

以下例子来自es6features

(function() {

 // 创建symbol
 var key = Symbol("key");

 function MyClass(privateData) {
 this[key] = privateData;
 }

 MyClass.prototype = {
 doStuff: function() {
 ... this[key] ...
 }
 };

})();

var c = new MyClass("hello")
c["key"] === undefined//无法访问该属性，因为是私有的

Math，Number，String，Object 的新API

对Math,Number,String还有Object等添加了许多新的API。下面代码同样来自es6features，对这些新API进行了简单展示。

Number.EPSILON
Number.isInteger(Infinity) // false
Number.isNaN("NaN") // false

Math.acosh(3) // 1.762747174039086
Math.hypot(3, 4) // 5
Math.imul(Math.pow(2, 32) - 1, Math.pow(2, 32) - 2) // 2

"abcde".contains("cd") // true
"abc".repeat(3) // "abcabcabc"

Array.from(document.querySelectorAll('*')) // Returns a real Array
Array.of(1, 2, 3) // Similar to new Array(...), but without special one-arg behavior
[0, 0, 0].fill(7, 1) // [0,7,7]
[1,2,3].findIndex(x => x == 2) // 1
["a", "b", "c"].entries() // iterator [0, "a"], [1,"b"], [2,"c"]
["a", "b", "c"].keys() // iterator 0, 1, 2
["a", "b", "c"].values() // iterator "a", "b", "c"

Object.assign(Point, { origin: new Point(0,0) })

Promises

Promises是处理异步操作的一种模式，之前在很多三方库中有实现，比如jQuery的deferred 对象。当你发起一个异步请求，并绑定了.when(), .done()等事件处理程序时，其实就是在应用promise模式。

//创建promise
var promise = new Promise(function(resolve, reject) {
 // 进行一些异步或耗时操作
 if ( /*如果成功 */ ) {
 resolve("Stuff worked!");
 } else {
 reject(Error("It broke"));
 }
});
//绑定处理程序
promise.then(function(result) {
 //promise成功的话会执行这里
 console.log(result); // "Stuff worked!"
}, function(err) {
 //promise失败会执行这里
 console.log(err); // Error: "It broke"
});

요약은 앞부분과 뒷부분의 차이가 점점 작아지고 있습니다. 이 글은 lukehoban/es6features를 기준으로 작성되었으며 많은 블로그 정보를 참고하고 있습니다. JavaScript의 최신 표준인 ECMAScript 6을 모두가 더 잘 이해하시기 바랍니다. 모든 분들의 학습에 도움이 되기를 바랍니다.