Те функции, с которыми вы знакомы, но не знакомы

Это 10-й день моего участия в Gengwen Challenge.Подробности о мероприятии:Обновить вызов

предисловие

пятислойное царство

я не знаю я не знаю
Я знаю, что не знаю
знаю, знаю

Область над третьим слоем Xiongtai может быть непосредственно оставлена.

Что касается пятого царства, нет необходимости знать или не знать.

Без лишних слов, давайте перейдем к делу и рассмотрим те функции, с которыми вы знакомы и с которыми не знакомы.

содержание

Т.к. справочник на мобильнике не отображается, пишем отдельную копию:

setTimeout && setInterval
JSON.parse
JSON.stringify
addEventListener
Array.from
String.replace
window.getComputeStyle
localStorage.setItem
конкретная консоль

setTimeout && setInterval

грамматика

var timeoutID = scope.setTimeout(function[, delay, arg1, arg2, ...]);
var timeoutID = scope.setTimeout(function[, delay]);
var timeoutID = scope.setTimeout(code[, delay]);

Тот, который мы используем чаще всего, является вторым в грамматике.
var timeoutID = scope.setTimeout(function[, delay]);
Например

setTimeout(()=>{
    console.log(`当前时间:${Date.now()}`);
}, 1000)

Тогда давайте посмотрим на третийsetTimeout(code[, delay]), codeэто строка кода, а его базовая реализация заключается в вызовеeval, откуда вы знаете вопрос, ведь у MDN есть объяснение этого параметра кода.

code
An alternative syntax that allows you to include a string instead of a function, which is compiled and executed when the timer expires. This syntax is not recommended for the same reasons that make using eval() a security risk.

Только что код эквивалентен следующему коду

setTimeout( `console.log("当前时间:${Date.now()}")`, 1000)

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

[Report Only] Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an   
allowed source of script in the following Content Security Policy directive: "script-src 
.........

Это потому, что CSP перехватывает, подробнее о CSP можно посмотретьContent-Security-Policили Руан ДашенНачало работы с политикой безопасности контента

Наконец смотрим первыйsetTimeout(function[, delay, arg1, arg2, ...]), начиная с третьего параметра, он будет передан в callback-функцию, давайте посмотрим на кусок кода

setTimeout((startTime, tip)=>{
    const endTime = Date.now();
    console.log("时间已经过去了", endTime - startTime, "ms," ,tip);  // 时间已经过去了 501 ms, 该休息了
},500, Date.now(), "该休息了");

На самом деле, clearTimeout и clearInterval тоже немного сложны.Может ли clearTimeout очистить setInterval? А как насчет наоборот?

var ticket = setTimeout(()=>{
    console.log("100ms后执行");
},100);

var ticket2 = setTimeout(()=>{
    console.log("200ms后执行");
},200);
clearInterval(ticket);

// 200ms后执行

Некоторые люди скажут, что это..., молодой человек, не серьезно.

Не по теме:

Есть легенда setTimeout4msминимальный интервал.
Это предполагается, если более четырех вложенных вызововsetTimeout, с пятого раза будет такое4msограничения.
Больше можно найти в стандарте HTMLtimers-and-user-prompts.
ты тоже можешь пойтиMDN setTimeoutПроверьте это сами.

Вот дополнение, стандарт принадлежит стандарту, реализация принадлежит реализации, так много производителей браузеров, ха.

JSON.parse

грамматика

JSON.parse(text)
JSON.parse(text, reviver)

Обычно мы используем первый в 99,99% случаев.

reviverПараметры представлены в TypeScript, что примерно так(key:string, value: any)=> any.

Если мультиплексор преобразует только некоторые значения, а не другие, обязательно верните все непреобразованные значения как есть, иначе они будут удалены из объекта результата.

Например, после преобразования в объект свойство IDCard исчезает.


JSON.parse(JSON.stringify({
  name: "tom",
  age: 18,
  phone: "15888787788",
  IDCard: "xxxx"
}), (key, value)=>{
  
  if(key === "IDCard"){
    return undefined
  }
  return value;
    
});   // {name: "tom", age: 18, phone: "15888787788"}

Здесь два дополнения:

Когда JSON.parse преобразуется, это обход в глубину
Значение последнего ключа равно null

Посмотрите на код:


JSON.parse('{"1": 1, "2": 2, "3": {"4": 4, "5": {"6": 6}}}', (key, value) => {
  console.log(key); // log the current property name, the last is "".
  return value;     // return the unchanged property value.
});

// 1
// 2
// 4
// 6
// 5
// 3
// ""

JSON.stringify

грамматика

JSON.stringify(value)
JSON.stringify(value, replacer)
JSON.stringify(value, replacer, space)

Первый вид не будет сказано.

