es6 문법은 2015년 6월에 출시되었습니다. es6은 2015년 6월에 공식적으로 발표된 JavaScript 언어 표준입니다. 공식적으로는 ECMAScript2015(ES2015)라고 합니다. ECMAScript의 여섯 번째 버전입니다. es6의 목표는 JavaScript 언어를 사용하여 복잡한 대규모 애플리케이션을 작성하고 엔터프라이즈 수준의 개발 언어가 되도록 하는 것입니다.
이 튜토리얼의 운영 환경: Windows 7 시스템, ECMAScript 버전 6, Dell G3 컴퓨터.
es6, ECMAScript6(ECMAScript의 6번째 버전)의 전체 이름은 2015년 6월 공식적으로 출시된 JavaScript 언어의 표준으로, 공식 명칭은 ECMAScript 2015(ES2015)입니다. 그 목표는 JavaScript 언어를 사용하여 복잡한 대규모 애플리케이션을 작성하고 엔터프라이즈 수준의 개발 언어가 되도록 하는 것입니다.
ECMAScript 6은 기본적으로 ES5보다 인기가 훨씬 빠릅니다. 주된 이유는 최신 브라우저, 특히 이미 ES6의 대부분의 기능을 지원하는 Chrome 및 Firefox 브라우저 때문입니다.
ECMAScript는 ECMA-262 표준에 따라 구현된 범용 스크립팅 언어입니다. ECMA-262 표준은 주로 이 언어의 구문, 유형, 명령문, 키워드, 예약어, 연산자, 객체 및 기타 부분을 규정합니다. 최신 버전은 ECMAScript6(줄여서 "ES6")입니다.
ES 다음에 숫자가 표시될 때마다 ECMAScript의 다른 버전입니다.
ECMAScript6은 ECMAScript의 6번째 버전이므로 es6이라고도 할 수 있습니다.
ECMAScript 6 개발 역사
2000년 ECMAScript 4.0이 탄생하기 시작했습니다. 이 버전은 결국 통과하지 못했지만 대부분의 내용은 ECMAScript6에 상속되었습니다. 따라서 ECMAScript6의 공식화가 시작된 시점은 실제로 2000년이었습니다.
2007년 10월 ECMAScript 4.0 초안이 출시되었으며, 공식 버전은 원래 2008년 8월에 출시될 예정이었습니다. 그러나 이 기준을 채택할지 여부에 대해서는 당사자들 사이에 심각한 차이가 있다. Yahoo, Microsoft, Google이 이끄는 대기업은 JavaScript의 대규모 업그레이드에 반대하고 JavaScript 창시자인 Brendan Eich가 이끄는 Mozilla는 현재 초안을 주장합니다.
2008년 7월, 다음 버전에 어떤 기능을 포함할지에 대한 너무 많은 차이와 치열한 논쟁으로 인해 ECMA는 ECMAScript 4.0의 개발을 중단하고 기존 기능의 개선과 관련된 일부를 릴리스하기로 결정했습니다. , 다른 급진적인 아이디어가 확장되어 이후 버전에 적용되었습니다. 컨퍼런스 분위기로 인해 이 버전의 프로젝트 코드명은 Harmony였습니다. 회의 직후 ECMAScript 3.1은 ECMAScript 5로 이름이 변경되었습니다.
2009년 12월 ECMAScript 5.0이 공식 출시되었습니다. Harmony 프로젝트는 두 개로 나뉘었는데, 좀 더 실현 가능한 아이디어 중 일부는 JavaScript.next로 명명되어 계속 개발되었으며, 나중에 덜 성숙한 아이디어 중 일부는 JavaScript.next.next로 간주되어 개발될 예정입니다. 나중에 다시 시작하는 것을 고려해 보세요.
2011년 ECMAScript 5.1 출시 이후 버전 6.0 개발이 시작되었습니다.
2013년 3월 ECMAScript 6 초안이 동결되었으며 새로운 기능이 추가되지 않았습니다. ECMAScript 7에 새로운 기능이 추가될 예정입니다.
2013년 12월 ECMAScript 6 초안이 출시되었습니다. 그런 다음 모든 당사자로부터 피드백을 듣기 위한 12개월 간의 토론 기간이 이어집니다. 이 버전은 너무 많은 문법 기능을 도입하고 공식화 과정에서 많은 조직과 개인이 계속해서 새로운 기능을 제출하기 때문에. 표준 위원회는 마침내 이 표준이 매년 6월에 그 해의 공식 버전으로 공식 출시되기로 결정했습니다. 앞으로는 이 버전을 기반으로 변경이 이뤄질 예정이며, 내년 6월까지는 자연스럽게 초안이 새해 버전이 될 예정이다.
2015년 6월 ECMAScript 6(ES6)이 공식 채택되어 국제 표준이 되었습니다. 공식 명칭은 "ECMAScript 2015"(약칭 ES2015)입니다.
ES6의 첫 번째 버전은 2015년 6월에 출시되었으며 공식 명칭은 "ECMAScript 2015 Standard"(줄여서 ES2015)입니다. 2016년 6월에는 약간 수정된 "ECMAScript 2016 Standard"(줄여서 ES2016)가 예정대로 출시되었습니다. 이 버전은 둘 사이의 차이가 매우 작기 때문에(includes 메소드와 인덱스만) ES6.1 버전이라고 볼 수 있습니다. 배열 인스턴스의 추가) 연산자), 기본적으로 동일한 표준입니다.
따라서 ES6은 역사적 용어이자 일반적인 용어입니다. ES2015, ES2016, ES2017 등을 포괄하는 버전 5.1 이후의 JavaScript의 차세대 표준을 의미하며, ES2015는 구체적으로 출시된 버전을 지칭하는 공식 명칭입니다. 그 해의 언어 표준의 공식 버전입니다. 이 책에서 ES6을 언급할 때는 보통 ES2015 표준을 지칭하지만, 때로는 일반적으로 "차세대 자바스크립트 언어"를 지칭하기도 합니다.
ES6의 새로운 구문을 코딩 실습에 적용하고 이를 기존 JavaScript 구문과 결합하여 합리적이고 읽기 쉬운 코드를 작성하고 유지 관리하는 방법을 논의합니다.
블록 수준 범위
(1)let replacement var
ES6은 변수 선언을 위한 두 가지 새로운 명령을 제안합니다. let和const。其中，let完全可以取代var，因为两者语义相同，而且let부작용 없음.
'use strict';
if (true) {
let x = 'hello';
}
for (let i = 0; i < 10; i++) {
console.log(i);
}위 코드에서 let 대신 var를 사용하면 실제로 두 개의 전역 변수가 선언되는데 이는 의도한 바가 아닙니다. 변수는 선언된 코드 블록 내에서만 유효해야 합니다. var 명령은 이를 수행할 수 없습니다. var替代let，实际上就声明了两个全局变量，这显然不是本意。变量应该只在其声明的代码块内有效，var命令做不到这一点。
var命令存在变量提升效用，let命令没有这个问题。
'use strict';
if (true) {
console.log(x); // ReferenceError
let x = 'hello';
}上面代码如果使用var替代let，console.log那一行就不会报错，而是会输出undefined，因为变量声明提升到代码块的头部。这违反了变量先声明后使用的原则。
所以，建议不再使用var命令，而是使用let命令取代。
（2）全局常量和线程安全
在let和const之间，建议优先使用const，尤其是在全局环境，不应该设置变量，只应设置常量。
const优于let有几个原因。一个是const可以提醒阅读程序的人，这个变量不应该改变；另一个是const比较符合函数式编程思想，运算不改变值，只是新建值，而且这样也有利于将来的分布式运算；最后一个原因是 JavaScript 编译器会对const进行优化，所以多使用const，有利于提高程序的运行效率，也就是说let和const的本质区别，其实是编译器内部的处理不同。
// bad var a = 1, b = 2, c = 3; // good const a = 1; const b = 2; const c = 3; // best const [a, b, c] = [1, 2, 3];
const声明常量还有两个好处，一是阅读代码的人立刻会意识到不应该修改这个值，二是防止了无意间修改变量值所导致的错误。
所有的函数都应该设置为常量。
长远来看，JavaScript 可能会有多线程的实现（比如 Intel 公司的 River Trail 那一类的项目），这时let表示的变量，只应出现在单线程运行的代码中，不能是多线程共享的，这样有利于保证线程安全。
字符串
静态字符串一律使用单引号或反引号，不使用双引号。动态字符串使用反引号。
// bad
const a = "foobar";
const b = 'foo' + a + 'bar';
// acceptable
const c = `foobar`;
// good
const a = 'foobar';
const b = `foo${a}bar`;解构赋值
使用数组成员对变量赋值时，优先使用解构赋值。
const arr = [1, 2, 3, 4]; // bad const first = arr[0]; const second = arr[1]; // good const [first, second] = arr;
函数的参数如果是对象的成员，优先使用解构赋值。
// bad
function getFullName(user) {
const firstName = user.firstName;
const lastName = user.lastName;
}
// good
function getFullName(obj) {
const { firstName, lastName } = obj;
}
// best
function getFullName({ firstName, lastName }) {
}如果函数返回多个值，优先使用对象的解构赋值，而不是数组的解构赋值。这样便于以后添加返回值，以及更改返回值的顺序。
// bad
function processInput(input) {
return [left, right, top, bottom];
}
// good
function processInput(input) {
return { left, right, top, bottom };
}
const { left, right } = processInput(input);对象
单行定义的对象，最后一个成员不以逗号结尾。多行定义的对象，最后一个成员以逗号结尾。
// bad
const a = { k1: v1, k2: v2, };
const b = {
k1: v1,
k2: v2
};
// good
const a = { k1: v1, k2: v2 };
const b = {
k1: v1,
k2: v2,
};对象尽量静态化，一旦定义，就不得随意添加新的属性。如果添加属性不可避免，要使用Object.assign方法。
// bad
const a = {};
a.x = 3;
// if reshape unavoidable
const a = {};
Object.assign(a, { x: 3 });
// good
const a = { x: null };
a.x = 3;如果对象的属性名是动态的，可以在创造对象的时候，使用属性表达式定义。
// bad
const obj = {
id: 5,
name: 'San Francisco',
};
obj[getKey('enabled')] = true;
// good
const obj = {
id: 5,
name: 'San Francisco',
[getKey('enabled')]: true,
};上面代码中，对象obj的最后一个属性名，需要计算得到。这时最好采用属性表达式，在新建obj的时候，将该属性与其他属性定义在一起。这样一来，所有属性就在一个地方定义了。
另外，对象的属性和方法，尽量采用简洁表达法，这样易于描述和书写。
var ref = 'some value';
// bad
const atom = {
ref: ref,
value: 1,
addValue: function (value) {
return atom.value + value;
},
};
// good
const atom = {
ref,
value: 1,
addValue(value) {
return atom.value + value;
},
};数组
使用扩展运算符（...）拷贝数组。
// bad
const len = items.length;
const itemsCopy = [];
let i;
for (i = 0; i < len; i++) {
itemsCopy[i] = items[i];
}
// good
const itemsCopy = [...items];使用 Array.from 方法，将类似数组的对象转为数组。
const foo = document.querySelectorAll('.foo'); const nodes = Array.from(foo);
函数
立即执行函数可以写成箭头函数的形式。
(() => {
console.log('Welcome to the Internet.');
})();那些使用匿名函数当作参数的场合，尽量用箭头函数代替。因为这样更简洁，而且绑定了 this。
// bad
[1, 2, 3].map(function (x) {
return x * x;
});
// good
[1, 2, 3].map((x) => {
return x * x;
});
// best
[1, 2, 3].map(x => x * x);箭头函数取代Function.prototype.bind，不应再用 self/_this/that 绑定 this。
// bad
const self = this;
const boundMethod = function(...params) {
return method.apply(self, params);
}
// acceptable
const boundMethod = method.bind(this);
// best
const boundMethod = (...params) => method.apply(this, params);简单的、单行的、不会复用的函数，建议采用箭头函数。如果函数体较为复杂，行数较多，还是应该采用传统的函数写法。
所有配置项都应该集中在一个对象，放在最后一个参数，布尔值不可以直接作为参数。
// bad
function divide(a, b, option = false ) {
}
// good
function divide(a, b, { option = false } = {}) {
}不要在函数体内使用 arguments 变量，使用 rest 运算符（...）代替。因为 rest 运算符显式表明你想要获取参数，而且 arguments 是一个类似数组的对象，而 rest 运算符可以提供一个真正的数组。
// bad
function concatenateAll() {
const args = Array.prototype.slice.call(arguments);
return args.join('');
}
// good
function concatenateAll(...args) {
return args.join('');
}使用默认值语法设置函数参数的默认值。
// bad
function handleThings(opts) {
opts = opts || {};
}
// good
function handleThings(opts = {}) {
// ...
}Map 结构
注意区分 Object 和 Map，只有模拟现实世界的实体对象时，才使用 Object。如果只是需要key: value
var 명령에는 변수 승격 효과가 있지만 let 명령에는 이러한 문제가 없습니다. 🎜let map = new Map(arr);
for (let key of map.keys()) {
console.log(key);
}
for (let value of map.values()) {
console.log(value);
}
for (let item of map.entries()) {
console.log(item[0], item[1]);
}let 대신 var를 사용하면 console.log 줄은 오류를 보고하지 않지만 다음과 같은 출력을 출력합니다. 정의되지 않음 왜냐하면 변수 선언이 코드 블록의 헤드로 끌어올려지기 때문입니다. 이는 변수를 먼저 선언하고 나중에 사용하는 원칙에 위배됩니다. 🎜🎜그래서 더 이상 var 명령을 사용하지 않고 대신 let 명령을 사용하는 것이 좋습니다. 🎜🎜(2) 전역 상수 및 스레드 안전성🎜🎜 let과 const 사이에는 const</code 사용을 권장합니다. 첫째 > 특히 전역 환경에서는 변수를 설정하면 안 되고 상수만 설정해야 합니다. 🎜🎜<code>const는 여러 가지 이유로 let보다 낫습니다. 하나는 const가 프로그램을 읽는 사람들에게 이 변수가 변경되어서는 안 된다는 점을 상기시킬 수 있다는 것입니다. 다른 하나는 const가 함수형 프로그래밍의 개념에 더 부합한다는 것입니다. 이 작업은 값을 변경하지 않고 새 값만 생성합니다. 그리고 이는 향후 분산 컴퓨팅에도 도움이 됩니다. 마지막 이유는 JavaScript 컴파일러가 const를 최적화하므로 const를 사용하기 때문입니다. more는 프로그램의 실행 효율성을 향상시키는 데 도움이 됩니다. 즉, let와 const의 본질적인 차이점은 실제로 내부 처리가 다르다는 것입니다. 컴파일러. 🎜// bad
function Queue(contents = []) {
this._queue = [...contents];
}
Queue.prototype.pop = function() {
const value = this._queue[0];
this._queue.splice(0, 1);
return value;
}
// good
class Queue {
constructor(contents = []) {
this._queue = [...contents];
}
pop() {
const value = this._queue[0];
this._queue.splice(0, 1);
return value;
}
}const 상수를 선언하면 두 가지 이점이 있습니다. 첫째, 코드를 읽는 사람은 값을 수정해서는 안 된다는 것을 즉시 깨닫게 됩니다. 둘째, 실수로 변수 값을 수정하여 발생하는 오류를 방지할 수 있습니다. 🎜🎜모든 함수는 상수로 설정되어야 합니다. 🎜🎜장기적으로 JavaScript는 다중 스레드 구현을 가질 수 있습니다(예: Intel의 River Trail 프로젝트). 이때 let로 표시되는 변수는 단일 스레드 실행에만 나타나야 합니다. 여러 스레드에서 공유할 수 없으므로 스레드 안전성을 보장하는 데 도움이 됩니다. 🎜🎜문자열🎜🎜정적 문자열은 항상 큰따옴표가 아닌 작은따옴표나 역따옴표를 사용합니다. 동적 문자열은 백틱을 사용합니다. 🎜// bad
const inherits = require('inherits');
function PeekableQueue(contents) {
Queue.apply(this, contents);
}
inherits(PeekableQueue, Queue);
PeekableQueue.prototype.peek = function() {
return this._queue[0];
}
// good
class PeekableQueue extends Queue {
peek() {
return this._queue[0];
}
}// bad
const moduleA = require('moduleA');
const func1 = moduleA.func1;
const func2 = moduleA.func2;
// good
import { func1, func2 } from 'moduleA';// commonJS的写法
var React = require('react');
var Breadcrumbs = React.createClass({
render() {
return <nav />;
}
});
module.exports = Breadcrumbs;
// ES6的写法
import React from 'react';
class Breadcrumbs extends React.Component {
render() {
return <nav />;
}
};
export default Breadcrumbs;// bad import * as myObject from './importModule'; // good import myObject from './importModule';
function makeStyleGuide() {
}
export default makeStyleGuide;Object.sign 메서드를 사용하세요. 🎜const StyleGuide = {
es6: {
}
};
export default StyleGuide;$ npm install --save-dev eslint
obj 개체의 마지막 속성 이름을 계산해야 합니다. 이때, 새로운 obj를 생성할 때 이 속성을 다른 속성과 함께 정의하는 것이 가장 좋습니다. 이런 방식으로 모든 속성이 한 곳에서 정의됩니다. 🎜🎜또한, 객체의 속성과 메소드에 대해서는 간결하게 표현하여 설명하고 작성하기 쉽도록 노력하세요. 🎜$ npm install --save-dev eslint-config-airbnb $ npm install --save-dev eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react
{
"extends": "eslint-config-airbnb"
}var unused = 'I have no purpose!';
function greet() {
var message = 'Hello, World!';
console.log(message);
}
greet();$ npx eslint index.js index.js 1:1 error Unexpected var, use let or const instead no-var 1:5 error unused is defined but never used no-unused-vars 4:5 error Expected indentation of 2 characters but found 4 indent 4:5 error Unexpected var, use let or const instead no-var 5:5 error Expected indentation of 2 characters but found 4 indent ✖ 5 problems (5 errors, 0 warnings)
Function.prototype.bind를 대체하며 이를 바인딩하기 위해 더 이상 self/_this/that을 사용해서는 안 됩니다. 🎜rrreee🎜간단하고 한 줄짜리이며 재사용이 불가능한 기능에는 화살표 기능을 사용하는 것이 좋습니다. 함수 본문이 복잡하고 줄 수가 많은 경우에는 전통적인 함수 작성 방법을 사용해야 합니다. 🎜🎜모든 구성 항목은 하나의 개체에 집중되어야 하며 마지막 매개변수로 배치되어야 합니다. 부울 값은 매개변수로 직접 사용할 수 없습니다. 🎜rrreee🎜함수 본문 내에서 인수 변수를 사용하지 말고 대신 나머지 연산자(...)를 사용하세요. 나머지 연산자는 인수를 가져오고 싶다고 명시적으로 명시하고 인수는 배열과 유사한 객체이므로 나머지 연산자는 실제 배열을 제공할 수 있습니다. 🎜rrreee🎜 기본값 구문을 사용하여 함수 매개변수의 기본값을 설정하세요. 🎜rrreee🎜지도 구조🎜🎜객체와 지도를 구별하는 데 주의하세요. 실제 개체 객체를 시뮬레이션할 때만 객체를 사용하세요. 세계. key: value의 데이터 구조만 필요한 경우 Map 구조를 사용하세요. Map에는 순회 메커니즘이 내장되어 있기 때문입니다. 🎜let map = new Map(arr);
for (let key of map.keys()) {
console.log(key);
}
for (let value of map.values()) {
console.log(value);
}
for (let item of map.entries()) {
console.log(item[0], item[1]);
}Class
总是用 Class，取代需要 prototype 的操作。因为 Class 的写法更简洁，更易于理解。
// bad
function Queue(contents = []) {
this._queue = [...contents];
}
Queue.prototype.pop = function() {
const value = this._queue[0];
this._queue.splice(0, 1);
return value;
}
// good
class Queue {
constructor(contents = []) {
this._queue = [...contents];
}
pop() {
const value = this._queue[0];
this._queue.splice(0, 1);
return value;
}
}使用extends实现继承，因为这样更简单，不会有破坏instanceof运算的危险。
// bad
const inherits = require('inherits');
function PeekableQueue(contents) {
Queue.apply(this, contents);
}
inherits(PeekableQueue, Queue);
PeekableQueue.prototype.peek = function() {
return this._queue[0];
}
// good
class PeekableQueue extends Queue {
peek() {
return this._queue[0];
}
}模块
首先，Module 语法是 JavaScript 模块的标准写法，坚持使用这种写法。使用import取代require。
// bad
const moduleA = require('moduleA');
const func1 = moduleA.func1;
const func2 = moduleA.func2;
// good
import { func1, func2 } from 'moduleA';使用export取代module.exports。
// commonJS的写法
var React = require('react');
var Breadcrumbs = React.createClass({
render() {
return <nav />;
}
});
module.exports = Breadcrumbs;
// ES6的写法
import React from 'react';
class Breadcrumbs extends React.Component {
render() {
return <nav />;
}
};
export default Breadcrumbs;如果模块只有一个输出值，就使用export default，如果模块有多个输出值，就不使用export default，export default与普通的export不要同时使用。
不要在模块输入中使用通配符。因为这样可以确保你的模块之中，有一个默认输出（export default）。
// bad import * as myObject from './importModule'; // good import myObject from './importModule';
如果模块默认输出一个函数，函数名的首字母应该小写。
function makeStyleGuide() {
}
export default makeStyleGuide;如果模块默认输出一个对象，对象名的首字母应该大写。
const StyleGuide = {
es6: {
}
};
export default StyleGuide;ESLint 的使用
ESLint 是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。
首先，在项目的根目录安装 ESLint。
$ npm install --save-dev eslint
然后，安装 Airbnb 语法规则，以及 import、a11y、react 插件。
$ npm install --save-dev eslint-config-airbnb $ npm install --save-dev eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react
最后，在项目的根目录下新建一个.eslintrc文件，配置 ESLint。
{
"extends": "eslint-config-airbnb"
}现在就可以检查，当前项目的代码是否符合预设的规则。
index.js文件的代码如下。
var unused = 'I have no purpose!';
function greet() {
var message = 'Hello, World!';
console.log(message);
}
greet();使用 ESLint 检查这个文件，就会报出错误。
$ npx eslint index.js index.js 1:1 error Unexpected var, use let or const instead no-var 1:5 error unused is defined but never used no-unused-vars 4:5 error Expected indentation of 2 characters but found 4 indent 4:5 error Unexpected var, use let or const instead no-var 5:5 error Expected indentation of 2 characters but found 4 indent ✖ 5 problems (5 errors, 0 warnings)
上面代码说明，原文件有五个错误，其中两个是不应该使用var命令，而要使用let或const；一个是定义了变量，却没有使用；另外两个是行首缩进为 4 个空格，而不是规定的 2 个空格。
【相关推荐：javascript视频教程、编程视频】
위 내용은 es6 구문은 언제 출시되었나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![Node.js 전체 입문 튜토리얼 [es6+npm+express+webpack+promise]](https://img.php.cn/upload/course/000/000/068/6242b4c8f1a39624.png)
![당신을 가장 잘 이해하는 프론트엔드 강좌: HTML5/CSS3/ES6/NPM/Vue/...[원본]](https://img.php.cn/upload/course/000/000/068/632ae26b9b376240.png)
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
