ECMAScript 6 시작하기

12829 단어 webdev tutorial javascript codenewbie

소개하다.

ECMAScript 6은 ECMAScript 2015라고도 합니다.ES6는 ES5의 주요 업그레이드이며 JavaScript에 많은 새로운 기능을 추가합니다.
본고에서 우리는 ES6 응용 프로그램을 어떻게 설정하고 개발하는지 소개하고 가장 중요한 새로운 기능부터 시작할 것이다.
이 문서에는 다음이 포함됩니다.

브라우저는

지원

설치 바베타 및 웹 페이지

코드 편집기

모듈

상수,

클래스

대상 문자 문법

분해 분배

화살표 기능

템플릿 문자열

브라우저 지원

ES6 애플리케이션 구축에 필요한 설정은 플랫폼 간 호환성에 따라 달라집니다.대부분의 ES6는 Chrome, Firefox, Edge, Node의 최신 버전을 지원받고 있습니다.js, 그래서 만약 당신이 단지 이런 새로운 운행을 겨냥했을 때, 당신은 지금부터 그것을 사용할 수 있습니다.런타임 시 지원되는 기능에 대한 자세한 내용은 ES6 compatibility table. 참조
브라우저의 JavaScript 콘솔에서 다음 코드를 실행할 수 있습니다.브라우저에서 ES6를 지원하는 경우 평가 결과는 3이어야 합니다.만약 없다면, 그것은 문법 오류를 원망할 것이다.

let [two, three] = [2, 3];
two + three;

불행하게도, 유니버설 브라우저 시장은 이미 유행이 지났을 것이다. 이것은 많은 사용자들이 여전히 ES6와 호환되는 브라우저를 사용하지 않는다는 것을 의미한다.만약 당신이 대중을 대상으로 하는 온라인 응용 프로그램을 개발하고 있다면, 당신은 이 사람들을 계속 도와야 합니다.
다행히도, ES6 코드를 ES5 코드로 변환할 수 있는 Babel이라는 프로젝트가 있습니다.이것은 ES5 호환 브라우저를 가진 모든 사람이 사용할 수 있는 웹 응용 프로그램을 개발할 때, ES6를 사용하여 코드를 작성할 수 있다는 것을 의미한다.처음에 모든 내용을 어떻게 설정하는지 알기 위해서는 약간의 노력이 필요합니다. 그래서 저는 아래에 단계별 안내서를 제공하여 당신이 더욱 빨리 시작할 수 있도록 도와 드리겠습니다.

Babel 및 webpack 설정

노드가 없으면js를 설치하면 install it이 필요합니다.
프로젝트에 대한 폴더를 만들고 다음을 포함하는 package.json 파일을 만듭니다.

{
  "name": "es6-demo",
  "scripts": {
    "build": "webpack --watch"
  },
  "devDependencies": {
    "babel-cli": "^6.8.0",
    "babel-core": "^6.8.0",
    "babel-loader": "^6.2.4",
    "babel-plugin-transform-runtime": "^6.8.0",
    "babel-preset-es2015": "^6.6.0",
    "babel-runtime": "^6.6.1",
    "webpack": "^1.13.0"
  }
}

그런 다음 다음과 같은 webpack.config.js이라는 파일을 만듭니다.

var path = require("path");
module.exports = {
  entry: "./src/main.js",
  output: {
    path: __dirname,
    filename: "bundle.js"
  },
  module: {
    loaders: [
      {
        loader: "babel-loader",

        // Compile files in /src directory
        include: [path.resolve(__dirname, "src")],

        // Babel options
        query: {
          plugins: ["transform-runtime"],
          presets: ["es2015"]
        }
      }
    ]
  }
};

그런 다음 src이라는 하위 폴더를 만듭니다.이 폴더에는 모든 ES6 코드가 포함됩니다.거기에 main.js이라는 간단한 스크립트를 놓고 테스트해 봅시다.