Описание последних двух параметров выглядит следующим образом

заменитель необязательный

Если параметр является функцией, в процессе сериализации каждый атрибут сериализованного значения будет преобразован и обработан функцией;
Если параметр является массивом, только имена свойств, содержащиеся в этом массиве, будут сериализованы в окончательную строку JSON;
Если этот параметр имеет значение null или не указан, все свойства объекта будут сериализованы.

пробел необязательный

Укажите пустую строку для отступа, используемого для украшения вывода (красивая печать);

Если аргумент является числом, он представляет количество пробелов; верхний предел равен 10. Если значение меньше 1, значит пробелов нет;
Если параметр является строкой (когда длина строки превышает 10 букв, берутся первые 10 букв), строка будет восприниматься как пробел;
Если этот параметр не указан (или имеет значение null), пробелов не будет.

В этот момент некоторые студенты были удивлены. На самом деле, у Наггетс есть много статей об этом.

Взрывные моделиСила JSON.stringify(), о которой вы не знали
Интересный JSON.parse, JSON.stringify
Серия глубоких копий — — Реализуйте JSON.stringify и JSON.parse самостоятельно.

Конечно, я сказал две вещи:

toJSON
пространственный параметр

toJSON: когда объект для преобразования определяет метод toJSON, значение toJSON будет возвращено напрямую. Возьмите каштан:

var obj = {
  foo: 'foo',
  toJSON: function () {
    return 'bar';
  }
};
JSON.stringify(obj);      // '"bar"'

space: Параметр используется для украшения преобразованного формата, например: сохранитьJSONОсобенно полезно при документировании. Конечно, если вы поместите следующий код в браузер, некоторые браузеры могут не увидеть никакого эффекта.nodejsВыполните, а затем сохраните файл, чтобы увидеть эффект.

JSON.stringify({ uno: 1, dos : 2 }, null, '\t')
// '{            \
//     "uno": 1, \
//     "dos": 2  \
// }'

addEventListener

Вот именно, вот именно, сомневаюсь, что воспользуюсь. Я действительно чувствую, что, видя здесь более 50% людей, это действительно не полно. После прочтения, если он действительно неполный, прокомментируйте его в области комментариев.一起围观作者. ;

target.addEventListener(type, listener, options);
target.addEventListener(type, listener, useCapture)

Надежность четырех девяток,99.9999%уведомления полностью осведомлены о случае, когда третий параметр является логическим. Я не скажу.

опции необязательные

Доступные Варианты:

Capture: логическое значение, указывающее, что прослушиватель будет срабатывать, когда фаза захвата события этого типа распространяется на этот EventTarget.
Once: логическое значение, указывающее, что прослушиватель будет вызван не более одного раза после добавления. Если true, прослушиватель будет автоматически удален после его вызова.
пассивный: логическое значение, если установлено значение true, это означает, что слушатель никогда не будет вызывать preventDefault(). Если прослушиватель все еще вызывает эту функцию, клиент проигнорирует ее и выдаст предупреждение консоли. ПроверитьУлучшена производительность прокрутки с пассивнымпонять больше.
сигнал: AbortSignal, когда вызывается метод abort() этого AbortSignal, слушатель будет удален.

once

ВидетьonceВы знакомы с ним?EventEmitter, socket.ioПодождите, есть ли такие, это модель, с которой мы знакомы.

По сути, само окно в определенной степени является издательским центром по подписке:

function _dispatch(type, data) {
    const ev = new CustomEvent(type, { detail: data });
    window.dispatchEvent(ev);
}

window._on = window.addEventListener
window._emit = _dispatch;
window._once = (type, callback) => {
    window.addEventListener(type, callback, {
        once: true,
        capture: true
    })
}

window._on("event-x", (ev) => {
    console.log("event-x 收到数据:", ev.detail);
});

window._once("event-once", (ev) => {
    console.log("event-once 收到数据:", ev.detail);
}, {
    once: true,
});  

window._emit("event-x", {
    uid: 100,
    message: "i love you"
})

window._emit("event-once", {
    uid: -100,
    message: "you love me"
});

window._emit("event-once", {
    uid: -100,
    message: "you love me"
});

// event-x 收到数据: {uid: 100, message: "i love you"}
// event-once 收到数据: {uid: -100, message: "you love me"}

Собственно, не только Window, любой унаследованныйEventTargetобъекты обладают этой способностью.

passive

ПроверитьУлучшена производительность прокрутки с пассивнымпонять больше

signal

Этот сигналAbortControllerЧасть, чья главная роль должна превышать запрос.

Роль здесь состоит в том, чтобы удалить слушателя.

Следующий код, если он прокомментированcontroller.abort();, вы получите два сообщения.

var controller = new AbortController();
var signal = controller.signal;

