20+ SUPER PROTICAL JavaScript Sevips

внешний интерфейс JavaScript опрос
20+ SUPER PROTICAL JavaScript Sevips

Всем привет, я CUGGZ, новичок во фронтенде, сегодня я поделюсь некоторыми навыками разработки на JavaScript, надеюсь, это вам поможет~

1. Инициализировать массив

Если вы хотите инициализировать одномерный массив заданной длины и указать значение по умолчанию, вы можете сделать это:

const array = Array(6).fill(''); 
// ['', '', '', '', '', '']

Если вы хотите инициализировать двумерный массив заданной длины и указать значения по умолчанию, вы можете сделать это:

const matrix = Array(6).fill(0).map(() => Array(5).fill(0)); 
// [[0, 0, 0, 0, 0],
//  [0, 0, 0, 0, 0],
//  [0, 0, 0, 0, 0],
//  [0, 0, 0, 0, 0],
//  [0, 0, 0, 0, 0],
//  [0, 0, 0, 0, 0]]

2. Суммирование массивов, максимальное значение, минимальное значение

const array  = [5,4,7,8,9,2];

Суммирование массива:

array.reduce((a,b) => a+b);

Максимальное значение массива:

array.reduce((a,b) => a > b ? a : b);

Math.max(...array)

Минимальное значение массива:

array.reduce((a,b) => a < b ? a : b);

Math.min(...array)

Многие проблемы с оценкой массива можно решить с помощью метода сокращения массива.

3. Фильтрация значений ошибок

Если вы хотите отфильтровать false, 0, null, undefined и другие значения в массиве, вы можете сделать это:

const array = [1, 0, undefined, 6, 7, '', false];

array.filter(Boolean);
// [1, 6, 7]

4. Используйте логические операторы

Если есть такой кусок кода:

if(a > 10) {
    doSomething(a)
}

Это можно переписать с помощью логических операторов:

a > 10 && doSomething(a)

Это будет гораздо проще написать: если значение перед логическим оператором И && ложно, произойдет операция короткого замыкания, и выполнение этого предложения будет прекращено напрямую, если оно истинно, код после оператора && будет продолжать выполняться, и будет возвращен следующий код return value. Использование этого метода может уменьшить количество суждений if...else.

5. Упрощение суждения

Если есть такое суждение следующим образом:

if(a === undefined || a === 10 || a=== 15 || a === null) {
    //...
}

Вы можете использовать массив, чтобы упростить эту логику оценки:

if([undefined, 10, 15, null].includes(a)) {
    //...
}

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

6. Очистить массив

Если вы хотите очистить массив, вы можете установить длину массива равной 0:

let array = ["A", "B", "C", "D", "E", "F"]
array.length = 0 
console.log(array)  // []

7. Рассчитайте производительность кода

Производительность вашего кода можно рассчитать с помощью следующих операций:

const startTime = performance.now(); 
// 某些程序
for(let i = 0; i < 1000; i++) {
    console.log(i)
}
const endTime = performance.now();
const totaltime = endTime - startTime;
console.log(totaltime); // 30.299999952316284

8. Объединение массивов

Если мы хотим объединить несколько массивов, мы можем использовать оператор распространения:

const start = [1, 2] 
const end = [5, 6, 7] 
const numbers = [9, ...start, ...end, 8] // [9, 1, 2, 5, 6, 7 , 8]

Или используйте метод concat() массива:

const start = [1, 2, 3, 4] 
const end = [5, 6, 7] 
start.concat(end); // [1, 2, 3, 4, 5, 6, 7]

Но при использовании метода concat(), если объединяемые массивы большие, функция concat() потребляет много памяти при создании отдельного нового массива. В настоящее время вы можете использовать следующие методы для объединения массивов:

Array.prototype.push.apply(start, end)

Таким образом, использование памяти значительно сокращается.

9. Метод проверки объекта

Если у нас есть такой объект:

const parent = {
    child: {
      child1: {
        child2: {
          key: 10
      }
    }
  }
}

Много раз мы будем писать это, чтобы избежать ошибки, если определенный уровень не существует:

parent && parent.child && parent.child.child1 && parent.child.child1.child2

Это сделает код раздутым, вы можете использовать необязательный оператор цепочки JavaScript:

parent?.child?.child1?.child2

Эта реализация и эффект такие же, как в длинном списке выше. ​

Необязательный оператор цепочки также работает с массивами:

const array = [1, 2, 3];
array?.[5]

Необязательный оператор цепочки позволяет нам считывать значения свойств, расположенных глубоко в цепочке связанных объектов, без необходимости явно проверять, действительна ли каждая ссылка в цепочке. Ошибка не возникает, если ссылка имеет значение null (null или undefined), короткое замыкание выражения возвращает значение undefined. При использовании с вызовами функций возвращает неопределенное значение, если данная функция не существует.