let [one, two, three] = [1, 2, 3];
console.log(`One: ${one}, Two: ${two}, Three: ${three}`);

터미널(Windows 사용자용 Node.js 콘솔)을 열고 프로젝트 폴더로 이동한 후 다음을 실행합니다.

npm install
npm run build

이렇게 하면 프로젝트 폴더에 컴파일된 ES5 코드가 있는 bundle.js 파일이 생성됩니다.이 파일을 열면 ES5와 같은 효과 파일(생성된 다른 템플릿 파일 무더기)이 표시됩니다.

var one = 1;
var two = 2;
var three = 3;

console.log("One: " + one + ", Two: " + two + ", Three: " + three);

npm run build 스크립트는 탐청 src 폴더의 수정으로 설정됩니다.현재 main.js 파일을 수정하면 bundle.js 파일이 자동으로 업데이트됩니다.콘솔에서 Ctrl+C을 사용하여 관람을 중지할 수 있습니다.
이 작업을 완료하면 npm install을 다시 실행할 필요가 없습니다.코드를 변환해야 할 경우 npm run build을 사용할 수 있습니다.

코드 편집기

더 좋은 개발 체험을 얻기 위해서는 ES6 도구가 있는 코드 편집기를 사용해야 할 수도 있습니다.나는 Visual Studio Code을 즐겨 사용하지만, 많은 편집기를 설정해서 ES6를 지원할 수 있다. 예를 들어 vim, Atom, Sublime Text과 104591410이다.

모듈

내가 보기에 이 모듈은 ES6에서 가장 중요한 새로운 기능이다.전체 이름 공간의 혼란을 걱정하지 않고 모듈화된 방식으로 코드를 단독 파일로 분리할 수 있습니다.
예를 들어, 장난감 수학 라이브러리를 포함하는 파일 WebStorm을 만듭니다. 이 라이브러리는 pi의 값과 pi와 관련된 두 개의 함수를 내보냅니다.

export const PI = 3.141592653589793;
export function circumference(r) {
  return 2 * PI * r;
}
export function area(r) {
  return PI * r * r;
}

모듈을 사용하여 다른 파일에서 라이브러리의 각 구성 요소를 가져올 수 있습니다.

import { PI, area } from "./math";
console.log(area(PI));

또는 모든 컨텐트를 단일 객체로 가져올 수 있습니다.

import * as math from "./math";
console.log(math.area(math.PI));

또한 단일 값을 기본값으로 내보내면 괄호나 wildcard이 필요하지 않은 상태에서 이 값을 가져올 수 있습니다.

// reverseString.js
export default function(str) {
  return str
    .split("")
    .reverse()
    .join("");
}
// main.js
import reverseString from "./reverseString";
console.log(reverseString("Hello, world!"));

콘스트와 라이트

math.js은 상수 성명, const은 변수 성명에 사용된다.
상수를 다시 지정하려고 하면 컴파일러에서 오류가 발생합니다.

const one = 1;
one = 2; // SyntaxError: "one" is read-only

let은 let과 유사하지만 var의 일부 괴벽을 복원했다. 이런 괴벽은 보통 자바스크립트 초보자들의 걸림돌이다.사실 var은 이미 유행이 지났다. 왜냐하면 var10let이 이미 그 기능을 실현했기 때문이다.const은 블록 범위let과 var의 작용역 메커니즘은 다르다.let으로 성명된 변수는 함수 작용역으로 주위 함수 중 어느 곳에서든 볼 수 있음을 의미한다.또한 var으로 성명된 변수는 블록 범위이며 이것은 자신의 코드 블록에서만 볼 수 있다는 것을 의미한다.코드 블록 밖에서 변수를 호출하면 오류가 발생합니다.

// var
console.log(less); // undefined
if (1 < 2) {
  var less = true;
  console.log(less); // true
}
console.log(less); // true

