Home-theater-designers
ES6은 ECMA 스크립트 프로그래밍 언어의 버전 6을 나타냅니다. ECMA Script는 JavaScript의 표준화된 이름이며 버전 6은 2011년에 출시된 버전 5의 다음 버전입니다. JavaScript 언어의 주요 개선 사항이며 대규모 소프트웨어 개발을 쉽게 하기 위한 더 많은 기능을 추가합니다. .
ECMAScript 또는 ES6은 2015년 6월에 게시되었습니다. 이후 ECMAScript 2015로 이름이 변경되었습니다. 전체 언어에 대한 웹 브라우저 지원은 아직 완료되지 않았지만 주요 부분은 지원됩니다. 주요 웹 브라우저는 ES6의 일부 기능을 지원합니다. 그러나 다음과 같은 소프트웨어를 사용할 수 있습니다. 플레이어 ES6 코드를 대부분의 브라우저에서 더 잘 지원되는 ES5로 변환합니다.
이제 ES6이 JavaScript에 가져온 몇 가지 주요 변경 사항을 살펴보겠습니다.
1. 상수
마침내 상수의 개념이 JavaScript에 적용되었습니다! 상수는 한 번만 정의할 수 있는 값입니다(범위당, 아래에 설명됨). 동일한 범위 내에서 재정의하면 오류가 발생합니다.
const JOE = 4.0
JOE= 3.5
// results in: Uncaught TypeError: Assignment to constant variable.
변수( 어디 ).
console.log('Value is: ' + joe * 2)
// prints: 8
2. 블록 범위 변수 및 함수
21세기에 오신 것을 환영합니다, JavaScript! ES6에서는 다음을 사용하여 선언된 변수 허락하다 (및 위에서 설명한 상수) Java, C++ 등에서와 같이 블록 범위 지정 규칙을 따릅니다. (자세한 내용은 JavaScript에서 변수 선언 방법을 참조하십시오.)
이 업데이트 이전에는 JavaScript의 변수가 함수 범위였습니다. 즉, 변수에 대한 새 범위가 필요할 때 함수 내에서 선언해야 했습니다.
변수는 블록이 끝날 때까지 값을 유지합니다. 블록 후에 외부 블록(있는 경우)의 값이 복원됩니다.
램 4기가랑 8기가 같이 써도 되나요?
{
let x = 'hello';
{
let x = 'world';
console.log('inner block, x = ' + x);
}
console.log('outer block, x = ' + x);
}
// prints
inner block, x = world
outer block, x = hello
이러한 블록 내에서 상수를 재정의할 수도 있습니다.
{
let x = 'hello';
{
const x = 4.0;
console.log('inner block, x = ' + x);
try {
x = 3.5
} catch(err) {
console.error('inner block: ' + err);
}
}
x = 'world';
console.log('outer block, x = ' + x);
}
// prints
inner block, x = 4
inner block: TypeError: Assignment to constant variable.
outer block, x = world
3. 화살표 기능
ES6 소개 화살표 기능 자바스크립트로. (기존 함수와 유사하지만 구문이 더 간단합니다.) 다음 예에서, NS 라는 매개변수를 받는 함수입니다. 에게 , 증분을 반환합니다.
var x = a => a + 1;
x(4) // returns 5
이 구문을 사용하면 함수에서 인수를 쉽게 정의하고 전달할 수 있습니다.
와 함께 사용 각각() :
[1, 2, 3, 4].forEach(a => console.log(a + ' => ' + a*a))
// prints
1 => 1
2 => 4
3 => 9
4 => 16
여러 인수를 괄호로 묶어 함수를 정의합니다.
[22, 98, 3, 44, 67].sort((a, b) => a - b)
// returns
[3, 22, 44, 67, 98]
4. 기본 기능 매개변수
이제 함수 매개변수를 기본값으로 선언할 수 있습니다. 다음에서, NS 두 개의 매개변수가 있는 함수입니다. 에게 그리고 NS . 두 번째 매개변수 NS 의 기본값이 지정됩니다. 1 .
var x = (a, b = 1) => a * b
x(2)
// returns 2
x(2, 2)
// returns 4
C++ 또는 python과 같은 다른 언어와 달리 기본값이 있는 매개변수는 기본값이 없는 매개변수보다 먼저 나타날 수 있습니다. 이 함수는 블록으로 정의됩니다. 반품 가치를 예시로.
var x = (a = 2, b) => { return a * b }
그러나 인수는 왼쪽에서 오른쪽으로 일치합니다. 아래의 첫 번째 호출에서, NS 가지고있다 찾으시는 주소가 없습니다 그래도 가치 에게 기본값으로 선언되었습니다. 전달된 인수는 다음과 일치합니다. 에게 보다는 NS . 함수 반환 난 .
x(2)
// returns NaN
x(1, 3)
// returns 3
명시적으로 전달할 때 찾으시는 주소가 없습니다 인수로 기본값이 있는 경우 기본값이 사용됩니다.
x(undefined, 3)
// returns 6
5. 휴식 기능 매개변수
함수를 호출할 때 임의의 수의 인수를 전달할 수 있어야 하고 함수 내에서 이러한 인수를 처리해야 하는 경우가 있습니다. 이 필요는 나머지 함수 매개변수 통사론. 아래 표시된 구문을 사용하여 정의된 인수 뒤에 나머지 인수를 캡처하는 방법을 제공합니다. 이러한 추가 인수는 배열에 캡처됩니다.
var x = function(a, b, ...args) { console.log('a = ' + a + ', b = ' + b + ', ' + args.length + ' args left'); }
x(2, 3)
// prints
a = 2, b = 3, 0 args left
x(2, 3, 4, 5)
// prints
a = 2, b = 3, 2 args left
6. 문자열 템플릿
문자열 템플릿은 펄이나 쉘과 같은 구문을 사용하여 변수와 표현식을 문자열로 보간하는 것을 말합니다. 문자열 템플릿은 백틱 문자( `` ). 대조적으로 작은따옴표( ' ) 또는 큰따옴표( ' )는 일반 문자열을 나타냅니다. 템플릿 내부의 표현식은 다음 사이에 표시됩니다. $ { 그리고 } . 다음은 예입니다.
var name = 'joe';
var x = `hello ${name}`
// returns 'hello joe'
물론 평가를 위해 임의의 표현식을 사용할 수 있습니다.
// define an arrow function
var f = a => a * 4
// set a parameter value
var v = 5
// and evaluate the function within the string template
var x = `hello ${f(v)}`
// returns 'hello 20'
문자열을 정의하기 위한 이 구문은 여러 줄 문자열을 정의하는 데에도 사용할 수 있습니다.
var x = `hello world
next line`
// returns
hello world
next line
7. 개체 속성
ES6은 단순화된 객체 생성 구문을 제공합니다. 아래 예를 살펴보십시오.
var x = 'hello world', y = 25
var a = { x, y }
// is equivalent to the ES5:
{x: x, y: y}
계산된 속성 이름도 꽤 멋집니다. ES5 및 이전 버전에서 계산된 이름으로 객체 속성을 설정하려면 다음을 수행해야 했습니다.
var x = 'hello world', y = 25
var a = {x: x, y: y}
a['joe' + y] = 4
// a is now:
{x: 'hello world', y: 25, joe25: 4}
이제 단일 정의에서 모든 작업을 수행할 수 있습니다.
var a = {x, y, ['joe' + y]: 4}
// returns
{x: 'hello world', y: 25, joe25: 4}
물론 메서드를 정의하려면 다음과 같은 이름으로 정의하면 됩니다.
var a = {x, y, ['joe' + y]: 4, foo(v) { return v + 4 }}
a.foo(2)
// returns
6
8. 공식적인 클래스 정의 구문
클래스 정의
마지막으로 JavaScript는 공식적인 클래스 정의 구문을 얻습니다. 이미 사용 가능한 프로토타입 기반 클래스에 대한 단순한 구문 설탕이지만 코드 명확성을 향상시키는 역할을 합니다. 즉, 이것은 ~ 아니다 새 개체 모델이나 이와 같은 멋진 것을 추가하십시오.
class Circle {
constructor(radius) {
this.radius = radius
}
}
// use it
var c = new Circle(4)
// returns: Circle {radius: 4}
메소드 선언
방법을 정의하는 것도 매우 간단합니다. 거기에는 놀라움이 없습니다.
class Circle {
constructor(radius) {
this.radius = radius
}
computeArea() { return Math.PI * this.radius * this.radius }
}
var c = new Circle(4)
c.computeArea()
// returns: 50.26548245743669
게터와 세터
이제 간단한 구문 업데이트와 함께 getter와 setter도 있습니다. 재정의하자 원 와 수업 지역 재산.
class Circle {
constructor(radius) {
this.radius = radius
}
get area() { return Math.PI * this.radius * this.radius }
}
var c = new Circle(4)
// returns: Circle {radius: 4}
c.area
// returns: 50.26548245743669
이제 setter를 추가해 보겠습니다. 정의할 수 있도록 반지름 설정 가능한 속성으로 실제 필드를 다음과 같이 재정의해야 합니다. _반지름 또는 setter와 충돌하지 않는 것. 그렇지 않으면 스택 오버플로 오류가 발생합니다.
재정의된 클래스는 다음과 같습니다.
class Circle {
constructor(radius) {
this._radius = radius
}
get area() { return Math.PI * this._radius * this._radius }
set radius(r) { this._radius = r }
}
var c = new Circle(4)
// returns: Circle {_radius: 4}
c.area
// returns: 50.26548245743669
c.radius = 6
c.area
// returns: 113.09733552923255
대체로 이것은 객체 지향 JavaScript에 대한 훌륭한 추가 기능입니다.
계승
클래스를 정의하는 것 외에도 수업 키워드를 사용하여 연장하다 상위 클래스에서 상속할 키워드입니다. 예제를 통해 이것이 어떻게 작동하는지 봅시다.
class Ellipse {
constructor(width, height) {
this._width = width;
this._height = height;
}
get area() { return Math.PI * this._width * this._height; }
set width(w) { this._width = w; }
set height(h) { this._height = h; }
}
class Circle extends Ellipse {
constructor(radius) {
super(radius, radius);
}
set radius(r) { super.width = r; super.height = r; }
}
// create a circle
var c = new Circle(4)
// returns: Circle {_width: 4, _height: 4}
c.radius = 2
// c is now: Circle {_width: 2, _height: 2}
c.area
// returns: 12.566370614359172
c.radius = 5
c.area
// returns: 78.53981633974483
그리고 그것은 JavaScript ES6의 일부 기능에 대한 짧은 소개였습니다.
다음 단계: 익숙해지기 몇 가지 중요한 JavaScript 배열 메서드 음성 감지 로봇 애니메이션 스크립팅! 또한 Vue 라는 훌륭한 프론트엔드 프레임워크에 대해 알아보세요.
이미지 크레디트: micrologia/ Depositphotos
공유하다 공유하다 트위터 이메일 Canon vs. Nikon: 어느 카메라 브랜드가 더 낫습니까?Canon과 Nikon은 카메라 업계에서 가장 큰 두 회사입니다. 그러나 어느 브랜드가 더 나은 카메라와 렌즈 라인업을 제공합니까?
ps2 컨트롤러를 pc에 연결하는 방법다음 읽기 관련 항목
- 프로그램 작성
- 자바스크립트
뉴스레터 구독
기술 팁, 리뷰, 무료 전자책 및 독점 거래에 대한 뉴스레터에 가입하십시오!
구독하려면 여기를 클릭하세요.