고주파 지식 포인트를 숙달하는 데 도움이 되는 프런트엔드 인터뷰 질문을 살펴보세요. (6)

매일 10문제, 100일이 지나면 프론트엔드 면접의 고빈도 지식 포인트를 모두 마스터하게 됩니다. ! ! , 기사를 읽으시면서 답변을 직접적으로 보지 않으셨으면 좋겠고, 먼저 자신이 알고 있는지 생각해보시고, 그렇다면 당신의 답변은 무엇입니까? 생각해보시고 답변과 비교해보세요. 물론 제 것보다 더 나은 답변이 있으시면 댓글란에 메시지를 남겨주시고 함께 기술의 아름다움에 대해 토론해 보세요.

인터뷰어: var, let, const의 차이점을 간략하게 설명해 주시겠어요?

나: 어~ 알겠습니다. 세 가지 함수의 차이점은 다음과 같이 요약됩니다.

var: 가장 일반적으로 사용되는 변수는 허용되지만 데이터를 덮어쓰게 됩니다. 지역 변수가 발생합니다. 전역 객체에 마운트하면 전역 객체가 오염됩니다.

console.log(a) // 因变量提升, var a;提到前面但是没有赋值，所以值为undefined
var a = 1
var a = '你好' // var声明的变量会被重新赋值
console.log(a) // a会打印被重新赋值的值
console.log(window.a) // var声明的局部变量会被挂载到全局变量上，造成全局变量的污染。

let: es6에 새로운 명령이 있습니다. 사용법은 var와 유사합니다. 반복 선언은 허용되지 않습니다. 전역 오염을 피하기 위해 종종 블록 수준 범위에서 작동합니다. 지역변수로 인한 변수.

let a=10;
console.log(a) // 不存在变量提升，所以值为：10
console.log(window.a) // 不会造成全局污染，所以值为 undefined
for(let i =0;i<3;i++){ // 会生成块级作用域，i 的值只能在块级作用域中使用
    console.log(i)
}
console.log(i) // 因为拿不到块级作用域中的值，所以报错。

const: es6 새 명령, 상수를 선언하는 데 사용되며 선언된 상수는 즉시 초기화되어야 합니다. 그렇지 않으면 후속 할당에서 오류가 보고됩니다. 변수 이름이 참조하는 한 변수의 주소 주소가 동일하면 오류가 보고되지 않습니다

const arr = ['小张','小王','小李','小赵']
arr[0]='小明'
console.log(arr) // ['小明', '小王', '小李', '小赵']
const arr = [] // 报错

인터뷰어: 딥 카피와 얕은 카피에 대한 이해를 말씀해 주세요

나: 어~ , 알겠습니다. 두 가지에 대한 저의 이해는 다음과 같이 요약됩니다.

Deep Copy: 새 데이터는 원본 데이터를 방해하지 않습니다.

// 扩展运算符在一维数组中是属于深拷贝，在多维数组中属于浅拷贝
let arr = [1,2,3]
let newArr = [...arr]
newArr.push(4)
console.log(arr,newArr) // [1, 2, 3],[1, 2, 3, 4]

// 深拷贝用法
let list = [
    {id:1,name:'张三',age:18},
    {id:2,name:'李四',age:28},
    {id:3,name:'王五',age:38},
]
let newList = JSON.parse(JSON.stringify(list))
newList.pop()
console.log(list.length,newList.length) // 3 2

물론, 다음과 같이 딥 카피를 작성하는 표준 방식도 있습니다.

// 标准的深拷贝 => 引用数据类型(数组,对象)
function deepClone(source){
    const targetObj = source.constructor === Array ? [] : {}
    for(let keys in source){
        if(source.hasOwnProperty(keys)){
            // 引用数据类型
            if(source[keys] && typeof source[keys] === 'object'){
                targetObj[keys] = source[keys].constructor === Array ? [] : {}
                // 递归
                targetObj[keys] = deepClone(source[keys])
            }else{
                // 基本数据类型,直接赋值
                targetObj[keys] = source[keys]
            }
        }
    }
    return targetObj
}

