Второе собеседование перед началом работы (базовая отделка JavaScript)

внешний интерфейс

1. Типы переменных и вычисления

используется в JStypeofкакие типы доступны

тип переменной
  • 值类型: Сама переменная содержит значение, которое нужно назначить ему, которое хранится в самой переменной, и данные хранятся в блоках памяти стека среди
  • 引用类型: Ссылочный тип - это, конечно, объект или переменная данных, размещенная в куче.Согласно официальному объяснению, переменная ссылочного типа включает только ссылку на данные, которые она представляет.
    • объекты, массивы, функции
    • Бесконечное расширение атрибутов, что может привести к большому объему памяти
typeof abc      //"undefined"
typeof NaN      //"number"
typeof null     //"object"
typeof console.log //"function"

typeof只能区分值类型,对引用类型无能为力,只能区分函数function
NaNпредставляет собой специальное нечисловое значение,nullявляется нулевым указателем и не указывает ни на какой адрес
typeofМожно выделить пять основных типов:string,boolean,number,undefined,symbolи функцияfunction

Расчет переменных

Ситуации, в которых может произойти приведение:
  • Конкатенация строк
  • == оператор
100  ==  '100'  //true
0    ==  ""     //true
null ==  undefined  //true
  • если заявление
    var c = '';
    if(c){
        //....
    }
  • логическая операция
 console.log(10 && 0);       //0
 console.log('' || 'abc');   //'abc'
 console.log(!window.abc);   //true

Определите, будет ли переменная рассматриваться как истинная или ложная Двойное неосуждение вар а = 100; console.log(!!a);

在js逻辑运算中,0、NaN、""、null、false、undefined都会判为false,其他都为true

 var add_level = (add_step == 5 && 1)||(add_step == 10 && 2)||(add_step == 12 && 4)||(add_step==15 && 5 )|| 0;
 var add_level = {'5':1,'10':2,'15':5,'12':4}[add_step]||0; //更精简

когда использовать===когда использовать==

if(obj.a == null){
    //这里相当于obj.a === null || obj.a === undefined,简写
    //这是jquery源码中推荐的写法,除此之外其他全用 ===
    //主要是用于判断这个属性是否存在
}
//判断函数参数是否存在
function (a,b){
    if(a == null){
        ...
    }
}
//这种写法不能用
 if(xxx == null){
     //可能会报错,这个参数未定义  not defined
 }

Какие типы переменных JS различают по способу их хранения, и описаны их характеристики

как понять джсон

  • JSON — это встроенный объект JS, и обычно используются два API.
 JSON.stringify({a:10,b:20})
 JSON.parse('{"a":10,"b":20}')
  • Также формат данных

2. Прототипы и цепочки прототипов

правило прототипа

  • Все ссылочные типы (массивы, функции, объекты) имеют объектные характеристики, которые можно свободно расширять.
  • Все ссылочные типы (массивы, объекты, функции) имеют__proto__свойство, значение свойства является обычным объектом
  • Все функции имеютprototypeсвойство, значение свойства также является обычным объектом
  • все ссылочные типы (массивы, объекты, функции),__proto__свойство указывает на его конструкторprototypeАтрибуты
  • При попытке получить атрибут объекта, если сам объект не имеет этого атрибута, то вернуться к его__proto__(т.е. его конструкторprototypeищите в)

Сеть прототипов

instanceof

instanceof: метод, используемый для определения того, какому конструктору принадлежит ссылочный тип.

f instanceof FooЛогика суждения такова:

  • ф__proto__Слой за слоем, может ли он соответствоватьFoo.prototype
  • Попробуйте сноваf instance Object

Как точно определить, является ли переменная типом массива

var arr = [] arr instanceOf Array          //true

typeof arr        //object,typeofНевозможно определить, является ли это массивом

Общий метод оценки:Object.prototype.toString.call(arr) === "[object Array]"

Напишите пример наследования цепочки прототипов

function Elem (id){ 
    this.elem = document.getElementById(id);
}
Elem.prototype.html = function(val){ 
    var elem = this.elem;
    if(val){ 
        elem.innerHtml = val;
        return this;   //链式操作
    }else{ 
        return elem.innerHtml; 
    }
} 