// let
console.log(less); // Uncaught ReferenceError: less is not defined
if (1 < 2) {
  let less = true;
  console.log(less); // true
}
console.log(less); // Uncaught ReferenceError: less is not defined

let도 이런 블록 범위 전략을 보여 주었다.const회 성명 중복 금지let은 잠재적인 작업 오류를 발견하도록 설계되었습니다.중복된 let 성명은 정상적인 재분배와 유사하지만 중복된 var 성명은 오류의 재분배를 방지하는 흔한 오류를 허용하지 않는다.

var x = 1;
var x = 2; // x equals 2

let x = 1;
let x = 2; // SyntaxError: Identifier 'x' has already been declared

let개의 변수가 순환마다 반등한다
다음은 let을 사용하여 순환 내부에서 함수를 정의할 때 발생하는 흔한 오류입니다.

for (var i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, 10);
}
// logs 5 5 5 5 5

이 코드는 var을 처음 호출하기 전에 i의 값이 5이기 때문에 5번 연속으로 숫자 5를 기록할 것이다.우리가 console.log을 사용할 때 함수 내부의 let은 for순환의 특정한 교체에 대응하는 값입니다.

for (let i = 0; i < 5; i++) {
  setTimeout(() => {
    console.log(i);
  }, 10);
}
// logs 0 1 2 3 4

학급

JavaScript의 객체 지향 프로그래밍은 클래스가 아닌 원형을 사용하기 때문에 클래식 OOP과 다릅니다.ES6 클래스는 클래스를 에뮬레이션하는 일반적인 JavaScript 모드의 구문 바로 가기입니다.다음은 ES5의 원형 생성과 ES6의 클래스 생성을 보여 줍니다.

// ES5 way
function Circle(x, y, radius) {
  this.x = x;
  this.y = y;
  this.radius = radius;
}
Circle.prototype.move = function(x, y) {
  this.x = x;
  this.y = y;
};
Circle.prototype.area = function() {
  return Math.PI * Math.pow(this.radius, 2);
};

// ES6 way
class Circle {
  constructor(x, y, radius) {
    [this.x, this.y, this.radius] = [x, y, radius];
  }
  move(x, y) {
    [this.x, this.y] = [x, y];
  }
  area() {
    return Math.PI * Math.pow(this.radius, 2);
  }
}

클래스를 표준 객체 지향 언어와 일치하는 방식으로 확장할 수도 있습니다.

// ES5 way
function ColoredCircle(x, y, radius, color) {
  Circle.call(this, x, y, radius);
  this.color = color;
}
ColoredCircle.prototype = Object.create(Circle.prototype);

// ES6 way
class ColoredCircle extends Circle {
  constructor(x, y, radius, color) {
    super(x, y, radius);
    this.color = color;
  }
}

객체 문자 구문

속성 이름과 변수 이름이 일치하는 대상을 만드는 것은 흔합니다.ES6에는 다음과 같은 새로운 구문이 포함되어 있습니다.

var x = 5,
  y = 6;

// ES5 way
var coordinate = { x: x, y: y };

// ES6 way
let coordinate = { x, y };

함수 속성의 구문도 변경되었습니다.

// ES5 way
var counter = {
  count: 0,
  increment: function() {
    this.count++;
  }
};

// ES6 way
let counter = {
  count: 0,
  increment() {
    this.count++;
  }
};

할당 해제

임무를 분해하는 것은 매우 좋은 기능으로 여러 임무를 동시에 완성할 수 있다.ES5에는 일반적으로 다음과 같은 일련의 변수 선언이 있습니다.

var a = 1,
  b = 2,
  c = 3;

ES6 어레이를 사용하여 한 번에 다음 작업을 수행할 수 있습니다.

let [a, b, c] = [1, 2, 3];

이는 배열에서 값을 추출하는 데 특히 유용합니다.

var personData = ["John", 12, true];

// ES5 way
var name = personData[0],
  age = personData[1],
  isMale = personData[2];

// ES6 way
let [name, age, isMale] = personData;

