ES6 상용 신제품

let 키워드
let 1.역할:* var과 유사하며 변수를 선언합니다. 2.특징* 블록 역할 영역에서 유효* 중복 성명 불가* 예처리 불가, 변수 증가 없음 3.적용 * 반복 감청 * var 대신 let을 사용하는 것이 트렌드
2. const 키워드
1. 역할: * 상수를 정의합니다. 2.특징: * 수정할 수 없음 * 기타 특징은let 3.적용:* 변경되지 않은 데이터 저장
3. 변수의 해체 할당값
1. 대상이나 그룹에서 데이터를 추출하고 여러 변수(여러 개)에 값을 부여하는 것을 이해한다.대상의 해체값let{n,a}={n:'tom', a:12}3.수조의 해구값let[a,b]=[1,'atguigu'] 4.용도* 여러 인삼에 값 부여

/*let username = obj.username
let age = obj.age*/

let {username,age} = obj;

4. 템플릿 문자열
1. 템플릿 문자열: 문자열을 간소화하는 맞춤법 * 템플릿 문자열은 ``*변경된 부분을 포함하는 ${xx}로 정의해야 합니다

str = ` ${obj.username}， ${obj.age}`

5. 간략한 대상 쓰기
간단한 대상 쓰기 * 같은 이름의 속성 값 생략 * 생략 방법의 function

*  ：
let x = 1
let y = 2
let point = {
//x:x,
//y:y
x,
y,





setX(x){this.x = x}

}

