Введение 🏂
Причина написания этой статьи — прошедшая неделя в фронтенд-команде компании.code reviewКогда я прочитал кодекс брата-стажера, я почувствовал, что некоторые одноклассники, которые только что вошли в индустрию, не интересуются некоторыми реальными проектами.jsОбработка не очень квалифицированная и не хватает некоторых навыков.
Поэтому я разобрал некоторые часто используемые в собственной разработке.jsНавыки, гибкое использование улучшат ваши навыки решения проблем и значительно упростят ваш код.
Дедупликация массива 🐻
Обычно мы реализуем удаление массива в основном через двухуровневый обход илиindexOfПуть.
двойной слойforЦиклическая дедупликация
function unique(arr) {
for (var i = 0; i < arr.length; i++) {
for (var j = i + 1; j < arr.length; j++) {
if (arr[i] == arr[j]) {
arr.splice(j, 1);
j--;
}
}
}
return arr;
}
использоватьindexOfдедупликация
function unique(arr) {
if (!Array.isArray(arr)) {
console.log("type error!");
return;
}
var array = [];
for (var i = 0; i < arr.length; i++) {
if (array.indexOf(arr[i]) === -1) {
array.push(arr[i]);
}
}
return array;
}
Но на самом деле есть более простой способ: использоватьArray.fromа такжеsetдедупликация
function unique(arr) {
if (!Array.isArray(arr)) {
console.log("type error!");
return;
}
return Array.from(new Set(arr));
}
Реализация этого кода очень проста 😉
Массивы преобразуются в объекты (Array to Object) 🦑
Преобразование массивов в объекты — это первое, о чем думает большинство студентов:
var obj = {};
var arr = ["1","2","3"];
for (var key in arr) {
obj[key] = arr[key];
}
console.log(obj)
Output:
{0: 1, 1: 2, 2: 3}
Но есть более простой и быстрый способ:
const arr = [1,2,3]
const obj = {...arr}
console.log(obj)
Output:
{0: 1, 1: 2, 2: 3}
Зачем использовать обход для вещей, которые можно сделать с помощью одной строки кода? 😛
Разумное использование тернарных выражений 👩👦👦
В некоторых сценариях нам нужно присвоить переменным разные значения для разных условий.Мы часто используем следующие методы:
const isGood = true;
let feeling;
if (isGood) {
feeling = 'good'
} else {
feeling = 'bad'
}
console.log(`I feel ${feeling}`)
Output:
I feel good
Но почему бы не взять тернарное выражение?
const isGood = true;
const feeling = isGood ? 'good' : 'bad'
console.log(`I feel ${feeling}`)
Output:
I feel good
Это так называемыйSingle line(однострочное) мышление, по сути, состоит в том, что код стремится简洁性.
Преобразование в числовой тип (Convert to Number) 🔢
Это очень распространено, и все используют его с большей вероятностью.parseInt(),Number()Этот:
const age = "69";
const ageConvert = parseInt(age);
console.log(typeof ageConvert);
Output: number;
На самом деле, также можно+для реализации преобразования:
const age = "69";
const ageConvert = +age;
console.log(typeof ageConvert);
Output: number;
Преобразовать в строковый тип (Convert to String) 🔡
Преобразование в строку обычно используетсяtoString(),String()выполнить:
let a = 123;
a.toString(); // '123'
но и черезvalue + ""Это достигается за счет:
let a = 123;
a + ""; // '123'
Отслеживание эффективности 🥇
Если вы хотите проверить абзацjsВыполнение кода занимает время, тогда можно попробоватьperformance:
let start = performance.now();
let sum = 0;
for (let i = 0; i < 100000; i++) {
sum += 1;
}
let end = performance.now();
console.log(start);
console.log(end);
Объединить объекты (Combining Objects) 🌊
Сочетание двух предметов, скорее всего, будет использоваться всеми.Object.assignсейчас:
const obj1 = { a: 1 }
const obj2 = { b: 2 }
console.log(Object.assign(obj1, obj2))
Output:
{ a: 1, b: 2 }
На самом деле есть более лаконичный способ:
const obj1 = { a: 1 }
const obj2 = { b: 2 }
const combinObj = { ...obj1, ...obj2 }
console.log(combinObj)
Output:
{ a: 1, b: 2 }
то есть через展开操作符(spread operator)реализовать.
короткое замыкание (Short-circuit evaluation) 🥅
мы можем пройти&&или||Чтобы упростить наш код, например:
if (isOnline) {
postMessage();
}
// 使用&&
isOnline && postMessage();
// 使用||
let name = null || "森林";
Сглаживание массива (Flattening an array) 🍓
Сглаживание массивов, мы обычно используем递归илиreduceреализовать
рекурсия
var arr = [1, [2, [3, 4]]];
function flatten(arr) {
var result = [];
for (var i = 0, len = arr.length; i < len; i++) {
if (Array.isArray(arr[i])) {
result = result.concat(flatten(arr[i]));
} else {
result.push(arr[i]);
}
}
return result;
}
console.log(flatten(arr));
reduce
var arr = [1, [2, [3, 4]]];
function flatten(arr) {
return arr.reduce(function (prev, next) {
return prev.concat(Array.isArray(next) ? flatten(next) : next);
}, []);
}
console.log(flatten(arr));
ноes6предлагает новый методflat(depth),параметрdepth, представляющий глубину расширения вложенного массива, значение по умолчанию равно1
let arr = [1, [2, 3, [4, [5]]]];
arr.flat(3); // [1,2,3,4,5]
возведение в степень 🍜
Обычно мы реализуем экспоненциальные операции, и более используемые из них должны бытьMath.pow(), например, запрос2^10:
console.log(Math.pow(2, 10));
существуетES7Экспоненциальный оператор введен в**,**с участиемMath.pow()тот же результат расчета.
console.log(2 ** 10); // 输出1024
Преобразовать число с плавающей запятой в целое число (Float to Integer) 🦊
Обычно мы преобразуем числа с плавающей запятой в целые, используяMath.floor(),Math.ceil(),Math.round(). Но на самом деле есть более быстрый способ:
console.log(~~6.95); // 6
console.log(6.95 >> 0); // 6
console.log(6.95 << 0); // 6
console.log(6.95 | 0); // 6
// >>>不可对负数取整
console.log(6.95 >>> 0); // 6
то есть использовать~, >>, <<, >>>, |Эти побитовые операторы реализуют округление
обрезать массив
❝Если вам нужно изменить длину массива на фиксированное значение, вы можете попробовать это
❞
let array = [0, 1, 2, 3, 4, 5];
array.length = 3;
console.log(array);
Output: [0, 1, 2];
Получить последний элемент массива 🦁
Обычно для получения последнего элемента массива мы используем его чаще:
let arr = [0, 1, 2, 3, 4, 5];
const last = arr[arr.length - 1];
console.log(last);
Output: 5;
Но мы также можемsliceоперация для достижения:
let arr = [0, 1, 2, 3, 4, 5];
const last = arr.slice(-1)[0];
console.log(last);
Output: 5;
украсить свойJSON💄
В повседневной разработке мы будем часто использоватьJSON.stringify, но вы можете не знать точно, какие у него параметры.
Он имеет три параметра:
-
json: требуется, может быть массивом илиObject -
replacer: необязательное значение, может быть массивом или методом -
space: что использовать для разделения
И мы можем просто указать третий параметрspaceзначение, чтобы украсить нашJSON:
Object.create(null)🐶
❝существует
❞Vueа такжеVuexВ исходном коде автор использовалObject.create(null)для инициализации нового объекта. Почему бы не использовать более краткий{}Шерстяная ткань? Давайте взглянемObject.create()Определение:
Object.create(proto,[propertiesObject])
-
proto: Объект-прототип вновь созданного объекта. -
propertiesObject: необязательный. Свойства перечислимого (новые добавленные свойства являются свойствами самого себя, а не свойствами в его цепочке прототипов) для добавления к новому объекту.
Мы противопоставляемObject.create(null)а также{}Отличия в создании объектов:Как видно из приведенного выше рисунка, по
{}Создаваемые объекты наследуют отObjectсобственные методы, такие какhasOwnProperty,toStringд., можно использовать непосредственно на новых объектах.
при использованииObject.create(null)созданный объект, кроме собственных свойствaКроме того, в цепочке прототипов нет свойств.
То есть мы можем пройтиObject.create(null)Таким образом создайте纯净объект, мы можем определить свой собственныйhasOwnProperty,toStringи другие методы, вам не нужно беспокоиться о перезаписи метода с тем же именем в цепочке прототипов.
скопировать массив 🐿
В повседневной разработке часто встречается копирование массивов. На самом деле, есть много трюков для реализации копирования массивов.
Array.slice
const arr = [1, 2, 3, 4, 5];
const copyArr = arr.slice();
спред оператор
const arr = [1, 2, 3, 4, 5];
const copyArr = [...arr]
использоватьArrayКонструктор и оператор спреда
const arr = [1, 2, 3, 4, 5];
const copyArr = new Array(...arr)
Array.concat
const arr = [1, 2, 3, 4, 5];
const copyArr = arr.concat();
Избегайте сопоставления нескольких условий 🦀
Иногда при разработке встречается несколько условий, и выполняется один и тот же оператор, т. е. несколько||Этот:
if (status === 'process' || status === 'wait' || status === 'fail') {
doSomething()
}
Такой способ написания не очень смысловой и читабельный. в состоянии пройтиswitch caseилиincludesТакая трансформация.
switch case
switch(status) {
case 'process':
case 'wait':
case 'fail':
doSomething()
}
includes
const enum = ['process', 'wait', 'fail']
if (enum.includes(status)) {
doSomething()
}
Object.freeze()🃏
❝существует
❞VueПри описании привязки данных и ответа в документацииObject.freeze()Объект метода не может ответить на обновление.Object.freeze()Метод используется для замораживания объекта, запрещая изменение свойств объекта.
Именно благодаря этой особенности он имеет множество применимых сценариев в практических проектах.
Как и на некоторых страницах чистых презентаций, могут быть огромные массивы или объекты, если эти данные не изменятся, то можно использоватьObject.freeze()заморозить их такVueне будет делать с этими объектамиsetterилиgetterПреобразование может значительно улучшить производительность.