[면접] 웹 전단 고전 면접 문제 및 답안 - es6
10936 단어 interview
1. class 문법 은 상대 적 으로 원형, 구조 함수, 계승 이 전통 문법 에 가 깝 고 그의 쓰기 방법 은 대상 의 원형 을 더욱 선명 하 게 하고 대상 을 대상 으로 프로 그래 밍 하 는 문법 을 더욱 통속 적 으로 할 수 있다.
class 와 일반 구조 함 수 는 어떤 차이 가 있 습 니까?
1. js 구조 함수
function MathHandle(x, y) { //
this.x = x;
this.y = y;
}
MathHandle.prototype.add = function() { //
return this.x + this.y;
}
var m = new MathHandle(1, 2); // new
console.log(m.add())
2. class 기본 문법
class MathHandler{ // MathHandler ， :prototype
constructor(x, y) { // ，java,c# ，
this.x = x;
this.y = y;
}
add() {
return this.x + this.y;
}
}
const m = new MathHandle(1, 2); // ， :__proto__
console.log(m.add());
typeof MathHandle // 'function'
MathHandle.prototype.constructor === MathHandle; // true
m.__proto__ === MathHandle.prototype; // true
3. 문법 당 class 자체 가 문법 당 4, 계승 (1) 저급 구조 함수 의 원형 이 고 고급 구조 함수 의 인 스 턴 스 (2) 를 부여 합 니 다.
function Animal(){this.eat = function() {console.log('animal eat')}}
function Dog(){this.bark = function() {console.log('dog dark')}}
Dog.prototype = new Animal(); // ，
var hashiqi = new Dog();
class 의 계승
class Animal() {
constructor(name) {
this.name = name;
}
eat() {
alert(this.name + 'eat);
}
}
class Dog extends Animal{
constructor(name) {
super(name); // class,extends， super(),super class constructor
this.name = name;
}
eat() {
alert(this.name + 'eat);
}
}
generator
Generator 원리?
완벽 을 기다리다
promise
1. promise 는 3 가지 상태 가 있 습 니 다: pending (진행 중), fulfilled (완료, Resolved 라 고도 함) 또는 rejected (실패)... 상태 변 화 는 pending - > fulfilled 또는 pending - > rejected 일 수 있 습 니 다. 상태 가 바 뀌 면 더 이상 변 할 수 없습니다. 2. new promise 인 스 턴 스 는 return 3, new promise 시 함수 로 들 어 갑 니 다. 함 수 는 resolve, reject 두 개의 인자 가 있 습 니 다. 4. 성공 시 resolve () 를 실행 하고 실패 시 reject () 5, then 감청 결 과 를 실행 합 니 다.
손 으로 promise?
var promise = new Promise((resolve, reject) => {
if ( ) {
resolve(value);
} else {
retject(error);
}
});
promise.then(function(value) {
// success
}, function(value) {
// failure
})
jQuery 의 ajax 는 promise 대상 으로 돌아 갑 니까?
jquery 의 ajax 는 deferred 대상 을 되 돌려 주 고 promise 의 resolve () 방법 으로 promise 대상 으로 변환 합 니 다.
var jsPromise = Promise.resolve($.ajax('/whatever.json'));다음 프로그램 코드 를 분석 하여 실행 결 과 를 얻어 그 원인 을 설명 하 시 겠 습 니까?const promise = new Promise((resolve, reject) => {
resolve('success1')
reject('error')
resolve('success2')
})
promise
.then((res) => {
console.log('then: ', res)
})
.catch((err) => {
console.log('catch: ', err)
})
then: success 1 구조 함수 의 resolve 나 reject 는 첫 번 째 실행 만 유효 하 며, 여러 번 호출 하 는 것 은 아무런 역할 이 없습니다. promise 상태 가 바 뀌 면 다시 바 꿀 수 없 기 때 문 입 니 다.
다음 프로그램 코드 를 분석 하여 실행 결 과 를 얻어 그 원인 을 설명 하 시 겠 습 니까?
Promise.resolve(1)
.then(2)
.then(Promise.resolve(3))
.then(console.log)
1
.then 또는 .catch 의 매개 변 수 는 함수 이 고 비 함수 에 들 어가 면 값 관통 이 발생 합 니 다.다음 프로그램 코드 를 분석 하여 실행 결 과 를 얻어 그 원인 을 설명 하 시 겠 습 니까?
Promise.resolve()
.then(() => {
return new Error('error!!!')
})
.then((res) => {
console.log('then: ', res)
})
.catch((err) => {
console.log('catch: ', err)
})
then: Error: error!!
다음 프로그램 코드 를 분석 하여 실행 결 과 를 얻어 그 원인 을 설명 하 시 겠 습 니까?
Promise.resolve()
.then(function success (res) {
throw new Error('error')
}, function fail1 (e) {
console.error('fail1: ', e)
})
.catch(function fail2 (e) {
console.error('fail2: ', e)
})
fail 2: Error: error 1, then 은 두 개의 인 자 를 받 을 수 있 습 니 다. 첫 번 째 는 성공 적 인 함 수 를 처리 하 는 것 입 니 다. 두 번 째 는 오 류 를 처리 하 는 함수 입 니 다. catch 는 then 두 번 째 인자 의 간편 한 쓰기 입 니 다. 사용 방법 에 있어 서 주의해 야 할 점 이 있 습 니 다. then 의 두 번 째 처리 오 류 는 첫 번 째 처리 에 성공 한 함수 가 던 진 오 류 를 포착 하지 못 하고 후속 적 인 catch 는 캡 처 할 수 있 습 니 다.이전의 잘못.
다음 프로그램 코드 를 분석 하여 실행 결 과 를 얻어 그 원인 을 설명 하 시 겠 습 니까?
process.nextTick(() => {
console.log('nextTick')
})
Promise.resolve()
.then(() => {
console.log('then')
})
setImmediate(() => {
console.log('setImmediate')
})
console.log('end')
end nextTick then setImmediate 1, process. nextTick 과 promise. then 은 모두 microtask 에 속 하고 setImmediate 는 macrotask 에 속 하 며 이벤트 순환 의 check 단계 에서 실 행 됩 니 다. 이벤트 순환 의 모든 단계 (macrotask) 사이 에 microtask 가 실 행 됩 니 다. 이벤트 순환 의 시작 은 microtask 를 먼저 실행 합 니 다.
async、await
1. then 은 콜백 만 나 누 었 습 니 다. 2. async / await 는 가장 직접적인 동기 화 기법 입 니 다.
import 'babel-polyfill';
function load
const load = async function() {
const result1 = await loadImg(src1);
console.log(result1);
const result2 = swait loadImg(src2);
console.log(result2);
}
load();
① await 를 사용 하려 면 함 수 는 async 로 표시 해 야 합 니 다 ② await 뒤에 promise 인 스 턴 스 ③ babel - poly fill 이 필요 합 니 다.
generator, asynce / wait 의 관계?
완벽 을 기다리다
1. es5 는 두 가지 성명 변수의 방법 이 있다. var, function es6 는 6 가지 성명 변수의 방법 이 있다. var, function, let, const, import, class
let, var 의 차이?
1. 블록 급 역할 영역: let 가 정의 하 는 변 수 는 블록 급 역할 영역 이 있 습 니 다. var 성명 의 변 수 는 전역 과 함수 역할 영역 만 있 습 니 다. 2. 변수 향상: let 는 변수 향상 이 존재 하지 않 습 니 다. var 는 변수 향상 이 존재 하지 않 습 니 다. 3. 중복 성명: let 는 중복 성명 을 허용 하지 않 습 니 다. var 는 중복 성명 을 할 수 있 습 니 다. 4. 일시 적 인 사각 지대: 코드 블록 에서 let 명령 성명 변 수 를 사용 하기 전에 이 변 수 는 모두 let 명령 성명 변 수 를 사용 하지 않 습 니 다.사용 가능 합 니 다. 이것 은 문법 적 으로 '일시 적 사구' 라 고 합 니 다.
var tmp = 123;
if (true) {
tmp = 'abc'; // ：Uncaught ReferenceError: tmp is not defined
let tmp;
}
은밀 한 사구
function bar(x = y, y = 2) {
return [x, y];
}
bar(); //
// A
let {foo} = {bar: 'bar'};
// B
let {foo: {bar}} = {bar: 'bar'};
// C
let {foo, bar} = {foo: 'aaa', bar: 'bbb'};
// D
let {foo: baz} = {foo: 'aaa', bar: 'bbb'};
B 1. B 옵션 이 잘못 되 었 습 니 다.
return Promise.reject(new Error('error!!!')) 은 다음 과 같이 바 꿔 야 합 니 다. throw new Error('error!!!')다음 값 을 쓰 시 겠 습 니까?
class Animal {
constructor() {
this.type = 'Animal';
}
say(val) {
setTimeout(function() {
console.log(this);
console.log(`${this.type} say ${val}`);
}, 200);
}
}
var animal = new Animal();
animal.say('hi');
window undefined says hi 1, 2 판 에 서 는 "시간 초과 호출 코드 는 전체 역할 영역 에서 실 행 됩 니 다. 따라서 함수 에서 this 의 값 은 엄격 하지 않 은 모드 에서 window 대상 을 가리 키 고 엄격 한 모드 에서 undefined 입 니 다. 즉, 엄격 하지 않 은 모드 에서 setTimeout 에서 실 행 된 함수 중의 this 는 영원히 window 를 가리 키 고 있 습 니 다" 라 고 적 혀 있 습 니 다.화살표 함수
class Animal {
constructor() {
this.type = 'Animal';
}
say(val){
setTimeout(() => {
console.log(this);
console.log(`${this.type} say ${val}`);
}, 200);
}
}
var animal = new Animal();
animal.say('hi');
(1) 특징: ① 함 수 를 만 들 려 면 function 키워드 가 필요 없습니다. ② return 키워드 화살표 함 수 는 두 가지 형식 이 있 습 니 다. a. 하나의 표현 식 만 포함 하고 {...} 과 return
return new Error('error!!!') b 를 생략 할 수 있 습 니 다. 여러 문 구 를 포함 할 때 {...} 과 return Uncaught TypeError: Cannot destructure property 'bar' of 'undefined' or 'null'. ③ 현재 문맥 을 계승 하 는 this 키 워드 를 생략 할 수 없습니다.1. 대상 속성 을 순환 할 때 for... in 을 사용 합 니 다. 배열 을 옮 겨 다 닐 때 for... of. 2, for... in 을 사용 하여 key 를 순환 합 니 다. for... of 는 value 3, for... of 는 ES6 가 새로 도입 한 특성 입 니 다. ES5 가 도입 한 for... in 의 부족 4, for... of 는 일반적인 대상 을 순환 할 수 없습니다. Object. keys () 와 조합 하여 사용 해 야 합 니 다.
var student = {
name: 'Jack',
age: 27,
sex: 'female'
};
var arr = [1, 4, 'small'];
arr.school = 'zheda';
// 1、for...in ， key
for (let key in student) {
console.log(key); // name,age,sex
}
//for (let i of student) { // ：student is not iterable( )
// console.log(i);
//}
// 2、 for...of ， Object.keys(obj);
for (let key of Object.keys(student)) {
// Object.keys() key
console.log(key); // name,age,sex
}
// 3、for...in ， index + key
for (let i in arr) {
console.log(i); // 0,1,2,school
}
// 4、for...of ， value
for (let key of arr) {
console.log(key); // 1,4,small
}
에 스 6 의 기타 상용 기능 을 정리 해 볼 까요?
1、let、const /'kɑnst / const 정의 상수, 상수 2, 다 중 문자열 / 템 플 릿 변수 js 조합 변수 문자열 템 플 릿 을 다시 할당 할 수 없습니다.
console.log(` ：${name}`)
3. 할당 전체 배열 또는 대상 에서 하나의 요소 나 속성 값 을 가 져 옵 니 다.
// obj
const obj = {a: 10, b: 20, c:30};
const {a, c} = obj;
console.log(a); // 10
console.log(c); // 30
// arr
const arr = ['xxx', 'yyy', 'zzz'];
const [x, y, z] = arr;
console.log(x); // xxx
console.log(z); // zzz
4. 블록 급 역할 영역 for 순환
// js
var obj = {a: 100, b: 200};
for (var item in obj) {console.log(item)};
console.log(item); // 'b'
// es6
const obj = {a: 100, b: 200};
for (let item in obj) {console.log(item)};
console.log(item); // undefined
5. 함수 기본 매개 변수
// js
function(a, b) {
if(b == null) {b = 0;}
}
// es6
function (a, b=0) {
}
6. 화살표 함수 가 이전 함수 this 가 전역 window 대상 을 가리 키 는 문 제 를 철저히 해결 하 였 습 니 다.
function fn() {
console.log('real', this); // {a: 100}
var arr = [1, 2, 3];
// js
arr.map(function(item) {
console.log('js',this); // window
return item + 1;
});
//
arr.map(item => {
console.log('es6', this); // {a: 100}
return item + 1;
});
}
fn.call({a: 100})
babel 원리?
완벽 한 대답: ast 변환
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
알고리즘 1000 개 노크 #2. Longest common substringsProblem Solution DP (다이나믹 프로그래밍) 중에서 고전적인 문제입니다. 두 문자열을 S1과 S2, 각각의 길이를 M, N으로 설정합니다. 총당으로 S1에서 모든 부분 문자열을 추출하고, 그것들이 S2...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