6. 화살표 함수
역할: 익명 함수 정의 * 기본 구문: * 매개 변수 없음: () = > console.log('xxx')*하나의 매개 변수: i=>i+2*는 하나의 매개 변수보다 크다. (i, j)=>i+j* 함수체는 큰 괄호를 사용하지 않고 기본 반환 결과*함수체는 여러 문장으로 둘러싸여 있고 {}로 둘러싸여 있으며 반환할 내용이 필요하면 수동으로 반환*사용 장면: 의미 반환 함수*화살표 함수로 많이 사용되는 특징: 1.깔끔하다화살표 함수는 자신의this가 없다. 화살표 함수의this는 호출할 때 결정되는 것이 아니라 정의할 때 처한 대상이 바로this3이다.확장 이해: 화살표 함수의this는 바깥쪽에 함수가 있는지 확인합니다. 바깥쪽에 함수의this는 내부 화살표 함수의this가 없으면 window입니다.
7. 3점 연산자
*용도 1.rest (가변) 매개 변수 *는arguments를 대체하는데 사용하지만arguments보다 유연합니다.마지막 부분은 형삼 매개 변수functionfun(...values) {console.log(arguments),arguments.forEach(function(item, index) {console.log(item, index);)만 가능합니다.//arguments 함수에서 함수 매개 변수를 넣는 데 사용되는 위수조는 두루 옮길 수 없고 세 개의 연산자로console.log(value);value.forEach(function (item,index) {console.log(item,index)})}2.확장 연산자let arr1 = [1,3,5];let arr2 = [2,...arr1,6]arr2.push(...arr1);
8. 인삼 기본값
* 인삼의 기본값 ------- 인자를 입력하지 않을 때 인삼의 기본값function Point(x=1, y=2) {this.x = xthis.y = y}
9.promise\symbol\Iterator 범람기\Generator\async 함수
1. 이해: * Promise 대상: 미래의 어느 순간에 발생할 사건을 대표한다(일반적으로 비동기적인 조작이다) * 프로mise 대상이 있으면 비동기적인 조작을 동기화하는 절차로 표현할 수 있고 겹겹이 끼워진 리셋 함수(속칭'리셋 지옥'을 피한다) * ES6의 프로mise는 하나의 구조 함수로 프로mise 실례를 생성하는 데 사용된다.Promise 기본 단계(2단계)*를 사용하여 Promise 대상let promise = new Promise(resolve, reject)=> {//Promise 상태 초기화pending//비동기 작업 수행if(이동 작업 성공) {resolve(value);//이 매개 변수 자동 수정Promise의 값은fullfilled}else{resolve(errMsg);//이 매개 변수 자동 수정Promise의 값은rejected}* promise를 호출하는 themise.then(function( result => console.log(result) errorMsg => alert(errorMsg) ))3.promise 대상의 3개 상태 * pending: 초기화 대상 * fullfilled: 성공 상태 * rejected: 실패 상태 4.적용:*promise를 사용하여 시간 초과 처리를 실현*promise를 사용하여 aax 요청let request = new XMLHttp Request () request를 봉인합니다.onreadystatechange = function(){}request.responseType = 'json'request.open('GET',url)request.sent()
----------------------------------------------------------------------------------------------------------------------------------------------------------------------
Symbol: 개념: ES6에 원시 데이터 형식인symbol(기존의 원시 데이터 형식:String,Number,boolean,null,undefined,대상) 특징이 추가되었습니다.Symbol 속성에 해당하는 값은 고유하며 이름 충돌 문제를 해결합니다. 2.Symbol의 값은 문자열 결합을 포함하여 다른 데이터와 계산할 수 없습니다. 3.for in, for of 스트리밍 시 symbol 속성을 스트리밍하지 않습니다: 1.Symbol 함수를 호출하여 symbol 값 let symbol = Symbol()을 받습니다.let obj = {};obj[symbol] = 'hello';2. 전참 표지 let symbol = Symbol('one').let symbol2 = Symbol('two')console.log(symbol);//Symbol('one')console.log(symbol2);//Symbol('two')3.내장형 Symbol 값* ES6는 자신이 사용하는 Symbol 값을 정의하는 것 외에 11개의 내장형 Symbol 값을 제공하여 언어 내부에서 사용하는 방법인 Symbol을 가리킵니다.iterator* 객체의 Symbol.iterator 속성, 이 대상을 가리키는 기본 플러그인 방법 (뒷부분)
----------------------------------------------------------------------------------------------------------------------------------------------------------------------
개념:iterator는 인터페이스 메커니즘으로 각종 서로 다른 데이터 구조에 통일된 접근 메커니즘 역할을 제공한다.각종 데이터 구조를 위해 통일되고 간편한 접근 인터페이스를 제공한다.데이터 구조의 구성원을 어떤 순서에 따라 배열할 수 있도록 하다.ES6는 새로운 스트리밍 명령을 만들었습니다.of 순환, Iterator 인터페이스는 주로 for...of 소비 작업 원리: - 바늘 대상(역력기 대상)을 만들고 통일되고 간편한 접근 인터페이스를 제공합니다. - 첫 번째next 방법을 호출하고 바늘은 데이터 구조의 첫 번째 구성원을 자동으로 가리킵니다. - 다음에next 방법을 계속 호출합니다. 바늘은 마지막 구성원을 가리킬 때까지 뒤로 이동합니다. - 매번 next 방법을 호출할 때마다value와done를 포함하는 대상이 되돌아옵니다.{value: 현재 구성원의 값,done:부울 값}*value는 현재 구성원의 값을 표시하고,done에 대응하는 부울 값은 현재 데이터가 겹쳐서 끝났는지 여부를 표시한다.* 겹쳐서 끝났을 때 되돌려주는value값은undefined이고,done값은false원생으로iterator 인터페이스를 갖춘 데이터(for of 겹쳐쓰기 가능) 확장 이해: 1.데이터 구조에 Symbol이 배치된 경우iterator 인터페이스, 이 데이터는 for of로 옮겨다니기 2.for of를 사용하여 목표 데이터를 훑어볼 때, 이 데이터는 자동으로 Symbol을 찾습니다.iterator 속성//Symbol.iterator 속성이 대상을 가리키는 기본 플러그인 방법입니다.(이전 장절:iterator 인터페이스 계승) 1.Array 2.arguments 3.set 컨테이너 4.map 용기 5.String ...
----------------------------------------------------------------------------------------------------------------------------------------------------------------------
Generator 함수 개념: 1.ES6에서 제공하는 비동기 프로그래밍 솔루션 중 하나 2.Generator 함수는 상태기로서 내부에 서로 다른 상태의 데이터를 봉인한다.범람기 대상 생성에 사용 4.함수 (타성 값 구하기) 를 일시 정지할 수 있고, yield는 일시 정지할 수 있으며,next 방법은 시작할 수 있습니다.매번 되돌아오는 것은 yield 후의 표현식 결과 특징: 1.function과 함수 이름 사이에는 별표가 하나 있다.내부는 yield 표현식으로 서로 다른 상태를 정의한다. 예를 들어 1.function * generator Example () {let result = yield'hello'//상태 값은 hello yield'generator'//상태 값은 generator} 3.generator 함수는 바늘 대상(11장에 이어iterator)을 되돌려주고 함수 내부 논리를 실행하지 않습니다.next 방법을 호출하여 함수 내부 논리가 실행되기 시작하고 yield 표현식이 정지되면 {value: yield 후의 표현식 결과/undefined,done} 5.넥스트를 다시 호출하는 방법은 지난번에 멈췄을 때의 yield에서 시작해서 마지막 6.ield 문장의 반환 결과는 보통undefined입니다.next 방법을 호출할 때, 전참 내용은 시작할 때 yield 문장을 반환값으로 합니다.
----------------------------------------------------------------------------------------------------------------------------------------------------------------------
Async 함수 개념: 진정한 의미에서 비동기 리셋 문제를 해결하고 동기화 프로세스는 비동기 조작의 본질을 표현한다. Generator의 문법 설탕 문법: Async function foo() {await 비동기 조작 await 비동기 조작} 특징: 1.Gennerator처럼 넥스트 방법을 호출할 필요가 없습니다. await가 기다리면 현재의 비동기 작업이 끝나면 아래로 실행합니다.항상 프로미스 대상을 되돌려줍니다.then 방법으로 다음 동작을 진행할 수 있습니다.async는Generator 함수의 별표를 대체하고*,await는Generator의yield를 대체합니다.말의 뜻이 더욱 명확해지고, 사용이 간단하며, 경험증으로 일시적으로 좋지 않은 효과가 없다