11 приемов JavaScript, о которых редко упоминают в руководствах

На этот раз мы в основном делимся 11 советами по JavaScript, которые не часто упоминаются в ежедневных уроках, они часто встречаются в нашей повседневной работе, но нас легко игнорировать.

1. Фильтруйте уникальные значения

Setтип находится вES6Новое в , похоже на массив, но значения членов уникальны и нет повторяющихся значений. В сочетании с оператором распространения (...) мы можем создать новый массив для фильтрации повторяющихся значений исходного массива.

const array = [1, 2, 3, 3, 5, 5, 1];
const uniqueArray = [...new Set(array)];

console.log(uniqueArray); // [1, 2, 3, 5]

До ES6, если мы хотели реализовать эту функцию, нам требовалось намного больше кода обработки. Этот трюк работает, когда числа в массиве имеют тип:undefined,null,boolean,string,number. когда включительноobject,function,arrayне применимо.

2. Оценка короткого замыкания

Тернарный оператор — это очень удобный и быстрый способ написать несколько простых логических операторов.

x > 100 ? 'Above 100' : 'Below 100';
x > 100 ? (x > 200 ? 'Above 200' : 'Between 100-200') : 'Below 100';

Но иногда, когда логика сложна, тернарный оператор трудно читать и писать. На этом этапе мы можем использовать логическое И (&&) и логическое ИЛИ (||) операторы, чтобы переписать наши выражения.

Логические операторы И и логические ИЛИ всегда сначала оценивают свои операнды и оценивают свои правые операнды только тогда, когда результат логического выражения не может быть определен только по значению левого операнда. Это называется «Оценка короткого замыкания».

Принцип работы

Оператор && вернет первыйfalse/‘falsy’ценность . когда все операндыtrue, возвращает результат последнего выражения.

let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3

console.log(0 && null); // Result: 0

Оператор or (||) вернет первоеtrue/‘truthy’ценность . когда все операндыfalse, возвращает результат последнего выражения.

let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1

console.log(0 || null); // Result: null

Пример сценария

Когда мы запрашиваем данные с сервера, мы используем эти данные в другом месте, но статус полученных данных неизвестен, например, когда мы обращаемсяthis.stateизdataАтрибуты. Как обычно, мы сначала оценим этоthis.state.dataДействительность, а затем дифференцируется и обрабатывается в зависимости от ситуации достоверности.

if (this.state.data) {
  return this.state.data;
} else {
  return 'Fetching Data';
}

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

return (this.state.data || 'Fetching Data');

При сравнении обнаруживается, что этот способ более лаконичен и удобен.

3. Преобразование логического типа

Обычные логические значения толькоtrueа такжеfalse, но в JavaScript мы можем думать о других значениях как‘truthy’или‘falsy’из.

Кроме0,“”,null,undefined,NaNа такжеfalse, остальные можно рассматривать как‘truthy’из.

Мы можем передать отрицательный оператор！Преобразует ряд переменных в тип "boolean".

const isTrue  = !0;
const isFalse = !1;
const alsoFalse = !!0;

console.log(isTrue); // Result: true
console.log(typeof true); // Result: "boolean"

4. Преобразование строкового типа

мы можем пройти+Оператор конкатенации преобразует переменную типа number в строку типа.

const val = 1 + "";

console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"

5. Преобразуйте числовой тип

В соответствии с вышеизложенным мы можем передать оператор сложения+Преобразование переменной строкового типа обратно в числовой тип

let int = "15";
int = +int;

console.log(int); // Result: 15
console.log(typeof int); Result: "number"

В некоторых контекстах+будет интерпретироваться как оператор конкатенации, а не как оператор сложения. Когда это происходит (вы хотите вернуть целое число, а не число с плавающей запятой), вы можете использовать две тильды:~~. (需要注意为英文格式)

тильда~, известный как «оператор побитового не», эквивалентен- n - 1. так~15 = -16.

использовать два~~можно эффективно отрицать. Это потому что- (- n - 1) - 1 = n + 1 - 1 = n. то есть~-16 = 15

const int = ~~"15"

console.log(int); // Result: 15
console.log(typeof int); Result: "number"

6. Быстрое возведение в степень

отES7Для начала мы можем использовать оператор возведения в степень**В качестве сокращения для возведения в степень относительно предыдущегоMath.pow(2, 3)Быстрее. Это очень простой и практичный момент, но в большинстве руководств он конкретно не рассматривается.

