ES6에 새로 추가된 공통 기능

1. 블록급 작용역let과const

Let은 업데이트된 var이지만 블록 레벨 역할 영역과 같은 새로운 문법이 있습니다. 역할 영역에서 변수 향상이 없습니다.
Const 상수, 변경 불가, 단일 지향적 객체가 객체별 적용 또는 변경 가능 여부, 일반 대문자
 
 

2. 화살표 함수

아니오this개념this는 정의할 때의 대상이다
리셋 함수 간소화 매개 변수 생략 괄호 한마디return 생략
()=>{}
 

3. Promise

비동기 콜백 해결

Let promise =new Promise(function(resolve,reject){
//resolve  
//reject   
}）；


Promise.then(res=>{
}),then=>{
}

방법 then catch finally all race resolve rejecttry
 
 

4. 클래스

엄격한 패턴
ES6에 클래스 개념이 추가되었습니다. 자바와 유사하지만 실제로는 함수입니다. new가 필요하지만 함수 호출처럼 하면 오류가 발생합니다.
이니셜 대문자
변수 승급 없음
This는 기본보다 가볍습니다.
계승 extends
하위 클래스는 상위 클래스의 구조 함수인 Super()를 실행해야 합니다.
덮어쓴 다음에 최신을 실행하면 슈퍼부터 새로운 것을 추가할 수 있습니다
정적 방법:static를 추가하면 실례적으로 계승되지 않으며 클래스를 통해 정적 속성을 직접 호출합니다
사유 메서드, 사유 속성 #
 

5.모듈

엄격한 패턴을 채택하다
변수는 반드시 성명한 후에 사용해야 한다
함수의 매개 변수는 같은 이름의 속성이 있을 수 없습니다. 그렇지 않으면 오류가 발생합니다
with 문을 사용할 수 없습니다.
읽기 전용 속성에 값을 부여할 수 없습니다. 그렇지 않으면 오류가 발생합니다.
접두사 0을 사용하여 8진수를 표시할 수 없습니다. 그렇지 않으면 오류가 발생합니다
삭제할 수 없는 속성을 삭제할 수 없습니다. 그렇지 않으면 오류가 발생합니다
변수 delete prop을 삭제할 수 없습니다. 오류가 발생합니다. 속성 delete 글로벌 [prop]만 삭제할 수 있습니다.
eval은 외부 작용역에 변수를 도입하지 않습니다
eval과arguments는 다시 할당할 수 없습니다
arguments는 함수 매개 변수의 변화를 자동으로 반영하지 않습니다
arguments를 사용할 수 없습니다.callee
arguments를 사용할 수 없습니다.caller
전역 대상을 가리키는 this 금지
f. 을(를) 사용할 수 없습니다.caller 및 f.arguments 함수 호출 창고 가져오기
보존자 추가 (예: 보호자, static,interface)
 
 

6. Export 및 import

Export {이름 (변수, 함수, 클래스) as 이름 바꾸기} 규정 모듈 대외 인터페이스
|default 시 {} import이든 export든 추가하지 않아도 됩니다
import {* 명칭 as xxx} from'모듈'상대 및 절대 경로 모두 가능
협조하여 사용하다
Import의 컨텐트는 변경할 수 없습니다.
export { foo, bar } from 'my_module';
Import() 동적 로드
 

7. Proxy

reflect와 결합하여 사용
 
 

8. 기본 매개 변수

함수가 전달되지 않았을 때 기본값을 사용합니다.
들어오는 매개 변수는 기본적으로 정의되어 있으며 내부에서 정의할 수 없습니다
 

9. 템플릿 표현식

큰따옴표 + ${}
여러 줄 문자열 구현
 

10. 해체 할당치

직접 대상에 값을 부여할 수 있습니다. 그룹을 포함합니다.
const  {x,y} = this,.props; 
 

11. 새 데이터 형식symbol 정의

유일무이한 (원시 형식은 new 불가)
등록 정보Description
방법.for 키 For 재사용 키 값 반환
 

12. Generator

함수 이름 앞에 *
비동기식 해결, ASync 깊이 중첩(ES2017)
생성기
yield (정지 표지) 와next () (다음 내부 상태) 를 사용합니다.

function * gen(){
    yield 'welcome';
    yield 'to';
    return '';
}
let g1=gen();
Console.log(g1.next());

 
Yield * function()은 다른 내부 일반 함수를 수행합니다.
 
 

13. 비동기식 운영

Promise
Geneator
Async Await

Async function fn(){

Let f1= await readFile(‘data/a.txt’);

Condole.log(f1.toString());

Let f2= await readFile(‘data/b.txt’);

Condole.log(f2.toString());

Let f3= await readFile(‘data/c.txt’);

Condole.log(f3.toString());

 

13.1 Promise의 즉각적인 실행

var p = new Promise(function(resolve, reject){
  console.log("create a promise");
  resolve("success");
});


console.log("after new Promise");

p.then(function(value){
  console.log(value);
});

콘솔 출력:

"create a promise""after new Promise""success"

Promise 대상은 미래에 발생할 이벤트를 표시하지만, (new) Promise를 만들 때 Promise 매개 변수로 전송되는 함수는 즉시 실행됩니다. 그 중에서 실행되는 코드는 비동기 코드일 수 있습니다.일부 학우들은 프로미스 대상이 then 방법을 호출할 때 프로미스가 수신한 함수가 실행된다고 생각하는데 이것은 잘못된 것이다.따라서 코드에서 "create a promise"가 "after new Promise"출력보다 먼저 나타납니다.

13.2 Promise의 3가지 상태

var p1 = new Promise(function(resolve,reject){
  resolve(1);
});

var p2 = new Promise(function(resolve,reject){
  setTimeout(function(){
    resolve(2);  
  }, 500);      
});

var p3 = new Promise(function(resolve,reject){
  setTimeout(function(){
    reject(3);  
  }, 500);      
});


console.log(p1);
console.log(p2);
console.log(p3);

setTimeout(function(){
  console.log(p2);
}, 1000);

setTimeout(function(){
  console.log(p3);
}, 1000);


p1.then(function(value){
  console.log(value);
});

p2.then(function(value){
  console.log(value);
});

p3.catch(function(err){
  console.log(err);
});

콘솔 출력:

Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: 1}
Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined}
Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined}
Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: 2}
Promise {[[PromiseStatus]]: "rejected", [[PromiseValue]]: 3}