10. Проверка undefined и null

Если есть такой кусок кода:

if(a === null || a === undefined) {
    doSomething()
}

То есть, если вам нужно проверить, что значение равно null или undefined, и вам нужно выполнить операцию, вы можете использовать оператор объединения значений null, чтобы упростить приведенный выше код:

a ?? doSomething()

Таким образом, код оператора объединения элементов управления будет выполняться только в том случае, если a не определено или имеет значение null. Оператор объединения null (??) — это логический оператор, который возвращает правый операнд, когда левый операнд имеет значение null или не определен, в противном случае возвращает левый операнд.

11. Конвертировать элементы массива на цифры

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

const array = ['12', '1', '3.1415', '-10.01'];
array.map(Number);  // [12, 1, 3.1415, -10.01]

Таким образом, map будет выполнять конструктор Number для каждого элемента массива по мере его обхода по массиву и возвращать результат.

12. Преобразование массива классов в массив

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

Array.prototype.slice.call(arguments);

В дополнение к этому вы также можете использовать оператор распространения для достижения:

[...arguments]

13. Объекты динамически объявляют свойства

Если вы хотите динамически объявлять свойства объекта, вы можете сделать это:

const dynamic = 'color';
var item = {
    brand: 'Ford',
    [dynamic]: 'Blue'
}
console.log(item); 
// { brand: "Ford", color: "Blue" }

14. Сократите console.log()

Написание большого количества console.log() каждый раз при отладке может быть громоздким, вы можете использовать следующую форму, чтобы упростить этот код:

const c = console.log.bind(document) 
c(996) 
c("hello world")

Это будет делать это каждый раз, когда выполняется метод c.

15. Получить параметры запроса

Если мы хотим получить параметры в URL-адресе, мы можем использовать свойства объекта окна:

window.location.search

Если URL-адресwww.baidu.com?project=js&type=1Затем с помощью вышеуказанной операции вы получите ?project=js&type=1. Если вы хотите получить один из параметров, вы можете сделать это:

let type = new URLSearchParams(location.search).get('type');

16. Округление числа

Если число содержит десятичные знаки, и мы хотим удалить десятичные знаки, мы будем использовать методы math.floor, math.ceil или math.round для удаления десятичных знаков. На самом деле вы можете использовать оператор ~~ для удаления дробной части числа, что намного быстрее, чем эти методы для чисел.

~~3.1415926  // 3

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

  • Если это строка числового типа, она будет преобразована в чистое число;
  • Если строка содержит значение, отличное от числа, оно будет преобразовано в 0;
  • Если это логический тип, true вернет 1, false вернет 0;

В дополнение к этому способу мы также можем использовать побитовое И для реализации операции округления чисел, просто добавляя число после числа|0Только что:

23.9 | 0   // 23
-23.9 | 0   // -23

Эта операция также напрямую удаляет десятичную дробь после числа. Этот метод аналогичен описанному выше, и его производительность будет намного лучше, чем у JavaScript API.

17. удалить элемент массива

Если мы хотим удалить элемент в массиве, мы можем использовать для этого удаление, но элемент после удаления станет неопределенным и не исчезнет, ​​а при выполнении будет потреблять много времени, что не может нас удовлетворить в большинстве случаев спрос. Таким образом, вы можете использовать метод splice() массива для удаления элементов массива:

const array = ["a", "b", "c", "d"] 
array.splice(0, 2) // ["a", "b"]

18. Проверьте, пуст ли объект

Если мы хотим проверить, пуст ли объект, мы можем использовать следующий способ:

Object.keys({}).length  // 0
Object.keys({key: 1}).length  // 1

Метод Object.keys key() для получения объекта возвращает массив, содержащий значение ключа. Если длина массива возвращает 0, то объект заведомо пуст.

19. Используйте switch case вместо if/else

Случай switch работает лучше, чем if/else, и код выглядит чище.

if (1 == month) {days = 31;}
else if (2 == month) {days = IsLeapYear(year) ? 29 : 28;}
else if (3 == month) {days = 31;}
else if (4 == month) {days = 30;} 
else if (5 == month) {days = 31;} 
else if (6 == month) {days = 30;} 
else if (7 == month) {days = 31;} 
else if (8 == month) {days = 31;} 
else if (9 == month) {days = 30;} 
else if (10 == month) {days = 31;} 
else if (11 == month) {days = 30;} 
else if (12 == month) {days = 31;}

Используйте switch...case, чтобы переписать:

switch(month) {
        case 1: days = 31; break;
        case 2: days = IsLeapYear(year) ? 29 : 28; break;
        case 3: days = 31; break;
        case 4: days = 30; break;
        case 5: days = 31; break;
        case 6: days = 30; break;
        case 7: days = 31; break;
        case 8: days = 31; break;
        case 9: days = 30; break;
        case 10: days = 31; break;
        case 11: days = 30; break;
        case 12: days = 31; break;
        default: break;
}

Это кажется относительно кратким. Вы можете переписать if...else с массивом или объектом, в зависимости от ситуации.

20. Получить последний элемент в массиве

Если вы хотите получить последний элемент в массиве, это часто записывается так:

const arr = [1, 2, 3, 4, 5];
arr[arr.length - 1]  // 5

На самом деле, мы также можем использовать метод slice массива, чтобы получить последний элемент массива:

arr.slice(-1)

Когда мы устанавливаем параметру метода slice отрицательное значение, значение массива будет перехвачено из конца массива.Если мы хотим перехватить два последних значения, параметр может быть передан в -2.

21. Преобразование значения в логическое значение

В JavaScript следующие значения преобразуются в false при преобразовании логических значений, а все остальные значения преобразуются в true:

  • undefined
  • null
  • 0
  • -0
  • NaN
  • ""

Обычно, если мы хотим преобразовать явное значение в логическое значение, мы будем использовать метод Boolean() для его преобразования. На самом деле мы можем использовать оператор !!, чтобы преобразовать значение в логическое значение. Мы знаем это! состоит в том, чтобы преобразовать объект в логический и отрицать два! Он заключается в инвертировании инвертированного логического значения, что эквивалентно прямому преобразованию значения нелогического типа в значение логического типа. Эта операция намного быстрее, чем метод Boolean(), потому что она встроена в компьютер:

!!undefined // false
!!"996"     // true
!!null      // false
!!NaN       // false

22. Отформатируйте код JSON

Я считаю, что все использовали метод JSON.stringify, который может преобразовать объект или значение JavaScript в строку JSON. Его синтаксис следующий:

JSON.stringify(value, replacer, space)

Он имеет три параметра:

  • value: значение, которое будет сериализовано в строку JSON.
  • replacerНеобязательно: если параметр является функцией, то при сериализации каждое свойство сериализованного значения будет преобразовано и обработано функцией; если параметр является массивом, функцией будут преобразованы и обработаны только свойства, содержащиеся в массиве. Имя свойства будет сериализовано в окончательную строку JSON; если параметр имеет значение null или не указан, будут сериализованы все свойства объекта.
  • spaceНеобязательно: укажите пустую строку для отступа, используемого для украшения вывода (красивая печать); если параметр является числом, он представляет количество пробелов; верхний предел — 10. Если значение меньше 1, значит, пробела нет, если параметром является строка (при длине строки более 10 букв брать первые 10 букв), строка будет восприниматься как пробел; если параметр не указан (или null), пробелов не будет.

Обычно мы пишем параметр для преобразования объекта или значения JavaScript в строку JSON. Вы можете видеть, что у него также есть два необязательных параметра, поэтому мы можем использовать эти два параметра для форматирования кода JSON:

console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, '\t'));

Результат выглядит следующим образом:

imagepng

23. Избегайте eval() и with()

  • with() вставит переменную в глобальную область. Поэтому, если другая переменная имеет такое же имя, это может вызвать путаницу и перезаписать значение.
  • eval() — дорогостоящая операция, и каждый раз при ее вызове обработчик сценариев должен преобразовывать исходный код в исполняемый код.

24. Функциональные параметры используют объекты вместо списков параметров

Когда мы используем список параметров для передачи параметров в функцию, то лучше, если будет меньше параметров, но если параметров больше, будет больше хлопот, потому что мы должны передавать параметры в порядке списка параметров. Если вы используете TypeScript для записи, то вам нужно сделать необязательные параметры после обязательных параметров при записи. ​

Если у нашей функции много параметров, то можно рассмотреть возможность использования формы объектов для передачи параметров.При передаче параметров в виде объектов необязательные параметры не нужно передавать в конце, и порядок параметров не важен. То, что передается через объект, также легче читать и понимать, чем список параметров. ​

Вот пример:

function getItem(price, quantity, name, description) {}

getItem(15, undefined, 'bananas', 'fruit')

Вот как использовать передачу объектов:

function getItem(args) {
    const {price, quantity, name, description} = args
}

getItem({
    name: 'bananas',
    price: 10,
    quantity: 1, 
    description: 'fruit'
})

На сегодня это все, если вы считаете это полезным, ставьте лайк! В конце года я побегу за 100 ватт, чтобы читать~🤣

Категории