let obj = {
    name:'张三',
    age:18,
    hobby:['抽烟','喝酒','烫头'],
    action:{
        am:'敲代码',
        pm:'睡觉'
    }
}
let newObj = deepClone(obj)
newObj.name = '李四'
console.log(obj.name,newObj.name)// 张三 李四

Shallow copy: 새로운 데이터가 원본 데이터에 영향을 미칩니다.

let arr = [1,2,3]
let newArr = arr
// 对新数据做出改变，原数据也会发生改变，这种就叫做浅拷贝
newArr.push(4) // [1, 2, 3, 4]
console.log(arr,newArr) // [1, 2, 3, 4]

직설적으로 말하면 딥 카피는 새로운 데이터를 얻는 것이며 원본 데이터와는 아무런 관련이 없습니다. 얕은 카피는 새로운 데이터를 얻을 수 있지만 여전히 원본 데이터와 일정한 연관성을 가지고 있습니다.

인터뷰어: URL을 입력하는 순간 브라우저는 무엇을 했나요?

나: 어~, URL은 다음 부분으로 구성됩니다:

https: 전송 프로토콜(http와 tcp 사이에 TSL 또는 SSL 보안 계층이 추가됨)

www: 서버

baidu .com: 도메인 이름

DNS 도메인 이름 시스템은 실제 IP와 일치합니다. 첫 번째 액세스는 브라우저 캐시를 읽기 위해 도메인 이름으로 확인된 IP를 로컬에 저장합니다.

내가 경험한 URL을 입력한 순간: 도메인 이름 -> DNS 도메인 이름 시스템 -> 연결 설정(TCP 3방향 핸드셰이크) -> ; 4번 웨이브

구체적인 구현 프로세스:

• 1. URL 구문 분석: 콘텐츠를 검색할지 아니면 URL을 요청할지 결정합니다.

• 2. 캐시가 없으면 네트워크 요청 단계로 들어갑니다.

• 4. 3방향 핸드셰이크를 통해 TCP 연결을 설정합니다. 헤더 정보를 요청하고 http 요청을 보냅니다

• 6. 응답 정보를 처리합니다

• 7. Wave를 4번 전달하여 TCP 연결을 끊습니다.

• 8. 응답 상태 코드가 301인 경우 리디렉션

• 9. 브라우저는 1) HTML을 구문 분석하고 DOM 트리를 생성합니다. 2) CSS를 기반으로 노드 스타일을 계산하고, 스타일시트를 생성합니다. 4) 특정 요소에 대한 독립 레이어를 생성합니다. : 쿠키 sessionStorage와 localStorage의 차이점을 알려주세요.

• 나: 어~ 알겠습니다. 둘 사이의 관계는 다음과 같습니다.

• 동일점
  :

모두 브라우저 저장소이고, 모두 브라우저에 로컬로 저장됩니다.

차이

:

1. 쿠키는 서버 또는 프런트 엔드에 의해 작성되고, sessionStorage 및 localStorage는 모두 프런트 엔드에 의해 작성됩니다

2. 예, localStorage는 작성된 동안 항상 존재합니다. 수동으로 지우지 않는 한, sessionStorage는 페이지가 닫힐 때 자동으로 지워집니다

3. 쿠키 저장 공간은 약 4kb입니다. sessionStorage와 localStorage 공간은 약 5M로 상대적으로 큽니다.

4.3 모두 데이터 공유에 대해 동일한 원본 원칙을 따르며 sessionStorage도 동일한 페이지로 제한됩니다.