Promise의 내부 구현은 상태기입니다.Promise에는 세 가지 상태가 있는데 그것이 바로 pending,resolved,rejected이다.Promise가 처음 생성되었을 때 pending 상태입니다.Promise의 함수 매개 변수가 Resolve를 실행하면 Promise는 pending 상태에서 resolved 상태로 변합니다.만약 Promise의 함수 매개 변수에서 resolve 방법이 아니라 Reject 방법을 실행한다면 Promise는 pending 상태에서 Rejected 상태로 바뀔 것입니다.
p2, p3이 막 만들어졌을 때 컨트롤러에서 출력한 이 두 대의 Promise는 모두 pending 상태였지만 왜 p1은 Resolved 상태입니까?이것은 p1의 함수 매개 변수에서 실행되는 동기화 코드이기 때문에Promise가 만들어지자마자 Resolve 방법이 호출되었기 때문에 뒤따르는 출력은 p1이resolved 상태임을 나타냅니다.우리는 두 개의 set Timeout 함수를 통해 1s를 지연한 후에 p2, p3의 상태를 다시 출력한다. 이때 p2, p3은 이미 실행이 끝났고 상태는 각각resolved와rejected로 변한다.

13.3 Promise 상태의 불가역성

var p1 = new Promise(function(resolve, reject){
  resolve("success1");
  resolve("success2");
});