Elem.prototype.on = function(type,fn){
    var elem = this.elem
    elem.addEventListener(type,fn)
}

var div1 = new Elem('content_wrapper')
//div1.html('<p>ds<p>')
//div1.on('click',function(){
//	alert('clicked')
//	}
//)
div1.html('<p>放大放大放大发范德萨大点的我请萨</p>').on('click',function(){
	alert('clicked');
}).html('<p>javascript</p>')

Описать процесс создания объекта

  • вновь созданный объект
  • ссылка на прототип
  • связать это
  • вернуть новый объект
function create() {
    let obj = new Object()
    let Con = [].shift.call(arguments)
    obj.__proto__ = Con.prototype
    let result = Con.apply(obj, arguments)
    return typeof result === 'object' ? result : obj
}

Как использовать цепочку прототипов в исходном коде zepto

3. Область действия и замыкания

тема:

  • Поговорите о понимании переменного продвижения
  • Проиллюстрируйте несколько различных сценариев использования этого
  • Создать 10< a>Метка, при нажатии на которую появится соответствующий серийный номер
  • Как понять охват
  • Применение замыканий в реальной разработке

контекст выполнения

  • Объем: один сегмент<script>или函数
  • Global: определения переменных, объявления функций, раздел<script>
  • Функции: определения переменных, объявления функций, this, аргументы
console.log(a)    //undefined
var a = 100
fn('zhangsan')    //'zhangsan' 20
function fn(name){
	age = 20
	console.log(name,age)
	var age
}

  • Объявления функций будут подняты, а выражения функций будут такими же, как переменные, начиная сundefinedзаполнитель
  • Перед выполнением функции, определениями переменных, объявлениями функций,this,argumentsСначала нужно все извлечь

函数声明а также函数表达式разница

fn()                    //不会报错
function fn(){
    //声明
}
fn()                    //Uncaught TypeError:fn1 is not a function 
var a = function(){
    //表达式
}
  • Продвижение переменной: var a ; undefined, не знал, что это функция
  • Подъем функций: предварительные объявления функций
fn('zhangsan')

function fn(name){
	//函数
	console.log(this)
	console.log(arguments)

	age = 20
	console.log(name,age)
	var age
	
	bar(100)
	function bar(num){
		console.log(num)
	}
}

Проиллюстрируйте несколько различных сценариев использования этого

  • Выполнить как конструктор
  • Выполнить как свойство объекта
  • Выполнить как обычную функцию (окно)
  • call,apply,bind
var a = {
	name : 'A',
	fn:function(){
		console.log(this.name)
	}
}

a.fn()                  //this  === a
a.fn.call({name:'B'})   //this  === {name:'B'}
var fn1 = a.fn
fn1()                   //this === window

Значение this должно быть подтверждено во время выполнения

объем

нет области блока

if(true){
	var name = 'zhangsan'
}
console.log(name)

область действия функции и глобальная область действия

var a = 100
function fn(){
	var a = 200
	console.log('fn',a)
}

console.log('global',a)

fn()

цепочка прицелов

Как понять объем:

  • свободная переменная
  • Цепочка областей видимости, т. е. поиск свободных переменных
  • Два сценария закрытия
var a = 100
function fn(){
    var b = 200
    //当前作用域没有定义的变量,即“自由变量”
    console.log(a)
    console.log(b)
}
fn()

Цепочка областей свободных переменных, всегда ищущая родительскую область, всегда находящая глобальную область

var a = 100
function F1(){
	var b = 200
	function F2(){
		var c = 300
		console.log(a)   //a是自由变量
		console.log(b)	 //b是自由变量
		console.log(c)
	}
	F2()
}
F1()

Закрытие

作用域是定义时的作用域,而不是执行时的作用域

Сценарии использования закрытия:

функция как возвращаемое значение

function F1(){
	var a = 100
	//返回一个函数(函数作为返回值)
	return function(){
		console.log(a)
	}
}

var f1 = F1()
var a = 200
f1()