및 스왑 변수:

// ES5 way
var tmp = a;
a = b;
b = tmp;

// ES6 way
[a, b] = [b, a];

분해 할당은 객체에도 사용할 수 있습니다.

var personData = {
  name: "John",
  age: 12,
  isMale: true
};

// ES5 way
var name = personData.name,
  age = personData.age,
  isMale: personData.isMale;

// ES6 way
let { name, age, isMale } = personData;

내포된 객체 구조에도 적용됩니다.

var book = {
  title: "A Tale of Two Cities",
  dimensions: [12, 8, 3],
  author: {
    name: "Charles Dickens"
  }
};

// ES5 way
var title = book.title,
  length = book.dimensions[0],
  width = book.dimensions[1],
  depth = book.dimensions[2],
  name = book.author.name;

// ES6 way
let { title, dimensions: [length, width, depth], author: { name } } = book;

간결하고 명료하다.

화살표 기능

JavaScript 개발자는 콜백과 같은 함수 표현식을 자주 사용합니다.그러나 키워드function과return이 여러 번 반복될 때 코드가 혼란스러워 보입니다.ES6에는 함수 표현식의 지루함을 줄이기 위한 새로운 문법이 생겼다.
ES6 함수 표현식 처리를 이전 Ecmascript 버전의 표현식 처리와 비교해 보겠습니다.

var list = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// ES3 way
var sumOfSquares = 0;
for (var i = 0; i < list.length; i++) {
  var n = list[i],
    square = n * n;
  sumOfSquares += square;
}

// ES5 way
var sumOfSquares = list
  .map(function(x) {
    return x * x;
  })
  .reduce(function(a, b) {
    return a + b;
  });

// ES6 way
let sumOfSquares = list.map(x => x * x).reduce((a, b) => a + b);

여러 문이 포함된 함수의 경우 화살표 함수의 오른쪽을 큰 괄호로 묶을 수 있습니다.

// ES5 way
window.onclick = function(e) {
  if (e.ctrlKey) console.log("Ctrl click");
  else console.log("Normal click");
};

// ES6 way
window.onclick = e => {
  if (e.ctrlKey) console.log("Ctrl click");
  else console.log("Normal click");
};

템플릿 문자열

동적 값을 문자열에 쉽게 삽입하고 여러 줄 문자열을 처리하는 새로운 형식의 문자열이 있습니다.큰따옴표나 작은따옴표가 아닌 i.

var weight = 80,
    height = 1.8;

// ES5 way
console.log("You are " + height + "m tall and weigh " + weight + "kg.\n" +
"Your BMI is " + weight / (height * height) + ".");

// ES6 way
console.log(`You are ${height}m tall and weigh ${weight}kg.
Your BMI is ${weight / (height * height)}.`);

...더 많아

나는 몇 가지 가장 중요한 새로운 변화를 소개하려고 했지만, ES6에는 또 다른 멋진 새로운 특성이 많이 있어서, 나는 본문에서 충분한 편폭을 소개하지 못했다.자세한 내용은 quick overview of the new features on es6-features.org, more detailed introduction in the Exploring ES6 book, 자세한 내용은 ECMAScript 2015 Language Specification.을 참조하십시오.
여기까지 와주셔서 감사합니다.나는 이 강좌가 너희들에게 도움이 되기를 바란다. 나는 다음 문장에서 너희들을 만날 것이다.
만약 네가 나의 일을 좋아한다면 고려해 보아라

이렇게 하면 나는 너에게 더 많은 항목, 더 많은 문장을 가져다 줄 수 있다
만약 네가 인터넷 개발에 관한 지식을 더 알고 싶다면 잊지 마라

Reference

이 문제에 관하여(ECMAScript 6 시작하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/cglikpo/getting-started-with-ecmascript6-d0i

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

[PSR 규범 테마 (2)] PSR-1 기본 코드 규범

socketserver의 간단한 사용 방법

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다