매일 10문제, 100일이 지나면 프론트엔드 면접의 고빈도 지식 포인트를 모두 마스터하게 됩니다. ! ! , 기사를 읽으시면서 답변을 직접적으로 보지 않으셨으면 좋겠고, 먼저 자신이 알고 있는지 생각해보시고, 그렇다면 당신의 답변은 무엇입니까? 생각해보시고 답변과 비교해보세요. 물론 제 것보다 더 나은 답변이 있으시면 댓글란에 메시지를 남겨주시고 함께 기술의 아름다움에 대해 토론해 보세요.
나: 어~ 알겠습니다. 세 가지 함수의 차이점은 다음과 같이 요약됩니다.
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은 다음 부분으로 구성됩니다:
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 데이터 유형이 무엇인지, 차이점은 무엇인지 이야기해 볼까요?
: 문자열, 숫자, 부울, null , 정의되지 않음, 기호, bigInt
: object, array기본 유형은 스택에 저장되며 작은 공간과 빈번한 작업이 있습니다.
Note
: 기호는 고유하며 열거할 수 없습니다. 그것을 얻으려면 getOwnPropertySymbols를 사용하세요인터뷰어: 말해 보세요. 클로저에 대해 어떻게 이해하고 있나요?
: 스코프 체인, 현재 스코프는 상위 스코프의 변수에 접근할 수 있습니다.
: 함수 실행이 끝난 후 함수 범위 내 변수가 소멸되는 것을 방지할 수 있으며 동시에 함수 내부의 로컬 변수에 함수 외부에서 접근할 수 있습니다.
으로 인한 문제: 가비지 수집기가 클로저의 변수를 파괴하지 않으므로 메모리 누수가 너무 많이 누적되면 메모리 오버플로가 발생하기 쉽습니다.
은 블록 수준 범위를 모방하고, 커링을 구현하고, 생성자에서 권한 있는 메서드를 정의하고, Vue의 데이터 응답 관찰자에서 클로저를 사용할 수 있습니다.
인터뷰어: JavaScript는 변수 유형을 결정하는 데 몇 개의 메소드가 필요합니까?2. ), 기본 데이터 유형은 판단할 수 없습니다.
3. constructor.name(생성자를 기준으로 판단), null 데이터 유형은 판단할 수 없습니다.
4. Object.prototype.toString.call()(toString 메서드로 판단) of Object) 모든 유형의 데이터를 판단할 수 있습니다. 판단하는 것을 잊지 마세요. 결과는 '[object Assignment.
인터뷰어: 프런트엔드와 백엔드 간의 실시간 커뮤니케이션을 유지하는 방법에 대해 알려주세요.의사 배열의 특징
배열로 변환하는 방법
: Array.prototype.slice.call(), Array.from(), [...의사 배열]이 있습니다어떤 것이 의사입니까? -arrays
: 함수 매개변수 인수, Map 및 Set의 키(), 값() 및 전체() 【추천 학습: javascript 고급 튜토리얼】
위 내용은 고주파 지식 포인트를 숙달하는 데 도움이 되는 프런트엔드 인터뷰 질문을 살펴보세요. (6)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!