Список вопросов для интервью на этой неделе:
- Реализовать метод Promise.race
- Принцип JSONP и простая реализация
- Реализовать метод дедупликации массива
- Какие есть способы очистить поплавки
- Напишите общую функцию каррирования
Более качественные изделия можно штамповать: GitHub.com/Иветт Л.А. Ю/Б…
20. Реализуйте метод Promise.race
в реализацииPromise.raceПрежде чем метод, мы должны сначала знатьPromise.raceфункции и особенности, потому что в ясном видеPromise.raceВ случае с функциями и фичами мы можем дальше писать и реализовывать.
Функция Promise.race
Promise.race(iterable)возвращает обещание, один разiterableодин изpromiseстатусfulfilled / rejected,ТакPromise.raceвернутьpromiseстатусfulfilled / rejected.
let p = Promise.race([p1, p2, p3]);
Пока экземпляр p1, p2 и p3 изменяет состояние первым, состояние p изменяется соответственно. Первый, кто изменилPromiseВозвращаемое значение экземпляра передается функции обратного вызова p.
Особенности Promise.race
Возвращаемое значение Promise.race является экземпляром обещания.
- Если переданный параметр является пустым итерируемым объектом, то
Promise.raceвернутьpromiseвсегда бытьpendingсостояние - Если переданный параметр не содержит
promise,Promise.raceвернет ожиданиеpromise - если
iterableсодержит один или несколько не-promiseзначение или разрешенное обещание, затемPromise.raceбудет тарифицировать какiterableПервое значение найдено в.
Реализация Promise.race
Promise.race = function (promises) {
//promises传入的是可迭代对象(省略参数合法性判断)
promises = Array.from(promises);//将可迭代对象转换为数组
return new Promise((resolve, reject) => {
if (promises.length === 0) {
//空的可迭代对象;
//用于在pending态
} else {
for (let i = 0; i < promises.length; i++) {
Promise.resolve(promises[i]).then((data) => {
resolve(data);
}).catch((reason) => {
reject(reason);
})
}
}
});
}
21. Принцип JSONP и простая реализация
Хотя в браузерах действуют политики одинакового происхождения,<script>помеченsrcАтрибуты не связаны политикой одного и того же происхождения и могут получать сценарии на любом сервере и выполнять их.jsonpвставивscriptДля достижения кросс-доменности в виде тегов параметры можно передавать только черезurlвходящий, только поддерживаетgetпросить.
Принцип реализации:
- Шаг 1: Создайте метод обратного вызова
- Шаг 2: Вставьте тег скрипта
- Шаг 3: Фон получает запрос, анализирует метод обратного вызова, переданный внешним интерфейсом, возвращает вызов метода и передает данные в метод в качестве параметра.
- Шаг 4: Внешний интерфейс выполняет вызов метода, возвращенный сервером.
реализация исходного кода jsonp
function jsonp({url, params, callback}) {
return new Promise((resolve, reject) => {
//创建script标签
let script = document.createElement('script');
//将回调函数挂在 window 上
window[callback] = function(data) {
resolve(data);
//代码执行后，删除插入的script标签
document.body.removeChild(script);
}
//回调函数加在请求地址上
params = {...params, callback} //wb=b&callback=show
let arrs = [];
for(let key in params) {
arrs.push(`${key}=${params[key]}`);
}
script.src = `${url}?${arrs.join('&')}`;
document.body.appendChild(script);
});
}
использовать:
function show(data) {
console.log(data);
}
jsonp({
url: 'http://localhost:3000/show',
params: {
//code
},
callback: 'show'
}).then(data => {
console.log(data);
});
Код сервера (нода):
//express启动一个后台服务
let express = require('express');
let app = express();
app.get('/show', (req, res) => {
let {callback} = req.query; //获取传来的callback函数名，callback是key
res.send(`${callback}('Hello!')`);
});
app.listen(3000);
22. Реализовать метод дедупликации массива
Способ 1: используйте ES6 для добавления новых типов данныхSet
SetАналогичен массиву, но все значения членов уникальны и нет повторяющихся значений.
function uniq(arry) {
return [...new Set(arry)];
}
Способ 2: ИспользованиеindexOf
function uniq(arry) {
var result = [];
for (var i = 0; i < arry.length; i++) {
if (result.indexOf(arry[i]) === -1) {
//如 result 中没有 arry[i],则添加到数组中
result.push(arry[i])
}
}
return result;
}
Способ 3: Использованиеincludes
function uniq(arry) {
var result = [];
for (var i = 0; i < arry.length; i++) {
if (!result.includes(arry[i])) {
//如 result 中没有 arry[i],则添加到数组中
result.push(arry[i])
}
}
return result;
}
Способ 4: Использованиеreduce
function uniq(arry) {
return arry.reduce((prev, cur) => prev.includes(cur) ? prev : [...prev, cur], []);
}
Закон 5: ИспользуйтеMap
function uniq(arry) {
let map = new Map();
let result = new Array();
for (let i = 0; i < arry.length; i++) {
if (map.has(arry[i])) {
map.set(arry[i], true);
} else {
map.set(arry[i], false);
result.push(arry[i]);
}
}
return result;
}
23. Какие есть способы очистить поплавок?
Когда высота контейнера задана автоматически, а в содержимом контейнера есть плавающие элементы (плавает слева или справа), в этом случае высота контейнера не может автоматически растягиваться, чтобы соответствовать высоте содержимого, поэтому что содержимое выходит за пределы контейнера и Явление, которое влияет (или даже разрушает) макет. Это явление называется плавающим переполнением.Чтобы предотвратить возникновение этого явления, обработка CSS называется очисткой CSS от плавания.
<style>
.inner {
width: 100px;
height: 100px;
float: left;
}
</style>
<div class='outer'>
<div class='inner'></div>
<div class='inner'></div>
<div class='inner'></div>
</div>
1. Воспользуйтесь преимуществамиclearАтрибуты
существует<div class='outer'>Создайте пустой элемент внутри, установите егоclear: both;стиль.
- Преимущества: Простота, меньше кода, хорошая совместимость с браузерами.
- Недостатки: необходимо добавить большое количество несемантических html-элементов, код недостаточно элегантен, и его непросто поддерживать в дальнейшем.
2. Использоватьclearатрибут + псевдоэлемент
.outer:after{
content: '';
display: block;
clear: both;
visibility: hidden;
height: 0;
}
IE8 и выше поддерживают только браузеры, отличные от IE: после, если вы хотите поддерживать IE6,7, необходимоouterэлемент, стилизованныйzoom: 1;
3. Используйте правила компоновки BFC
По правилам БФК при расчете высоты БФК в расчете участвуют и плавающие элементы. Итак, чтобы очистить поплавок, просто активируйте BFC.
Следующие методы могут быть использованы для запуска BFC
- позиция абсолютная или фиксированная
- блочные элементы, переполнение которых не видно
- display inline-block, table-cell, table-caption
Такие как:
.outer {
overflow: hidden;
}
Обратите внимание на использованиеdisplay: inline-blockПроизойдет разрыв.
24. Напишите общую функцию каррирования
Прежде чем мы начнем, нам сначала нужно понять концепцию каррирования функций.
Каррирование функций — это метод преобразования функции, которая принимает несколько параметров, в функцию, которая принимает один параметр (первый параметр исходной функции) и возвращает новую функцию, которая принимает остальные параметры и возвращает результат.
const currying = (fn, ...args) =>
args.length < fn.length
//参数长度不足时，重新柯里化该函数，等待接受新参数
? (...arguments) => currying(fn, ...args, ...arguments)
//参数长度满足时，执行函数
: fn(...args);
function sumFn(a, b, c) {
return a + b + c;
}
var sum = currying(sumFn);
console.log(sum(2)(3)(5));//10
console.log(sum(2, 3, 5));//10
console.log(sum(2)(3, 5));//10
console.log(sum(2, 3)(5));//10
Основная роль функции каррирования:
- Повторное использование параметра
- Вернуться раньше — возвращает новую функцию, которая принимает оставшиеся аргументы и возвращает результат.
- Отложенное выполнение — возвращает новую функцию, ожидающую выполнения
Справочная статья:
[2] Подробно объясните каррирование функций JS
[3] Дедупликация массива JavaScript
Спасибо за вашу готовность потратить свое драгоценное время на чтение этой статьи. Если эта статья дала вам небольшую помощь или вдохновение, пожалуйста, не скупитесь на лайки и звезды. Вы, безусловно, самая большая движущая сила для меня, чтобы двигаться вперед .GitHub.com/Иветт Л.А. Ю/Б…