функция передана как параметр

function F1(){
	var a = 100
	return function(){
		console.log(a)   //自由变量,父作用域寻找
	}
}

var f1 = F1()

function F2(fn){
	var a = 200
	fn()
}

F2(f1)

вопросы интервью

Тема 1, рассказ о понимании переменного продвижения

В области оператор, объявляющий переменную, по умолчанию разрешается в первое объявление в области.

Тема 2. Объясните несколько различных сценариев использования этого

blog.CSDN.net/I_Please_1025/AR…

Тема 3, создайте 10< a>Метка, при нажатии на которую появится соответствующий серийный номер

неправильное написание

var i,a
for(i = 0;i<10;i++){
	a = document.createElement('a')
	a.innerHTMl = i + '<br>'
	a.addEventListener('click',function(e){
		e.preentDefault()
		alert(i)
	})
	document.body.appendChild(a)
}

Правильное написание

var i,a
for(i = 0;i < 10;i++){
	(function(i){
		var a = document.createElement('a')
		a.innerHTML = i + '<br>'
		a.addEventListener('click',function(e){
			e.preventDefault()
			alert(i)		
		})
		document.body.appendChild(a)
	})(i)
}

Тема 4. Как понять масштаб

  • свободная переменная
  • Цепочка областей видимости, т. е. поиск свободных переменных
  • Два сценария закрытия

Тема 5, применение замыканий в реальной разработке

//闭包实际应用中主要用于封装变量,收敛权限

function isFirstLoad(){ 
    var _list = []; 
    return function(id){
        if(_list.indexOf(id) >= 0){
            return false; 
        }else{ 
            _list.push(id);
            return true;
        } 
    }}
    var firstLoad = isFirstLoad();
    firstLoad(10);

4. Асинхронный и однопоточный

тема:

  • В чем разница между синхронным и асинхронным? Приведите пример синхронного и асинхронного соответственно
  • один оsetTimeoutПен-тест
  • Внешний интерфейс, использующий асинхронную сцену

Точка знаний:

  • Что такое асинхронный (по сравнению с синхронным)
  • Внешний интерфейс с использованием асинхронных сценариев
  • Асинхронный и однопоточный

что такое асинхронный

Блокировать ли запуск программы

Когда вам нужен асинхронный

в случае ожидания

  • Дела по расписанию:setTimeout,setTimeInterval
  • Сетевой запрос:ajaxзапрос, динамический<img>нагрузка
  • привязка события

не может быть как в ожиданииalertта самая блокирующая программа

Таким образом, все «ожидающие случаи» должны быть асинхронными.

Асинхронный и однопоточный

console.log(100)
setTimeout(function(){
	console.log(200)
},1000)
console.log(300)
  • Выполните первую строку, напечатайте 100
  • После выполнения setTimeout функция, переданная в setTimeout, будет временно сохранена и не будет выполняться немедленно (однопоточная функция, не может делать две вещи одновременно)
  • Выполните последнюю строку, напечатайте 300
  • После выполнения всех программ, когда они находятся в состоянии простоя, они сразу увидят, есть ли какое-либо временное хранилище для выполнения.
  • Выяснено, что функция во временно сохраненном setTimeout не нуждается в ожидании времени, а сразу приходит на выполнение

вопросы интервью

Письменный вопрос 1: В чем разница между синхронным и асинхронным? Приведите пример синхронного и асинхронного соответственно

Синхронный блокирует выполнение кода, а асинхронный нет.

Письменный тестовый вопрос 2: Письменный тестовый вопрос о setTimeout

console.log(1)

setTimeout(function(){
	console.log(2)
},0)

console.log(3)

setTimeout(function(){
	console.log(4)
},1000)

console.log(5)

Письменный вопрос 3: Каковы сценарии, в которых внешний интерфейс использует асинхронный

Нужно ждать, потому что JS - это один резьбовый язык

Пять, общие объекты

тема

  • Получать2017-06-10дата в формате
  • Получить случайное число, требование — строковый формат постоянной длины
  • Напишите общую функцию forEach, которая перебирает объекты и массивы.

Date

