Предисловие:
С быстрым развитием фронтенд-рынка сегодняшний рынок ищет не только маленьких мальчиков и девочек, которые могут вырезать картинки, но также должен по-настоящему понимать нативные замыкания js, наследование, цепочку прототипов, узел и бога, который знаком с исходным кодом, то мы не можем отставать от великих богов, закатываем рукава и снова берем нативный js!
Ниже приводится личное резюме, и некоторые из них - боги копирования. Сейчас они собраны для дальнейшего использования (что-то не так, я надеюсь, что все смогут это сделать, и я исправлю это как можно скорее).
1.!!Принудительно преобразовать логическое значениеboolean
Оценка в соответствии с тем, является ли значение, которое необходимо оценить, истинным значением или ложным значением, и истинное значение возвращается
true, возвращает ложьfalse, то в этом случае, кроме ложных значений, остальные тоже являются истинными значениями.
假值有：
0 、 “” 、 null 、 undefined 、 false 、NaN、
** За исключением этих 6, все остальные являются "истинными", включая объекты, массивы, регулярки, функции и т. д.
Примечание. '0', 'null', 'false', {}, [] также являются истинными значениями. **
Итак, давайте посмотрим, как преобразовывать логические значения.
Например:
Сначала мы объявляем 3 переменные,xдляnull,yэто пустая строка,strЧто касается строк, давайте посмотрим, что произойдет, если они добавят «!!».
var x=null;
var y="";
var str="abcd";
console.log(!!x) // false;
console.log(!!y) // false;
console.log(!!str) // true;
Как упоминалось выше, возвращается ложное значениеfalseвозвращается правдаtrue.
Во-вторых, числовая строкаstrпринудительный переводNumber
Приведение здесь для числовых строк, например:
"22","6", вы можете напрямую использовать следующий метод, чтобы напрямую использовать метод операции для преобразования,nullМожет участвовать в расчете, когда рассчитывается времяnullбудет преобразован в0, а затем выполните операцию.
- добавить строку
+, можно заставитьnumber, Давайте попробуем вместе!
var str="88";
console.log(+str) // 88
//但是如果是混合类型的字符串，则会转为NaN
+"1606e" ; // NaN
+ null ; // 0
- Вычесть число из строки
"11" - 1 ; // 10
null - 1 ; // -1
- Умножить строку на число
"111" * 1 ; // 111
null * 1 ; // 0
- Строка разделена на номер
"111" / 1 ; // 111
null / 1 ; // 0
Его также можно использовать для оценки:
if(toString.call(str*1)==[object Number]){
dosomething..
}
3. Ненадежныйundefinedнадежныйvoid 0
существуетJavaScript, предположим, мы хотим определить, является лиundefined, то обычно пишут:
if(a === undefined){
dosomething.....
}
Но когдаjavascriptсередина,undefinedненадеженНапример:
когдаundefinedбыл помещен вfunctionВнутри функции мы рассматриваем ее как локальную переменную, которой можно присвоить значение, попробуем.
function foo2(){
var undefined=1;
console.log(undefined)
}
foo2(); // 1;
Но когда глобальная переменная определена внутри функции, ей нельзя присвоить значение.
var undefined;
function foo2(){
undefined=1;
console.log(undefined)
}
foo2() // undefined
Тогда давайте попробуемvoid 0 илиvoid (0)вместо:
Сначала объявить переменнуюa, назначенный какundefined, то используемvoid 0судить.
var a=undefined;
//用void 0来判断一下
if(a===void 0){
console.log('true')
} // true
//再用void (0)来判断一下
if(a===void (0)){
console.log('true')
} // true
//最后我们打印一下这两个的返回值
console.log(void 0,void (0)) // undefined undefined
теперь мы можем пройти
void 0операция по получениюundefined; Необходимо определить значение послеundefined, вы можете напрямую использоватьvoid 0илиvoid (0), а прямое возвращаемое значение этих двух значений не определено, так что это очень надежно!
В-четвертых, есть также строкиlengthатрибут!
мы знаем все
Arrayу всех естьlengthатрибут, даже если это пустой массив, тоlengthЕсли это 0, то есть ли оно в строке? Далее давайте проверим это.
var str="sdfsd5565s6dfsd65sd6+d5fd5";
console.log(str.length) // 26
Результат — да, поэтому, когда мы судим о типе, мы не можем просто взять, существует лиlengthАтрибут, чтобы определить, является ли это массивом, мы можем использовать следующий метод, чтобы определить, является ли это массивом:
var obj=[1,2] ;
console.log(toString.call(obj) === '[object Array]');
5. Как создать случайный массив или перемешать существующий массив?
Иногда нам нужен случайный перетасованный массив в проекте, поэтому давайте реализуем следующее:Сначала создайте массив:
var arr=[];
for(var i=0;i<10;i++){
arr.push(i)
}
console.log(arr) // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
Далее давайте зашифруем это:
arr.sort(()=>{
return Math.random() - 0.5
}) // [1, 0, 2, 3, 4, 6, 8, 5, 7, 9]
Второй метод скремблирования:
arr.sort((a,b)=>{
return a>Math.random()*10;
}) // [1, 2, 0, 6, 4, 3, 8, 9, 7, 5]
Наша предыдущая нормальная сортировка была такой:
arr.sort(function(a,b){
return b-a
});
Разобрать:
Сначала поговорим об обычной сортировке:
a,bпредставляет любые два элемента в массиве, еслиreturn > 0 ,bвпередaпосле; еслиreutrn < 0ноaвпередbпосле; когдаa=b, есть совместимость с браузерами;a-bВывод сортируется от меньшего к большему,b-aВыход отсортирован от наибольшей до самой маленькой.Тогда давайте поговорим о том, как мы боремся:
Излишне говорить, что следующим шагом для создания массива является использованиеjsизsortметод достижения,Math.random()реализовать случайный0-1между десятичными знаками, а затем вычесть0.5На этот раз будет основаноreturnЗначения, полученные после сравнения, сортированы, поэтому он будет генерировать своего рода, которое не является нормальным от большого до небольшого или от маленьких до крупных.
Второй метод разрушения также следует следоватьsortметод, будетa,bПередайте его, а затем сравните со случайным числом.Метод сравнения не очень ясен.
6. Удалите все пробелы до и после, до и после
Это набор методов, специально написанных для удаления пробелов, подходящих для различных ситуаций, всех пробелов, пробелов до и после, пробелов до, пробелов после.
var strr=" 1 ad dertasdf sdfASDFDF DFG SDFG "
// type 1-所有空格，2-前后空格，3-前空格，4-后空格
function trim(str,type){
switch (type){
case 1:return str.replace(/\s+/g,"");
case 2:return str.replace(/(^\s*)|(\s*$)/g, "");
case 3:return str.replace(/(^\s*)/g, "");
case 4:return str.replace(/(\s*$)/g, "");
default:return str;
}
}
console.log( trim(strr,1)) // "1addertasdfsdfASDFDFDFGSDFG"
Разобрать:
\s ： 空格符，Tab,换页符，换行符
\S ： 非\s的所有内容
/g : 全局匹配
^ : 匹配在行首
$ : 匹配在行尾
+ ： 重复次数>0
* ： 重复次数>=0
| : 或者
replace(a,b): метод используется для замены одних символов другими символами при создании персонажа, он будет передавать два значения, значение до запятой будетaзаменить на значение после запятойb.
Если вам нужно только удалить пробелы до и после, вы можете напрямую использовать метод js trim():
let str = " abcd ";
str.trim() // "abcd"
Что касается регулярного сопоставления, у меня есть статья, посвященная знакомству с,портал
Семь, переключение буквенного случая (регулярное сопоставление,replace)
Этот метод в основном предназначен для некоторых методов, которые требуют преобразования регистра, в основном включая заглавную букву первой буквы, строчную букву первой буквы, преобразование регистра, все в верхний регистр и все в нижний регистр.
type：
1:首字母大写
2：首页母小写
3：大小写转换
4：全部大写
5：全部小写
необработанная строка:
var str="sdfwwerasfddffddeerAasdgFegqer";
function changeCase(str,type) {
//这个函数是第三个大小写转换的方法
function ToggleCase(str) {
var itemText = ""
str.split("").forEach(
function (item) {
// 判断循环字符串中每个字符是否以a-z之间开头的并且重复大于0次
if (/^([a-z]+)/.test(item)) {
// 如果是小写，转换成大写
itemText += item.toUpperCase();
}
// 判断循环字符串中每个字符是否以A-Z之间开头的并且重复大于0次
else if (/^([A-Z]+)/.test(item)) {
// 如果是大写，转换成小写
itemText += item.toLowerCase();
}
else{
// 如果都不符合，返回其本身
itemText += item;
}
});
return itemText;
}
//下面主要根据传入的type值来匹配各个场景
switch (type) {
//当匹配
case 1:
return str.replace(/^(\w)(\w+)/, function (v, v1, v2) {
//v=验证本身 v1=s ; v2=dfwwerasfddffddeerAasdgFegqer
return v1.toUpperCase() + v2.toLowerCase();
});
case 2:
return str.replace(/^(\w)(\w+)/, function (v, v1, v2) {
//v=验证本身 v1=s ; v2=dfwwerasfddffddeerAasdgFegqer
return v1.toLowerCase() + v2.toUpperCase();
});
case 3:
return ToggleCase(str);
case 4:
return str.toUpperCase();
case 5:
return str.toLowerCase();
default:
return str;
}
}
console.log(changeCase(str,1)) //SdfwwerasfddffddeerAasdgFegqer
Разобрать:
split：用于把一个字符串分割成字符串数组
\w: 数字0-9或字母a-z及A-Z,或下划线
\W: 非\w，除以上的特殊符号等
toUpperCase：转大写
toLowerCase：转小写
replace第二个参数可以是函数，函数的参数中，第一个是本身，第二个是正则匹配内容，第三个匹配剩下的内容
Вторым параметром replace может быть функция, среди параметров функции первый — это она сама, второй — обычное совпадающее содержимое, а третий — оставшееся содержимое.
Давайте проверим это с помощью небольшого эксперимента:
8. Сохраняйте объекты для sessionStorage
// bad：
let obj={
hellow:world
};
let str=JSON.Stringify(obj);
存：
sessionStorage.setItem("Param",str);
取：
let get_data=JSON.parse(sessionStorage.getItem("Param")).hellow // world
-------------------
// good：
存：
sessionStorage.setItem("Param",JSON.stringify({Hellow:world}));
取：
JSON.parse(sessionStorage.getItem("Param")).Hellow // world
9. Время выполнения консольной печати
Иногда нам нужно сравнить эффективность выполнения двух методов или проверить время выполнения метода, тогда мы можем использовать следующий метод в качестве метода мониторинга.
console.time("开始时间：")
// 中间放你想执行的方法
console.timeEnd("结束时间：")
10. Изучите знак двойного равенства "==" и тождество "==="
==а также===Операторы используются для сравнения двух значений на равенство, разумеется, у них разные определения равенства. Оба оператора допускают операнды любого типа и возвращают значение, если операнды равны.true, иначе возвратfalse. Что о==а также===какие отличия есть? Давайте исследовать вместе.
Ссылка: Полное руководство
'===' личность
===Оператор строгого равенства, который сначала оценивает значение своих операндов, а затем сравнивает два значения без какого-либо преобразования типов:
- если дване тот тип, они не равны.
例如：`1 === 'true' // false`
- если оба значения
nullили обаundefined, они равны.
例如：
null === undefined // false
null === null // true
undefined === undefined // true
- если оба значения логические
trueили обаfalse, они равны.
例如：true === true // true
- если одно из значений
NaN, либо оба значенияNaN, они не равны. (NaNне равно никакому другому значению, в том числе самому себе. пройти черезx!==xсудитьxЭтоNaN,только вxдляNaN, значение этого выражения равноtrue)
例如：NaN === NaN // false
NaN !== NaN // true
- если дваСсылочное значение указывает на тот же объект, массив или функцию, они равны. Если они указывают на разные объекты, они не равны, даже если эти два объекта имеют совершенно одинаковые свойства.
例如：var obj = {};
obj === obj ; // true
var obj1 = {a:1};
var obj2 = {a:1};
obj1 === obj2； // false
- Если два типа значений равны и значения не равны, то они не равны.
例如：true === false; // false
"1" === "8" // false
...
- Если два значения равны и их типы равны, то они равны.
例如: "1"==="1"; // true
8 === 8; // true
"true" === "true"; // true
false === false;
undefined === undefined; // true
null === null; // true
...
'==' равно
Оператор равенства "==" похож на оператор тождества, но оператор равенства, но сравнение не является строгим. Если два операнда относятся к разным типам, оператор равенства пытается выполнить некоторое преобразование типов, а затем сравнивает их.
- Два типа значений не равны, если они различаются по значению.
例如："1" == "3"; // false
"true" == "false"; // false
false == true // false
...
- Если одно значение равно null, а одно значение не определено, они равны.
例如： null == undefined // true
- Если одно из них является логическим, преобразуйте его в число, true в 1, false в 0, а затем сравните.
例如：1 == true; // true
false == 0 // true
true == false // false
- Если одно из них является числом, а другое — строкой, сначала преобразуйте строку в число, а затем используйте преобразованное значение для сравнения.
例如：1 == "1" // true
"500" == 800 // false
- Если одно значение является объектом, а другое числом или строкой, вам необходимо преобразовать объект в примитивное значение (с помощью toString() или valueOf(). Встроенные классы в js сначала пытаются использовать valueOf(), затем toString () , за исключением класса Date, который просто использует toString() ) перед сравнением.
var obj ={a:"b"};
obj.toString(); // "[object Object]"
1 == obj; // false
- Два объекта не равны, если они одного типа, но имеют разные ссылочные адреса.
例如：[] == [] // false
{} == {} // false
Вот интересный вопрос интервью:
例如： [] == ![] // true 这个为什么是true呢？
是因为 “！”的优先级大于 “ == ” ，所以先算右边，![] 结果为 false,
[] == ![] 等同于=> [] == false ;
如果一个值是对象，另一个值是数字或字符串，则需将对象转换为原始值，再比较：
[].toString() => ''
[] == false 等同于=> "" == false
再进行类型转换，转为数字：
"" == false 等同于=> 0 == 0
此时类型相同，比较值：
0 == 0 // true
值相等，所以结果为true
Несколько заметок:
1. Во-первых, сначала будет выполнено суждение о типе, и тот же тип будет напрямую сравнивать значение
2.обращать внимание:undefinedа такжеnullравный
3. Оценка типа значения, если нетobject, все преобразовано вnumber, а затем сравните значения,
Примечание. Все ложные значения преобразуются в0, правда превращается в1
Компоненты строки XI URI как кодирование, декодирование
-
encodeURIComponent()Функция как строка закодирована компонент URI.
encodeURIComponent("中文")
// "%E4%B8%AD%E6%96%87"
-
decodeURIComponent()функция можетencodeURIComponentЗакодированные данные закодированы
decodeURIComponent("%E4%B8%AD%E6%96%87")
// "中文"
12. uuid генерирует случайные строки (случайные строки, более совершенные, чем случайные числа)
Обычно, когда мы используем случайные числа, мы можем думать о следующем:
Math.random() ⇨ 0.3920174387754096
Сегодня я рекомендую высокоуровневый метод генерации случайных строк:UUID
UUIDуниверсальный уникальный идентификатор (Universally Unique Identifier), является стандартом построения программного обеспечения, а также является частью Open Software Foundation в области распределенных вычислительных сред. Его цель - позволить всем элементам в распределенной системе иметь уникальную идентификационную информацию, и нет необходимости указывать идентификационную информацию через центральный терминал управления. Таким образом, каждый может создавать UUID, которые не конфликтуют ни с кем другим. В таком случае нет необходимости рассматривать проблему дублирования имен при создании базы данных.
UUIDсостоит из группы32цифра16состоит из шестнадцатеричных чисел, поэтомуUUIDТеоретическая сумма16^32=2^128, примерно равно 3,4 х 10^38. То есть, если 1 триллион генерируется каждую наносекундуUUID,Потребуется 10 миллиардов лет, чтобы израсходовать все UUID.
Стандартная форма UUID содержит 32 шестнадцатеричных цифры, разделенных дефисами на пять сегментов, и 32 символа в виде 8-4-4-4-12.
Пример:
550e8400-e29b-41d4-a716-446655440000
Как импортировать онлайн:
Рекомендуемая версия 4:
<script src="http://wzrd.in/standalone/uuid%2Fv4@latest"></script>
<script>
uuidv4(); // ⇨ v4 UUID
</script>
Рекомендуемая версия 5:
<script src="http://wzrd.in/standalone/uuid%2Fv5@latest"></script>
<script>
uuidv5('http://example.com/hello', uuidv5.URL); // ⇨ v5 UUID
</script>
метод загрузки npm:
npm install uuid
Внедрить по запросу в соответствии с номером версии:
<!--版本4-->
const uuidv4 = require('uuid/v4');
uuidv4(); // ⇨ '10ba038e-48da-487b-96e8-8d3b99b6d18a'
Тринадцать, clipboard.js: функция копирования текста
Еще одна рекомендуемая функция для использования сегодня — это наша репликация, которая не зависит от
flash, не зависит от других фреймворков,gzipТолько после сжатия3kbразмер
Адрес официального сайта ClipboardJS
1. Копировать
Копировать: очень распространенный вариант использования — копирование контента из другого элемента. Вы можете добавить
data-clipboard-targetсвойства для достижения этой функциональности. Значение этого атрибута является селектором, который соответствует другому элементу.
- третья сторона
CDNМетод импорта:адрес
Ниже представлена упрощенная версия оригиналаhtmlКак использовать сцену
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
</head>
<body>
<script>
new ClipboardJS('.btn');
</script>
<input id="foo" value="我是内容5555" style='width:300px'>
<button class="btn" data-clipboard-target="#foo">按钮按钮</button>
</body>
</html>
-
npmСпособ загрузки:
npm install clipboard --save
Ниже приведенreactКак использовать компонент:
import React, { useEffect } from 'react';
import ClipboardJS from 'clipboard'
const App = () => {
useEffect(() => {
const clipboard = new ClipboardJS('.btn')
// 这里是在组件销毁的时候把 clipboard 销毁
return () => clipboard.destroy()
}, [])
return (
<>
<input id="copy-text" value={'内容'} />
<button className="btn" data-clipboard-target="#copy-text">复制</button>
</>
)
}
export default App;
2. Вырезать
Вырезать: вы можете определить
data-clipboard-action='cut'свойство, чтобы указать, хотите ли вы копировать или вырезать содержимое, используйте его следующим образом:
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
</head>
<body>
<script>
new ClipboardJS('.btn');
</script>
<input id="foo" value="我是内容5555" style='width:300px'>
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#foo">按钮按钮</button>
</body>
</html>
3. Скопируйте текст из атрибута
Копирование текста из атрибута просто означает, что вам не нужно копировать из другого элемента, вам просто нужно установить
data-clipboard-textхарактеристики
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
</head>
<body>
<script>
new ClipboardJS('.btn');
</script>
// 这里点击按钮，复制到粘贴板的内容就是data-clipboard-text上的值
<button class="btn" data-clipboard-text="这里是我要的内容">按钮按钮</button>
</body>
</html>
4. Обратный вызов после копирования/вырезания:success / error
Иногда нам нужно дать пользователю некоторую обратную связь после копирования/вырезания, здесь мы используем обратный вызов события, как показано ниже.
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
</head>
<body>
<script>
var clipboard = new ClipboardJS('.btn');
// 成功后的回调
clipboard.on('success', function(e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
e.clearSelection();
});
// 失败后的回调
clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});
</script>
<button class="btn" data-clipboard-text="这里是我要的内容">按钮按钮</button>
</body>
</html>
(В разделе выше есть ссылка守候!Статья о Великом БогеGitHub.com/Утренняя встреча YJ/О…)
Если вас заинтересовала моя статья или у вас есть предложения, чтобы рассказать мне👂, вы также можете добавить WeChat!
Если вы считаете, что моя статья неплохая, можете добавить внимание!
最后：
祝各位工作顺利！
-小菜鸟Christine