var p2 = new Promise(function(resolve, reject){
  resolve("success");
  reject("reject");
});


p1.then(function(value){
  console.log(value);
});


p2.then(function(value){
  console.log(value);
});

콘솔 출력:

"success1""success"

Promise 상태가 Resolved나rejected로 변할 때 Promise의 상태와 값은 고정됩니다. 다음에 Resolve나reject 방법을 아무리 호출해도 그 상태와 값을 바꿀 수 없습니다.따라서 p1에서resolve("success2")는 p1의 값을success2로 변경할 수 없고, p2에서reject("reject")도 p2의 상태를 Resolved에서rejected로 변경할 수 없습니다.

13.4 체인 호출

var p = new Promise(function(resolve, reject){
  resolve(1);
});

p.then(function(value){               // then
  console.log(value);
  return value*2;
}).then(function(value){              // then
  console.log(value);
}).then(function(value){              // then
  console.log(value);
  return Promise.resolve('resolve');
}).then(function(value){              // then
  console.log(value);
  return Promise.reject('reject');
}).then(function(value){              // then
  console.log('resolve: '+ value);
}, function(err){
  console.log('reject: ' + err);
})

 
콘솔 출력:

1
2
undefined"resolve""reject: reject"

 
Promise 대상의 then 방법은 새로운 Promise 대상을 되돌려줍니다. 따라서 체인을 통해 then 방법을 호출할 수 있습니다.n 방법은 두 개의 함수를 매개 변수로 받아들인다. 첫 번째 매개 변수는Promise가 실행에 성공했을 때의 리셋이고, 두 번째 매개 변수는Promise가 실행에 실패했을 때의 리셋이다.두 함수는 하나만 호출되며, 함수의 반환값은then 반환을 만드는 Promise 대상으로 사용됩니다.두 매개변수의 반환 값은 다음 세 가지 시나리오 중 하나일 수 있습니다.