function _dispatch(type, data) {
    const ev = new CustomEvent(type, { detail: data });
    window.dispatchEvent(ev);
}

window.addEventListener("event-x", ev => {
    console.log("event-x:收到数据：", ev.detail);
}, {
    signal
});

_dispatch("event-x", "i love you");
// 终止
controller.abort();
_dispatch("event-x", "i love you");

// event-x:收到数据： i love you

На данный момент, если вы действительно пленарно, пожалуйста, прокомментируйте в области комментариев一起围观作者.

Array.from

Array.from(arrayLike[, mapFn[, thisArg]])

Дело в том, чтоmapFn:

apFn необязательный Если этот параметр указан, каждый элемент нового массива будет выполнять функцию обратного вызова.

Сначала посмотрите на волшебство, создайте массив 1-100, о, это так просто!

    Array.from({length:100}, (val, index)=>  index + 1 );

нить

Array.from('foo'); 
//  [ "f", "o", "o" ]

Set

const set = new Set(['foo', 'bar', 'baz', 'foo']);
Array.from(set);
// [ "foo", "bar", "baz" ]

карта Это место может всех немного сбить с толку, подробнееСвязь между Map и массивом

const map = new Map([[1, 2], [2, 4], [4, 8]]);
Array.from(map); // 等同于 [...map.entries()]
// [[1, 2], [2, 4], [4, 8]]

const mapper = new Map([['1', 'a'], ['2', 'b']]);
Array.from(mapper.values());
// ['a', 'b'];

Array.from(mapper.keys());
// ['1', '2'];

генератор последовательности

const range = (start, stop, step) => Array.from(
    { length: (stop - start) / step + 1}, 
    (_, i) => start + (i * step)
);

// Generate numbers range 0..4
range(0, 4, 1);
// [0, 1, 2, 3, 4]

Диапазон встроен в Python.Вы можете видеть, что реализация нашего JS также очень проста.

String.replace

str.replace(regexp|substr, newSubStr|function)

специальное имя переменной

специальное имя переменнойпусть этоreplaceПринадлежа к поздней стадии Преображения Бога, следующие$2, $1является строковым параметром.

var re = /(\w+)\s(\w+)/;
var str = "John Smith";
var newstr = str.replace(re, "$2, $1");
// Smith, John
console.log(newstr)

Все строковые параметры следующие:

имя переменной	Значение представляет
$$	Вставьте "$"
$&	Вставьте совпадающие подстроки.
$`	Вставляет содержимое слева от текущей подстроки.
$'	Вставляет содержимое справа от текущей подстроки.
$n	Если первый аргумент является объектом RegExp, а n — неотрицательным целым числом меньше 100, вставьте строку, соответствующую n-й скобке. Подсказка: индексы начинаются с 1. Если n-я группа не существует, совпадающее содержимое будет заменено литералом. Например, если третьей группы нет, соответствующий контент будет заменен на «$3».
$	Здесь Имя — это имя группы. Если в регулярном выражении нет группировки (или совпадения), эта переменная будет рассматриваться как пустая строка. Доступно только в браузерах, поддерживающих захват именованных групп.

Второй параметр — это функция

Для простоты понимания давайте посмотрим:

function replacer(match, p1, p2, p3, offset, string) {
  // p1 is nondigits, p2 digits, and p3 non-alphanumerics
  return [p1, p2, p3].join(' - ');
}
var newString = 'abc12345#$*%'.replace(/([^\d]*)(\d*)([^\w]*)/, replacer);
console.log(newString);  // abc - 12345 - #$*%

р1, р2, р3 соответствуютспециальное имя переменной $1, $2, $3,

Подробнее на МДНпараметр функции

window.getComputeStyle

Все мы знаем, что в CSS есть веса, стили, различные типы в CSS, стили браузера по умолчанию и так далее.
Призрак знает, какие стили сработают в конце. призрак такойgetComputeStyle.

Давайте посмотрим на пример:

<style>
 #elem-container{
   position: absolute;
   left:     100px;
   top:      200px;
   height:   100px;
   z-index: 1;
 }
</style>

<div id="elem-container">dummy</div>

<script> 
    let elem = document.getElementById("elem-container");
    const ps =  window.getComputedStyle(elem,null)
    console.log(ps..getPropertyValue("height")); // 100px
</script>

Метод чтения

ps.getPropertyValue("z-index");
ps["z-index"];
ps.zIndex (читается в том же стиле)

Возможны все три вышеуказанных способа.

Возвращаемое значение - это проанализированное значение

Возвращаемое значение getComputedStyle равноРазобрать значение, часто так же, как в CSS2.1Рассчитаноявляются одним и тем же значением. Но для некоторых старых свойств, таких как ширина, высота, отступы, их значения сновапримененное значение.

Рассчитано: Например, если значения свойств элемента — font-size:16px и padding-top:2em, то вычисленное значение padding-top равно 32px (удвоенный размер шрифта).
примененное значение: Например: После указания позиции: абсолютная для диапазона, отображение становится блочным.

Во-вторых, значение и установленное значение не обязательно имеют один и тот же формат.
Например, если вы установите значение цвета как красный, возвращаемое значение будетrgb(255, 0, 0);
Как вы сказали, трансформируйтеtransform: translate(10px, 10px), возвращаемое значение равноmatrix(1, 0, 0, 1, 10, 10).

Второй параметр псевдоЭльт

псевдоЭльт необязательный
Задает строку псевдоэлементов для сопоставления. Должен быть опущен (или равен нулю) для обычных элементов

заключается в получениипсевдоэлементПоследние стили, наиболее распространенные: ::after, ::before, ::marker, ::line-marker.

<style>
    h3::after {
        content: "rocks!";
    }
</style>

<h3>generated content</h3>

<script>
    let h3 = document.querySelector('h3'),
    result = getComputedStyle(h3, '::after').content;
    alert(`the generated content is: ${result}`);
    console.log(`the generated content is: ${result}`);
    // the generated content is: "rocks!"
</script>

напишите в конце,getComputeStyleЭто вызовет перестройку Конечно, многие люди, получившие ширину и высоту, вызовут перестройку. Просто имейте в виду эту концепцию.

localStorage && sessionStorage

событие хранения

Вот что сказатьlocalStorage.setItem, что само по себе ни о чем не говорит. Существует соответствующийstorage事件, который может отслеживать изменения стоимости хранилища.

A.html

localStorage.setItem("data", JSON.stringify({
    a: 1,
    b: 3
}))

B.html

window.addEventListener("storage", (ev) => {
    console.log("key:", ev.key);   // key: data
    console.log("oldValue:", ev.oldValue); // oldValue: null
    console.log("newValue:", ev.newValue);  // newValue: {"a":1,"b":3}
    console.log("storageArea:", ev.storageArea); 
    // storageArea: Storage {ev: "{\"a\":1,\"b\":3}", length: 1}
    console.log("url:", ev.url); // url: http://127.0.0.1:8080/A.html
});

Скрыть две детали сверху

A.html вызывает setItem, B.html прослушивает события

Поскольку сам A.html не может отслеживать это событие

В объекте события хранилища есть свойства oldValue и newValue.

Можно сделать вывод, что установка одного и того же значения не вызовет событие.

Пусть страница setItem прослушивает событие хранилища

Принцип, переопределить событие setItem

var originalSetItem = sessionStorage.setItem;
localStorage.setItem = function (key, newValue) {
    var itemEvent = new CustomEvent("c-storage", {
        detail: {
            oldValue: localStorage.getItem(key),
            newValue,
            key,
            url: location.href
        }
    });
    window.dispatchEvent(itemEvent);
    originalSetItem.apply(this, arguments);
}

window.addEventListener("c-storage", function (ev) {
    console.log("ev", ev.detail);
}
// key: "data"
// newValue: 1624506604683
// oldValue: "1624506595323"
// url: "http://127.0.0.1:8080/LA.html"

localStorage.setItem("data", Date.now());

В IE, кажется, есть ошибка.Мониторинг изменений хранилища на той же страницеупомянул

конкретная консоль

серия консолей

Теconsole.table, console.time, console.assert0, console.count, console.groupТогда я не говорю об этом.

Просто сказать этоconsole.log
стиль определения console.log: источниккрасочный console.log

// 1. 将css样式内容放入数组
const styles = [
  'color: green', 
  'background: yellow', 
  'font-size: 30px',
  'border: 1px solid red',
  'text-shadow: 2px 2px black',
  'padding: 10px',
].join(';'); 
// 2. 利用join方法讲各项以分号连接成一串字符串
// 3. 传入styles变量
console.log('%cHello There', styles);

выход:

Серия символьных функций

метод	иллюстрировать
$_	последнее оцененное значение
$(selector)	document.querySelector
?(selector)	document.querySelectorAll
$x(path)	XPathEvaluator

$x("/html/body")

разное

getEventListeners:
Вы когда-нибудь сталкивались с необходимостью запрашивать все функции слушателя элемента, но на странице такой функции нет. Но есть консоль посмотрите на картинку

clear: очистить консоль

напиши в конце

Писать не легко, один лайк и один комментарий - моя самая большая мотивация.

Мониторинг изменений хранилища на той же странице
setTimeout
setInterval
Связь между Map и массивом
timers-and-user-prompts
красочный console.log
Порекомендуйте хорошие навыки отладки консоли