Более 40 операторов JavaScript, знаете ли вы их всех?

внешний интерфейс JavaScript спецификация кода
Более 40 операторов JavaScript, знаете ли вы их всех?

Эта статья участвовала в "Проект «Звезда раскопок»”, чтобы выиграть творческий подарочный пакет и бросить вызов творческим поощрительным деньгам.

Снова пятница, давайте сегодня прочитаем еще одну базовую статью. Это последняя статья для участия в программе «Звезда раскопок», спасибо за ваши лайки и поддержку 🙋!

Операторы в JavaScript используются для управления выражениями. JavaScript предоставляет нам множество операторов на выбор, некоторые операторы часто используются в нашей разработке, а некоторые могут использоваться редко. Тем не менее, нам всем нужно знать об этих операторах, потому что даже если вы сами ими не пользуетесь, когда вы видите какие-то редкие операторы в старых проектах, вам все равно нужно понимать смысл этого оператора. Давайте посмотрим, какие операторы предоставляет нам JavaScript.JavaScript操作符.png

Унарный оператор

Операторы можно классифицировать по количеству ожидаемых операторов, большинство операторов JavaScript являются бинарными операторами, бинарные операторы могут объединять два выражения в более сложное выражение. JavaScript также поддерживает унарные операторы, которые могут преобразовывать одно выражение в другое, более сложное выражение. В то же время в JavaScript есть и тернарный оператор, условный оператор (?:), который используется для объединения трех выражений в одно выражение. Сначала рассмотрим унарные операторы.

Унарные операторы имеют следующие характеристики:

  • Самый простой оператор, используемый для манипулирования выражением;
  • Имеет высокий приоритет и правильную ассоциативность;
  • Автоматически преобразовывать операнды в числовые значения, когда это необходимо.

1. Операторы инкремента и декремента (++ --)

Операторы инкремента и декремента должны были быть изучены на уроках компьютерных языков в университете (первым, что я выучил, был C++🤣). Операторы инкремента и декремента в JavaScript в основном такие же, как и в других языках. Оператор инкремента, как следует из его названия, увеличивает свой операнд, а оператор декремента уменьшает свой операнд. Они бывают двух версий:

  • Версия префикса (++i): Оператор располагается перед переменной, указывая на то, что она сначала увеличивается (уменьшается), а затем выполняется оператор;
  • Постфиксная версия (i++): Оператор располагается после переменной, указывая на то, что оператор сначала выполняется, а затем увеличивается (уменьшается);

Просто посмотрите на два примера:

// 前置递增操作符：
let num1 = 1, num2 = 2;
console.log(++num1 + num2) // 4

// 后置递增操作符：
let num1 = 1, num2 = 2;
console.log(num1++ + num2) // 3

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

Эти четыре оператора могут действовать на любой тип данных. Для этих типов JavaScript преобразует их в числа, а затем прибавляет или вычитает единицу из этого числа. Если его нельзя преобразовать в число, результатом увеличения или уменьшения будет NaN:

let str = "hello";
console.log(str++)  // NaN

Операторы инкремента и декремента в основном используются в цикле for для управления инкрементом или декрементом калькулятора.

2. Операторы сложения и вычитания

Операторы плюс и минус являются как унарными, так и бинарными операторами. Здесь мы сначала рассмотрим унарные операторы сложения и вычитания.

(1) Унарный плюс оператор (+)

Унарный оператор плюс преобразует свой операнд в число и возвращает преобразованное значение. требует внимания:

  • Если операнд является числом, он ничего не делает;
  • Если операнд не может быть преобразован в число, возвращается NaN;
  • Поскольку значения BigInt нельзя преобразовать в числа, этот оператор нельзя использовать с BigInt.
let a = -1;
let b = "hello";
let c = BigInt;
console.log(+a)  // -1
console.log(+b)  // NaN
console.log(+c)  // NaN

(2) Унарный минус-оператор (-)

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

let a = -1;
let b = 2;
console.log(-a)  // 1
console.log(-b)  // -2

Унарный оператор плюс и минус в основном используется для основных арифметических операций, он также может использоваться для преобразования типа данных, различных типов данных в цифровой тип, например метод Number () одного и того же.

2. Битовые операторы

