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
- Использование более низкой версии IE
attachEvent
События привязки, не такие, как в стандарте 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 кликните сюда