ES6 흔 한 면접 문제 총화

ES6 흔 한 면접 문제 총화
머리말
오늘 블 로 거들 은 ES6 흔 한 면접 문제 총 결 을 공유 합 니 다!싫 으 면 뿌리 지 마 세 요. 이의 가 있 으 면 토론 을 환영 합 니 다!
시작 하 다
1. es5es6 의 차 이 를 알 고 있 는 것 es6 을 말 해 보 세 요.ECMAScript5, 즉 ES5ECMAScript 의 다섯 번 째 수정 으로 2009 년 표준화 가 완료 되 었 다.ECMAScript6, 즉 ES6ECMAScript 의 여섯 번 째 수정 으로 2015 년 에 완성 되 었 으 며 ES2015 이 라 고도 부른다.ES6ES5 에 이 어 개 선 된 것 으로 ES5 보다 더욱 간결 하고 개발 효율 을 높 였 다.
ES6 에 추 가 된 일부 기능
  • let 성명 변수 와 const 성명 상수, 두 개 모두 블록 급 역할 영역 ES5 에 블록 급 역할 영역 이 없 으 며, var 에 변수 가 향상 되 었 습 니 다. let 에서 사용 하 는 변 수 는 반드시 성명 해 야 합 니 다
  • 화살표 함수 ES6 의 함수 정 의 는 키워드 function () 을 사용 하지 않 고 () = > 를 이용 하여 정의 합 니 다
  • 템 플 릿 문자열 템 플 릿 문자열 은 증강 판 문자열 로 반 따옴표 (`) 로 표시 되 며 일반 문자열 로 사용 할 수도 있 고 여러 줄 문자열
  • 을 정의 할 수도 있 습 니 다.
  • 할당 해제 ES6 는 일정한 모델 에 따라 배열 과 대상 에서 값 을 추출 하고 변 수 를 할당 할 수 있 습 니 다
  • for of 순환 for... of 순환 은 배열, Set 와 Map 구조, 유사 한 배열 의 대상, 대상, 문자열
  • 을 옮 겨 다 닐 수 있 습 니 다.
  • import, export 가 져 오기 내 보 내기 ES6 표준 에서 Js 원생 지원 모듈 (module).JS 코드 를 서로 다른 기능 의 작은 블록 으로 나 누 어 모듈 화하 고 서로 다른 기능 의 코드 를 각각 다른 파일 에 쓰 며 각 모듈 은 공공 인터페이스 부분 만 내 보 낸 다음 모듈 을 통 해 가 져 오 는 방식 으로 다른 곳 에서 사용 할 수 있다
  • .
  • set 데이터 구조 set 데이터 구조, 배열 과 유사 합 니 다.모든 데 이 터 는 유일한 것 이 고 중복 되 는 값 이 없습니다.그것 자 체 는 구조 함수
  • 이다.
  • ... 연산 자 를 펼 치면 배열 이나 대상 안의 값 을 펼 칠 수 있 습 니 다.여러 값 을 하나의 변수 로 수집 할 수 있 습 니 다
  • 수식 기 @ decorator 는 함수 로 클래스 를 수정 하거나 방법 을 수정 하 는 행위 입 니 다.수식 기 는 본질 적 으로 컴 파일 할 때 실행 되 는 함수
  • 이다.
  • class 류 의 계승 ES6 에 서 는 ES5 처럼 프로 토 타 입 체인 을 사용 하여 계승 하지 않 고 Class 라 는 개념 을 도입 한다
  • .
  • async, await 는 async / await 를 사용 하여 promise 와 결합 하여 동기 화 된 코드 를 작성 하여 비동기 프로 세 스 를 처리 할 수 있 습 니 다. 코드 의 간결 성과 가 독성 을 향상 시 키 는 async 는 하나의 function 이 비동기 적 이라는 것 을 설명 하 는 데 사 용 됩 니 다. await 는 비동기 적 인 방법 이 실 행 될 때 까지 기다 리 는 데 사 용 됩 니 다
  • promise 는 비동기 프로 그래 밍 의 해결 방안 으로 전통 적 인 해결 방안 (리 셋 함수 와 사건) 보다 합 리 적 이 고 강력 하 다
  • SymbolSymbol 은 기본 유형 이다.Symbol 은 symbol 함 수 를 호출 하여 생 성 됩 니 다. 선택 할 수 있 는 이름 인 자 를 받 습 니 다. 이 함수 가 되 돌아 오 는 symbol 은 유일한
  • 입 니 다.
  • 프 록 시 에이 전 트 는 프 록 시 (Proxy) 감청 대상 의 조작 을 사용 한 다음 에 해당 하 는 일 을 할 수 있다
  • 2. var, let, const 간 의 차이
    var 성명 변 수 는 중복 성명 할 수 있 으 며, let 는 중복 성명 할 수 없습니다.
    var 는 블록 급 에 제한 을 받 지 않 고 let 는 블록 급 에 제한 을 받는다.
    var 는 window 와 일치 합 니 다 (속성 이 걸 립 니 다). let 는 window 와 일치 하지 않 습 니 다.
    var 는 성명 의 위 에서 변 수 를 방문 할 수 있 으 며, let 는 일시 적 으로 데 드 존 이 있 으 며, 성명 의 위 에서 변 수 를 방문 하면 오 류 를 보고 할 수 있 습 니 다.
    const 성명 후 값 을 부여 해 야 합 니 다. 그렇지 않 으 면 잘못 보고 할 수 있 습 니 다.
    const 는 가 변 적 이지 않 은 양 을 정의 합 니 다. 바 뀌 면 잘못 보고 합 니 다.
    const 는 let 와 마찬가지 로 window 와 일치 하지 않 고 블록 급 역할 도 메 인 을 지원 하 며 성명 의 위 에 접근 하 는 변 수 는 잘못 보 고 됩 니 다.
    3. 화살표 함 수 를 사용 할 때 무엇 을 주의해 야 합 니까?
  • 화살표 함 수 를 사 용 했 습 니 다. this 는 window 가 아니 라 부모 급 (가리 키 는 것 은 가 변 적 입 니 다)
  • arguments 대상 을 사용 할 수 없습니다
  • 구조 함수 로 사용 할 수 없습니다. 이것 은 new 명령 을 사용 할 수 없다 는 것 입 니 다. 그렇지 않 으 면 오류 가 발생 할 수 있 습 니 다
  • yield 명령 을 사용 할 수 없 기 때문에 화살표 함 수 는 Generator 함수
  • 로 사용 할 수 없습니다.
    4. ES6 템 플 릿 문자열 은 어떤 새로운 기능 이 있 습 니까?템 플 릿 문자열 과 같은 기능 을 수행 합 니 다.
    기본 문자열 포맷.표현 식 을 문자열 에 삽입 하여 연결 합 니 다.${} 로 정의 하기
    ES5 에서 우 리 는 여러 줄 의 문자열 이나 문자열 을 한 줄 로 연결 합 니 다.ES6 반 따옴표 (`) 는 해결 할 수 있다.
    클래스 템 플 릿 문자열 의 기능
    et name = 'sunny';
    let age = 21;
    let str = '  ,${name}    ${age}  '
    str = str.replace(/\$\{([^}]*)\}/g,function(){
         return eval(arguments[1]);
       })
    console.log(str);//  ,sunny    21  
    

    5. 소개 Set, Map 의 차이 점 은?
    응용 장면 세트 는 데이터 재 구성 에 사용 되 고 지도 는 데이터 저장 에 사용 된다.
    Set:
  • 멤버 중복 불가
  • 키 만 있 고 키 이름 이 없 으 며 배열 과 유사 합 니 다
  • 옮 겨 다 닐 수 있 습 니 다. 방법 은 add, delete, has
  • 가 있 습 니 다.
    Map:
  • 본질 적 으로 건 치 쌍 의 집합 이 고 유사 집합
  • 옮 겨 다 닐 수 있 고 각종 데이터 형식 으로 변환 할 수 있 습 니 다
  • 6. ECMAScript 6 어떻게 쓰 지 class, 왜 나 타 났 을 까 class?
    ES6 의 class 는 문법 사탕 으로 볼 수 있 습 니 다. 대부분의 기능 인 ES5 는 할 수 있 습 니 다. 새로운 class 기법 은 대상 의 원형 을 더욱 선명 하 게 하고 대상 을 대상 으로 프로 그래 밍 하 는 문법 과 같 습 니 다.
    //   
    class Point { 
      constructor(x,y) { 
          //    
           this.x = x; //this         
           this.y = y; 
      } toString() {
           return '(' + this.x + ',' + this.y + ')'; 
      }
    }
    

    7. Promise 구조 함 수 는 동기 집행 입 니까? 비동기 집행 입 니까? 그러면 then 방법 은 요?promise 구조 함 수 는 동기 적 으로 실 행 된 것 이 고 then 방법 은 비동기 적 으로 실 행 된 것 이다.
    8. setTimeout, Promise, Async/Await 의 차이
    이벤트 순환 중 로 나 뉜 다.
    그 중에서 setTimeout 의 리 셋 함 수 는 매크로 작업 대기 열 에 넣 고 스 택 이 비 워 진 후에 실 행 됩 니 다.promise.then 의 반전 함 수 는 에 넣 고 매크로 작업 의 동기 코드 가 실 행 된 후에 실 행 됩 니 다.async 함수 표시 함수 에 비동기 방법 이 있 을 수 있 습 니 다. await 뒤에 표현 식 이 있 습 니 다.async 방법 이 실 행 될 때 await 표현 식 을 즉시 실행 한 다음 표현 식 뒤의 코드 를 마이크로 작업 대기 열 에 넣 고 실행 스 택 을 내 보 내 동기 코드 를 먼저 실행 하도록 합 니 다.
    9. promise 몇 가지 상태 가 있 는데 언제 들 어 갈 까요?
    세 가지 상태: pending, fulfilled, reject
    두 과정: padding - > fulfilled, padding - > rejected
    pending 이 rejectd 일 때 catch 에 들 어 갑 니 다.
    10. 아래 의 출력 결 과 는 얼마 입 니까?
    const promise = new Promise((resolve, reject) => {
        console.log(2);
        resolve();
        console.log(333);
    })
    
    
    promise.then(() => {
        console.log(666);
    })
    
    
    console.log(888);
    
    catch 새로 만 든 후에 바로 실행 되 기 때문에 2, 333 을 먼저 출력 하고 Promise 내부 코드 는 이번 이벤트 순환 의 끝 에 바로 실행 되 기 때문에 888 을 계속 출력 하고 마지막 에 666 을 출력 합 니 다.
    11. 구조 할당 을 사용 하여 두 변수의 값 교환 을 실현 합 니 다.
    let a = 1;let b = 2;
    [a,b] = [b,a];
    

    12. 하나의 대상 을 설계 하고 키 이름 의 유형 은 적어도 하나의 Promise.then() 유형 을 포함 하 며 모든 것 을 옮 겨 다 니 는 것 을 실현 합 니 다 symbol
    let name = Symbol('name');
    let product = {
        [name] : "   ",    
        "price" : 1999
    };
    Reflect.ownKeys(product);
    

    13. 아래 key 구조, 인쇄 된 Set 은 얼마 입 니까?
    let s = newSet();
    s.add([1]);s.add([1]);
    console.log(s.size);
    

    정 답: 2
    두 배열 [1] 은 같은 값 이 아 닙 니 다. 각각 정 의 된 배열 은 메모리 에 각각 다른 저장 주소 에 대응 하기 때문에 같은 값 이 set 구조 에 저장 되 는 것 이 아니 기 때문에 size 는 2 입 니 다.
    14. size Promisereject 처리 에 있어 어떤 차이 가 있 습 니까?
    reject 는 이상 을 던 지 는 데 사 용 됩 니 다. catch 는 이상 을 처리 하 는 데 사 용 됩 니 다.
    reject 는 Promise 의 방법 이 고 catch 는 Promise 인 스 턴 스 의 방법 입 니 다.
    reject 후의 것 은 then 의 두 번 째 반전 에 들 어 갈 것 입 니 다. then 에 두 번 째 반전 이 쓰 여 있 지 않 으 면 catch 에 들 어 갑 니 다.
    네트워크 이상 (예 를 들 어 네트워크 차단) 은 catch 에 직접 들 어가 then 의 두 번 째 반전 에 들 어가 지 않 습 니 다.
    15. 사용 catch 손 으로 하나 쓰기 class
      //    Promise  
      class Promise{
        constructor(executer){//    constructor       
          this.status = 'pending';//      pending
          this.value = undefined//      undefined
          this.reason = undefined//      undefined
          //     pending      
          let resolveFn = value =>{
            //         resolve  
            if(this.status == pending){
              this.status = 'resolve';
              this.value = value;
            }
          }
          //         reject  
          let rejectFn = reason =>{
            if(this.status == pending){
              this.status = 'reject';
              this.reason = reason;
            }
          }    
          try{
            // resolve reject         executer
            executer(resolve,reject);
          }catch(e){
            reject(e);//     catch
          }
        }
        then(onFufilled,onReject){
          //        onFufilled
          if(this.status = 'resolve'){
            onFufilled(this.value);
          }
          //        onReject
          if(this.status = 'reject'){
            onReject(this.reason);
          }
        }
      }
    

    16. 어떻게 사용 하 는가 promise
    let arr = [12,43,23,43,68,12];
    let item = [...new Set(arr)];
    console.log(item);//[12, 43, 23, 68]
    

    17. 아래 Set 순환 을 for 형식 으로 바꾼다.
    let arr = [11,22,33,44,55];
    let sum = 0;
    for(let i=0;i

    답:
    let arr = [11,22,33,44,55];
    let sum = 0;
    for(value of arr){
        sum += value;
    }
    

    18. 이해 for of 및 대 async/await 의 장점
    async await 는 비동기 적 인 것 을 해결 하 는 데 사용 되 며, async 함 수 는 Generator 함수 의 문법 당 입 니 다.
    키워드 async 를 사용 하여 함수 내부 에서 await 를 사용 하여 이 보 를 표시 합 니 다.
    async 함수 가 Promise 대상 을 되 돌려 줍 니 다. then 방법 으로 리 셋 함 수 를 추가 할 수 있 습 니 다.
    함수 가 실 행 될 때 await 를 만나면 먼저 돌아 가 비동기 작업 이 끝 날 때 까지 기 다 렸 다가 함수 체 내 뒤의 문 구 를 실행 합 니 다.
    async 비교 Generator 의 장점:
  • 내 장 된 실행 기.Generator 함수 의 실행 은 실행 기 에 의존 해 야 합 니 다. Aysnc 함수 자체 실행 기 는 일반 함수 의 호출 과 같 습 니 다
  • 더 좋 은 의미.async 와 await 는 * 와 yield 에 비해 더욱 의미 화
  • 더 넓 은 적용 성.yield 명령 뒤 에는 Thunk 함수 나 Promise 대상 만 있 을 수 있 습 니 다. async 함수 의 await 뒤 에는 Promise 일 수도 있 고 원본 형식의 값 일 수도 있 습 니 다
  • 반환 값 은 Promise 입 니 다.async 함 수 는 Promise 대상 을 되 돌려 줍 니 다. Generator 함수 가 되 돌아 오 는 Iterator 대상 보다 편리 합 니 다. then () 방법 으로 직접 호출 할 수 있 습 니 다
  • 19. Generator, forEach, for in 세 가지 차이 점
  • foreach 는 배열 을 옮 겨 다 니 는 데 더 많이 사용 된다
  • for in 은 일반적으로 대상 이나 제 이 슨
  • 을 옮 겨 다 니 는 데 자주 사용 된다.
  • for of 배열 대상 을 옮 겨 다 닐 수 있 습 니 다. 대상 을 옮 겨 다 니 려 면 Object. keys ()
  • 와 함께 해 야 합 니 다.
  • for in 순환 은 key, for of 순환 은 value
  • 20. for of 가 져 오기 내 보 내기 모듈 을 말 해 보 세 요.
    import 키 로 가 져 오기
    //      
    import {sum} from "./example.js"
    //     
    import {sum,multiply,time} from "./exportExample.js"
    //        
    import * as example from "./exportExample.js"
    

    export 키 워드 를 통 해 내 보 내기
    //   export      ,         
    export var firstName = 'Chen';
    export var lastName = 'Sunny';
    export var year = 1998;
    //                   
    var firstName = 'Chen';
    var lastName = 'Sunny';
    var year = 1998;
    export {firstName, lastName, year};
    //  export default ,   import          
    let bosh = function crs(){}
    export default bosh;
    import crc from 'crc';
    //   export default ,   import         
    let bosh = function crs(){}
    export bosh;
    import {crc} from 'crc';
    

    여기까지 ES6 흔 한 면접 문제 요약!여러분, 어서 가서 해 보 세 요!
    마지막.
  • 더 많은 참고 하 이 라이트 박문 은 여 기 를 보십시오.
  • 블 로 거들 을 좋아 하 는 파트너 는 관심 을 가지 고 좋아요 를 눌 러 주세요. 계속 업데이트 하 세 요. 헤헤!
  • 좋은 웹페이지 즐겨찾기