Данные в современных компьютерах хранятся в двоичной форме, т. е. 0 и 1. Операции, выполняемые компьютерами над двоичными данными, такие как сложение, вычитание, умножение и деление, называются битовыми операциями, т. е. операциями, в которых знак бит участвует в операции. ​

Все числа в JavaScript хранятся в 64-битном формате IEEE 754, но манипуляции с битами не применяются напрямую к 64-битным, а сначала преобразуют значение в 32-битное целое число, а затем выполняют манипуляции с битами. Затем результат операции преобразуется в 64-битный, поэтому нам нужно рассматривать только 32-битные целые числа. Битовые операции выполняются внизу значения, поэтому скорость работы будет намного выше, чем у других операторов.

Общие битовые операции следующие:

оператор описывать алгоритм
&` а также Когда оба бита равны 1, результат равен 1
| или Когда оба бита равны 0, результат равен 0
^ исключающее ИЛИ Два бита равны 0, разные равны 1
~ отрицать 0 становится 1, 1 становится 0
<< сдвиг влево Все двоичные биты сдвигаются влево на несколько битов, старшие биты отбрасываются, а младшие биты заполняются 0
>> переместить вправо Все двоичные биты сдвигаются вправо на несколько битов, положительные числа остаются с 0, отрицательные числа остаются с 1, а правая часть отбрасывается.

Прежде чем говорить об этих операторах, давайте рассмотрим несколько связанных с ними понятий. в компьютереподписанный номерСуществует три метода представления: исходный код, обратный код и дополнительный код. Три метода представления состоят из двух частей: бит знака и бит значения.Бит знака использует 0 для представления «положительного» и 1 для представления «отрицательного», а бит значения имеет три различных метода представления.

(1) Исходный код

Исходный код представляет собой двоичное число числа. Например: исходный код 10 — 0000 1010.

(2) Обратный код

  • Дополнение положительного числа такое же, как исходный код, например: дополнение до 10 равно 0000 1010.
  • Обратный код отрицательного числа — это бит знака, который бит за битом инвертируется, то есть 0 становится 1, а 1 становится 0.

Например, дополнение -10 выглядит следующим образом:

原码：1000 1010
反码：1111 0101

(3) Код дополнения

  • Дополнение положительных чисел такое же, как исходный код, например: дополнение до 10 равно 0000 1010.
  • Дополнение отрицательного числа — это инверсия всех битов исходного кода, кроме бита знака, то есть 0 становится 1, 1 становится 0, а затем добавляется 1, то есть дополнение плюс 1.

Например, дополнение -10 выглядит следующим образом:

原码：1000 1010
反码：1111 0101
补码：1111 0110

1. Побитовый оператор И (&)

Побитовый оператор И (&) выполнит операцию над двумя даннымипо двоичному кодуВыполняется операция И, то есть когда два бита одновременно равны 1, результат равен 1, в противном случае результат равен 0. Правила эксплуатации следующие:

0 & 0 = 0  
0 & 1 = 0  
1 & 0 = 0  
1 & 1 = 1

Например, результаты расчета 3 и 5 следующие:

   0000 0011 
   0000 0101 
 = 0000 0001

Таким образом, 3 и 5 имеют значение 1. Примечание. Отрицательные числа участвуют в побитовой операции И в форме дополнения.

использовать:

(1) Оценка паритета

Пока он определяется в соответствии с тем, равен ли младший бит 0 или 1, 0 — четное число, а 1 — нечетное число. Таким образом, вы можете использоватьif ((i & 1) === 0)заменятьif (i % 2 === 0)чтобы определить, является ли a четным.

(2) Очистить

Если вы хотите очистить ячейку, даже если все ее двоичные биты равны 0, пока она объединяется по И со значением, все биты которого равны нулю, результат равен нулю.

2. Оператор побитового ИЛИ (|)

Оператор побитового ИЛИ (|) выполняет операцию ИЛИ над двумя объектами, участвующими в операции, в соответствии с двоичными битами, то есть, пока один из двух объектов, участвующих в операции, равен 1, его значение равно 1. Правила эксплуатации следующие:

0 | 0 = 0
0 | 1 = 1  
1 | 0 = 1  
1 | 1 = 1

Например, результат операции 3 | 5 выглядит следующим образом:

  0000 0011
  0000 0101 
= 0000 0111

Следовательно, значение 3|5 равно 7. Примечание. Отрицательные числа участвуют в операции побитового ИЛИ в форме дополнения.

3. Побитовый оператор НЕ (~)

Побитовый оператор НЕ (~) выполняет двоичную инверсию значения, участвующего в операции. То есть 0 становится 1, а 1 становится 0. Правила эксплуатации следующие:

~ 1 = 0
~ 0 = 1

Например, результат операции ~6 выглядит следующим образом:

  0000 0110
= 1111 1001

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

Когда побитовое отрицание отрицательно,Возьмем его дополнение напрямую, преобразованный в десятичный:

     0000 0110
   = 1111 1001
反码：1000 0110
补码：1000 0111

Следовательно, ~6 имеет значение -7. Результат побитовой операции НЕ фактически инвертирует значение и уменьшает его на 1,

4. Побитовое исключающее ИЛИ (^)

Побитовый оператор XOR (^) выполняет операцию «исключающее ИЛИ» над двумя данными, участвующими в операции, в соответствии с двоичными битами, то есть, если два соответствующих бита одинаковы, он равен 0, а если они разные, это 1. Правила эксплуатации следующие:

0 ^ 0 = 0  
0 ^ 1 = 1  
1 ^ 0 = 1  
1 ^ 1 = 0

Например, результат операции 3^5 выглядит следующим образом:

  0000 0011
  0000 0101 
= 0000 0110

Итак, 3^5 имеет значение 6.

Операция XOR имеет следующие свойства:

  • Коммутативный закон:(a^b)^c == a^(b^c)
  • Ассоциативный закон:(a + b)^c == a^b + b^c
  • Для любого числа х имеемx^x=0，x^0=x
  • Рефлексивность:a^b^b=a^0=a;

5. Оператор сдвига влево (

Оператор сдвига влево (

Например:

a = 1010 1110
a = a << 2

Здесь сдвинем двоичные биты a на 2 бита влево и добавим 0 вправо, то есть a = 1011 1000. ​

Обратите внимание, что сдвиг влево сохраняет знак значения, над которым он работает. Например, сдвиг -2 влево на 5 позиций дает -64, а не 64.

6. Оператор правой смены

(1) Оператор сдвига вправо со знаком (>>)

Оператор сдвига вправо со знаком (>>) сдвигает все 32 бита значения вправо на определенное количество битов (с сохранением знака). Положительные числа заполняются 0 слева, отрицательные числа заполняются 1 слева и отбрасываются справа. Каждый сдвиг операнда вправо эквивалентен делению числа на 2. ​

Например: a = a >> 2 означает сдвиг двоичного бита a вправо на 2 бита, а левое дополнение 0 или левое дополнение 1 зависит от того, является ли сдвинутое число положительным или отрицательным.

(2) Беззнаковый оператор сдвига вправо (>>>)

Оператор беззнакового сдвига вправо (>>>) сдвигает все 32 бита значения вправо. Для положительных чисел результат оператора сдвига вправо со знаком и оператора сдвига вправо без знака одинаков. Для операции с отрицательными числами между ними будет большая разница. ​

Оператор беззнакового сдвига вправо обрабатывает двоичное представление отрицательного числа, как если бы оно было положительным числом. Следовательно, операция сдвига вправо без знака для отрицательных чисел станет особенно большой.

3. Операторы сложения, вычитания, умножения и деления

1. Оператор сложения (+)

Упомянутый здесь оператор сложения является бинарным оператором сложения. Двойной оператор плюс используется дляВычислить числовые операциииликонкатенация строковых операций.

1 + 1             // 2
"1" + "2"         // "12"
"hello" + "world" // "helloworld"

При выполнении операции добавления, если два операнда являются числовыми или строковыми, тогда значения результата выполнения вычисляются и объединяются в строку. Кроме того, результаты преобразования зависят от типа результатов: это будет преимущественно конкатенация строк, строка или только несколько операций могут быть преобразованы в целевую строку символов, другой операнд также преобразуется в строку и выполняет операцию объединения. . Только любой операнд не только выполняет операцию сложения строк.

1 + 2             // 3
"1" + "2"         // "12"
"1" + 2           // "12"
1 + {}            // "1[object Object]"
true + false      // 1  布尔值会先转为数字，再进行运算
1 + null          // 1	null会转化为0，再进行计算
1 + undefined     // NaN undefined转化为数字是NaN

Обратите внимание на порядок операций сложения:

let a = 1;
let b = 2;
let c = "hello" + a + b;  // "hello12"

Здесь, поскольку каждая операция сложения выполняется независимо, при первом добавлении строки hello и числа a результатом будет «hello1», а второй операцией сложения по-прежнему является строка плюс число, поэтому конечным результатом является строка . Если вы хотите добавить два числа a и b, вам нужно добавить круглые скобки. ​

Кроме того, необходимо отметить следующие частные случаи:

  • Если один из операндов равен NaN, результатом будет NaN;
  • Если это Бесконечность плюс Бесконечность, результатом будет Бесконечность;
  • Если -Бесконечность плюс -Бесконечность, результатом будет -Бесконечность;
  • Если это бесконечность плюс -бесконечность, результатом будет NaN;
  • Если это +0 плюс +0, результат +0;
  • Если это -0 плюс -0, результат равен -0;
  • Если это +0 плюс -0, результат +0.

2. Оператор вычитания (-)

Операция вычитания похожа на операцию сложения, но оператор вычитания можно использовать только для числовых вычислений, а не для конкатенации строк. При выполнении операции вычитания, если оба операнда являются числовыми значениями, операция вычитания будет выполнена напрямую.Если один из операндов не является числовым, он будет преобразован в числовое значение, а затем будет выполнена операция вычитания. Если результатом преобразования является NaN, результатом операции также является NaN.

3 - 1      // 2
3 - true   // 2
3 - ""     // 3
3 - null   // 3
NaN - 1    // NaN

Необходимо отметить следующие частные случаи:

  1. Если бесконечность минус бесконечность, результатом будет NaN;
  2. Если -бесконечность минус -бесконечность, результатом будет NaN;
  3. Если это Бесконечность минус -Бесконечность, результатом будет Бесконечность;
  4. Если это -Бесконечность минус Бесконечность, результатом будет -Бесконечность;
  5. Если это +0 минус +0, результат равен +0;
  6. Если это -0 минус +0, результат равен -0;
  7. Если это -0 минус -0, результат равен +0.

3. Оператор умножения (*)

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

Необходимо отметить следующие частные случаи:

  • Если один из операндов равен NaN, результатом будет NaN;
  • Если Infinity умножить на 0, результатом будет NaN;
  • Если Infinity умножить на ненулевое значение, результатом будет Infinity или -Infinity, в зависимости от знака операнда со знаком;
  • Если бесконечность умножить на бесконечность, получится бесконечность.

4. Оператор деления (/)

Оператор деления используется для вычисления частного от деления одного операнда на второй операнд. Если оба операнда числовые, выполняется обычная операция деления. Если это не числовое значение, оно будет преобразовано в числовое значение и будет выполнена операция деления. ​

Необходимо отметить следующие частные случаи:

  • Если один из операндов равен NaN, результатом будет NaN;
  • Если 0 разделить на 0, результатом будет NaN;
  • Если Бесконечность разделить на Бесконечность, получится Бесконечность.
  • Если ненулевое конечное число разделено на ноль, результат является бесконечность или -инфинсичность, в зависимости от знака подписанного операнда;
  • Если бесконечность разделить на любое ненулевое значение, результатом будет бесконечность или -бесконечность, в зависимости от знака операнда со знаком.

5. Оператор остатка (%)

Оператор остатка используется для вычисления остатка от деления одного числа на второе число. Правила расчета аналогичны приведенным выше операторам. ​

Необходимо отметить следующие частные случаи:

  • Если делимое — бесконечное значение, а делитель — конечное значение, результатом будет NaN;
  • Если делимое — конечное число, а делитель равен нулю, результатом будет NaN;
  • Если Бесконечность разделить на Бесконечность, результатом будет NaN;
  • Если делимое — конечное число, а делитель — бесконечное число, результатом будет делимое;
  • Если делимое равно нулю, результат равен нулю.

6. Экспоненциальный оператор (**)

Экспоненциальный оператор (**) был добавлен в ECMAScript 7, и его расчетный эффект такой же, как у Math.pow():

Math.pow(2, 10);    // 1024
2 ** 10;            // 1024

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

let a = 2;
a **= 10;
console.log(a);   // 1024

let a = 1;
let b = 2;
let c = 3;
let d = 4;
a += 1;     // 2
b -= 2;     // 0
c *= 3;     // 9
d /= 4;	    // 1

4. Булевы операторы

При разработке очень полезны логические операторы, которые могут упростить большой объем кода и устранить множество избыточных операторов id-else.Давайте рассмотрим три распространенных логических оператора.

1. Логический оператор НЕ (!)

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

Логические правила операции НЕ следующие:

  • Возвращает false, если операнд является объектом;
  • Возвращает true, если операнд является пустой строкой;
  • Возвращает false, если операнд является непустой строкой;
  • Возвращает true, если операнд имеет значение 0;
  • Возвращает false, если операнд имеет ненулевое значение (включая бесконечность);
  • Возвращает true, если операнд имеет значение null;
  • Возвращает true, если операнд NaN;
  • Возвращает true, если операнд не определен.

Логический оператор НЕ также можно использовать для преобразования любого значения в логическое значение, используя одновременно два знака !, что эквивалентно вызову метода Boolean():

!!"blue" // true
!!0;     // false
!!NaN    // false
!!""     // false
!!12345  // true

2. Логический и оператор (&&)

Логический оператор И возвращает истину, если оба операнда истинны. Этот оператор может использоваться с любым типом данных. Если какой-либо операнд не является логическим, результат не обязательно возвращает логическое значение, и соблюдаются следующие правила:

  • Если первый операнд является объектом, вернуть второй операнд;
  • если второй операнд является объектом, объект будет возвращен только в том случае, если первый операнд оценивается как истина;
  • Если оба операнда являются объектами, вернуть второй операнд;
  • Возвращает null, если первый операнд равен null;
  • Если первым операндом является NaN, вернуть NaN;
  • Если первый операнд не определен, вернуть undefined;

По второму правилу мы можем оптимизировать код в коде нашего проекта:

if(data) {
  setData(data);
}

// 改写后：
data && setData(data);

Здесь, когда данные верны, то есть когда они существуют, будет выполнен метод setData, и код будет сильно упрощен. ​

Логический оператор И является оператором короткого замыкания. Пока первый операнд имеет значение false, он не будет продолжать выполнять выражение после оператора и сразу вернет false. Если вышеуказанных данных не существует, произойдет непосредственно короткое замыкание, и последующие методы не будут продолжать выполняться.

3. Логический оператор ИЛИ (||)

Логический оператор ИЛИ подобен логическому оператору И, но пока один из двух операндов истинен, конечный результат верен. Этот оператор может использоваться с любым типом данных. Если какой-либо операнд не является логическим, результат не обязательно возвращает логическое значение, и соблюдаются следующие правила:

  • Возвращает первый операнд, если первый операнд является объектом;
  • Если первый операнд оценивается как false, вернуть второй операнд;
  • Если оба операнда являются объектами, вернуть первый операнд;
  • Возвращает null, если оба операнда равны null;
  • Если оба числа равны NaN, вернуть NaN;
  • Возвращает значение undefined, если оба числа не определены.

Логический оператор ИЛИ также имеет характеристики короткого замыкания: если первый операнд истинен, то второй операнд не нужно оценивать, и он сразу вернет истину. ​

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

let datas = data || {};

Здесь, если данные не существуют, в качестве второго операнда назначается datas (значение по умолчанию).

5. Операторы сравнения

1. Оператор равенства

Существует четыре типа операторов равенства:

  • равно (==)
  • не равно (!=)
  • Конгруэнтность (===)
  • Не все равны (!==)

Равенство в JavaScript представлено двумя знаками равенства (==), которые возвращают true, если два операнда равны. Не равный и равный противоположному. При сравнении оба операнда преобразуются, чтобы определить, равны ли они. Его правила суждения таковы:

  1. Во-первых, он оценит, одинаковы ли два типа, и если они одинаковы, сравнит их размер;
  2. Если типы не совпадают, будет выполнено преобразование типов;
  3. Сначала рассудит, стоит ли сравниватьnullа такжеundefined, если да, он вернетсяtrue
  4. Определить, являются ли два типаstringа такжеnumber, если это так, он преобразует строку вnumber 
1 == '1'
      ↓
1 ==  1
  1. определить, является ли один изboolean, если да, то будетbooleanПеревести вnumberсудить снова
'1' == true
        ↓
'1' ==  1
        ↓
 1  ==  1
  1. определить, является ли один изobjectа другойstring,numberилиsymbol, если да, то будетobjectПреобразуйте в исходный тип, а затем судите
'1' == { name: 'js' }        
 ↓
'1' == '[object Object]'

Его блок-схема выглядит следующим образом:Обратите внимание, что если одним из операндов является NaN, оператор равенства вернет false, а оператор неравенства вернет true. ​

Для неравной оператора (! =) Неравные возвращаются только после принуждения. ​

Для оператора равенства (===) он возвращает true, только если типы данных и значения обоих операндов равны. Он не выполняет преобразование типов данных. ​

Для оператора неравенства (!==) он возвращает значение true, только если два операнда не равны без преобразования типов. ​

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

2. Реляционные операторы

Существует четыре типа операторов отношения:

  • меньше чем (
  • больше, чем (>)
  • Меньше или равно (
  • Больше или равно (>=)

Все эти операторы возвращают логическое значение и работают в соответствии со следующими правилами:

  • Если оба операнда являются числовыми, выполните числовое сравнение;
  • Если оба операнда являются строками, сравните значения кодировки символов, соответствующие двум строкам;
  • Если один операнд является числовым значением, преобразуйте другой операнд в числовое значение, затем выполните числовое сравнение;
  • Если операнд является объектом, вызовите метод объекта valueOf() и используйте результат для выполнения сравнения в соответствии с предыдущими правилами;
  • Если операнд является логическим значением, перед выполнением сравнения он преобразуется в число.

6. Другие операторы

Некоторые операторы из последней части очень практичны в обычной разработке, давайте посмотрим на их использование.

1. Оператор спреда (...)

Оператор Spread (оператор Spread) можно использовать для расширения массива объектов и строк. Он представлен тремя точками (…) и может превратить итерируемый объект в последовательность аргументов, разделенных запятыми.​

(1) Используется для расширения массива:

const a = [1, 2, 3],
      b = [4, 5, 6];
const c = [...a]       // [1, 2, 3]
const d = [...a, ...b] // [1, 2, 3, 4, 5, 6]
const e = [...a, 4, 5] // [1, 2, 3, 4, 5]

(2) Превратите массивоподобный объект в массив:

const list = document.getElementsByTagName('a');
const arr = [..list];

(3) Используется для расширения объекта:

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const merged = { ...obj1, ...obj2 };  // { a: 1, b: 2, c: 3, d: 4 }

Следует отметить, что если несколько объектов имеют одинаковые свойства при объединении, свойства последних объектов перезапишут свойства первых объектов.

(4) Используется для расширения строки

const str = "hello";
[...str]  // ["h", "e", "l", "l", "o"]

(5) Используется для передачи параметров функциям.

const f = (foo, bar) => {}
const a = [1, 2]
f(...a)

const numbers = [1, 2, 3, 4, 5]
const sum = (a, b, c, d, e) => a + b + c + d + e
const sum = sum(...numbers)

(6) Для объектов с интерфейсом Iterator

Объекты Iterator, имеющие структуру интерфейса Map и Set, функцию Generator можно использовать для расширения оператора:

const s = new Set();
s.add(1);
s.add(2);
const arr = [...s]// [1,2]


function * gen() {
  yield 1;
  yield 2;
  yield 3;
}

const arr = [...gen()] // 1，2，3

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

const m = new Map();
m.set(1,1)
m.set(2,2)
const arr = [...m]  // [[1,1],[2,2]]

Обратите внимание, что объект не является объектом Iterator.

2. Условный оператор (?:)

Условный оператор здесь на самом деле является тем, что мы часто называем тернарным выражением. См. пример:

let res = num1 > num2 ? num1 : num2;

Здесь максимальное значение num1 и num2 присваивается res. ​

Использование условных выражений может заменить множество операторов if-else, что сделает код очень лаконичным. В проектах React я лично часто использую условные операторы для условного рендеринга компонентов. Конечно, если слоев слишком много, код будет трудно читать. (В исходном коде React-Router вложено шесть или семь уровней условных операторов, что сложно понять...)

3. Оператор присваивания

На самом деле существует много видов операторов присваивания, включая простой оператор присваивания (=) и некоторые составные операторы присваивания:

  • Оператор присваивания умножения: *=
  • Оператор присваивания деления: /=
  • Оператор присваивания по модулю: %=
  • Добавить оператор присваивания: +=
  • Оператор присваивания вычитания: -=
  • Оператор сдвига влево:
  • Оператор присваивания сдвига вправо со знаком: >=
  • Беззнаковый оператор присваивания сдвига вправо: >>>=

Это просто сокращения для соответствующих им аналогов и не имеют никакого другого эффекта.

4. Оператор in (в)

Оператор in можно использовать для определения того, принадлежит ли свойство объекту, и его возвращаемое значение является логическим значением:

const author = {
  name: "CUGGZ",
  age: 18
}

"height" in author;  // false
"age" in author;     // true

Его также можно использовать для определения того, является ли свойство частью цепочки прототипов объекта:

let arr = ["hello", "jue", "jin"];
"length" in arr;   // true

5. оператор удаления (delete)

Оператор удаления используется для удаления свойства или элемента массива объекта. Для значений ссылочного типа он также удаляет само свойство объекта, а не объект, на который указывает свойство.

const o = {};
const a = { x: 10 };
o.a = a;
delete o.a; // o.a属性被删除
console.log(o.a); // undefined
console.log(a.x); // 10, 因为{ x: 10 } 对象依然被 a 引用，所以不会被回收

требует внимания:

  • Свойства, объявленные в прототипе, и свойства объекта не могут быть удалены;
  • Переменные, объявленные через var, и функции, объявленные через function, имеют свойство dontdelete и не могут быть удалены.

6. оператор instanceof (экземпляр)

Оператор instanceof используется для определения того, существует ли объект, на который указывает свойство прототипа конструктора, в цепочке прототипов другого проверяемого объекта.

console.log(2 instanceof Number);                    // false
console.log(true instanceof Boolean);                // false 
console.log('str' instanceof String);                // false 
 
console.log([] instanceof Array);                    // true
console.log(function(){} instanceof Function);       // true
console.log({} instanceof Object);                   // true

Видно, что instanceof может правильно судить только об эталонном типе данных, но не может судить об основном типе данных. Оператор instanceof можно использовать для проверки того, имеет ли объект свойство прототипа конструктора в своей цепочке прототипов. ​

Вы можете просто реализовать оператор instanceof:

function myInstanceof(left, right) {
  // 获取对象的原型
  let proto = Object.getPrototypeOf(left)
  // 获取构造函数的 prototype 对象
  let prototype = right.prototype; 
 
  // 判断构造函数的 prototype 对象是否在对象的原型链上
  while (true) {
    if (!proto) return false;
    if (proto === prototype) return true;
    // 如果没有找到，就继续从其原型上找，Object.getPrototypeOf方法用来获取指定对象的原型
    proto = Object.getPrototypeOf(proto);
  }
}

7. оператор typeof (типоф)

typeof — это унарный оператор, возвращаемое им значение — строка, являющаяся типом операнда. Типы, соответствующие обычным данным JavaScript, следующие:

x typeof
undefined undefined
null object
правда или ложь boolean
Числовой или NaN number
BigInt bigInt
нить string
symbol symbol
функция function
нефункциональный объект object 
typeof 2               // number
typeof true            // boolean
typeof 'str'           // string
typeof []              // object    
typeof function(){}    // function
typeof {}              // object
typeof undefined       // undefined
typeof null            // object

Так почему же результат typeof null Object?

В первой версии JavaScript все значения хранились в 32-битных ячейках, каждая ячейка содержала небольшойТег типа (1-3 бита)и реальные данные, для которых в настоящее время сохраняется значение. Метки типов хранятся в младших битах каждой ячейки, и существует пять типов данных:

000: object   - 当前存储的数据指向一个对象。
  1: int      - 当前存储的数据是一个 31 位的有符号整数。
010: double   - 当前存储的数据指向一个双精度的浮点数。
100: string   - 当前存储的数据指向一个字符串。
110: boolean  - 当前存储的数据是布尔值。

Если младший бит равен 1, длина флага метки типа составляет только один бит; если младший бит равен 0, длина флага метки типа составляет три бита, что обеспечивает дополнительные два бита для хранения других четырех типов данных.

Существует два специальных типа данных:

  • Значение undefined равно (-2)30 (число вне диапазона целых чисел);
  • Значение null — это указатель NULL машинного кода (значение нулевого указателя — все 0)

Это означает, что метка типа null также равна 000, что совпадает с меткой типа Object, поэтому он будет оцениваться как Object.

8. Нулевой оператор объединения (??)

При написании кода, если свойство не равно null и не определено, то получите свойство, если свойство равно null или undefined, примите значение по умолчанию:

const name = dogName ? dogName : 'default';

Это можно упростить с помощью || :

const name =  dogName || 'default';

Однако в способе написания || есть определенные недочеты: когда dogName равен 0 или false, он также переходит к логике по умолчанию. Итак, ES2020 представил оператор ??. Возвращает значение справа от ??, только если левая часть ?? равна нулю или не определена:

const dogName = false; 
const name =  dogName ?? 'default';  // name = false;

9. Необязательный оператор цепочки (?.)

Во время разработки нам может понадобиться получить глубокие свойства, такие как system.user.addr.province.name. Однако перед получением атрибута name необходимо пошагово судить о том, существует ли предыдущий атрибут, иначе будет сообщено об ошибке:

const name = (system && system.user && system.user.addr && system.user.addr.province && system.user.addr.province.name) || 'default';

Чтобы упростить описанный выше процесс, в ES2020 был представлен «оператор цепочки оценок» ?., необязательный оператор цепочки ( ?. ), который позволяет считывать значения свойств глубоко в цепочке связанных объектов без необходимости явной проверки каждой ссылки в цепочке. это эффективно. Оператор ?. функционирует так же, как оператор .chain, за исключением того, что он не вызывает ошибки, если ссылка имеет значение null или не определено, а выражение short-circuit возвращает значение undefined. При использовании с вызовами функций возвращает неопределенное значение, если данная функция не существует.

const name = system?.user?.addr?.province?.name || 'default';

Необязательный оператор цепочки сделает выражения более короткими и лаконичными при попытке доступа к свойствам объекта, которые могут не существовать. Необязательный оператор цепочки также полезен при изучении содержимого объекта, если вы не уверены, какие свойства должны присутствовать.

Дополнительная цепочка после трех форм:

a?.[x]
// 等同于
a == null ? undefined : a[x]

a?.b()
// 等同于
a == null ? undefined : a.b()

a?.()
// 等同于
a == null ? undefined : a()

10. Оператор запятой (,)

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

let a = 1, b = 2, c = 3;

Другой сценарий использования находится в цикле for с несколькими переменными цикла:

for(let i = 0, j = 10; i < j; i++, j--){
	 console.log(i + j);
}

11. оператор пустоты (void)

void — это унарный оператор, который может стоять перед любым типом операнда для выполнения операнда, игнорировать возвращаемое значение операнда и возвращать неопределенное значение. void часто используется для выполнения выражений JavaScript в сценариях HTML, но ему не нужно возвращать результат оценки выражения. Например, для метки ссылки мы не хотим, чтобы она прыгала, мы можем установитьhref="javascript:void(0). ​

В следующем коде выражение возвращает неопределенное значение с помощью оператора void:

let a = b = c = 2;  // 定义并初始化变量的值
d = void (a -= (b *= (c += 5)));  // 执行void运算符，并把返回值赋予变量d
console.log(a);  // -12
console.log(b);  // 14
console.log(c);  // 7
console.log(d);  // undefined

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

Участвуйте в последней статье проекта Nuggets, если вы считаете ее полезной, пожалуйста, поставьте лайк!

三连 .gif

Прошлые рекомендации:

Категории