Date.now() //获取当前时间毫秒数
  
var dt = new Date()
dt.getTime()  		//获取毫秒数
dt.getFullYear()  	//年
dt.getMonth()		//月(0-11)
dt.getDate()		//日(0-31)
dt.getHours()		//小时(0-23)
dt.getMinutes()		//分钟(0-59)
dt.getSeconds()		//秒(0-59)

Math

Math.random(): Может использоваться для очистки кеша

Array

  • forEachперебрать все данные
  • everyПроверьте, подходят ли все элементы
  • someПроверить, соответствует ли хотя бы один элемент условию
  • sortСортировать
  • mapСоберите элементы для создания нового массива> — отфильтруйте элементы, соответствующие условиям

array.forEach

arr.forEach( function(item,index){ 
    console.log(index,item); 
});

array.every

var arr = [1,2,3,4,5];
var result = arr.every(function(index,item){
//用来判断所有的数组元素,都满足一个条件 
    if(item<6) 
        return true
});
    console.log(result);

array.some

var result = arr.some(function(index,item){ 
    if(item<5) 
        return true;
}); 
console.log(result);

arry.sort

var arr2 = arr.sort(function(a,b){ 
    //从小到大排序 return a-b; 
    //从大到小排序 
    //return b-a;
})

array.map

arr.map(function(item,index){
	return '<br>'+index+':'+item+'<br>'
})

array.filter

var arr2 = arr.filter(function (item,index){ 
    //通过某一个条件过滤数组 
    if(item >= 2) 
        return true
})

API объекта

var obj = {
	x:100,
	y:200,
	z:300
}

var key

for(key in obj){
	if(obj.hasOwnProperty(key)){
		console.log(key,obj[key])
	}
}

вопросы интервью

Решение 1. Получите дату в формате 2016-06-10

function formatDate(dt){
	if(!dt){
		dt = new Date()
	}

	var year  = dt.getFullYear()
	var month = dt.getMonth() + 1
	var date  = dt.getDate()

	if(month < 10){
		//强制类型转换
		month = '0' + month 
	}

	if(date < 10){
		//强制类型转换
		date = '0' + date
	}
	//强制类型转换
	return year + '-' + month + '-' + date
}

var dt = new Date()
var formatDate = formatDate(dt)
console.log(formatDate)

Ответ 2: Для получения случайных чисел требуется формат строки одинаковой длины

var random = Math.random() + '0000000000';
var random = random.slice(0,10);

Решение 3. Напишите универсальную функцию forEach, которая перебирает объекты и массивы.

function forEach(obj,fn){
	var key
	if(obj instanceof Array){
    	//准备判断是不是数组
    	obj.forEach(function(item,index){
    		fn(index,item)
    	})
	}else{
    	//不是数组就是对象
    	for(key in obj){
    		fn(key,obj[k])
    	}
	}
}

5. JS-веб-API:

Очки знаний:

  • основы js: стандарт ECMA262
  • JS-веб-API: стандарт W3C

Положения о JS в стандарте W3C:

  • Манипуляции с DOM
  • Операция спецификации
  • привязка события
  • запрос ajax (включая протокол http)
  • место хранения

Манипуляции с DOM

Природа домаDocument,Object,ModelБраузер берет полученный html-код и создает модель, которую браузер может распознать и с которой может работать js.

Управление узлами DOM

  • Получить узел DOM
  • Атрибут и свойство
  • attribute: Это атрибут на теге HTML, такой как идентификатор, класс, значение и т. Д., И пользовательские свойства могут быть только строкой, с общей словой, с общей словом, с помощью трех связанных методов, SetAttribute, GetAttribute, RemovEattribute; ПРИМЕЧАНИЕ. При использовании SetAttribute функция должна принимать два параметра, Settribute (AttributeName, значение), независимо от значения значения, составлена ​​как тип строки. Добавьте атрибуты в теге HTML, по существу, как в свойствах записи с этикеткой, поэтому значения атрибутов в конечном итоге составляют в типы строк.
  • property: это значение атрибута объекта DOM, полученное с помощью js, например a, вы можете рассматривать его как базовый объект js. Этот узел включает в себя множество свойств, таких как значение, className и некоторые методы, такие как onclick. У js-объекта много свойств, имя коллекции — properties, в свойствах есть другие свойства и атрибуты, а в атрибутах — множество атрибутов. Обычно используемые атрибуты, идентификатор, класс, имя и т. д. обычно присоединяются к объекту js как свойства, и их можно оценивать и назначать так же, как свойства.