5. 프런트 엔드에서 백 엔드로 요청을 보내면 쿠키가 자동으로 전달되고 세션 및 로컬이 됩니다. 6. 쿠키는 일반적으로 로그인 인증 정보나 토큰을 저장하는데, 서버 부담을 줄이기 위해 쉽게 변경되지 않는 데이터를 저장하는 데 SessionStorage를 사용하는 경우가 많습니다. 음악 플레이어 복구 진행 표시줄 기능과 같은

인터뷰어: JS 데이터 유형이 무엇인지, 차이점은 무엇인지 이야기해 볼까요?

Me: 어~ JS 데이터 유형은 두 가지 범주로 나뉩니다. 하나는 기본 데이터 유형이고 다른 하나는 참조 데이터 유형입니다.

기본 유형

• : 문자열, 숫자, 부울, null , 정의되지 않음, 기호, bigInt

참조 유형

• : object, array기본 유형은 스택에 저장되며 작은 공간과 빈번한 작업이 있습니다.

참조 유형은 힙에 저장됩니다. 힙의 시작 주소를 가리키는 포인터가 에 저장됩니다

Note

: ​​​​기호는 고유하며 열거할 수 없습니다. 그것을 얻으려면 getOwnPropertySymbols를 사용하세요인터뷰어: 말해 보세요. 클로저에 대해 어떻게 이해하고 있나요?

나: 어~ 내부함수는 외부함수에 있는 변수를 말하는데, 이 변수들의 집합이 클로저예요.

형성 원리

• : 스코프 체인, 현재 스코프는 상위 스코프의 변수에 접근할 수 있습니다.

문제 해결

• : 함수 실행이 끝난 후 함수 범위 내 변수가 소멸되는 것을 방지할 수 있으며 동시에 함수 내부의 로컬 변수에 함수 외부에서 접근할 수 있습니다.

• 으로 인한 문제: 가비지 수집기가 클로저의 변수를 파괴하지 않으므로 메모리 누수가 너무 많이 누적되면 메모리 오버플로가 발생하기 쉽습니다.

클로저 적용

• 은 블록 수준 범위를 모방하고, 커링을 구현하고, 생성자에서 권한 있는 메서드를 정의하고, Vue의 데이터 응답 관찰자에서 클로저를 사용할 수 있습니다.

  인터뷰어: JavaScript는 변수 유형을 결정하는 데 몇 개의 메소드가 필요합니까?

나: 어~ 알겠습니다. 요약은 다음과 같습니다. 1. typeof(바이너리 기준으로 판단), 데이터 유형을 판단할 수 없음: null 및 object

2. ), 기본 데이터 유형은 판단할 수 없습니다.

3. constructor.name(생성자를 기준으로 판단), null 데이터 유형은 판단할 수 없습니다.

4. Object.prototype.toString.call()(toString 메서드로 판단) of Object) 모든 유형의 데이터를 판단할 수 있습니다. 판단하는 것을 잊지 마세요. 결과는 '[object Assignment.

인터뷰어: 프런트엔드와 백엔드 간의 실시간 커뮤니케이션을 유지하는 방법에 대해 알려주세요.

나: 어~, 폴링, 롱 폴링, iframe 스트리밍, WebSocket, SSE.

인터뷰어: 의사 배열과 배열의 차이점을 알려주세요.

나: 어~ 알겠습니다. 요약하면 다음과 같습니다.

의사 배열의 특징

: ​​유형이 객체이고, 배열 방법을 사용할 수 없으며, 길이를 얻을 수 있고, for in을 사용할 수 있습니다. traverse의사 배열은

배열로 변환하는 방법

: Array.prototype.slice.call(), Array.from(), [...의사 배열]이 있습니다어떤 것이 의사입니까? -arrays

: 함수 매개변수 인수, Map 및 Set의 키(), 값() 및 전체()

【추천 학습: javascript 고급 튜토리얼】

위 내용은 고주파 지식 포인트를 숙달하는 데 도움이 되는 프런트엔드 인터뷰 질문을 살펴보세요. (6)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!