선 단면 측 날실 텐센트
사설
블로거는 이제 최근의 에세이에 주니어, 흰색 프런트 엔드는 한 블로거가 처음 텐센트 2월 29일 그녀를 마무리 얼굴 질문과 고려 사항, 측면 및 제 얼굴 질문에 미국의 그룹을 발급 문제 해결 아이디어, 메모, 우리가 도와주고 싶어 인터뷰.
얼굴 질문 관련
수직 센터 문제
타이틀
화면이 화면 폭의 증가, 중간 요소 A를 가지고 다음 조건을 충족해야합니다 :
- 수직 중심 요소에 스크린의 중심;
- 각 10px로부터 스크린 요소의 좌우 마진;
- 폰트 사이즈의 "A"내부 텍스트 요소 : 20 픽셀 수평 수직 중심;
- 소자의 높이가 항상 50 %의 요소 A는 폭 (소자 A는 핸들의 고정 높이 200 픽셀로 구현 될 수없는 경우)
주세요 HTML 및 CSS를 구현
문제 해결 아이디어를
이 주제의 방문은 주로 수직 중심으로 대책, 우리가 여기, 자신을 찾아 내 자신의 코드를 삽입 할 수있는 구체적인 방법을. 주요 장소 좌우 여백을 설정 CALC 특성을 사용하여 계산하고 통과 높이가 엘리먼트의 높이의 50 % A를 폭을 달성 할 수는 항상 소자 A는
<!-- CSS -->
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.fa-area {
position: relative;
width: calc(100% - 20px);
height: calc(50% - 10px);
margin-left: 10px;
background-color: #376AF3;
}
.fa-area>div {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-size: 20px;
}
<!-- html -->
<div class="fa-area">
<div>A</div>
</div>
인수
제목
인수의 배열의 기능은 무엇입니까? 그렇지 않다면, 어떻게 실제 배열을 할 것인가?
문제 해결 방안
이 주제는 인수의 인식 및 사용의 호출 및 필기 함수 호출없이 언급을 조사 하였다.
不是
변환 프로토콜 :
arguments = [].slice.call(arguments);
암시 적 형식 변환
주제는
다음 코드 인쇄의 결과를 진술하십시오
if([] == false) {console.log(1);}
if({} == false) {console.log(2);}
if([]) {console.log(3);}
if([1] == [1]) {console.log(4);}아이디어 문제 해결
주로 JS 암시 적 변환의 지식이 주제를.
== 시간을 사용하는 경우 특히, JS이 후 양측에 데이터 값의 개수 == 결정으로 변환되며, 다음 불리언 값으로 변환된다. 따라서, 첫번째 라인이 인쇄되어, 두 번째 라인이 인쇄되지 않는다 (그 이유는, 목표 회전 수가에 toString () 메서드가 반환하는 문자열 리터럴을 호출 할 때, 디지털 형식으로 문자열을 JS 것을이고 이 숫자가 반환됩니다.이 기간은 "자바 스크립트 확실한 가이드")에서 찾을 수 있습니다.
직접 빈 배열을 bool로 전송 된 경우에 사용 결정 조건이 true로 변환 될 때, 그때 모든이, 개체 개체, 세 번째 행이 인쇄됩니다.
네번째 줄은, 그 목적은, 레퍼런스 타입 동일한 두 개의 빈 어레이를 보이지만, 네번째 줄은 인쇄되지 않도록 두 실제로는 상이한 메모리의 서로 다른 어드레스 개체.
저는 여기에 꽤 자신의 상상력에 따라 대답만을 연주, 이해가 안되었지만, 2, 3 행을 말할 이유가 없다.
답변 :1 3
비동기 문제
주제는
다음 코드 인쇄의 결과를 진술하십시오
async function async1(){
console.log('async1 start');
await async2();
console.log('async1 end');
}
async function async2(){
console.log('async2');
}
console.log('script start');
setTimeout(function() {
console.log('setTimeout');
});
async1();
new Promise(function(resolve) {
console.log('promise1');
resolve();
}).then(function() {
console.log('promise2');
});
console.log('script end');
아이디어 문제 해결
주로 JS, 실행 메커니즘 JS 지식의 유도에 화제.
사실, 나는 왜 다음 노드 환경을 인쇄 한 후 나에게 물었다 내가 면접관을 넣을 수 있도록이 문제에게 좋은 기회가없는 한 다음 약속 async1의 모양 async2에 따라 해당 명령문을 작성.
new Promise((resolve) => {
console.log('async1 start');
new Promise((resolve1) => {
console.log('async2');
})
}).then(() => {
console.log('async1 end');
})JS는이 명령문의 실행 순서에 따라 수행되는, 단일 스레드 언어이다. 일반 작업은 두 가지 범주로 분류
- 동기화 작업 : 메인 스레드에서 작업 큐의 첫 공연
- 비동기 작업 : 작업은 작업 실행 큐에 즉시 수행되지 않습니다
이 두뿐만 아니라, 작업은 다음 두 가지로 나눌 수 있습니다
- 매크로 작업 : 전체 코드 스크립트의 setTimeout, setInterval을 등
- 마이크로 작업 : 약속, process.nextTick 등
다음 매크로 다음 작업을 수행 할 경우 이벤트 루프에서 구현 후의 매크로 작업은 내부 마이크로가 실행되면 태스크를 수행하는 마이크로 작업을 수행할지 여부를 결정할 것이다.
순서에 따라 실행 대기 큐에 가입 마이크로 작업을 발생 매크로 코드의 첫 번째 구현, 매크로 작업 실행 큐의 구현 후, 다음 코드에서는 setTimeout 큐를 실행 : 우리는 말 같은 주제를 분석 할 수 있습니다.
답변 :
script start
async1 start
async2
promise1
script end
promise2
async1 end
setTimeout
이 점
주제
최소한의 변경에 다음과 같은 오류 코드를 해결하기 위해 (당신은 ES6를 사용할 수 있습니다)
const obj = {
name: 'jsCoder',
skill: ['es6', 'react', 'angular'],
say: function () {
for (var i = 0, len = this.skill.length; i < len; i++) {
setTimeout(function() {
console.log('N0.' + i + this.name);
console.log(this.skill[i]);
console.log('------------------');
}, 0);
console.log(i);
}
}
}
obj.say();
// 期望得到以下结果
1
2
3
N0.1 jsCoder
es6
------------------
N0.2 jsCoder
react
------------------
N0.3 jsCoder
angular
------------------
문제 해결 아이디어
이 시점에서이 문제의 주요 연구, 지식의 폐쇄.
가 루프에 대한 그래서 처음에 실행 시간, 디스플레이 배열 범위를 제공하고 있습니다i변경i + 1후var i = 0변경let i = 0여기에 폐쇄 문제를 해결 (내가 원하지 않는setTimeout내부i모두를4) 다음this나에게 포인트의 사용은 익명 함수는 대체setTimeout함수 내부 또는 외부에서 우리가 사용할 수있는var that = this;바인딩this.
여기에 내 대답은 :
const obj = {
name: 'jsCoder',
skill: ['es6', 'react', 'angular'],
say: function () {
for (let i = 0, len = this.skill.length; i < len; i++) {
setTimeout(()=> {
console.log('N0.' + (i + 1) + this.name);
console.log(this.skill[i]);
console.log('------------------');
}, 0);
console.log(i + 1);
}
}
}
obj.say();필기 바인드
주제는
바인드 방법 기능을 실현
아이디어 문제가 해결
그래서 여기 난 그냥 내 대답을 붙여 넣습니다 원칙적으로 각 블로그의 결합 방법은 매우 상세하고 분석했는지를, 나는 빛 스프레이를 바랍니다.
Function.prototype.bind = function (context) {
// 这里要存一下this而不能把返回里的函数对象转为匿名函数
// 因为这本身就是为了因为bind()函数发布在ES5中，不能很好的兼容所有浏览器
var self = this;
return function () {
return self.apply(context, arguments);
}
}핸드 스로틀 기능
주제는
스로틀 기능을 달성
실제로는 매우 복잡하고 저를 조절 쓸 수있는 스로틀 맵의 이점을 사용하려면 여기를.
그 당시 나는 기능을 조절 쓰지 않습니다,하지만 난 원칙과 내 프로젝트에 면접관 흔들림 말했다 그래서 내가 손떨림 방지 기능을 쓸 수있는 인터뷰를하자 그래서, 이미지 안정화를 쓸 것이다, 마무리 후 설명 기능을 조절하는 것은, 내가 다시 쓸 수 있습니다. 면접관은 매우 환자, 스로틀 및 포인트는 내가이 나는 기능을 얘기하지 않은 쓰기 편하게 느낄 수 있도록 내가 대한 이야기, 자랑한다. 해결하는 방법은 아래에이 질문을 기록했다.
문제 해결 아이디어
window.onload = () => {
// 这两行代码大家可以不用管，是因为我想演示效果，所以大家随便用一个点击div的事件就可以
let myInput = document.getElementById('myInput');
let inputSet;
// 节流函数
myInput.addEventListener('click', () => {
if (!inputSet) {
// 第一次执行
console.log(myInput.value);
inputSet = setTimeout(() => {
inputSet = undefined;
}, 500);
}
})
}알고리즘 제목
제목
필기 정렬 알고리즘
여기가 인터뷰를 요청하는 것입니다, 당신은 정렬 알고리즘 어떤 일반적인 알아? 그럼 말했다 버블 정렬, 빠른 정렬, 병합 정렬 나는, 그래서 그 뒤에 배치해야합니까하지 않습니다 힐 (언덕 노트 경우 신속하게 병합하거나 관심, 그리고 당신이 중지됩니다에 인터뷰 당신이) 열심히 기술을 이해하거나 매우 아래 브라우니 점 면접관하지 않는 말을하지 않습니다, 그는 내가 작성한 빠른 종류, 쓰기달라고 부탁하지만 작성하는 시간이 더 일종의 논리, 면접관이없는 경우 그것은 아이디어를 빗질과 함께하지만, 결국이 알고리즘을 완성하고있다.
문제 해결 아이디어
function sort(arr, flag) {
function swap(arr, a, b) {
let temp = arr[a];
arr[a] = arr[b];
arr[b] = temp;
}
function partition(arr, left, right) {
// 基准
let pt = arr[right];
// 指针
let storeIndex = left;
for (let i = left; i < right; i++) {
if (arr[i] < pt) {
swap(arr, i, storeIndex);
storeIndex++;
}
}
swap(arr, right, storeIndex);
return storeIndex;
}
function quickSort(arr, left, right) {
if (left > right) return;
var storeIndex = partition(arr, left, right);
quickSort(arr, left, storeIndex - 1);
quickSort(arr, storeIndex + 1, right);
}
quickSort(arr, 0, arr.length - 1);
return arr;
}
console.log(sort([1, 4, 2, 10, 5, 7, 2, 4, 6, 7]));개요
사실, 하나 개의 측면에서 매우 기본적인 질문이다, 그러나 당신이이 점을 도달하면 당신은 자기가 원하는 질문을 추출 할 필요가 있으므로, 그는 당신에게이 지식을 물어볼 것, 도핑 문제의 모든 포인트를 검사합니다 지식을 묻는 그에게 물어 기다리지 말고 "이 호출이 그것을 할 수 있습니다?": 하지만 그는 대답 할 때의 당신이있는 거 알고 , 직접 보여줍니다.
당신이이 기술에 익숙하지 않은 위해, 당신은 상단을 문질러하지 않는 하드 도핑 명사의 일련의에서이 경우 면접관은 당신이 물어 어렵지 않을 수 있다는 느낌을 알 수있다.
I 희망 모두가 자신의 원하는 서비스를 수확 할 수 있습니다!