6. ES6 규범
20593 단어 십 차방 프로젝트
프로 그래 밍 언어 자바 스 크 립 트 는 ECMAScript 의 실현 과 확장 입 니 다.ECMAScript 는 ECMA (W3C 와 유사 한 표준 조직) 가 참여 하여 표준화 하 는 문법 규범 이다.ECMAScript 정의:
– 、 、 、 、 。
– 、 、 、 。
– JSON、Math、 、
ECMAScript 표준 은 HTML 이나 CSS 와 관련 된 기능 을 정의 하지 않 고 DOM (문서 대상 모델) 과 유사 한 웹 API 를 정의 하지 않 습 니 다. 이것들 은 모두 독립 된 표준 에서 정 의 됩 니 다.ECMAScript 는 브 라 우 저 환경 이 든 node. js 와 유사 한 비 브 라 우 저 환경 이 든 각종 환경 에서 JS 의 사용 장면 을 포함한다.
ECMAScript 6.0 (이하 ES6) 은 자 바스 크 립 트 언어의 차세 대 기준 으로 2015 년 6 월 공식 발표 됐다.자바 스 크 립 트 언어 가 복잡 한 대형 응용 프로그램 을 만 들 고 기업 급 개발 언어 가 되 는 것 이 목표 입 니 다.
1. Node. js 에서 ES6 사용
ES6 + 너무 좋 지만 많은 고급 기능 node 는 지원 되 지 않 으 므 로 babel 을 사용 하여 ES5 로 전환 해 야 합 니 다.
(1) babel 변환 설정, 프로젝트 루트 디 렉 터 리 추가. babelrc 파일
{
"presets" : ['es2015']
}
(2) es6 변환 모듈 설치
cnpm install babel-preset-es2015 --save-dev
(3) 전역 설치 명령 행 도구
cnpm install babel-cli -g
(4) 사용
babel-node js
2. 변수 성명 let
ES6 이전에 var 키워드 (전역 키워드, 어디 든 변 수 는 전역 적 인) 성명 변 수 를 알 고 있 습 니 다.성명 이 어디 에 있 든 지 간 에 함수 의 맨 위 에 있 는 것 으로 여 겨 집 니 다. 이것 이 바로 함수 변수 향상 입 니 다.예컨대
function aa() {
if(bool) {
var test = 'hello man'
} else {
console.log(test)
}
}
이상 의 코드 는 실제로:
function aa() {
var test //
if(bool) {
test = 'hello man'
} else {
// test undefined
console.log(test)
}
// test undefined
}
그 러 니까 bool 이 true or false 인지 신경 쓰 지 마 세 요.실제로, 어떻게 든 test 는 성명 을 만 들 것 입 니 다.
다음 ES6 주인공 등장:
우 리 는 보통 let 와 const 로 성명 하 는데 let 는 변 수 를 표시 하고 const 는 상수 를 표시 합 니 다.let 와 const 는 모두 블록 급 역할 영역 입 니 다.이 블록 급 작용 역 을 어떻게 이해 합 니까?함수 내부 에서 코드 블록 내부 에 있 습 니 다.다음 코드 보기
function aa() {
if(bool) {
let test = 'hello man'
} else {
//test
console.log(test)
}
}
3. 상수 성명
const 는 상수 설명 에 사용 되 며, 아래 코드 를 보십시오.
const name = 'lux'
name = 'joe' //
4. 템 플 릿 문자열
es6 템 플 릿 문 자 는 정말 개발 자의 복음 입 니 다. ES5 가 문자열 기능 에서 의 통 증 을 해결 하 였 습 니 다.
첫 번 째 용도, 기본 문자열 포맷 ('문자 만 사용 가능).표현 식 을 문자열 에 삽입 하여 연결 합 니 다.${} 로 정의 합 니 다.
//es5
var name = 'lux'
console.log('hello' + name)
//es6
const name = 'lux'
console.log(`hello ${name}`) //hello lux
두 번 째 용 도 는 ES5 때 우 리 는 역 슬 래 쉬 () 를 통 해 여러 줄 의 문자열 이나 문자열 을 한 줄 로 연결 합 니 다.ES6 반 따옴표 (`) 를 직접 해결 하 다.
// es5
var msg = "Hi \
man!"
// es6
const template = `
hello world
`
5. 함수 기본 매개 변수
ES6 는 매개 변수 에 기본 값 을 제공 합 니 다.함 수 를 정의 할 때 이 매개 변 수 를 초기 화 하여 매개 변수 가 전달 되 지 않 았 을 때 사용 하도록 합 니 다.
예시 코드 보기
function action(num = 200) {
console.log(num)
}
action() //200
action(300) //300
6. 화살표 함수
ES6 의 재 미 있 는 부분 은 함수 의 빠 른 쓰기 입 니 다.화살표 함수 입 니 다.
화살표 함수 의 가장 직관 적 인 세 가지 특징.
1 함수 만 들 기 위해 function 키워드 필요 없 음
2 return 키워드 생략
3 현재 상하 문 을 계승 하 는 this 키워드
다음 코드 보기 (ES6)
(response,message) => {
.......
}
ES5 코드 에 해당 합 니 다.
function(response,message){
......
}
function add(a,b){
console.log(a+b);
}
add(2,3);
//
add2=(a,b)=>{
console.log(a+b);
}
add2(2,3);
// ， return
add3=(a,b)=>a+b;
console.log(add3(2,3));
7. 대상 초기 화 약자 (변수 변환 대상)
ES5 우 리 는 대상 에 대해 모두 키 쌍 의 형식 으로 쓰 는데 키 쌍 의 이름 이 나 올 수 있 습 니 다.예컨대
function people(name, age) {
return {
name: name,
age: age
};
}
이상 코드 는 간략하게 쓸 수 있 습 니 다.
function people(name, age) {
return {
name,
age
};
}
8. 재 구성 (대상, 배열 의 속성 변 환 량)
배열 과 대상 은 JS 에서 가장 많이 사용 되 고 가장 중요 한 표현 형식 이다.추출 정 보 를 간소화 하기 위해 ES6 는 하나의 데이터 구 조 를 더 작은 부분 으로 분해 하 는 과정 을 새롭게 재 구성 했다.
ES5 추출 대상 의 정보 형식 은 다음 과 같 습 니 다.
const people = {
name: 'lux',
age: 20
}
const name = people.name
const age = people.age
console.log(name + ' --- ' + age)
익숙 하 다 고 생각 하 시 죠? 맞아요. ES6 전에 저 희 는 이렇게 대상 정 보 를 얻 었 습 니 다. 하나씩 얻 었 습 니 다.현재 ES6 의 해 체 는 대상 이나 배열 에서 데 이 터 를 꺼 내 변수 로 저장 할 수 있 습 니 다. 예 를 들 어
//
const people = {
name: 'lux',
age: 20
}
const { name, age } = people
console.log(`${name} --- ${age}`)
//
const color = ['red', 'blue']
const [first, second] = color
console.log(first) //'red'
console.log(second) //'blue'
9. Spread Operator (데이터 추가 과정)
ES6 의 또 다른 재 미 있 는 특징 은 Spread Operator 도 세 가지 점 입 니 다. 그 용 도 를 보 여 드 리 겠 습 니 다.조립 대상 또는 배열 (대상, 배열 의 확장, 값 의 융합 을 나타 낸다)
//
const color = ['red', 'yellow']
const colorful = [...color, 'green', 'pink']
console.log(colorful) //[red, yellow, green, pink]
//
const alp = { fist: 'a', second: 'b'}
const alphabets = { ...alp, third: 'c' }
console.log(alphabets) //{ "fist": "a", "second": "b", "third": "c"
6.3.9 import 와 export
import 가 져 오기 모듈, export 내 보 내기 모듈
lib.js
let fn0=function(){
console.log('fn0...');
}
export {fn0}
demo9.js
import {fn0} from './lib'
fn0();
메모: node (v8. x) 자체 가 import 키 워드 를 지원 하지 않 기 때문에 우 리 는 babel 의 명령 행 도 구 를 사용 하여 실행 해 야 합 니 다 (설정 은 6.2 소절 내용 참조)
babel-node demo9
좋은 웹페이지 즐겨찾기
