Вы ищете, с кем торговаться везде на Pinduoduo, он просит помощи в такси Didi, я до утра трахаюсь на заводе электроники, у всех у нас светлое будущее! Доброе утро, рабочие!
Краткое содержание серии опубликованных статей:
- Навыки внешнего принуждения 108 формул (1) - трудящиеся-мигранты
- Фронтальные навыки принуждения 108 формул (2) - не будем говорить о единоборствах
- Навыки внешнего принуждения 108 формул (3) - инженер вызовов API без эмоций
- Навыки загрузки фронтенда 108-стиль (четыре) - качаем вместе
клин
Как фронтовик со стальной волей, притворяться нельзя, да и притворяться в этой жизни нельзя. Если вы действительно хотите притвориться сильным, то все должны действовать сообща, ведь интерфейс должен говорить о боевых искусствах, и ему нужен сок из крысиного хвоста. Поэтому я решил записать 108 стилей навыков внешнего принуждения, чтобы вы могли хорошо провести время после еды и даже время от времени устраивать шоу, чтобы добавить красок в свою рабочую жизнь.
Как рабочий, время и энергия ограничены. В настоящее время существует всего около 50 типов набросков. Надеюсь, у вас есть хорошие знания в личном сообщении или оставить сообщение в области комментариев. Давайте притворимся и поприветствуем светлое будущее трудяга вместе!
В соответствии со стилем статьи часть справочного материала будет помечена в конце соответствующего подраздела.
Форма 1: Учитель сказал, что если ты хочешь притворяться хорошим, у тебя должны быть инструменты.
- Код слишком уродлив, на помощь приходит углерод: преобразуйте свой код в красивые картинки, которыми можно поделиться (нажмите на картинку, чтобы перейти)
Эта статья будет следоватьне заставляйте сначалапринципе, постарайтесь сократить использование этого оружия принуждения.
Вторая формула:consoleОтлаживаем панацею, учимся водить лучше
console.log()Статус в отладке передка повторять не надо.На самом деле,своим пяти кузовам тоже посвящено поколение автомобильных богов.Я вам не верю.Вставьте следующий код в консольПрисмотритесь (наггетсы не допускают стикеров 😶🌫️, если вы действительно не понимаете смысла, то рекомендуется нести в себе дух поиска знаний и расспросить коллег рядом с вами 😂):
// 在此提醒，为免于生成丑陋的锯齿背景图片，请注意空格的个数，并保证console面板的宽度。
console.log(
`%c
%c FBI WARNING %c
%c Federal Law provides severe civil and criminal penalties for
the unauthorized reproduction,distribution, or exhibition of
copyrighted motion pictures (Title 17, United States Code,
Sections 501 and 508). The Federal Bureau of Investigation
investigates allegations of criminal copyright infringement
(Title 17, United States Code, Section 506).
`,
'background: #000; font-size: 18px; font-family: monospace',
'background: #f33; font-size: 18px; font-family: monospace; color: #eee; text-shadow:0 0 1px #fff',
'background: #000; font-size: 18px; font-family: monospace',
'background: #000; font-size: 18px; font-family: monospace; color: #ddd; text-shadow:0 0 2px #fff'
);
Почему это так? предположительно вы помните на других языкахprint(). заполнительprint()эксклюзив? нет, они являютсяconsole.log()То же самое относится к:
-
%s: нить -
%d: целое -
%i: целое -
%f: число с плавающей запятой -
%o: объект объекта (DOM) -
%O: объект объекта -
%c: стиль CSS
console.log()Информацию можно обрабатывать и выводить с помощью этих уникальных заполнителей. Да, возможно, вы уже поняли, что тайна приведенного выше кода кроется в четырех%c, первый, чтобы создать таинственный и сексуальный чисто черный фон; второй, чтобы добавить красный фон к «ФБР ПРЕДУПРЕЖДЕНИЕ»; третий, чтобы восстановить чистый черный сексуальный; .
Понимая изложенные выше принципы, вы можете свободно играть, показывать свою сильную силу css и даже выводить фоновые изображения в формате gif, а также подняться на несколько этажей по пути актерского мастерства. Не устанавливайте его, я css подонок.
console.log(
'%c孤篷',
'text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);font-size:5em'
);
Итак, можем ли мы превзойти Ду Нианга и завершить доставку изысканного рекрутингового копирайтинга на консоли официального сайта?
Расширение:consoleКакие методы есть у объекта?
Использованная литература:Дневник головастика: имитация предупреждения ФБР через console.log | Using the F12 Tools Console to View Errors and Status | console.log также может проиллюстрировать! ! !
Третий стиль: лапша из гибискуса, ивовая талия, нет ничего более очаровательного - позвольте вам увидеть контур пользовательского интерфейса.
-
Где найти схему пользовательского интерфейса,
outlineсвойства вам в помощь.html * { outline: 1px solid red; }
-
Анализ и мышление
- Причина, по которой граница здесь не используется, заключается в том, что граница увеличивает размер элемента, а контур — нет;
- Этот метод может не только помочь нам быстро понять расположение элементов во время разработки, но и помочь нам легко просмотреть макет любого веб-сайта;
- Все браузеры поддерживают свойство контура: контур — это линия, нарисованная вокруг элемента по периферии края границы для выделения элемента;
- Контуры не занимают места и не должны быть прямоугольниками (например, 2D-преобразования и т. д.).
- Удалите цветные границы, когда поля ввода и другие элементы управления формой находятся в фокусе в Chrome.
input { outline: none; }
-
Открывайте и закрывайте любую веб-страницу с помощью переключателя
- Три точки в правом верхнем углу Chrome ⇒ Закладки ⇒ Менеджер закладок ⇒ Три точки в правом верхнем углу ⇒ «Добавить новую закладку»;
- Не стесняйтесь называть его, вставьте следующий код в URL-адрес;
- Затем мы можем щелкнуть закладку, которую мы только что создали на любом веб-сайте, и она определит, есть ли внутренний стиль отладки. Если он существует, удалите его, а если он не существует, добавьте его Таким образом, мы можем легко просмотреть макет любой веб-страницы с помощью этой техники.
javascript: (function () { var elements = document.body.getElementsByTagName('*'); var items = []; for (var i = 0; i < elements.length; i++) { if ( elements[i].innerHTML.indexOf('html * { outline: 1px solid red }') != -1 ) { items.push(elements[i]); } } if (items.length > 0) { for (var i = 0; i < items.length; i++) { items[i].innerHTML = ''; } } else { document.body.innerHTML += '<style>html * { outline: 1px solid red }</style>'; } })();
Использованная литература:Очень полезные советы по отладке пользовательского интерфейса
Четвертый тип: Шум углов холодный, ночь клонится к закату, а спрос меняется. Трудно, трудно, трудно! —— Преобразование типов помогает ругать продукты без ругательств и изящно хвалить себя
-
(!(~+[])+{})[--[~+""][+[]]*[~+[]]+~~!+[]]+({}+[])[[~!+[]*~+[]]]: сб -
([][[]]+[])[+!![]]+([]+{})[!+[]+!![]]: примечание -
(+!![]*([]+{})+[]+{})[+[]]+([]+{})[!+[]+!![]]: №
Иллюстрация: Буквы в строке, полученной приведением типов, собрать воедино (принцип понял, на самом деле можно попробовать написать лаконичнее)
Плагин:zhuangbility, плагин npm, который может отменять операции, вводить текст и возвращать операторы.
Пятая форма:a == 1 && a == 2 && a == 3, то можно добитьсяa === 1 && a === 2 && a === 3?
-
a == 1 && a == 2 && a == 3:// 当然，你也可以把count作为属性放在a对象上 let count = 1; let a = { valueOf: function () { return count++; }, }; console.log(a == 1 && a == 2 && a == 3); // true- Когда объект преобразует базовый тип, он вызывает метод
valueOfилиtoStringЭти два метода, возвращаемое значение метода является результатом преобразования в базовый тип - Что именно называется, зависит от встроенного
toPrimitiveрезультат вызова
- Когда объект преобразует базовый тип, он вызывает метод
-
a === 1 && a === 2 && a === 3:
let count = 1;
Object.defineProperty(window, 'a', {
get: function () {
return count++;
},
});
console.log(a === 1 && a === 2 && a === 3); // true
Object.defineProperty()Метод определяет новое свойство непосредственно в объекте или изменяет существующее свойство объекта и возвращает объект. В то же время этот API также является ядром реализации привязки данных Vue 2.x.Vue использует Proxy для его реализации после версии 3.x, которая будет кратко рассмотрена в этой серии статей.
Принцип может относиться к:[Перевод] Как в JS сделать (a===1 && a===2 && a === 3) (строгое равенство) истинным? | Подробное объяснение Object.defineProperty() | Абстрактная операция ToPrimitive в спецификации ECMAScript7
Шестой стиль: веб-компоненты, которые в последнее время были немного популярны, могут оказаться несвежим мясом
- HTML очень свободный, и браузеры также могут распознавать неправильные, недопустимые теги (элементы) (такие как
<custom-label>Web Components</custom-label>Отобразятся «Веб-компоненты». ); - Обычай, унаследованный от
HTMLElement, называемый классом пользовательского элемента; - проходить через
window.customElements.defineAPI определяет и регистрирует пользовательские элементы, чтобынезаконный ярлык(пользовательский элемент), связанный с классом пользовательского элемента, реализующийлегализация; - через тег шаблона
<template>Упростите процесс определения класса и добавьте стили; - через пользовательский элемент
attachShadow()Метод включает Shadow DOM (эта часть DOM по умолчанию изолирована от внешнего DOM, и никакой код внутри не может влиять на внешний), скрывая внутреннюю реализацию пользовательских элементов; - Добавляйте прослушиватели событий, выполняйте компонентную инкапсуляцию и т. д.
Использованная литература:Вводный пример учебника по веб-компонентам - Ruan Yifeng | Window.customElements | Web Components
Седьмой тип: настройка переменных среды Windows может быть очень простой.
Те, кто использует компьютеры с системой Windows для разработки, могут часто сталкиваться с ситуациями, когда им необходимо вручную установить переменные среды.На самом деле установка переменных среды также может быть очень простой:
```sh
# 查看当前所有可用的环境变量
set
# 查看某个环境变量：查看path变量的值
set path
# 修改环境变量（注意：这里是覆盖）
set 变量名=变量内容
# 设置为空
set 变量名=
# 给变量追加内容（%变量名%;代表以前的值）
set 变量名=%变量名%;变量内容
# 将C:\Go\bin\添加到path中
set path=%path%;C:\Go\bin\
```
Использованная литература:Windows использует командную строку cmd для просмотра, изменения, удаления и добавления переменных среды.
Восьмой тип:1.toFixed(),1.0.toFixed()а также1..toFixed(), какое написание правильное?
в числовых литералах,1.xxxxxТакой синтаксис представляет собой нотацию с плавающей запятой. так1.toFixed()Такой синтаксис сообщит об ошибке в JavaScript, и ошибка возникает из-за буквального синтаксического анализа чисел с плавающей запятой, а не из-за обработки «. как оператора доступа». В JavaScript числа с плавающей запятой допускают значение null, поэтому «1» и «1.0» будут проанализированы как одно и то же число с плавающей запятой. Итак, будет:
1 === 1; // true
1 === 1.0; // true
1 === 1.0; // true
1; // 1
1.0; // 1
Поскольку "1." представляет число с плавающей запятой, то "1..toFixed" представляет свойство ".toFixed" литерала числа с плавающей запятой. Когда это числовой литерал, вы можете использовать что-то вродеNumber(1).toFixed()Создайте базовый тип оболочки (явная упаковка), затем вы можете добавлять и читать свойства и методы (или вы можете использовать круглые скобки для заключения литералов, чтобы сообщить движку браузера, что это целое).
- Упаковка: операция преобразования базового типа данных в соответствующий ссылочный тип (упаковка далее делится на неявную упаковку и явную упаковку);
- Распаковка: преобразование ссылочных типов в примитивные типы данных.
Базовые типы не могут иметь атрибутов и методов, при добавлении к ним атрибутов система автоматически обернет класс и уничтожит его:
var num = 1;
num.len = 2;
//上一行代码会产生如下过程：
// new Number(1).len =2;
// delete len;
// 也就是会先添加len属性，当前语句执行结束后即销毁，所以下一行打印num还是1，没有len属性。
console.log(num, num.len); //1 undefined
var num = new Number(1);
num.len = 2;
console.log(num); // Number {1, len: 2}
Справочное расширение:Расскажите о упаковке и распаковке в JavaScript
Девятый тип: typeof ненадежен, как мы можем судить о типе?
-
typeofСмерть: Мы все должны знать, что использованиеtypeofможет точно определитьnullкроме основных типов, иfunction,symbolТипы;nullБудетtypeofсудить какobject.- В исходной реализации JavaScript значение в JavaScript было представлено тегом, представляющим тип и фактическое значение данных. Метка типа объекта равна 0. Поскольку null представляет нулевой указатель (0x00 на большинстве платформ), метка типа null равна 0, а typeof null также возвращает «object»;
- До ES 6 typeof всегда гарантировал возврат строки для любого заданного операнда. typeof может возвращать 'undefined' даже для необъявленных идентификаторов. Использование typeof никогда не выдает ошибку. Но после добавления блочной области видимости let и const использование typeof для переменных let и const в блоке до их объявления вызывает ReferenceError. Переменные области блока находятся в «мертвой зоне» в начале блока до тех пор, пока они не будут инициализированы, в течение которых доступ к переменной вызовет ошибку.
-
В прошлом его часто использовали для оценки массивов.
instanceofКак это работает: используйтеa instanceof BСуждение состоит в том, является ли a экземпляром B, то есть есть ли конструктор B в цепочке прототипов a (после ES6 его можно передать черезArray.isArray()чтобы определить, является ли это массивом).// L 表示左表达式，R 表示右表达式 const customInstanceof = (L, R) => { if (typeof L !== 'object') return false; while (true) { // 已经遍历到了最顶端 if (L === null) return false; // 利用原型链进行判断 if (R.prototype === L.__proto__) return true; L = L.__proto__; } }; customInstanceof([], Array); // true -
Почему конструктор не наш выбор?
- свойство конструктора может быть изменено, это приведет к обнаружению некорректных результатов;
- Кроме
undefinedа такжеnull, можно использовать другие типы переменныхconstructorОпределите тип.let bool = true; bool.constructor == Boolean; //true let num1 = 1; num1.constructor == Number; //true let num2 = new Number(); num2.constructor == Number; //true // constructor属性是可以被修改的 num2.constructor = Object; num2.constructor == Number; //false let str = 'hello world'; str.constructor == String; //true
-
Object.prototype.toString настолько универсален?
Object.prototype.toString.call(123); //"[object Number]" Object.prototype.toString.call('str'); //"[object String]" Object.prototype.toString.call(true); //"[object Boolean]" Object.prototype.toString.call({}); //"[object Object]" Object.prototype.toString.call([]); //"[object Array]" // 定义getType方法，用来判断类型 getType = (obj) => { return Object.prototype.toString.call(obj).slice(8, -1); }; getType(12n); // BigInt getType(Symbol()); // Symbol getType(() => {}); // Function getType(); // Undefined getType(null); // Null getType(NaN); // Number
Ссылка на данные:typeof | История «типа null»
Десятая формула: десятичное и двоичное преобразование действительно не должно быть таким хлопотным
- использовать
NumberObject.toString(radix)Преобразование десятичного числа в двоичное:// 如有补齐位数的需求，可通过判断返回值的长度在前面加0 let num = 10; console.log(num.toString(2)); // 1010 - использовать
parseInt(string, radix);Преобразование двоичного в десятичное:let num = 1010101; console.log(parseInt(num, 2)); // 85 - Советы: поскольку приведенный выше код использует let для определения переменной num, кроме обновления страницы, как выполнить ее отдельно в консоли? Просто поместите код между парой фигурных скобок (область блока).
Формула 11: Как сравнить размер строк положительных целых чисел без сложения, вычитания, умножения и деления?
В некоторых проектах, которые я взял на себя, возникла ситуация, в которой требовалось сплайсинг операторов запроса Elasticsearch. Наконец-то я немного изучил Elasticsearch, но обнаружил, что проблема не так проста: количество и количество range query Вы мне сказали, что хранимая строка есть? Это произойдет1<3000<5Случай? Боже, не смейся надо мной, ладно?
Итак, не меняя ЭС, какРеализовать сравнение размера положительной целочисленной строки с помощью обычного запросаШерстяная ткань? Давайте поговорим о самой идее напрямую: цифр больше или соотношение начинается со старшей позиции, чем больше значение, тем больше число оставить сообщение или личное сообщение].
// 通过正则表达式从字符串数组中筛选出大于某个数值的字符串类型数据
const filterStrNumberByRegExp = (num, arr) => {
const strBaseNumber = num.toString();
const arrBaseNumber = strBaseNumber.split('');
const len = strBaseNumber.length;
// 生成正则：数位更多或者从高位开始比，数值更大
let strRegExp = `\\d{${len + 1}}`;
arrBaseNumber.map((item, index) => {
// 这里因为有位数限制，'^'和'$'不是必须的，可以去除
strRegExp += `|${strBaseNumber.substring(index, -1) || '^'}[${
+item + 1
}-9]\\d{${len - index - 1}}$`;
});
// 丢给ES进行查询时，貌似不可使用\d（可用[0-9]替代）、开头、结尾匹配等字符，上面四行可用下面注释内容替换
//let strRegExp = `[0-9]{${len+1}}`;
//arrBaseNumber.map((item, index) => {
// strRegExp += `|${strBaseNumber.substring(index,-1) || ''}[${+item + 1}-9][0-9]{${len - index - 1}}`
//});
const regExp = new RegExp(strRegExp);
// 丢给ES进行正则查询时使用strRegExp结果
console.log(regExp, strRegExp);
return arr.filter((item) => {
// 小于等于判断的话，这里取反或者自行修改正则
if (regExp.test(item)) return true;
});
};
filterStrNumberByRegExp(386, [
'12',
'334',
'556',
'1122',
'5546',
'234',
'388',
'387',
'1234',
'386',
'385',
]); // ["556", "1122", "5546", "388", "387", "1234"]
Подробная реализация общедоступного метода поиска на странице списка Elasticsearch позволяет просматривать моиэтоПримечания.
Тип 12: Как заставить страницу говорить с вами? - TTS (преобразование текста в речь)
В проекте необходимо транслировать сообщение, возвращаемое ajax-запросом, а str — это транслируемая информация (подходит для таких сценариев, как голосовые подсказки сообщений об ошибках):
//语音播报
function voiceAnnouncements(str) {
// 百度语音合成：或者使用新版地址https://tsn.baidu.com/text2audio
var url =
'http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=5&text=' +
encodeURI(str);
var n = new Audio(url);
n.src = url;
n.play();
}
voiceAnnouncements(`
秋名山上路人稀，常有车手较高低；
如今车道依旧在，不见当年老司机。
司机车技今尚好，前端群里不寂寥；
向天再借五百年，誓言各行领风骚。
`);
// 尝试了一些换女声的方式，但是，都失败了。。。
voiceAnnouncements(`
哇，代码写的真棒，你可真秀哇！
`);
-
Объяснение параметра:
- lan: фиксированное значение zh. Выбор языка, в настоящее время только китайский и английский смешанный режим, заполните фиксированное значение zh
- то есть: метод кодирования
- spd: скорость разговора, значение от 0 до 9, по умолчанию 5 скорость разговора на китайском языке
- text: Синтезированный текст, закодированный в UTF-8. Менее 512 китайских символов или английских цифр. (После преобразования текста в GBK на сервере Baidu длина должна быть меньше 1024 байт)
-
Управляйте своим сайтом с помощью голосаannyang: крошечная библиотека распознавания речи JavaScript, которая позволяет вашим пользователям управлять вашим сайтом с помощью голосовых команд. annyang не имеет зависимостей, весит всего 2 КБ и может свободно использоваться и изменяться в соответствии с лицензией MIT.
Тип 13. Что делать, если событие не в фокусе конфликтует с событием клика?
-
Сцены:
- Размытие раскрывающегося списка конфликтует с кликом;
- Размытие поля ввода конфликтует с интерактивным плавающим и опускающимся щелчком ниже: плавающий слой появляется ниже при вводе значения, а когда поле ввода теряет фокус, плавающий слой скрывается; щелчок по записи плавающего слоя запускает поиск и скрывает плавающий слой;
- Проблема: при щелчке по плавающему слою из-за того, что событие вне фокуса запускается первым, выполняется скрытая логика плавающего слоя, поэтому логика события onClick плавающего слоя не может быть выполнена.
// 点击弹窗条目进行搜索
handleSearch = (activeSearch) => {
console.log(activeSearch);
this.setState({ visible: false });
}
// 获得焦点，有值时展示弹窗
onFocus = () => {
if (this.state.keyword) {
this.setState({ visible: true });
}
}
// 输入且有值时展示弹窗
onChange = (e) => {
this.setState({
keyword: e.target.value,
visible: !!e.target.value
})
}
// 失去焦点隐藏弹窗
onBlur = () => {
if (this.state.keyword) {
this.setState({ visible: false });
}
}
render() {
const { keyword, visible } = this.state;
return (
<div>
<Input
allowClear
addonBefore={<Icon type="user" />}
placeholder="支持ID、名称、主邮箱、客户经理、专属账户、客户ID、GroupID搜索"
style={ { width: 460 } }
onFocus={this.onFocus}
onChange={this.onChange}
onBlur={this.onBlur}
/>
{
// 展示弹窗（点击条目完成搜索）
visible && keyword && <div className={styles.SearchSelect}>
{
showOptions.map(item => (
<div
onClick={() => this.handleSearch(item)}
className={styles.item}
key={item.key}
>
<div>
{item.label}：{keyword}
</div>
</div>
))
}
</div>
}
</div>
);
}
-
решить:
-
Способ 1. Установите отложенный триггер для события не в фокусе.
onBlur = () => { if (this.state.keyword) { setTimeout(() => { this.setState({ visible: false }); }, 300); } }; -
Способ 2: используйте onMouseDown вместо onClick
- Событие mousedown: событие mousedown происходит, когда указатель мыши перемещается по элементу и нажимается кнопка мыши, поэтому оно выполняется до события расфокусировки.
- Событие mouseup: Событие mouseup происходит, когда кнопка мыши отпускается на элементе.
-
Уравнение 14: Как складывать без сложения, вычитания, умножения и деления — побитовые операции делают ваш код более эффективным
-
Побитовые операторы JavaScript
Битовая операция основана на двоичном коде, как быстро получить двоичный файл можно обратиться к десятой формуле.
-
Сложение без сложения, вычитания, умножения и деления
function add(a, b) { let sum; let add1; while (b != 0) { // 异或 sum = a ^ b; // 与 左移 add1 = (a & b) << 1; a = sum; b = add1; } return a; } -
Магия побитовых операторов JS:
-
использовать
&оператор для определения четности числа (только помните, что 0 и 1 идут с 1&Результат операции может быть):偶数 & 1 = 0奇数 & 1 = 1
-
использовать
~~，>>,<<,>>>,|округлить:-
~~Math.PI: 3 (побитовое инвертирование и затем инвертирование) -
Math.PI>>0,Math.PI<<0,Math.PI>>>0: 3 (побитовый сдвиг влево или вправо на 0 бит,>>>Недоступно для отрицательных чисел) -
Math.PI|0: 3, побитовое исключающее ИЛИ
-
-
использовать
<<,>>для вычисления умножения и деления:- Сдвиг целого числа влево на n бит эквивалентен умножению на 2 в степени n;
- Сдвиг вправо эквивалентен делению на 2 в n-й степени и округлению в меньшую сторону.
-
использовать
^сравнить два числа на равенство:!(a ^ b) -
использовать
^Чтобы завершить обмен ценностями: см. уравнение 15. -
использовать
&,>>,|для завершения преобразования между значениями RGB и шестнадцатеричными значениями цвета-
Преобразование шестнадцатеричного значения цвета в RGB:
function hexToRGB(hex) { hex = hex.replace('#', '0x'); let r = hex >> 16; let g = (hex >> 8) & 0xff; let b = hex & 0xff; return 'rgb(' + r + ',' + g + ',' + b + ')'; } hexToRGB('#cccccc'); // rgb(204,204,204) -
RGB в шестнадцатеричное значение цвета:
function RGBToHex(rgb) { let rgbArr = rgb.split(/[^\d]+/); let color = (rgbArr[1] << 16) | (rgbArr[2] << 8) | rgbArr[3]; return '#' + color.toString(16); } RGBToHex('rgb(204,204,204)'); // #cccccc
-
-
Использованная литература:Побитовые операторы JavaScript
Пятнадцатый тип: скучные головоломки, N способов поменять местами значения двух переменных a и b без помощи третьей переменной
-
Способ 1: сложение и вычитание
a = a + b; b = a - b; a = a - b; -
Способ 2: битовые операции
a ^= b; b ^= a; a ^= b; -
Способ 3: объект или массив
a = { a, b }; b = a.a; a = a.b; // a = [a, b]; // b = a[0]; // a = a[1]; -
Метод 4: назначение деструктуризации ES 6
[a, b] = [b, a]; -
Сценарий 5: приоритет оператора
a = [b, (b = a)][0];
Использованная литература:Поменять местами значения двух переменных a,b без третьей переменной
Тип 16: Как открыть и управлять другой вкладкой на текущей странице браузера
if (window.customeWindow) {
window.customeWindow.close();
}
window.customeWindow = window.open();
window.customeWindow.document.write('<p style="color:red">写点什么呢？<p>');
window.customeWindow.document.write(
'<p style="color:#cccccc">想写什么就写什么。<p>'
);
window.customeWindow.document.write('再追加点别的。');
window.customeWindow.document.close(); // 连续追加输入结束
window.customeWindow.document.write('哈哈，现在页面上就只有我了！');
window.customeWindow.document.write('<p style="color:red">不，还有我！<p>');
Использованная литература:BRAFT EDITOR Предварительный просмотр редактора форматированного текста
Тип 17: Говорят, что продукты сортируются в китайском пиньинь по порядку?
- использовать
stringObject.localeCompare(target)Метод реализует сортировку китайского языка по порядку пиньинь.
var array = ['上海', '北京', '杭州', '广东', '深圳', '西安'];
// localeCompare() 方法返回一个数字来指示一个参考字符串是否在排序顺序前面或之后或与给定字符串相同。
array = array.sort((item1, item2) => item1.localeCompare(item2));
// ["北京", "广东", "杭州", "上海", "深圳", "西安"]
Использованная литература:String.prototype.localeCompare()
- массив объектов, отсортированных по другому массиву
sortFunc = (propName, referArr) => (prev, next) =>
referArr.indexOf(prev[propName]) - referArr.indexOf(next[propName]);
// 按照年龄age的顺序给person排序
const age = [33, 11, 55, 22, 66];
const person = [
{ age: 55, weight: 50 },
{ age: 22, weight: 42 },
{ age: 11, weight: 15 },
{ age: 66, weight: 56 },
{ age: 33, weight: 68 },
];
person.sort(sortFunc('age', age));
// 结果：
// [
// {"age": 33,"weight": 68},
// {"age": 11,"weight": 15},
// {"age": 55,"weight": 50},
// {"age": 22,"weight": 42},
// {"age": 66,"weight": 56}
// ]
Тип 18: Почему этот код сообщает об ошибке?Можно ли опустить точку с запятой?
console.log(123)[(12, 2)].filter((item) => item > 3);
// Uncaught TypeError: Cannot read property '2' of undefined
// at <anonymous>:2:1
- Вывод точки с запятой: вывод точки с запятой в принципе компиляции используется, чтобы позволить программистам опускать ненужные точки с запятой при программировании;
- JavaScript имеет механизм автоматической вставки точки с запятой (Automatic Semicolon Insertion), называемый ASI (ASI означает только то, что компилятор правильно понимает намерение программиста и на самом деле не вставляет точку с запятой);
- Анализатор движка браузера (отвечающий за преобразование исходного кода JS в AST) всегда предпочтительно анализирует поток символов до и после новой строки как оператор (многострочные комментарии с новой строкой эквивалентны новой строке);
- Итак, в глазах Parser приведенный выше код выглядит так:
-
console.log(123)[12,2].filter(item => item > 3),console.log(123)нет возвращаемого значения, ниundefined; -
[12,2]Квадратные скобки в считаются читаемымиconsole.log(123)Свойства в возвращаемом значении2, аналогично выбору элементов массива на основе индексов; - зачем брать атрибут
2Ну, потому что12,2Является выражением с запятой, значением выражения является самая правая "2", поэтому приведенное выше сообщение об ошибке легко понять.
-
- Точки с запятой, которые нельзя опускать:
- Точка с запятой в начале цикла for
- Точка с запятой, существующая как пустой оператор
- к
[、(、+、-、和/Точка с запятой перед оператором, начинающимся с пяти символов
Ссылка на данные:Самостоятельное изготовление запаски - интересный разговор об ASI (автоматической вставке точки с запятой) в JavaScript
Эта статья была опубликована вличный блог,Добро пожаловатьКоррекция и звезда.