Управление структурой DOM

Интервью Вопрос 1: Какова основная структура данных DOM?

Дерево

Вопрос интервью 2: Каковы распространенные API для манипулирования DOM?

  • Получите узел DOM и узелpropertyа такжеAttribute
  • получить родительский узел, получить дочерний узел
  • добавить узел, удалить узел

Вопрос интервью 3: В чем разница между атрибутом и свойством узла DOM

свойство - это просто модификация свойства объекта JS
Атрибут — это модификация атрибута html-тега.

Операция спецификации

вопрос:

  • Как определить тип браузера
  • Разобрать части URL

Точка знаний

  • navigator
  • screen
  • location
  • history

navigator & screen


//navigator
var ua = navigator.userAgent
var isChrome = ua.indexOf('chrome')
console.log(isChrome)

//screen
console.log(screen.width)
console.log(screen.height)

//location
console.log(location.href)
console.log(location.protocol)
console.log(location.pathname)
console.log(location.search)    //?之后的参数
console.log(location.hash)      //#号之后

//history
history.back()          
history.forward()

6. События

тема:

  • Напишите общую функцию прослушивания событий
  • Описание процесса пузырькового времени
  • Для страницы, которая загружает изображения в бесконечном раскрывающемся списке, как привязать события к каждому изображению

Очки знаний:

  • Общая привязка событий
  • всплывающее окно события
  • играет роль

Точка знаний

Общая привязка событий

var btn = document.getElementById('btn1')
btn.addEventListener('click', function(event) {
    console.log('clicked')
})

function bindEvent(elem, type, fn) {
    elem.addEventListener(type, fn)
}

var a = document.getElementById('link1')
bindEvent(a, 'click', function(e) {
    e.preventDefault(); //阻止默认行为
    alert('clicked')
})

Совместимость с более ранними версиями IE

  • Использование более низкой версии IEattachEventСобытия привязки, не такие, как в стандарте W3C
  • Использование более ранней версии IE было очень небольшим, и многие веб-сайты больше не поддерживают ее.
  • Рекомендуется совместимость с более ранними версиями IE: просто поймите, не нужно вдаваться в подробности.
  • Если вы встретите требовательное интервью с более низкой версией IE, решительно сдавайтесь.

всплывающее окно события

e.stopPropatation()// отменить всплытие

играет роль

<div id="div1">
    <a href = "#">a1</a>
    <a href = "#">a2</a>
    <a href = "#">a3</a>
    <a href = "#">a4</a>
    <!--会随时新增更多 a 标签-->
</div>


var div1 = document.getElementById('div1')
div1.addEventListener('click',function(e){
    var target = e.target
    if(target.nodeName === 'A'){
        alert(target.innerHTMl)
    }
})

полное написание

function bindEvent(elem, type, selector, fn) {
    if (fn == null) {
        fn = selector
        selector = null
    }

    elem.addEventListener(type, function(e) {
        var target
        if (selector) {
            target = e.target
            if (target.matches(selector)) {
                fn.call(target, e)
            }
        } else {
            fn(e)
        }
    })
}

//使用代理
var div1 = document.getElementById('div1')
bindEvent(div1, 'click', 'a', function(e) {
    console.log(this.innerHTML)
})

//不使用代理
var a = document.getElementById('a1')
bindEvent(div1, 'click', function(e) {
    console.log(a.innerHTML)
})

вопросы интервью

Вопрос интервью 1: Напишите универсальную функцию прослушивания событий

Вопрос интервью 2: Опишите процесс всплытия событий

  • Древовидная структура DOM
  • всплывающее окно события
  • перестань пузыриться
  • всплывающее приложение

