기본 매개 변수에 ES6
때 우리는 모듈을 작성해야 합 계정한 경우 인수를 생략할 것이다. 즉,좋은 모듈은 매개 변수에 대한 기본값을 가질만큼 똑똑해야합니다. ES5 에서는 논리 또는(||)를 사용하는 아래 코드와 같은 것을 작성합니다.
이 문은 edge 경우를 제외하고는 잘 작동합니다. 는 경우,예를 들어,값이 0—기 때문에 0falsy 에서 자바스크립트는 조건 기본값은 하드 코딩된 값을 대신 되는 값은 그 자체로서,당신은 수도에서 원하는 경우가 있습니다., 물론,필요하는 0 값으로(#sarcasmfont),그래서 우리는 그냥 무시되 이 결함하고 사용하는 로직 또는 어쨌든…
나 어쩌면 이벤트는 경우 다른 사람을 확인하는 조건에 대한 정의되지 않은 값:
var getAccounts = function(limit) {
if (typeof limit == 'undefined') limit = 10
...
}
은 더 이상 없습니다! 에 ES6,를 넣을 수 있습니다 기본값으로 바로에서 서명의 기능은 다음과 같이
var getAccounts = function(limit = 10) {
...
}
var link = function(height = 50, color = 'red', url = 'http://capitalone.io') {
...
}
이뿐만 아니라 사용하여 적은 라인의 코드,그러나 증가했다 가독성 뿐만 아니라. 그건 그렇고,이 구문은 루비와 파이썬과 비슷합니다!,
Es6 의 Rest And Spread Parameters
변수 또는 무제한의 인수로 JavaScript 함수를 사용하거나 작성한 적이 있다면 인수 객체를 알고 있습니다. 이 객체에는 함수에 전달 된 모든 매개 변수가 포함됩니다. 문제는이 인수 객체가 실제 배열이 아니라는 것입니다. 정렬 또는 맵과 같은 함수를 명시 적으로 사용하려는 경우 배열로 변환해야합니다. 예를 들어,이 기능을 요청 변환 인자를 사용하여 통화():
그는 더 좋은 방법이 있에 ES6 액세스를 무한대의 인수를 배열로? 예!, 그것은 rest 매개 변수 구문이며 줄임표로 정의됩니다…. 예를 들어,이 ES6 기능은 서명으로 나머지는 콜백을 매개 변수가 배열의 나머지 부분과 매개 변수:
function(url, options, ...callbacks) {
var callback1 = callbacks
var callback2 = callbacks
// ...
}
참고:나머지 부분에 배열 첫 번째 매개 변수는 하나 없는 이름은,예를 들어,콜백은 인덱스 0,지 않으로 2 에 ES5 의 인수입니다. 또한 rest 매개 변수 뒤에 다른 명명 된 인수를 넣으면 구문 오류가 발생합니다. Rest 매개 변수는 실제 배열이 아닌 arguments 객체를 대체하기 때문에 JavaScript 에 훌륭한 sugarcoating 추가 기능입니다.,
에 ES5 하고 싶은 경우에는 배열을 사용으로 인수 기능을 사용하는 것 적용()함수:
function request(url, options, callback) {
// ...
}
var requestArgs =
request.apply(null, requestArgs)
지금 ES6,우리가 사용할 수 있는 확산 매개변수는 비슷하게 나머지 부분에서 매개 변수는 구문을 사용할 때 타원…:
function request(url, options, callback) {
// ...
}
var requestArgs =
request(...requestArgs)
ES6 개발자를 사용할 수 있습 확산에서 연산자는 다음과 같은 경우:
확산 연산자는 유사한 구문을 나머지를 매개 변수가 있지만,나머지는 함수에서 사용 정/선언 확산에서 사용되는 통화 및 리터럴이 있습니다., 그들은 명령형 코드의 추가 줄을 입력하지 못하도록 개발자를 구하므로이를 알고 사용하는 것이 좋은 기술입니다.
템플릿에서 리터럴 ES6
템플릿 리터럴(나 보간법으로 그들은 알에서 다른 언어로)의 방법을 출력에서 변수 문자열과 혼합된 텍스트,일반적으로 사용자 인터페이스를 제공합니다. ES5 에서는 다음과 같이 문자열을 끊어야했습니다.,
var name = 'Your name is ' + first + ' ' + last + '.'
var url = 'http://localhost:3000/api/messages/' + id
다행히도,ES6 우리가 사용할 수 있는 새로운 syntax${이름}내부의 백 쳤 문자열
var name = `Your name is ${first} ${last}.`
var url = `http://localhost:3000/api/messages/${id}`
이것은 깔끔한 개발자가 최종의 결과 문자열을 한 눈에 대하려고의 평가 연결한 표현입니다.
ES6 문자열 템플릿은 좋지만,구문을 충돌을 일으킬에 Markdown 문서를 사용할 경우 문자열 템플릿 및 인라인 코드는 태그(기 때문에 인하는 인라인 코드에 의해 표시 돌아-틱뿐만 아니라)., By the way,커피 스크립트는 내 생각이 더 나은 솔루션을 때 그것을 채우 더블 quited 문자열은(유사한 루비):
var name = "Your name is #{first} #{last}."
var url = "http://localhost:3000/api/messages/#{id}"
보간은 좋지만,당신은 어떻게 작동 멀티-라인 텍스트에서 JavaScript?
ES6 의 멀티 라인 문자열
또 다른 맛있는 구문 sugarcoating 은 멀티 라인 문자열입니다. ES5 에서는 이러한 접근 방식 중 하나를 사용해야했으며 추악했습니다., 으로 연결한다.
또는 탈출 slash:
var fourAgreements = 'You have the right to be you.\n\
You can only be you when you do your best.'
는 동안에 ES6,간단하게 활용 backticks 다음과 같다:
var roadPoem = `Then took the other, as just as fair,
And having perhaps the better claim
Because it was grassy and wanted wear,
Though as for that the passing there
Had worn them really about the same,`
var fourAgreements = `You have the right to be you.
You can only be you when you do your best.`
Multi-선 문자열을 유용한 추가 있을 경우 많이 사용하는 텍스트에서 자바스크립트 코드입니다.,
선언 및 할당 ES6
선언 및 수 있는 더 열심히 개념을 파악하는 것보다는 멀티-라인 문자열이 있기 때문에 약간의 마술 뒤에 현장…자의 말을 단순한 할당은 키에는 사용자 id 및 accountNumber 는 변수 사용자 id 및 accountNumber:
var data = $('body').data(), // data has properties
userId and accountNumber userId = data.userId, accountNumber = data.accountNumber
의 다른 예는 과제는 이름의 변수 및 객체 속성이 동일하다:
에 ES6,우리는 우리를 대체할 수 있습 ES5 코드 위로 이러한 문
var { userId, accountNumber} = $('body').data()
var {json} = require('body-parser')
var {username, password} = req.body
이것은 또한 작품으로 배열입니다. 미친!,
var = $('.column'),
= file.split('\n')
시간이 걸릴 수 있습을 얻을 사용하여 선언 및 할당문,하지만 달콤한 당의를 입히 그럼에도 불구하고.
Es6 에서 향상된 객체 리터럴
ES6 에서 객체 리터럴로 할 수있는 것은 마음이 부는 것입니다! 우리는 ES5 의 json 의 영광 된 버전에서 ES6 의 클래스와 밀접하게 닮은 것으로 갔다.
엔터프라이즈 개발에서는 프로젝트가 더 크고 움직이는 부분이 많기 때문에 코드 모듈화가 중요합니다. 향상된 객체 리터럴을 사용하면 기능이로드 된 정말 강력한 객체를 만들 수 있습니다.,
여기에 일반적인 ES5 개체 리터럴 몇 가지 방법과 특성/등록:
경우 우리가 원하는 멋진 될 수 있는 우리에서 상속되는 servicebase 에 의해 그것을 만드는 프로토 타입니다.방법을 만들기:
I know,accountServiceES5ObjectCreate 및 accountServiceES5 는 완전히 동일하기 때문에,하나의 객체(accountServiceES5)이 속성에서 프로토__체에서와 같이 아래 그림:
하지만 위해 이를 들어,고려 하자 그들이 비슷합니다., ES6 객체 리터럴에서 할당에 속기를 사용할 수 있습니다. 예를 들어,getAccounts:getAccounts 는 단지 getAccounts 가됩니다.
또한 super 를 호출하고 동적 키를 가질 수 있습니다. 예를 들어 toString()메소드는 super 를 호출하여 json 객체를 문자열로 반환합니다.valueOf()및 valueOf_1_2_3 적 속성 이름:
이 증진하는 좋은 오래된 개체 리터럴 때문에 개발자를 포장할 수 있는 더 로직하고 더 많은 것을보다 ES5 니다.,
Es6 의 화살표 함수
이것은 아마도 내가 가장 기다렸던 기능 일 것입니다. 나는 그것의 뚱뚱한 화살을 위해 CoffeeScript 를 좋아했다. 이제 우리는 ES6 에 그것들을 가지고 있습니다.
뚱뚱한 화살은 놀라운 것이기 때문에 만들이 제대로 동작하는,즉,이는 동일한 값으로서의 컨텍스트 기능을—그것은 없으로 변 일반적으로 발생을 만들 때마다 마감. 이 동작은 자바 스크립트의 더 나쁜 부분 중 하나였으며 종종 언어에 새로운 개발자와 많은 혼란을 야기했습니다., ES6 에서 화살표 함수를 사용하면 그=this 또는 self=this 또는 _this=this or 사용을 중지 할 수 있습니다.바인드(이).
예를 들어,이 코드에 ES5 은 추한할 수 있기 때문에 잊지 컨텍스트 전송의 폐쇄와 함께 _this:
var _this = this
$('.btn').click(function(event){
_this.sendData()
})
bind()또는 전화()접근은 많지 않기 때문에 더 나은 그들의 상세 정보입니다. 하지만 살펴 이 ES6 코드:
$('.btn').click((event) =>{
this.sendData()
})
슬프게도,ES6 위원회는 결정 빌리는 마른 화살표에서 커피 스크립트가 너무 많고 좋은 것을 우리는 긴 오래된 기능을 대신 합니다., (CoffeeScript 의 스키니 화살표는 ES5 및 ES6 의 정규 기능처럼 작동합니다).
여기에 또 하나의 예에는 우리가 사용하는 호출을 통과하는 컨텍스트를 logUpperCase()함수에서 ES5:
는 동안에 ES6,우리가 엉망이 필요하지 않으로 주위 _this:
참고할 수 있는 믹스 매치 오래된 기능을 가진=>에 ES6 십시오. 그리고 화살표 함수를 한 줄 문과 함께 사용하면 표현식이됩니다. 그것은 암시 적으로 그 단일 진술의 결과를 반환 할 것입니다. 두 개 이상의 줄이있는 경우 명시 적으로 반환을 사용해야합니다.,
이 ES5 코드 배열을 만들어 메시지에서 배열
가 될 것이 이에 ES6:
var ids =
var messages = ids.map(value => `ID is ${value}`) // implicit return
알 수 있는 내가 사용하는 문자열 템플릿? CoffeeScript 의 또 다른 기능…
괄호()는 화살표 함수 서명에서 단일 매개 변수에 대해 선택 사항입니다. 그러나 둘 이상의 매개 변수를 사용할 때 필요합니다. 에 ES5 코드는 기능을 가진 명시적 반환:
이제 여기에 더욱 설득력 버전에서 코드의 ES6 와 괄호는 주위에 params 및 암시적 반환:
지 않는 뚱뚱한 화살표 좋은? 그들을 사용하십시오.,
에서 약속 ES6
약속되는 논쟁적인 개발을 주제로,특히 대규모 조직에서는 더 어렵게 될 수 있습에 동의 일반적인 접근 방식이다. 이것에 대한 한 가지 이유는 Q,bluebird,deferred 와 같이 약간 다른 구문을 사용하는 promise 구현의 수입니다.js,서약,avow 및 jquery 는 몇 가지 이름을 연기했습니다. 또 다른 이유는 일부 소프트웨어 엔지니어들은 말한다,”우리는 할 필요가 없고 약속을 사용할 수 있습니다 비동기,발전기,콜백,etc.”
다행히도 es6 에 추가 된 표준 약속 구현으로 논쟁이 조용해질 가능성이 있습니다!,
자 고이 아니라 사소한의 예 지연된 비동기적으로 실행 setTimeout():
setTimeout(function(){ console.log('Yay!') }, 1000)
우리는 다시 이 코드를 작성에 ES6 으로 약속한다.
var wait1000 = new Promise(function(resolve, reject) {
setTimeout(resolve, 1000)
}).then(function() {
console.log('Yay!')
})
또는 ES6 화살표수 기능:
var wait1000 = new Promise((resolve, reject)=> {
setTimeout(resolve, 1000)
}).then(()=> {
console.log('Yay!')
})
지금까지,우리는 우리의 수를 증가하고 라인의 코드하지 않고 어떤 명백한 혜택입니다. 맞습니다,반 직관적 인 것처럼 보입니다. Settimeout()콜백 내부에 더 중첩 된 논리가 있으면 이점이 있습니다., 예를 들어,이 ES5 코드가 두 개의 중첩된 콜백
setTimeout(function(){
console.log('Yay!')
setTimeout(function(){
console.log('Wheeyee!')
}, 1000)
}, 1000)
이것은 다시 쓸 수 있으로 ES6 약속을 다음과 같이
으로 관찰할 수 있는 코드 조직 변경되었을 때 우리는 refactor 콜백만 코드로 코드와 함께 약속입니다.
이 에세이에서 다루지 않은 또 다른 이점—promissions 는 또한 좋은 기능인 fail-and-catch-all 콜백을 가지고 있습니다. 약속에 대한 자세한 내용은이 게시물을 살펴보십시오:ES6 약속에 대한 소개.
블록 범위가 지정된 구조:Let 및 Const
ES6 코드에서 이상한 소리가 나는 let 을 이미 보았을 수 있습니다., 이것은 단순히 설탕 코팅 기능이 아닙니다. 그것은 더 복잡하고 변수 선언에 더 많은 논리를 추가합니다.
let 는 개발자가 변수의 범위를 블록에 지정할 수있는 새로운 var 입니다. 우리는 중괄호로 블록을 정의합니다. ES5 에서 블록은 여기에서 볼 수 있듯이 vars 에 아무 것도하지 않았습니다.
위의 코드에서 결과는 1000 이됩니다. 와우! 정말 나쁜 버그입니다. ES6 에서는 let 을 사용하여 범위를 블록으로 제한합니다. 그런 다음 vars 는 함수 범위입니다.
이 코드에서 if 블록에도 let 선언이 있기 때문에 값은 0 입니다., 그것이 아무것도 없다면(양=1),식은 1 이었을 것입니다.
const 에 관해서,일이 더 쉽다;그것은 단지 재 할당을 방지하고,또한 let 와 같은 블록 범위입니다. 그냥을 입증하고,여기에 여러 상수 및 코드이기 때문에 잘 작동 const 문에 속한 다른 블록
에서 내 소견,하자 및 const 치는 언어입니다. 그들 없이는 우리는 단 하나의 행동 만 가지고 있었고,이제는 고려해야 할 여러 시나리오가 있습니다., ;-(새로운 사람들을 위한 자바 스크립트,자에서 같은 언어 자바,const 고자 제공의 새로운 레이어가 내장된 보호에 대한 몇 가지 예측할 수 없는 행동입니다.
Es6 의 클래스
객체 지향 프로그래밍(oop)을 좋아한다면이 기능을 좋아할 것입니다. FACEBOOK 에 대한 의견을 좋아하는 것만 큼 쉽게 ES6 에서 수업을 작성하고 그들로부터 상속받을 수 있습니다.
ES5 에서는 클래스 생성 및 사용이 가장 적게 말하기 어려웠습니다. 키워드 클래스가 없었습니다(예약되었지만 아무 것도하지 않았습니다)., 그 외에,많은 상속의 패턴을 좋아하는 의사 고아,고아한,기능성 혼란에 추가 쏟아져,가솔린에서 불 부서 사 JavaScript developers.많은 패턴이 있기 때문에 ES5 에서 클래스를 작성하는 방법을 보여주지 않습니다. 지금 당장 ES6 예제를 살펴 보겠습니다. ES6 클래스가 함수 팩토리 방식이 아닌 프로토 타입을 사용할 것이라고 말할 수 있습니다. 우리는 classbaseModel 에서는 우리는 할 수 있을 정의 생성자와 getName()메소드:
알 수 있는 내가 사용하고 기본 매개 변수 값에 대한 옵션과 데이터를 사용합니다., 또한 메소드 이름은 더 이상 단어 함수 또는 콜론(:)을 가질 필요가 없습니다. 다른 큰 차이점은 할당할 수 없습니다 특성이다.이름과 동일한 방법으로 방법,즉,당신은 말할 수 없름에 들여쓰기 수준으로 방법입니다. 속성의 값을 설정하려면 생성자에 값을 할당하기 만하면됩니다.,
AccountModel 이에서 상속 baseModel 클래스 이름을 확장 PARENT_NAME:
class AccountModel extends baseModel {
constructor(options, data) {
전화 부모를 생성자,자연스럽게 호출 슈퍼()함께 params:
super({private: true}, ) // Call the parent method with super
this.name = 'Account Model'
this.url +='/accounts/'
}
하려면 정말 멋진 설정할 수도 있습니다 getter 다음과 같이 accountsData 로 속성:
get accountsData() { // Calculated attribute getter
// ... make XHR
return this.data
}
}
후 그래서 이 모든 작업,어떻게 실제로 이 클래스를 사용하여 아라미? 3 살짜리 아이를 속여서 산타 클로스를 믿는 것만 큼 쉽습니다., 사용하는 새로운 피연산자:
let accounts = new AccountModel(5)
accounts.getName()
console.log('Data is %s', accounts.accountsData)
경우에 당신은 당신이,궁금 출력 결과는 다음과 같습니다.
Class name: Account Model
Data is %s 32113123123,524214691
의 물론,클래스가 존재하에서 커피 스크립트와 나 JavaScript 준 그래서 그들은하지 않습니다. 그러나,ES6 클래스를 사용하여 쉽게 만들어졌는데,이는 특히 중요한 기업하기 때문에 개발자들은 일반적으로 큰 걸친 프로젝트 팀이 여러(으므로 코드를 필요로 모듈화).
Es6 의 모듈
아시다시피 ES6 이전에는 JavaScript 에서 기본 모듈 지원이 없었습니다., 사람들은 AMD,RequireJS,CommonJS 및 기타 해결 방법을 생각해 냈지만 해결 방법 및 해킹이었습니다. ES6 에는 이제 가져 오기 및 내보내기 피연산자가있는 모듈이 내장되어 있습니다.
에 ES5,사용하는<스크립트>태그가 가진 인생 또는 도서관 같은 AMD,는 동안에 ES6 에 노출될 수 있습니다 클래스로 수출합니다. 나는 노드이기 때문에.js guy 그래서 나는 또한 노드 인 CommonJS 를 사용할 것이다.js 구문,이 문제를 해결합니다. Browserify bundler 와 함께 브라우저에서 CommonJS 를 사용하는 것은 상당히 간단합니다., ES5 모듈에 포트 변수 및 getAccounts 메소드가 있다고 가정 해 봅시다.나는 이것이 내가 할 수있는 유일한 방법이라고 생각한다.js,우리는(‘모듈’)그 의존성을 요구할 것입니다:
var service = require('module.js')
console.log(service.port) // 3000
ES6 에서는 내보내기 및 가져 오기를 사용합니다. 예를 들어 ES6 모듈의 라이브러리입니다.js 파일:
export var port = 3000
export function getAccounts(url) {
...
}
수입자 ES6 파일 메인에서.js,우리는’my-module’구문에서 import{name}을 사용합니다., 예를 들어,우리는 객체를 가져오기/방법 포트,getAccounts 에 module 이라는 모듈:
import {port, getAccounts} from 'module'
console.log(port) // 3000
나 우리가 가져올 수 있습니다 모든 것을 변수로에서 서비스됩니다.js:
import * as service from 'module'
console.log(service.port) // 3000
참고,그에 대한 기본 지원 ES6 모듈 브라우저에서 오지 않은 곧(으로 이 글을 쓰는 이상),그래서 당신은 같은 뭔가가 필요 jspm 을 활용하 ES6 모듈을 사용합니다.
ES6 모듈에 대한 자세한 내용과 예제를 보려면이 텍스트를 살펴보십시오. 그리고 기억,-상관없이,모듈 형 자바 스크립트를 작성!,
For…ES6 의 이해의
여기 ES5 의 문제가 있습니다:키를 사용하여 객체를 반복하려는 경우 먼저 객체로 해당 키를 추출해야합니다.키(). 예:
forEach 의 또 다른 문제점은 단어 함수를 작성해야한다는 것입니다. 그러나 ES6 에는 더 나은 진술이 있습니다! For…of 문은 standard for and forEach 를 대체하며 다음과 유사합니다 for…in 를 제외하고 그 for…in 키를 반복하고 값을 반복합니다.,
이용하여 코드를 조각의 데이터(책),우리는 반복할 수 있을 사용하여 위한다고 열쇠나를 사용한다.
for (let key in books){
console.log(books)
}
출력을 키:
Pro Express.js
React Quickly
Full Stack JavaScript
Azat
동안을 위해…의 작동 값:
for (let book of books){
console.log(book)
}
출력한다.
Pro Express.js
React Quickly
Full Stack JavaScript
통지의 출력을 위해…의 값을 무시합 열쇠를 가진 저자는 것으로 forEach 에 배열
나 개인적인 경험 작업을 함축하는 그들이 증가 코드를 읽기 쉽도록 합니다. 이는 엔터프라이즈 응용 프로그램의 코드 유지 관리에 가장 중요합니다.피>