return은 동기화된 값이나undefined (유효한 값이 되돌아오지 않을 때 기본적으로undefined를 되돌려줍니다.then 방법은resolved 상태의Promise 대상을 되돌려줍니다.Promise 대상의 값은 바로 이 되돌려주는 값입니다.

return의 또 다른 Promise,then 방법은 이 Promise의 상태와 값에 따라 새로운 Promise 대상을 만들어 되돌려줍니다.

throw에서 동기화 이상이 발생했습니다.then 방법은 Rejected 상태의Promise를 되돌려줍니다. 값은 이 이상입니다.

상기 분석에 의하면 코드에서 첫 번째then은 하나의 값이 2(1*2)이고 상태는resolved의Promise 대상이기 때문에 두 번째then 출력의 값은 2이다.두 번째 then에 되돌아오는 값이 없기 때문에 기본undefined를 되돌려줍니다. 세 번째 then에서 undefined를 출력합니다.세 번째 then과 네 번째 then에서 각각 하나의 상태는 Resolved의 Promise와 하나의 상태는 Rejected의 Promise로 돌아가며 네 번째 then에서 성공한 리셋 함수와 다섯 번째 then에서 실패한 리셋 함수로 처리된다.

13.5 Promise then () 비동기식 콜백

var p = new Promise(function(resolve, reject){
  resolve("success");
});



p.then(function(value){
  console.log(value);
});


console.log("which one is called first ?");

콘솔 출력:

"which one is called first ?""success"

Promise가 수신한 함수 매개 변수는 동기화되지만 then 방법의 리셋 함수 실행은 비동기적이기 때문에'success'는 뒤에서 출력됩니다.

13.6 Promise의 예외

var p1 = new Promise( function(resolve,reject){
  foo.bar();
  resolve( 1 );   
});



p1.then(
  function(value){
    console.log('p1 then value: ' + value);
  },
  function(err){
    console.log('p1 then err: ' + err);
  }
).then(
  function(value){
    console.log('p1 then then value: '+value);
  },
  function(err){
    console.log('p1 then then err: ' + err);
  }
);


var p2 = new Promise(function(resolve,reject){
  resolve( 2 );
});


p2.then(
  function(value){
    console.log('p2 then value: ' + value);
    foo.bar();
  },
  function(err){
    console.log('p2 then err: ' + err);
  }
).then(
  function(value){
    console.log('p2 then then value: ' + value);
  },
  function(err){
    console.log('p2 then then err: ' + err);
    return 1;
  }
).then(
  function(value){
    console.log('p2 then then then value: ' + value);
  },
  function(err){
    console.log('p2 then then then err: ' + err);
  }
);

콘솔 출력:

p1 then err: ReferenceError: foo is not defined
p2 then value: 2
p1 then then value: undefined
p2 then then err: ReferenceError: foo is not defined
p2 then then then value: 1

Promise의 이상은 then 매개 변수의 두 번째 리셋 함수(Promise 실행에 실패한 리셋)에서 처리되며 이상 정보는 Promise의 값으로 사용됩니다.이상이 처리되면 then이 되돌아오는 후속 Promise 대상은 정상으로 돌아오고 Promise가 성공적으로 리셋 함수 처리를 수행합니다.또한 p1, p2 다단계 then의 리셋 함수는 번갈아 실행되는데 이것이 바로Promise then 리셋의 비동기성에 의해 결정된다는 것을 주의해야 한다.

13.7 Promise.resolve()

var p1 = Promise.resolve( 1 );
var p2 = Promise.resolve( p1 );
var p3 = new Promise(function(resolve, reject){
  resolve(1);
});
var p4 = new Promise(function(resolve, reject){
  resolve(p1);
});


console.log(p1 === p2);
console.log(p1 === p3);
console.log(p1 === p4);
console.log(p3 === p4);


p4.then(function(value){
  console.log('p4=' + value);
});


p2.then(function(value){
  console.log('p2=' + value);
})


p1.then(function(value){
  console.log('p1=' + value);
})

콘솔 출력:

truefalsefalsefalse
p2=1
p1=1
p4=1

Promise.resolve(...)값을 받거나 Promise 객체를 매개변수로 사용할 수 있습니다.파라미터가 일반 값일 때, 이것은 Resolved 상태의Promise 대상을 되돌려줍니다. 대상의 값이 바로 이 파라미터입니다.매개변수가 Promise 객체인 경우 이 Promise 매개변수를 직접 반환합니다.따라서 p1==p2.그러나 new를 통해 만들어진 Promise 대상은 모두 새로운 대상이기 때문에 뒤의 세 가지 비교 결과는false이다.그리고 왜 p4의then이 가장 먼저 호출되지만 컨트롤러에서 마지막 출력 결과가 나올까요?p4의 Resolve에서 수신한 매개 변수는 프로미스 대상 p1이기 때문에, Resolve는 p1에 대해 상자를 뜯어 p1의 상태와 값을 얻지만, 이 과정은 비동기적이며, 다음 절을 참고할 수 있습니다.

13.8 resolve vs reject

var p1 = new Promise(function(resolve, reject){
  resolve(Promise.resolve('resolve'));
});


var p2 = new Promise(function(resolve, reject){
  resolve(Promise.reject('reject'));
});


var p3 = new Promise(function(resolve, reject){
  reject(Promise.resolve('resolve'));
});


p1.then(
  function fulfilled(value){
    console.log('fulfilled: ' + value);
  },
  function rejected(err)
    console.log('rejected: ' + err);
  }
);


p2.then(
  function fulfilled(value){
    console.log('fulfilled: ' + value);
  },
  function rejected(err){
    console.log('rejected: ' + err);
  }
);


p3.then(
  function fulfilled(value){
    console.log('fulfilled: ' + value);
  },
  function rejected(err){
    console.log('rejected: ' + err);
  }
);

콘솔 출력:

p3 rejected: [object Promise]
p1 fulfilled: resolve
p2 rejected: reject

Promise 콜백 함수의 첫 번째 매개 변수 resolve는 Promise에 대해 "상자를 뜯기"동작을 실행합니다.즉, Resolve의 매개 변수가 Promise 대상일 때, Resolve는 이 Promise 대상의 상태와 값을 '뜯기' 로 가져오지만, 이 과정은 비동기적이다.p1 "상자를 뜯은 후 Promise 대상을 획득한 상태는 Resolved이기 때문에fulfilled 리셋이 실행됩니다.p2 "상자를 뜯기"후 Promise 대상을 가져오는 상태가 Rejected이기 때문에 Rejected 리셋이 실행됩니다.그러나 Promise 리셋 함수 중의 두 번째 매개 변수인 Reject는 상자를 뜯는 능력을 갖추지 못한다. Reject의 매개 변수는 then 방법의 Rejected 리셋에 직접 전달된다. 따라서 p3 Reject가 Resolved 상태의 Promise를 받아도 then 방법에서 호출된 것은 Rejected이고 매개 변수는 Reject가 받은 Promise 대상이다.

14. SET

수조와 유사하며, 질서정연하며, 중복된 값이 있을 수 없지만, 오류가 발생하지 않습니다
Let set = new Set();
방법:add delete has clear size foreach keysvalue(let item of krys)entries
키와value는 같은 값입니다
weakSet 저장소 Json은 대상의 약한 인용만 저장할 수 있습니다 (쓰레기 회수는 고려하지 않음)
 
 

15. Map

Set(key,value) get(key)  has(key) delete (key) clear
Map 키는 객체 참조이며 메모리를 바인딩합니다.

15. 1 맵을 배열로 변환

 const myMap = new Map()
     .set(true,7)
.set({foo:3}, [‘abc’]);

 

15.2 배열을 Map으로 변환

new Map([
  [true, 7],
  [{foo: 3}, ['abc']]
])

15.3 맵 객체 전환

function strMapToObj(strMap) {
  let obj = Object.create(null);
  for (let [k,v] of strMap) {
    obj[k] = v;
  }
  return obj;
}


const myMap = new Map()
  .set('yes', true)
  .set('no', false);
strMapToObj(myMap)

 

15.4 개체 전환 맵

function objToStrMap(obj) {
  let strMap = new Map();
  for (let k of Object.keys(obj)) {
    strMap.set(k, obj[k]);
  }
  return strMap;
}

objToStrMap({yes: true, no: false})

15.5 맵 앤 제이슨

대상 JSON으로 전환

function strMapToJson(strMap) {
   return JSON.stringify(strMapToObj(strMap));
}


let myMap = new Map().set('yes', true).set('no', false);
strMapToJson(myMap)

 
 
배열Map으로 변환

function mapToArrayJson(map) {
  return JSON.stringify([...map]);
}


let myMap = new Map().set(true, 7).set({foo: 3}, ['abc']);
mapToArrayJson(myMap)

 

15.6 JSON 전환 맵

function jsonToStrMap(jsonStr) {
  return objToStrMap(JSON.parse(jsonStr));
}


jsonToStrMap('{"yes": true, "no": false}')

 

특별하다

전체 JSON은 하나의 그룹이고 모든 그룹 구성원 자체는 두 개의 구성원이 있는 그룹이다.이때 매핑으로 일일이 대응할 수 있습니다.전체 JSON은 하나의 그룹이고 모든 그룹 구성원 자체는 두 개의 구성원이 있는 그룹이다.이때 매핑으로 일일이 대응할 수 있다.

function jsonToMap(jsonStr) {
  return new Map(JSON.parse(jsonStr));
}


jsonToMap('[[true,7],[{"foo":3},["abc"]]]')

 
 

16. WeakMap

키는 대상이 약한 인용만 가능하며 쓰레기 수거에 포함되지 않습니다