Вопрос интервью 3: Как привязать события к каждому изображению для страницы, которая загружает изображения в бесконечном раскрывающемся списке

  • использовать прокси
  • Два преимущества знания прокси

7. Аякс

тема:

  • Написать руководствоajax, не зависит от сторонних библиотек
  • Несколько реализаций междоменного (принцип)

Очки знаний:

  • xmlHttpRequest
  • Описание кода состояния
  • перекрестный домен

XMLHttpRequest

var xhr = new XMLHttpRequest()

xhr.open("GET","/api",false)

xhr.onreadystatechange = function(){
    //这里的函数异步执行,可参考之前JS基础中的异步模块
    if(xhr.readyState == 4){
        if(xhr.status == 200){
            alert(xhr.responseText)
        }
    }
}

xhr.send(null)

Проблемы совместимости с IE

  • Младшая версия IE использует ActiveXObject, который отличается от стандарта W3C.
  • Использование младших версий IE было очень небольшим, и многие веб-сайты больше не поддерживают его.
  • Рекомендуется совместимость с более ранними версиями IE: просто поймите, не нужно вдаваться в подробности.
  • Если вы встретите требовательное интервью с более низкой версией IE, решительно сдавайтесь.

.

Описание кода состояния

  • 0 - (неинициализированный) еще не вызывалсяsend()метод
  • 1 - (загрузка) скорректированоsend()метод, запрос отправляется
  • 2 - (загрузка завершена)send()Выполнение метода завершено, и все соответствующее содержимое получено.
  • 3 - (Интерактивный) Анализ содержимого ответа
  • 4 - (Завершено) Содержимое ответа анализируется и может быть вызвано на клиенте

.

статус Описание

  • 2xx - представляет собой успешно обработанный запрос. Как 200
  • 3XX - требуется перенаправление, браузер переходит напрямую
  • 4xx - Ошибка запроса клиента, например, 404
  • 5XX — ошибка на стороне сервера

перекрестный домен

что такое кросс домен

  • Браузер имеет ту же политику происхождения, что не разрешеноajaxИнтерфейсы для доступа к другим доменам
  • Междоменные условия: протокол, доменное имя, порт, если есть разница, то междоменное

 

Три тега, которые могут пересекать домены

  • <img src=''>
  • <script src=''>
  • <link href=''>

 

сцена с тремя тегами

  • <img>Для статистики RBI веб-сайт статистики может быть другим доменом (и проблем с совместимостью не возникает).
  • <link> <script>Можно использовать CDN, CDN также является другим доменом
  • <script>Может использоваться для JSONP

 

Через проблемы внимания

  • Все междоменные запросы должны быть разрешены поставщиком информации.
  • Если его можно получить без разрешения, это уязвимость в политике браузера того же происхождения.

 

Принцип реализации JSONP

  • нагрузкаcoding.hee hee hee.com/class index. …
  • Не обязательно на стороне сервера действительно есть файл classindex.html.
  • Сервер может динамически генерировать файл в соответствии с запросом и возвратом
  • общий для<script src="http://coding.xxxxx.com/api.js">
//例如你的网站要跨域访问xx网的一个接口
//给你一个地址 http://coding.xxxx.com/api.js
//返回内容格式 callback({x:100,y:200})

<script>
window.callback = function(data){
    //这是我们跨域得到信息
    console.log(data)
}
</script>
<script src="http://coding.m.xxxxx.com/api.js"></script>

Настройка HTTP-заголовка на стороне сервера

cookie,sessionStorage,localStorageразница

  • емкость
  • Будет ли это перенесено в ajax
  • API простота использования
ios safari隐藏模式下,localStorage.getItem会报错,建议统一用try-catch封装

______________Интервью всей семьи Бочки________________________

Окончание HTML+CSS-интервью ------------------>кликните сюда
Завершение собеседования переднего плана (глубокое знание трех основных фреймворков) -------------------------------->кликните сюда
оптимизация производительности javascript -------------------------------->кликните сюда
шаблоны проектирования javascript -------------------------------->кликните сюда
Интервью, связанные с HTTP                    кликните сюда