ECMAScript 6 - 10 놀라운 새로운 기능
JavaScript (JScript 및 ActionScript와 함께)는 ECMAScript라는 범용 클라이언트 측 스크립팅 언어 사양을 구현 한 것입니다. ECMAScript (또는 공식적으로 ECMA-262)가이 불쾌한 정의를 조금 더 매력적으로 보이게하기 위해 우리가 자바 스크립트를 사용하는 방법을 정의하는 표준과 우리가 달성 할 수있는 것 그것으로.
최신 6 판 언어 인 ECMAScript 2015 (또는 ES6)는 1997 년 첫 번째 버전 이후로 가장 중요한 업데이트 일 것입니다. 최신 릴리스의 주요 목표는 더 큰 응용 프로그램과 라이브러리를 만드는 데있어 더 나은 지원을 제공하는 것이 었습니다. 즉, 더 성숙한 구문, 더 쉽게 코딩 할 수있는 새로운 바로 가기, 새로운 방법, 키워드, 데이터 형식 및 기타 여러 가지 향상된 기능을 의미합니다..
ES6 문서는 광범위합니다. 많은 것을 읽으려면 ECMA International 웹 사이트에서 전체 사양을 다운로드 할 수 있습니다. 이 글에서는 ES6에 훨씬 더 많은 기능이 있지만 손으로 직접 선택한 10 개의 기능을 살펴 보겠습니다. 그것으로 실험하고 싶다면, ES6 Fiddle은 그렇게 할 수있는 좋은 장소이며, 샘플 코드 일부도 찾을 수 있습니다..
ECMAScript 6 지원
브라우저 공급 업체는 점진적으로 ECMAScript 6의 기능에 대한 지원을 추가했습니다. 여기에 새로운 기능에 대한 브라우저 및 컴파일러 지원에 대한 멋진 호환성 표가 있습니다.
Node.js에서 ES6 지원에 관심이 있다면 여기에서 문서를 확인하십시오..
현재 모든 기능이 지원되는 것은 아니지만 Babel과 같은 변환기를 사용하여 ES6 코드를 ES5로 변환 할 수 있습니다. Babel을위한 멋진 Grunt 플러그인, Grunt를위한 멋진 ES6 플러그인, 멋진 Gulp-Babel 플러그인이 있습니다. 다행히도 우리는 많은 선택권을 가지고 있습니다..
이 방법을 통해 우리는 향상된 구문과 기능을 사용할 수있게되는 한편, 호환성 문제에 대해 걱정할 필요가 없습니다. 이제 기능을 살펴 보겠습니다..
1. 새로운 기능 방해 예어
ES6는 새로운 방해 구문, 표현식 또는 (n 내부) 함수와 같은 블록의 범위에서 로컬 변수를 선언 할 수있게 해주는 키워드. 예를 들어 우리는 ...에 대한 루프를 다음과 같은 방법으로 반복 한 다음 동일한 변수 이름을 다시 사용하십시오 (범위가 ...에 대한 루프) 만약 성명서:
for (let i = 0; i < myArray.length; i++) // Do something inside the block if (x > 0 && x! = y) // 우리는 "i"를 i = x * y라고 재사용한다.
사용 방해 키워드는 더 깔끔하고 유용한 코드로 연결됩니다. 차이점 방해 과 var 범위 내에 있습니다. 예를 들어, 지역 변수는 var 키워드는 전체 둘러싸는 함수에서 사용할 수 있습니다. 방해 자체 (하위) 블록에서만 작동합니다.. 방해 전역 적으로도 사용할 수 있습니다.이 경우에는 다음과 같은 방식으로 작동합니다. var. 물론 ES6에서는 여전히 사용할 수 있습니다. var 우리가 원한다면.
2. 새로운 기능 const 예어
새로운 const 키워드를 사용하면 불변 변수라고도하는 상수를 선언 할 수 있습니다.이 상수에서는 나중에 새 콘텐츠를 재 할당 할 수 없습니다.
const MY_CONST = 12; console.log (MY_CONST); // 12 MY_CONST = 16; // 새 값을 상수에 재 할당 할 수 없으므로 사일런트 오류가 발생합니다.
ECMAScript 6에서는 불변 변수가 항상 완전히 변경되지는 않습니다. 상수가 객체를 보유하고있는 것처럼 나중에 해당 속성과 메소드의 값을 변경할 수 있습니다. 배열 요소에 대해서도 마찬가지입니다..
const MY_CONSTANT = myProperty : 6; console.log (MY_CONSTANT.myProperty); // 6 MY_CONSTANT.myProperty = 18; console.log (MY_CONSTANT.myProperty); // 18 const OTHER_CONSTANT = [12, 14, 16]; console.log (OTHER_CONSTANT [0]); // 12 OTHER_CONSTANT [0] = 22; console.log (OTHER_CONSTANT [0]); // 22
위 코드 조각의 MY_CONSTANT 객체에 새 값을 직접 재 지정할 수는 없습니다. 즉, 속성과 메서드의 이름을 변경할 수 없으며 새 속성을 추가하거나 기존 속성을 삭제할 수 없기 때문에 작업을 수행 할 수 없습니다. 다음 일 :
MY_CONSTANT = newProperty : 18; console.log (MY_CONSTANT.newProperty); // 오류
3. 화살표 기능
ECMAScript 6은 우리가 작성하는 방법을 용이하게합니다. 익명의 함수, 우리가 기능 예어. 우리는 새로운 구문을 사용해야합니다. 화살표 함수, => 화살표 기호 (뚱뚱한 화살)의 이름을 딴, 우리에게 큰 지름길을 제공합니다.
// 1. ES6에서 하나의 매개 변수는 sum = (a, b) => a + b; // ES5에서 var sum = function (a, b) return a + b; ; // 2. ES6에 매개 변수가 없으면 randomNum = () => Math.random (); // ES5에서 var randomNum = function () return Math.random (); ; // 3. ES6에서 돌아 오지 않으면 message = (name) => alert ( "Hi"+ name + "!"); // ES5에서 var message = function (yourName) alert ( "안녕"+ yourName + "!"); ;
일반 및 화살표 함수에는 중요한 차이가 있습니다. 즉, 화살표 함수는 이 값은 자동으로 정의 된 함수처럼 기능 키워드 할. 화살표 기능 어휘 적으로 묶다 그만큼 이 현재 범위의 값. 이것은 우리가 쉽게 재사용 할 수 있다는 것을 의미합니다. 이 내부 함수에서 키워드. ES5에서는 다음 해킹으로 만 가능합니다.
// ES5 내부 함수에서 "this"키워드를 사용하는 해킹 ... addAll : function addAll (pieces) var self = this; _.each (조각, 기능 (조각) self.add (조각);); , ... // 같은 내부 함수가 이제 "this"... addAll : function addAll (pieces) _.each (pieces, piece => this.add (piece)); , ...
위 코드는 Mozilla Hacks의 코드입니다.
4. 새로운 기능 전파 운영자
새로운 전파 연산자는 3 개의 점 (...)으로 표시되며 여러 예상 항목의 위치에 서명하는 데 사용할 수 있습니다. 스프레드 연산자의 가장 일반적인 사용 사례 중 하나는 배열의 요소를 다른 배열에 삽입하는 것입니다.
let myArray = [1, 2, 3]; let newArray = [... myArray, 4, 5, 6]; console.log (newArray); // 1, 2, 3, 4, 5, 6
우리는 또한 전파 우리가 배열에서 인수를 전달하고자하는 함수 호출에서 연산자 :
let myArray = [1, 2, 3]; 함수 합 (a, b, c) return a + b + c; console.log (합계 (... myArray)); // 6
그만큼 전파 연산자는 동일한 배열이나 함수 호출에서 여러 번 사용할 수 있으므로 매우 유연합니다..
5. 매개 변수 및 새 휴식 매개 변수의 기본값
좋은 소식은 ECMAScript 6에서 함수의 매개 변수에 기본값을 추가 할 수 있다는 것입니다. 즉, 나중에 함수 호출에서 인수를 전달하지 않으면 기본 매개 변수가 사용됩니다. ES5에서 매개 변수의 기본값은 항상 다음과 같이 설정됩니다. 정의되지 않은, 그래서 우리가 원하는 무엇이든 그들을 설정할 수있는 새로운 가능성은 확실히 언어의 큰 향상입니다..
함수 합 (a = 2, b = 4) return a + b; console.log (합계 ()); // 6 console.log (sum (3, 6)); // 9
ES6에는 새로운 종류의 매개 변수 인 나머지 매개 변수들. 그들은 스프레드 연산자와 비슷하게 보이고 작동합니다. 함수 호출에서 나중에 얼마나 많은 인수가 전달 될지 알 수 없다면 편리합니다. 나머지 매개 변수에 대해 Array 객체의 속성 및 메서드를 사용할 수 있습니다.
함수 putInAlphabet (... args) let sorted = args.sort (); 반환 정렬; console.log (putInAlphabet ( "e", "c", "m", "a", "s", "c", "r", "i", "p", "t")); // a, c, c, e, i, m, p, r, s, t
6. 새로운 기능 ~에 대한 성명서
새로운 도움으로 ~에 대한 루프를 사용하면 배열이나 다른 반복 가능한 객체를 쉽게 반복 할 수 있습니다. 함께 새로운 ~에 대한 ECMAScript 6에는 두 개의 새로운 iterable 객체, 키 / 값 맵용 Map 및 프리미티브 값 및 객체 참조가 될 수있는 고유 한 값의 컬렉션에 대한 Set가 추가되었습니다. 우리가 ~에 대한 블록 내 코드는 반복 가능한 객체의 각 요소에 대해 실행됩니다..
let myArray = [1, 2, 3, 4, 5]; let sum = 0; for (myArray를 보자) sum + = i; console.log (합계); // 15 (= 1 + 2 + 3 + 4 + 5)
7. 템플릿 리터럴
ECMAScript 6는 문자열 연결을위한 새로운 대안을 제공합니다. 템플릿 리터럴 우리가 원하는 곳으로 다른 값을 삽입 할 수있는 템플릿을 쉽게 만들 수 있습니다. 그렇게하려면 우리는 $ ... 변수, 배열 또는 객체에서 전달할 수있는 데이터를 다음과 같은 방식으로 삽입하려는 모든 곳의 구문입니다.
고객 = title : 'Ms', 이름 : 'Jane', 성 : 'Doe', 나이 : '34'; let let template = '친애하는 $ customer.title $ customer.firstname $ customer.surname! 행복한 $ customer.age 번째 생일! '; console.log (템플릿); // Jane Doe님께! 해피 탄생 34 주년!
8. 수업
ES6는 기존 프로토 타입 기반 상속을 기반으로하는 JavaScript 클래스를 도입했습니다. 새로운 구문을 사용하면 객체를 만들고 상속을 활용하고 코드를 재사용하는 것이보다 수월합니다. 또한 다른 프로그래밍 언어에서 도착한 초보자가 JavaScript가 작동하는 방식을 이해하기 쉽습니다..
ES6에서 클래스는 새로운 클래스로 선언됩니다. 수업 키워드를 사용하고 건설자() 새 개체가 인스턴스를 사용하여 인스턴스화 될 때 호출되는 메서드입니다. new myClass () 통사론. 새로운 클래스를 확장 할 수도 있습니다. Child가 Parent를 확장 한 클래스 PHP와 같은 다른 객체 지향 언어에서 익숙한 구문. 함수와 변수 선언과는 달리 클래스 선언은 ECMAScript 6에 탑재되지 않습니다..
Polygon constructor (height, width) // 클래스 생성자 this.name = 'Polygon'; this.height = height; this.width = 너비; sayName () // 클래스 메소드 console.log ( '안녕, 나', this.name + '.'); myPolygon = 새로운 다각형 (5, 6); console.log (myPolygon.sayName ()); // 안녕하세요, 저는 다각형입니다..
위의 코드는 ES6 피들 예제, .
9. 모듈
자바 스크립트가 모듈화되어 있다면 얼마나 멋질 지 궁금해 한 적이 있습니까? 물론 이전에는 CommonJS (Node.js에서 사용됨) 또는 AMD (비동기 모듈 정의) (RequireJS에서 사용됨)와 같은 해결 방법이 있었지만 ES6에서는 모듈을 기본 기능으로 도입했습니다.
각 모듈을 자체 파일로 정의한 다음 수출 변수 및 함수를 내보내는 키워드 에 다른 파일 및 수입 그들을 가져올 키워드 ...에서 다음 구문에 따라 다른 파일
// functions.js function cube (a) a * a * a를 반환합니다. 함수 cubeRoot (a) return Math.cbrt (a); export cube, cubeRoot // 또는 : export cube를 cb, cubeRoot를 cr // app.js import cube, cubeRoot를 '함수'에서 가져옵니다. console.log (큐브 (4)); // 64 console.log (cubeRoot (125)); // 5
모듈에 저장된 코드는 외부에서 볼 수 없으므로이 솔루션은 훌륭합니다. 우리는 다른 파일에서 액세스하고자하는 부분 만 내보낼 필요가 있습니다. ES6 모듈을 사용하면 훨씬 더 놀라운 것들을 할 수 있습니다. 여기에 대한 자세한 설명을 찾을 수 있습니다..
10. 새로운 방법의로드
ECMAScript 6에는 기존의 String Prototype, Array Object, Array Prototype 및 Math Object에 대한 여러 가지 새로운 메소드가 도입되었습니다. 새로운 메소드는 이러한 엔티티를 조작하는 방법을 크게 향상시킬 수 있습니다. Mozilla Dev는 새로운 추가 기능에 대한 훌륭한 코드 예제를 제공하므로 시간이 걸리고 철저히 검사해야합니다..
정말 멋지다는 것을 보여주기 위해, 여기 나의 가장 좋아하는 것이있다. Array 프로토 타입의 find 메소드는 각 요소에 대해 콜백 함수를 실행하여 배열의 요소에 대한 특정 기준을 테스트 한 다음 그 요소를 반환한다. 보고 참된.
함수는 isPrime (element, index, array) var start = 2; 동안 (시작 <= Math.sqrt(element)) if (element % start++ < 1) return false; return element > 1; console.log ([4, 6, 8, 12] .find (isPrime)); // 정의되지 않음, 찾을 수 없음 console.log ([4, 5, 8, 12] .find (isPrime)); // 5
위의 코드 : Mozilla Dev