console.log(2 ** 3); // Result: 8

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

До ES7 сокращение для возведения в степень в основном основывалось на операторе побитового сдвига влево.<<, разница между несколькими вариантами написания

// 下面几种写法是等价的

Math.pow(2, n);
2 << (n - 1);
2**n;

Среди них следует отметить, что2 << 3 = 16 等价于 2 ** 4 = 16

7. Быстрое преобразование числа с плавающей запятой в целое число

Обычно мы можем использоватьMath.floor(), Math.ceil()和Math.round()Будуfloatпреобразование типа вintegerТипы.

Но есть более быстрый способ использовать|(位或运算符)Обрезать число с плавающей запятой до целого числа.

console.log(23.9 | 0);  // Result: 23
console.log(-23.9 | 0); // Result: -23

|поведение зависит от того, имеете ли вы дело с положительными или отрицательными числами, поэтому лучше использовать этот ярлык только тогда, когда вы уверены.

Если n положительно, тоn | 0Эффективно округляет в меньшую сторону. Если n отрицательно, оно эффективно округляется. Точнее, результатом этой операции является прямое удаление содержимого после десятичной точки и усечение числа с плавающей запятой до целого числа, что отличается от других методов, упомянутых выше.

Вы также можете использовать~~Округление для достижения того же эффекта, как описано выше, практически любой оператор с плавающей точкой бита заставит целое число. Эти специальные операции эффективны, потому что после того, как вынуждены целочисленное значение остается неизменным.

сцены, которые будут использоваться

Побитовый оператор ИЛИ может использоваться для удаления любого количества цифр с конца целого числа. Это означает, что нам не нужно использовать такой код для преобразования между типами.

let str = "1553"; 
Number(str.substring(0, str.length - 1));

Вместо этого мы можем использовать следующий способ реализации нашей функции

console.log(1553 / 10   | 0)  // Result: 155
console.log(1553 / 100  | 0)  // Result: 15
console.log(1553 / 1000 | 0)  // Result: 1

8. Автоматическая привязка в классе

Мы можем реализовать невидимую область привязки в классах, используя стрелочные функции, добавленные ES6. И согласно предыдущей обработке, нам нужно явно привязать написанный нами метод, аналогичноthis.myMethod = this.myMethod.bind(this)так.当我们的类中有很多方法时，会增加大量的绑定的代码的书写。现在我们就可以通过箭头函数的方式来简化这个过程。

import React, { Component } from React;
export default class App extends Compononent {
  constructor(props) {
    super(props);
    this.state = {};
  }
  myMethod = () => {
    // 隐式绑定
  }
  render() {
    return (
      <>
        <div>
          {this.myMethod()}
        </div>
      </>
    )
  }
};

9, взят массив

Если вы хотите удалить значения с конца массива, то лучше использоватьsplice()Более быстрая альтернатива.

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

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
console.log(array); // Result: [0, 1, 2, 3]

Это особенно изящное решение. Однако время выполнения метода slice() быстрее. Если скорость является вашей главной целью, рассмотрите возможность использования следующих

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array = array.slice(0, 4);

console.log(array); // Result: [0, 1, 2, 3]

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

Метод массива slice() может принимать отрицательное целое число, если оно предоставлено, оно усекает значение с конца массива, а не с начала

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

console.log(array.slice(-1)); // Result: [9]
console.log(array.slice(-2)); // Result: [8, 9]
console.log(array.slice(-3)); // Result: [7, 8, 9]

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

Мы можем часто использовать его при работе с некоторой обработкой, связанной с JSON.JSON.stringify, но знаете ли вы, что это может помочь с отступами JSON?

stringify()Метод принимает два необязательных параметра:replacerфункция иspaceстоимость,replacerФункции можно использовать для фильтрации отображаемого JSON.

spaceЗначение принимает целое число, представляющее количество требуемых пробелов, или строку (например,'\t'для вставки вкладок), это может значительно упростить чтение извлеченных данных JSON.

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

// Result:
// '{
//     "alpha": A,
//     "beta": B
// }'

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

---

Оригинальный адрес (требуется удобный доступ в интернет😅):11 трюков с JavaScript, которые вы не найдете в большинстве руководств

---

Обратите внимание на общедоступную учетную запись WeChat для синхронной отправки обновлений.

или ты можешь пойтиGithubДайте ему звезду