Знания JavaScript, которые вы должны понимать — основы

JavaScript
Знания JavaScript, которые вы должны понимать — основы

портал

Эта серия статей подходит для фронтенд-разработчиков, которые хотят систематически учиться, продвигать JavaScript или грамотность.

что такое джаваскрипт

рождение

JavaScript родился только для решения проблемы проверки формы. В то время пользователи использовали модемы со скоростью 28,8 бит/с для просмотра веб-страниц, а веб-страницы становились все больше и сложнее. В это время пользователю необходимо обменяться большим количеством данных с сервером, чтобы отправить форму.При таких медленных условиях сети в то время, после ожидания в течение 30 секунд, появится сообщение о том, что поле A является обязательным. это очень расстраивает. Поэтому Netscape захотела разработать клиентский язык сценариев на стороне браузера, чтобы выполнять эту простую работу по проверке правильности сценариев.

Итак, это дело было передано Брендану Эйху, на его разработку ушло 2 недели, назвали LiveScript, а позже изменили название на JavaScript, чтобы поймать ажиотаж вокруг Java.

JavaScript 1.0, выпущенный Netscape, был очень успешным, и в это время Microsoft добавила JScript в свой собственный IE3. Добавление Microsoft означало, что существовало две версии реализации JavaScript, и в то время не существовало стандарта для JavaScript, стандартизирующего его синтаксис или функции.Сосуществование двух версий сделало эту проблему более заметной, поэтому появилась стандартизация.

JavaScript 1.1 был представлен Ecma в качестве предложения. Среди них TC39 провела работу по стандартизации. Потребовалось несколько месяцев, чтобы создать ECMA-262, который является языковым стандартом ECMAScript. С тех пор различные браузеры приняли ECMAScript в качестве собственного JavaScript. основание для реализации.

JavaScript && ECMAScript

ECMA-262 определяет синтаксис языка, типы, операторы, ключевые слова, зарезервированные слова, операторы и глобальные объекты. ECMAScript (ES) — это (псевдо)язык, определенный на основе ECMA-262. Он существует в качестве базового определения для создания на его основе более надежных языков сценариев, таких как JavaScript, размещенный в браузере, среда размещения JavaScript на стороне сервера. .js. Среда хоста обеспечивает базовую реализацию ECMAScript и расширения, необходимые для взаимодействия с самой средой.Расширения (такие как DOM) используют основные типы и синтаксис ECMAScript, предоставляя дополнительные функциональные возможности, зависящие от среды. Полная реализация JavaScript состоит из следующих трех частей:

  • Ядро (ECMAScript)
  • Объектная модель документа (DOM)
  • Объектная модель браузера (BOM)

JavaScript в HTML

Внедрить JavaScript

Внедрите JavaScript, встроив теги script в HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- JavaScript 脚本 -->
  <script></script>
</body>
</html>

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

HTML анализируется сверху вниз.Если тег script помещен в тег head, это означает, что весь код JavaScript должен быть загружен, проанализирован и выполнен до того, как страница сможет быть отрисована (страница начинается, когда страница анализируется до тела тег рендеринг). Это может привести к заметной задержке рендеринга страницы, из-за чего окно браузера будет долгое время оставаться белым. И если в JavaScript есть код для работы с DOM, поскольку DOM еще не существует, это приведет к тому, что код JavaScript напрямую сообщит об ошибке.

Итак, лучше всего поместить тег script в конец элемента body. Таким образом, страница полностью визуализируется до обработки кода JavaScript, время белого экрана сокращается, а скорость загрузки страницы увеличивается.

Встроенный код и внешние файлы

<!-- 行内代码 -->
<script>
  function example() {
    console.log('行内代码示例')
  }
  example()
</script>
<!-- 外部文件 -->
<script src="./example.js"></script>

Есть два способа ввести скрипты в HTML, встроенный код и внешние скрипты. Встроенный код непосредственно встраивает код JavaScript в файл HTML, а внешний файл предназначен для записи всего кода JavaScript в отдельный файл JS, а затем импорта его через тег сценария. Лучшая практика外部脚本метод по следующим причинам:

  • ремонтопригодность, Если JavaScript разбросан по многим HTML-страницам, страница будет заполнена большим количеством кода JavaScript, что вызовет трудности в обслуживании. В отдельном каталоге проще писать и поддерживать JavaScript, а также упрощается параллельная разработка HTML и JavaScript.
  • тайник, HTML-страницы обычно используют согласованное кэширование, а JavaScript больше подходит для принудительного кэширования. Браузер кэширует все внешние файлы JavaScript в соответствии с определенными настройками, что означает более быструю загрузку страниц.
  • пригодный для будущего, Помещая JavaScript во внешний файл, вам не нужно учитывать черную технологию комментариев XHTML.Синтаксис включения внешних файлов JavaScript одинаков в HTML и XHTML.

Асинхронный скрипт

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

отложить выполнение скрипта - отложить

Установив атрибут defer в теге script, атрибут defer указывает, что скрипт будет загружен асинхронно, но будет отложен до завершения синтаксического анализа страницы (до события DOMContentLoad), а затем будет выполнен последовательно. Однако на практике последовательное выполнение и момент времени выполнения не гарантируются, поэтому страница содержит только скрипт с атрибутом defer в конце.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script defer src="./example.js"></script>
</head>
<body>
</body>
</html>

Выполнять скрипты асинхронно - async

Установите атрибут async в теге скрипта, чтобы указать браузеру загружать скрипт асинхронно и выполнять его сразу после загрузки скрипта, что блокирует рендеринг HTML во время выполнения Операции, изменяющие DOM.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script async src="./example1.js"></script>
  <script async src="./example2.js"></script>
</head>
<body>
</body>
</html>

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

Динамически загружать скрипты

Динамически загружайте скрипты через DOM API JavaScript. Загрузите указанный сценарий, динамически добавляя тег сценария в DOM следующим образом:

const script = document.createElement('script')
script.src = './example.js'
document.head.appendChild(script)

Только при выполнении этого кода JavaScript будет динамически отправлен запрос на загрузку файла example.js. Элементы сценария, созданные таким образом, загружаются асинхронно, что эквивалентно добавлению атрибута async. Предварительную загрузку можно настроить для повышения производительности.

<link rel="preload" href="./example.js">

элемент

Для схемы изящной деградации, когда страница не поддерживает JavaScript, когда браузер не поддерживает скрипты или поддержка скриптов отключена, отображается содержимое в noscript

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <noscript>
    <p>
      浏览器不支持 JavaScript 脚本
    </p>
  </noscript>
</body>
</html>

языковая основа

грамматика

Идентификаторы чувствительны к регистру

// 标识符区分大小写
const t1 = 't1', T1 = 'T1';

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

  • Первый символ должен быть буквой, символом подчеркивания (_) или знаком доллара ($).
  • Остальные символы могут быть буквами, цифрами, подчеркиванием, знаком доллара.

Лучшие практики: Идентификатор назван в маленьком верблюжьем регистре, то есть первая буква первого слова строчная, а первая буква каждого последующего слова прописная, например: testVariable

Примечания

// 单行注释
/**
 * 多行注释
 */

строгий режим

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

Добавьте use strict в начало файла, чтобы включить строгий режим для всего скрипта.

"use strict";

Добавьте use strict в начале функции, чтобы включить строгий режим для функции.

function fn() {
	"use strict"
	console.log('test')
}

«use strict» — это директива предварительной обработки, которую увидит любой поддерживающий движок JavaScript, который переключится в строгий режим.

утверждение

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

let test = 'test';
if (test) {
  test = false;
  console.log(test);
}

ключевые слова, зарезервированные слова

ECMA-262 описывает набор ключевых слов и зарезервированных слов, которые не следует использовать в качестве идентификаторов.

  • Ключевые слова:
break       do          in            typeof
case        else        instanceof    var
catch       export      new           void
class       extends     return        while
const       finally     super         with
continue    for         switch        yield
debugger    function    this
default     if          throw
delete      import      try
  • Зарезервированные слова:
始终保留:

enum


严格模式下保留:

implements  package     public
interface   protected   static
let         private


模块代码中保留:

await

Переменная

Переменные ECMAScript имеют свободный тип, и каждая переменная может использоваться для хранения данных любого типа. Переменные объявляются с тремя ключевыми словами:var,constа такжеlet

ключевое слово var

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

var t1 = 't1';
// 合法但不推荐
t2 = 't2';
function fn() {
  var t3 = 't3';
  // 合法但不推荐
  t4 = 't4'
}

Используйте ключевое слово var, чтобы объявить, что переменная существует.声明提升, компилятор JavaScript переместит все объявления в верхнюю часть области видимости.

function fn() {
  console.log(test)
  var test = 'test'
}
// 以上函数会被编译器编译成
function fn() {
  var test;
  // 输出 undefined
  console.log(test)
  test = 'test'
}

пусть ключевое слово

let и var делают одно и то же, но есть несколько очень важных отличий:

  • Областью объявлений let является область действия блока (область действия блока ограничена ближайшей парой {} ), а областью действия объявлений var является область действия функции.

    // var
if (true) {
  var t1 = 't1'
  console.log(t1)	// t1
}
console.log(t1)	// t1

// let
if (true) {
  let t2 = 't2'
  console.log(t2)	// t2
}
console.log(t2)	// ReferenceError: t2 is not defined

  • Переменные, объявленные с помощью let, образуют временную мертвую зону. Строго говоря, let также поднимается во время выполнения в JavaScript, но из-за временной мертвой зоны переменные let нельзя использовать до их объявления. Так что let's hoist — это не то же самое, что var с точки зрения JavaScript.

    // var
console.log(t1)	// undefined
var t1 = 't1'

// let
console.log(t2)	// ReferenceError: t2 is not defined
let t2 = 't2'

  • Let нельзя объявлять повторно в одной и той же области блочного уровня, и следующее объявление var переопределит предыдущее.

    // var
var t1 = 't1';
var t1 = 'tt1';
console.log(t1)	// tt1

// let
let t2 = 't2'
// SyntaxError: Identifier 't2' has already been declared
let t2 = 'tt2'

// var + let
var t3 = 't3'
// SyntaxError: Identifier 't3' has already been declared
let t3 = 'tt3'

  • Глобальные переменные, объявленные с помощью let, не станут свойствами объекта окна, var станет

    // var
var t1 = 't1'
console.log(window.t1)	// t1

// let
let t2 = 't2'
console.log(window.t2)	// undefined

  • Для цикла переменные, объявленные var, будут проникать за пределы тела цикла, а let ограничивается внутренней частью блока цикла for.

    // var
for (var i = 0; i < 5; i++) {
  setTimeout(() => {
    // 2 秒后输出的是渗透到循环外部的变量 i 的值，这时 i = 5
    console.log(i)
  }, 2000)
}
console.log(i)	// 5
// 2秒后输出 5 个 5

// let
for (let j = 0; j < 5; j++) {
  // JavaScript 引擎会在后台为每个迭代循环声明一个新的迭代变量，所以每个 setTimeout 引用的都是不同的变量实例，所以 console.log 在 2 秒后输出了期望的值，这个行为适用于所有的 for 循环，比如 for-in、for-of
  setTimeout(() => {  
    console.log(j)
  }, 2000)
}
console.log(j)	// ReferenceError: j is not defined
// 2 秒后输出 0、1、2、3、4

константное ключевое слово

Поведение const в основном такое же, как и let.Единственное важное отличие состоит в том, что при объявлении переменной с помощью const переменная должна быть инициализирована в то же время, и значение переменной не может быть изменено снова после объявления, поэтому const обычно используется для объявления констант (неизменяемых переменных)

const t1 = 't1'
// TypeError: Assignment to constant variable
t1 = 't2'

Следующая операция не вызывает проблем, потому что вы не изменяли сам obj, сам obj хранит адрес памяти, и вы изменяете объект в пределах этого адреса памяти. Если вы хотите объявить постоянный объект, вы можете использовать метод const + Object.freeze().

const obj = {
  t: 'tt'
}
obj.t = 'ttt'
obj.tt = 'tttt'

Движок JavaScript создаст отдельные экземпляры переменных для объявлений let в циклах for.Хотя переменные const похожи на переменные let, вы не можете использовать const для объявления переменных итерации, потому что переменные итерации будут увеличиваться.

// TypeError: Assignment to constant variable.
for (const i = 0; i < 5; i++) {}

Лучшие практики

Появление const и let решает всевозможные странные проблемы с var, поэтому лучше всего: не используйте var, сначала const, потом let.

Переменные, объявленные const, являются неизменяемыми константами.Компилятор среды выполнения JavaScript заменит все константные переменные фактическими значениями без выполнения поиска в цепочке областей видимости, тем самым повысив производительность кода. Движок Chrome V8 выполняет эту оптимизацию.

тип данных

ECMAScript имеет 6 простых типов данных (примитивных типов): Undefined, Null, Boolean, Number, String, Symbol (символ). Существует также сложный тип данных, называемый Object. Объект представляет собой неупорядоченный набор пар "имя-значение".

Неопределенный тип

Тип Undefined имеет только одно значение - undefined.Когда переменная объявлена, но ей не присвоено значение, значение переменной по умолчанию не определено.

let message;
console.log(message)	// undefined
console.log(message === undefined)	true

Нулевой тип

Тип Null также имеет только одно значение — null, которое логически представляет собой указатель на пустой объект, поэтому передача null в typeof возвращает «object»

const t = null
console.log(typeof t)	// object

Для улучшения семантики кода рекомендуется инициализировать пустой объект значением null, чтобы другие видели ваш код и знали, что значение этой переменной является ссылкой. undefined выводится с нулевыми значениями, потому что ECMA-262 определяет их как явно равные.

console.log(undefined == null)	// true

Логический тип

Тип Boolean имеет два литерала: true и false. Хотя имеется только два логических значения, любой другой тип значения может быть преобразован в логическое значение с помощью функции преобразования Boolean().

const t = 'test'
console.log(Boolean(t))	// true
тип данных значение преобразовано в истинное значение преобразовано в ложь
Undefined не существует Undefined
Null не существует Null
Boolean true false
Number ненулевое значение 0. NaN
String непустая строка ""пустой строки
Symbol любое значение не существует
Object ненулевое значение null

Важно понимать приведенные выше преобразования, поскольку операторы управления потоком, такие как if, автоматически преобразуют значения других типов в логические значения (неявные преобразования типов). такЛучшие практикиЭто использование оператора === (третьего класса) для улучшения читаемости кода и предотвращения неявных преобразований типов.

Тип номера

Тип Number использует формат IEEE 754 для представления целых чисел и значений с плавающей запятой. Различные числовые типы имеют разные форматы числовых литералов:

  • десятичная дробь,const t1 = 20, t2 = 30.1

  • восьмеричный, первая цифра должна быть 0, за которой следует соответствующее восьмеричное число (0–7).Если литерал содержит значение больше 7, префикс 0 будет игнорироваться, а следующие цифры будут рассматриваться как десятичные числа. Восьмеричные числа недопустимы в строгом режиме и вызывают синтаксическую ошибку механизма JavaScript.

    const t1 = 070	// 八进制的 56
console.log(t1)	// 56
const t2 = 079	// 无效的八进制数，当成十进制的 79
console.log(t2)	// 79

  • шестигранник, числа должны иметь префикс 0x, за которым следуют шестнадцатеричные цифры (0–9, A–F [без учета регистра])

    const t1 = 0xA
console.log(t1)	// 10
const t2 = 0x1f
console.log(t2)	// 31

значение с плавающей запятой

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

const t1 = 1.1, t2 = 0.1, t3 = .2
console.log(t3)	// 0.2

Значения с плавающей запятой занимают в два раза больше памяти, чем целые числа, поэтому ECMAScript всегда найдет способ преобразовать значения в целочисленное хранилище. Например, если после запятой (1.) нет числа, само значение является целым числом, но за десятичной запятой следует 0 (1,0), эти два случая будут преобразованы в целое число.

const t1 = 1.
console.log(t1)	// 1
const t2 = 11.0
console.log(t2)	// 11
const t3 = 12.1
console.log(t3)	// 12.1

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

const t1 = 3.125e7	// 相当于 3.125 * 10^7
console.log(t1)	// 31250000

Значения с плавающей запятой имеют точность до 17 знаков после запятой, но гораздо менее точны, чем целые числа в арифметических вычислениях. Например, 0,1 + 0,2 дает значение не 0,3, а 0,300 000 000 000 000 04. Из-за этой улыбчивой ошибки округления трудно протестировать конкретное значение с плавающей запятой, поэтому никогда не тестируйте конкретное значение с плавающей запятой. Эта ошибка округления вызвана использованием чисел IEEE 754 и не уникальна для ECMAScript, поскольку язык, использующий формат IEEE 754, имеет эту проблему.

console.log(0.1 + 0.2 === 0.3)	// false
console.log(0.15 + 0.15 === 0.3)	// true

диапазон значений

Из-за ограничений памяти существует диапазон значений, которые может представлять ECMAScript. Минимальное значение находится в Number.MIN_VALUE (5e-324), а максимальное — в Number.MAX_VALUE (1,797 693 134 862 315 7e308). Если вычисленное значение выходит за пределы допустимого диапазона, оно автоматически преобразуется в положительную или отрицательную бесконечность, и значение бесконечности не может быть вычислено далее, поскольку для него недоступно числовое представление. Является ли значение бесконечным, можно определить с помощью функции isFinite(). Используйте Number.NEGATIVE_INFINITY и Number.POSITIVE_INFINITY, чтобы получить положительную и отрицательную бесконечность.

NaN

NaN означает «Не число» и используется для обозначения того, что операция, которая должна была вернуть число, завершилась неудачно (а не выдавала ошибку).

console.log(-0 / +0)	// NaN
console.log(0 / 0)	// NaN
console.log(5 / 'test')	// NaN

Любая операция, включающая NaN, всегда возвращает NaN, например, NaN / 10; NaN не равно никакому значению, включая NaN. Используйте функцию isNaN, чтобы определить, является ли данный параметр NaN, и параметр будет автоматически преобразован в числовое значение в процессе оценки (неявное преобразование типа).

console.log(NaN === NaN)	// false
console.log(isNaN(NaN))	// true
console.log(isNaN(10))	// false，10 是数值
console.log(isNaN('10'))	// false，'10' 可以被转换为数字 10
console.log(isNaN('blue'))	// true，'blue' 无法被转换为一个有效的数值

Числовое преобразование

Есть три функции, которые преобразуют нечисловые значения в числовые: Number, parseInt, parseFloat. Число — это функция преобразования, которую можно использовать с любым типом данных. Последние две функции в основном используются для преобразования строк в числа.

Правила преобразования для числовой функции следующие:

  • логическое значение, истина равна 1, ложь равна 0
  • Значение непосредственно обратно
  • ноль, возвращает 0
  • не определено, возвращает NaN
  • Строка, применяющая следующие правила
    • Если строка содержит только допустимые десятичные числа, она преобразуется в допустимое десятичное значение, игнорируя начальный 0 допустимого значения.
    • Если строка содержит только допустимые шестнадцатеричные числа, преобразуйте ее в допустимое десятичное значение.
    • Пустая строка возвращает 0
    • Все остальные случаи возвращают NaN
  • объекта, вызовите метод valueOf, а затем преобразуйте возвращаемое значение в соответствии с приведенными выше правилами; если результат преобразования равен NaN, вызовите метод toString для результата преобразования и примените вышеуказанные правила для преобразования возвращаемого значения.
  • Символ, который не может быть преобразован, выдает ошибку TypeError: невозможно преобразовать значение символа в число
// Boolean
console.log(Number(true))	// 1
console.log(Number(false))	// 0
// Number
console.log(Number(+9))	// 9
console.log(Number(-09)) // -9
// null
console.log(Number(null)) // 0
// undefined
console.log(Number(undefined)) // NaN
// 字符串
console.log(Number('123'))	// 123
console.log(Number('0x1A'))	// 26
console.log(Number(''))	// 0
// 对象
const obj = { t: 'tt' }
console.log(Number(obj))	// NaN
// Symbol
console.log(Number(Symbol(1)))	// TypeError: Cannot convert a Symbol value to a number

Хотя число активно используется для преобразования типов данных в обычном программировании редко, существует множество неявных преобразований типов, поэтому все же необходимо полностью понимать функцию преобразования. Учитывая сложность числа, вы обычно можете использовать функцию parseInt, когда вам нужно получить целое число.Функция parseInt больше ориентирована на то, содержит ли строка数值模式. parseInt преобразует первый ненулевой символ, если первый символ не является допустимым десятичным, восьмеричным или шестнадцатеричным, parseInt немедленно возвращает NaN. Если это допустимый символ, каждый последующий символ проверяется по очереди до конца строки или до конца первого недопустимого символа.

console.log(parseInt(' -1234test'))	// 1234
console.log(parseInt('test124'))	// NaN
console.log(parseInt(''))	// NaN
console.log(parseInt('0xA'))	// 10
console.log(parseInt('10.5'))	// 10
console.log(parseInt('077'))	// 63

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

console.log(parseInt('10.5', 2))	// 2，第一个参数被当作二进制数解析

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

console.log(parseFloat('  -000.1124.2'))	// -0.1124

Тип строки

Тип данных String может быть представлен с помощью двойных кавычек (""), одинарных кавычек ('') или обратных кавычек (`). Это отличается от использования кавычек в некоторых языках (например, PHP), которые изменятся способ обработки строк.Интерпретация отличается. Но лучше всего использовать один и тот же стиль для всей команды, например одинарные кавычки.

неизменность

Строки в ECMAScript неизменяемы. Это означает, что после создания их значения не могут быть изменены. Чтобы изменить строковое значение в переменной, вы должны сначала уничтожить исходную строку, а затем присвоить новую строку переменной, и адрес памяти, на который указывает переменная, изменится.

let lang = 'Java'
lang = lang + 'Script'

Весь процесс выполнения здесь такой: сначала выделяем пробел, который может содержать 10 символов, затем заполняем две строки «Java» и «Script», затем уничтожаем исходные строки «Java» и «Script», помещаем lang Points в только что выделенное место. Вся обработка происходит в фоновом режиме, поэтому некоторые ранние браузеры очень медленно объединяют строки. Эти браузеры нацелены на эту проблему в более поздних версиях.

преобразовать строку

Существует четыре способа преобразования значения в строку: метод toString, функция преобразования строки, оператор плюс (+) и литерал шаблона.

Все типы данных, кроме null и undefined, имеют метод toString, и вызов метода toString возвращает строковую форму текущего значения. Если значение, которое нужно преобразовать, является числовым типом, вы также можете передать параметр toString, указывающий базу (базовое число), в которой будет выводиться числовое значение в виде строки.

var str = '12', num = 12
console.log(str.toString())	// '12'
console.log(str.toString(2))	// '12'，参数会被忽略，只有被转换的值为数值时，参数才有效
console.log(num.toString())	// '12'
console.log(num.toString(2))	// '1100'

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

  • Если значение имеет метод toString, вызовите этот метод и верните результат.
  • В противном случае возвращайте null и undefined в виде строк, «null» и «undefined».
console.log(String(10))	// '10'
console.log(String(true))	// 'true'
console.log(String(null))	// 'null'
console.log(String(undefined))	// 'undefined'

Значение плюс нулевой символ ("") также можно преобразовать в строку.

console.log(12 + '')	// '12'

Также возможно преобразовать значение в строковую форму по модулю литерала.

const num = 12
const str = `${num}`
console.log(typeof num)	// number
console.log(typeof str)	// string

литералы шаблонов (строки шаблонов)

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

// 一定要注意格式，将生成的字符串输出或者写入文件格式和你想象的会有一点出入，比如文件的第一行是空的，内容从第二行开始，所以 <div> 应该从反引号之后就开始
const pageHTML = `
<div>
	<a href="#">
		<span>Test</span>
	</a>
</div>
`
console.log(pageHTML)

Технически строка шаблона не является строкой, это выражение JavaScript, которое вычисляется немедленно, а результатом вычисления является строка. Строки шаблона вставляют в строку произвольные выражения JavaScript через ${}, это выражение будет оцениваться в ближайшей области видимости и конвертироваться в строку вызовом метода toString.

const a = 1, b = 2, c = 3;
const expStr = `加法运算：${a} + ${b} = ${c}`
console.log(expStr)	// '加法运算：1 + 2 = 3'

Строки шаблона также поддерживают определениефункция метки, поведение строки шаблона можно настроить с помощью функции метки. Функция label принимает массив шаблонов, разделенных (String.prototype.split) токеном интерполяции (${exp}) и результат вычисления каждого выражения

function tagFunction(templateArray, aExp, bExp, cExp) {
  // 对模版字符串用插值记号（${}）分割后的数组
  console.log(templateArray)	// ["", " + ", " = ", ""]
  // 各个表达式的求值结果
  console.log(aExp)	// 1
  console.log(bExp)	// 2
  console.log(cExp)	// 3
  return 'custom result'
}
const a = 1, b = 2, c = 3;
const result = tagFunction`${a} + ${b} = ${c}`
console.log(result)	// custom result

Используйте функцию тега String.raw, чтобы получить необработанную строку (например, новую строку или символ Unicode) вместо преобразованного представления символов.

// 输出换行符 \n 本身
console.log(`\n`)	// 会输出换行
console.log(`\\n`)	// 需要使用转译符号才能输出 \n
console.log(String.raw`\n`)	// \n

Тип символа

Тип Symbol — это новый примитивный тип данных в ECMAScript 6. Он уникален и неизменяем. Например, его можно использовать в качестве свойства объекта, чтобы гарантировать, что существующие свойства не будут перезаписаны.

Основное использование

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

const sym = Symbol()
console.log(typeof sym)	// symbol
console.log(sym)	// Symbol()
const fooSym = Symbol('foo')
console.log(fooSym)	// Symbol(foo)
const bar1Sym = Symbol('bar'), bar2Sym = Symbol('bar')
console.log(bar1Sym === bar2Sym)	// false，证明不会覆盖现有任何属性
// 作为对象属性
const obj = {}
obj[bar1Sym] = 'test1'
obj[bar2Sym] = 'test2'
console.log(obj)	// {Symbol(bar): "test1", Symbol(bar): "test2"}

Глобальный реестр символов

Если экземпляр символа необходимо совместно использовать и повторно использовать в нескольких местах, его можно использовать, создав символ в глобальном реестре символов с помощью Symbol.for(strParam) со строкой в ​​качестве ключа.

Symbol.for() выполняет идемпотентную операцию над каждой строкой. При вызове Symbol.for со строкой он проверит, существует ли уже соответствующий символ в глобальном реестре.Если он не существует, будет создан новый экземпляр символа и добавлен в глобальный реестр.Если он существует, существующий символ будет возвращен экземпляр. Это не то же самое, что символы, созданные с помощью Symbol.

Параметр Symbol.for должен быть строкой.Если передается нестроковый тип, по умолчанию будет вызываться метод toString для преобразования его в строку.

Используйте метод Symbol.keyFor(), чтобы запросить в глобальном реестре строковый ключ указанного символа, или верните неопределенное значение, если запрос не является глобальным символом.

const fooGlobalSym = Symbol.for('foo')
const otherFooGlobalSym = Symbol.for('foo')
console.log(fooGlobalSym === otherFooGlobalSym)	// true，证明重用已有符号
const fooSym = Symbol('foo')
console.log(fooSym === fooGlobalSym)	// false，即使采用相同的字符串，Symbol 和 Symbol.for 创建的符号也不相等
console.log(Symbol.keyFor(fooGlobalSym))	// foo
console.log(Symbol.keyFor(fooSym))	// undefined

Использование символов в качестве атрибутов

Символы можно использовать везде, где в качестве атрибутов можно использовать строки или числа. При использовании символа в качестве свойства объекта лучше всего сохранять символ через переменную, иначе потом будет сложно индексировать с помощью obj[key] .

  • Object.getOwnPropertyNames() возвращает массив всех обычных свойств экземпляра объекта.
  • Object.getOwnPropertySymbols() возвращает массив всех свойств символа экземпляра объекта.
  • Object.getOwnPropertyDescriptors() возвращает объект дескриптора свойства, содержащий как обычные, так и символические свойства.
  • Reflect.ownKeys(), возвращает два типа ключей
const obj = { t1: 't1' }
const t2Sym = Symbol('t2')
obj[t2Sym] = 't2Sym'
console.log(obj)	// {t1: "t1", Symbol(t2): "t2Sym"}
console.log(Object.getOwnPropertyNames(obj))	// ['t1']
console.log(Object.getOwnPropertySymbols(obj))	// [Symbol(t2)]
console.log(Object.getOwnPropertyDescriptors(obj))	// 同时包含常规和符号的属性描述符对象
console.log(Reflect.ownKeys(obj))	// ['t1', Symbol(t2)]

Общие встроенные символы

ECMAScript 6 представляет набор часто используемых встроенных символов, раскрывающих внутреннее поведение языка, к которым разработчики могут напрямую обращаться, переопределять или эмулировать. Содержание этой части помещено в реализацию принципа JavaScript API.

Тип объекта

Объект в ECMAScript — это набор данных и функций. Объекты создаются с помощью new Object() или литерала объекта {}. Object также является базовым классом, от которого унаследованы другие объекты, и все свойства и методы типа Object также существуют у производных объектов. Каждый экземпляр объекта имеет следующие свойства и методы:

  • Конструктор: конструктор, функция, используемая для создания объектов, новый объект(), объект является значением свойства конструктора
  • hasOwnProperty(propertyName): определяет, существует ли указанное свойство в самом указанном объекте.
  • isPrototypeOf(obj): определить, является ли текущий объект прототипом объекта obj.
  • propertyIsEnumerable(propertyName): определяет, является ли данное свойство перечисляемым
  • toLocaleString(): возвращает строковое представление объекта, связанное с локальной средой выполнения, в которой находится объект.
  • toString(): возвращает строковое представление объекта.
  • valueOf(): возвращает числовое значение, строку и логическое значение, соответствующее объекту. Обычно то же самое, что и возвращаемое значение toString.
const obj = { a: 'aa' }
console.log(obj.constructor)	// Object 函数
console.log(obj.hasOwnProperty('a'))	// true
console.log(Object.prototype.isPrototypeOf(obj))	// true
console.log(obj.propertyIsEnumerable('a'))	// true
console.log(obj.toLocaleString())	// [object Object]
console.log(obj.toString())	// [object Object]
console.log(obj.valueOf())	// {a: "aa"}

оператор

ECMA-262 описывает набор операторов, которые можно использовать для манипулирования значениями любого типа, включая математические операторы (сложение, вычитание, умножение, деление), побитовые операторы, реляционные операторы и т. д.

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

К унарным операторам относятся приращение (++), уменьшение (--), положительное (+) и отрицательное (-).

Самоувеличение и самоуменьшение делятся на грамматику префиксной версии и язык постфиксной версии.Разница в том, что время, когда происходит операция, отличается.Префиксная версия возникает до того, как выражение оценивается (вычитание) операции.

Если в операции участвует нечисловой тип, перед вычислением сначала преобразуйте данные в числовой тип с помощью функции преобразования числа.

let age = 10, num1 = 2, num3 = 3;
// 前缀版
console.log(++age)	// 11，先自加再输出
console.log(--age)	// 10，先自减再输出
console.log(++num1 + num3)	// 6
console.log(--num1 + num3)	// 5
// 后缀版
console.log(age++)	// 10，先输出再自加
console.log(age--)	// 11，先输出再自减
console.log(age)	// 10
console.log(num1++ + num3)	// 5
console.log(num1-- + num3)	// 6
console.log(num1)	// 2
// 一元加、减
let test = 25
console.log(+test)	// 25
console.log(-test)	// -25
// 非数值
let str1 = "11", str2 = "a", bVal = false, fVal = 1.1, obj = { valueOf() { return -1 } }
console.log(str1++ + 1)	// 12，先做了类型转换再加和，最后自加
console.log(+str2)	// NaN
console.log(--bVal)	// -1
console.log(++fVal) // 2.1
console.log(--obj)	// -2

побитовый оператор

Битовые операторы используются для низкоуровневых операций со значениями, напрямую манипулируя битами данных в памяти. Все значения в ECMAScript хранятся в 64-битном формате, но манипуляции с битами напрямую не манипулируют 64-битными значениями, а сначала преобразуют значения в 32-битные целые числа, затем выполняют битовые операции, а затем преобразуют результат в 64-битное хранилище. Весь процесс преобразования происходит в фоновом режиме. Для разработчиков это похоже на то, что существуют только 32-битные целые числа.

Числа со знаком используют первые 31 бит из 32 для представления целочисленного значения, 32-й бит представляет бит знака, 0 положительный и 1 отрицательный, 32-й бит недоступен и не может быть использован при работе с целыми числами со знаком. Положительные числа хранятся в истинном двоичном формате значения, а отрицательные числа хранятся в дополнении до двух (дополнение до двух). Дополнение числа до двух вычисляется в три этапа:

  • Определите двоичное представление абсолютного значения, например -18, сначала определите двоичное представление 18
  • Вычислить дополнение до единицы (дополнение до единицы) значения, то есть каждый 0 становится 1, а 1 становится 0
  • добавить 1 к результату

Возьмите -18 в качестве примера, начните с двоичного представления 18:

0000 0000 0000 0000 0000 0000 0001 0010

Затем вычислите дополнение до единицы, то есть переверните каждый бит

1111 1111 1111 1111 1111 1111 1110 1101

Наконец, добавьте 1 к своему дополнению, чтобы получить двоичное представление -18.

1111 1111 1111 1111 1111 1111 1110 1110

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

const num = -18;
console.log(num.toString(2))	// -10010

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

Побитовое НЕ, ИЛИ, НЕ, XOR

И, или нет, сомневайтесь, просто запомните следующие формулы

  • И &: 1 только тогда, когда оба равны 1, все остальные равны 0
  • или |: возвращает 0, если оба бита равны 0, иначе 1
  • Не ~: 0 становится 1, 1 становится 0
  • XOR~: 1 для разницы, 0 для того же
const num = 18, num1 = 3;
console.log(num.toString(2))	// 10010
console.log(num1.toString(2))	// 00011
const and = num & num1
console.log(and, and.toString(2))	// 2, 00010
const or = num | num1
console.log(or, or.toString(2))	// 19, 10011
// 按位非的结果是对数值取反并减1
const not = ~num
console.log(not, not.toString(2)) // -19, -10011
const xor = num ^ num1
console.log(xor, xor.toString(2))	// 17, 10001

сдвиг влево

Оператор сдвига влево представлен двумя знаками «меньше» ( 

// 每左移一位相当于乘以2
console.log(2 << 5)	// 64
console.log(-2 << 5)	// -64

Подписанный правый сдвиг

Сдвиг числа со знаком вправо представлен двумя знаками больше (>>), которые сместят все 32 бита значения вправо на указанное число битов, сохраняя бит знака и заполняя вакантные биты на осталось с 0. Фактически сдвиг вправо со знаком эквивалентен сдвигу, обратному сдвигу влево.

// 每右移一位相当于除以2
console.log(64 >> 5)	// 2
console.log(-64 >> 5)	// -2

беззнаковый сдвиг вправо

Сдвиг вправо без знака, представленный одним знаком «больше» (>>>), сдвигает все 32 бита вправо, включая бит знака. Для положительных чисел результат беззнакового сдвига вправо и знакового сдвига вправо одинаков, поскольку бит знака равен 0, а левая часть заполняется 0 при сдвиге вправо, разницы нет. Для отрицательных чисел это иногда может сильно отличаться, так как бит знака отрицательного числа равен 1.

логический оператор

Есть три логических оператора: логическое НЕ, логическое И и логическое ИЛИ.

логическое не

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

  • Возвращает false, если операнд является объектом, непустой строкой, ненулевым значением (включая бесконечность)
  • Возвращает true, если операнд имеет значение null, undefined, NaN
// false
console.log(!true)
console.log(!{})
console.log(!'test')
console.log(!10)
console.log(!Infinity)
// true
console.log(!null)
console.log(!undefined)
console.log(!NaN)

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

логический и

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

console.log(true && false)	// false

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

  • Возвращает второй операнд, если первый операнд истинен
  • Первый операнд имеет значение null, undefined, NaN, затем возвращается первый операнд.
console.log(true && {})	// {}
console.log({} && 'test')	// test
console.log(null && 'test') // null

логический или

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

console.log(true || 'test') // true
console.log({} || false)	// {}
console.log(false || {})	// {}

мультипликативный оператор

ECMAScript определяет три мультипликативных оператора: умножение, деление и модуль. Эти операции аналогичны соответствующим операциям в языках Java и C, которые являются обычными математическими операциями, но в ECMAScript разница заключается в том, что при работе с нечисловыми значениями включаются некоторые автоматические преобразования типов. фон.Функция преобразования Number() выполняется автоматически.

оператор умножения

Оператор умножения представлен звездочкой (*) и используется для вычисления произведения двух чисел по следующим правилам:

  • Если оба операнда являются числовыми, выполните обычные математические операции и верните Infinity или -Infinity, если результат выходит за пределы допустимого диапазона.
  • Если какой-либо операнд равен NaN или Infinity * 0, вернуть NaN
  • Infinity * ненулевое значение, возвращает Infinity или -Infinity в зависимости от знака второго операнда
  • Бесконечность * Бесконечность, возвращает бесконечность
  • Если операнд не является значением, теперь номер фонового вызова () преобразует его на значение, а затем применяет вышеуказанные правила.

оператор подразделения

Оператор деления представлен косой чертой (/) и используется для вычисления частного двух операндов следующим образом:

  • Если оба операнда являются числовыми, выполните обычные математические операции и верните Infinity или -Infinity, если результат выходит за пределы допустимого диапазона.
  • Возвращает NaN, если какой-либо оператор равен NaN или Infinity/Infinity или 0/0
  • Деление ненулевого конечного значения на 0 возвращает Infinity или -Infinity в зависимости от знака первого операнда.
  • Бесконечность/любое значение, возвращает бесконечность или -бесконечность в зависимости от второго операнда
  • Если какой-либо операнд не является числовым значением, сначала вызовите функцию преобразования Nunber() в фоновом режиме, чтобы преобразовать его в числовое значение, а затем примените приведенные выше правила.

модульный оператор

Оператор по модулю (остаток [число]) представлен знаком процента (%), например:

console.log(26 % 5)	// 1

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

  • Если оба операнда числовые, выполните обычную операцию с остатком.
  • Бесконечность % конечное значение, конечное значение % 0, бесконечность % бесконечность, возвращает NaN
  • Конечный(1) % Бесконечность, возвращает Конечный(1)
  • 0 % любое число, возвращает 0
  • Если есть операнд, который не является числовым значением, сначала вызовите функцию преобразования числа в фоновом режиме, чтобы преобразовать его в числовое значение, а затем примените указанные выше правила.

Экспоненциальный оператор

ECMAScript 7 добавляет экспоненциальный оператор, представленный двумя звездочками (**), ранее использовавшийся Math.pow() для выполнения экспоненциальных операций.

console.log(Math.pow(3, 2))	// 9
console.log(3**2)	// 9
let ret = 3
console.log(ret **= 2)	// 9

Аддитивный оператор

Аддитивные операторы, операторы сложения и вычитания, являются простейшими операторами. Но в ECMAScript эти два оператора имеют особое поведение. Подобно мультипликативному оператору, аддитивный оператор выполняет преобразование различных типов данных в фоновом режиме. Просто правила конвертации не такие интуитивно понятные.

оператор сложения

  • Оба операнда числовые
    • Любое значение + NaN, возвращает NaN
    • Бесконечность + бесконечность, возвращает бесконечность
    • -Бесконечность + (-Бесконечность), возвращает -Бесконечность
    • Бесконечность + (-Бесконечность), возвращает NaN
    • +0 + (+0), возвращает +0
    • -0 + (+0), возвращает +0
    • -0 + (-0), возвращает -0
  • Если строка существует в операнде, выполните строку конкатенации
    • Оба операнда являются строками, напрямую связанными
    • Если один из операндов не является строкой, преобразуйте его в строку, а затем соедините
  • Если какие-либо из операндов являются объектами, числами или логическими значениями, вызовите их метод toString(), чтобы получить строку, а затем примените приведенные выше правила для строк. Для undefined и null вызывается функция преобразования String(), чтобы получить «undefined» и «null».

оператор вычитания

  • Оба операнда числовые
    • Любой операнд равен NaN, вернуть NaN
    • Бесконечность - бесконечность, возвращает NaN
    • -Infinity - (-Infinity), возвращает NaN
    • Бесконечность - (-Бесконечность), возвращает Бесконечность
    • -Бесконечность - (Бесконечность), возвращает -Бесконечность
    • +0 - (+0), возвращает +0
    • +0 - (-0), возвращает -0
    • -0 - (-0), возвращает +0
  • Если какой-либо операнд является строкой, логическим значением, нулем, неопределенным, используйте функцию преобразования Number() в фоновом режиме, чтобы преобразовать его в числовое значение, а затем выполните математическую операцию в соответствии с приведенными выше правилами.
  • Если какой-либо из операндов является объектом, вызывается его метод valueOf() для получения его числового представления. Если метод valueOf() отсутствует, вызывается метод toString(), результирующая строка преобразуется в число и применяются указанные выше правила.

оператор отношения

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

  • Оба операнда являются числовыми значениями и могут нормально сравниваться
  • Если все операнды являются строками, сравните кодировку соответствующих символов в строке один за другим, например 'a' > 'A'
  • Если один из операндов является числом, преобразуйте другой операнд в число, выполните числовое сравнение
  • Если какой-либо операнд является объектом, вызвать метод valueOf() объекта, если нет valueOf(), вызвать метод toString(), получить результат и сравнить его по предыдущим правилам
console.log(23 > 3)	// true
console.log('23' > 3) // true
console.log('23' > '3') // false
// 特殊情况，任何关系操作符涉及比较 NaN 时都返回 false
console.log(NaN < 3)	// false
console.log(NaN >= 3)	// false

оператор равенства

ECMAScript предоставляет два набора операторов равенства. Первый набор равен и не равен (==, !=), который будет выполнять обязательное преобразование типов перед выполнением сравнения. Этот метод всеми критикуется, и есть более поздний вторая группа , конгруэнтные и все неравные (===, !==), в них не производится преобразование типов перед сравнением, а типы разные, и они прямо считаются неравными.

равные и не равные

При сравнении соблюдайте следующие правила:

  • Если любой из операндов является логическим, он преобразуется в число и сравнивается. false преобразуется в 0, true преобразуется в 1
  • Если один операнд является строкой, а другой — числом, преобразуйте строку в число и сравните
  • Если операнд является объектом, а другой нет, то значение значения объекта приобретает исходное значение, а затем сравнивается по предыдущему правилу.
  • Если оба операнда являются объектами, сравните, указывают ли они на один и тот же объект, если да, верните true, иначе верните false
  • null и undefined равны, а null и undefined не могут быть преобразованы в другие типы значений для сравнения
  • Если любой из операторов имеет значение NaN, оператор равенства возвращает false, а оператор неравенства возвращает true. Но NaN == NaN, вернуть false
console.log(null == undefined)	// true
console.log("NaN" == NaN)	// false
console.log(5 == NaN)	// false
console.log(NaN == NaN)	// false
console.log(NaN != NaN) // true
console.log(false == 0) // true
console.log(true == 1)	// true
console.log(true == 2) // false
console.log(undefined == 0) // false
console.log(null == 0)	// false
console.log("5" == 5)	// true

Конгруэнтные и неравные

По сравнению с равенством и неравенством, равенство (===) и неравенство (!==) не требуют преобразования типов при сравнении.Если два операнда имеют разные типы, они сразу считаются неравными. Конгруэнтность и конгруэнтность — лучшая практика.

// 不同数据类型，所以不相等
console.log('55' === 55) // false
console.log(null === undefined)	// false

условный оператор

Условные операторы также называются тернарными выражениями, и простые операторы if-else можно заменить более краткими условными операторами.

// const variable = boolean_expression ? true_value : false_value;
const num1 = 1, num2 = 2;
const max = num1 > num2 ? num1 : num2;
console.log(max)	// 2

оператор присваивания

Операторы присваивания делятся на простые присваивания (=) и составные присваивания (мультипликативные, аддитивные, побитовые операторы, за которыми следует знак равенства). Составные операторы являются просто сокращением и не улучшают производительность.

let num = 10;
// 简单赋值
num = num + 10;
// 复合赋值
num += 10;
num -= 10;
num *= 10;
num /= 10;
num %= 10;
num <<= 2;
num >>= 2;
num >>>= 2;

оператор запятой

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

const num1 = 1, num2 = 2;
const test = (5, 3, 4, 0)	// test 的值为 0
function fn(param1, param2) {
  console.log('fn')
}

утверждение

ECMA-262 описывает операторы, называемые операторами управления потоком, и большая часть синтаксиса ECMAScript воплощена в операторах. Операторы обычно используют одно или несколько ключевых слов для выполнения данной задачи. Высказывания могут быть простыми или сложными. Так же просто, как приказать функции или процессу выйти, так же ответственно, как перечислить набор инструкций для повторения.

  • if

  • do-while

  • while

  • for

  • for-in, несимволические ключи объектов перечисления, в том числе на круговых объектах, обычно используемые с методом hasOwnProperty

  • for-of, перебирать элементы (значения) итерируемого объекта

  • for-await-for создает цикл, который облегчает асинхронные итерации и синхронные итерации. Как и оператор await, этот оператор можно использовать только внутри асинхронной функции.

    /**
 * variable 为每次迭代的结果值，如果迭代对象 iterable 包含的是异步变量，则 variable 为 Promise 的值，否则是值本身
for await (variable of iterable) {
  statement
}
*/
async function* asyncGenerator() {
  var i = 0;
  while (i < 3) {
    yield i++;
  }
}

(async function() {
  for await (num of asyncGenerator()) {
    console.log(num);
  }
})();
// 0
// 1
// 2

  • Операторы меток, операторы меток используются для маркировки операторов, таких как метка: оператор. Метки потребляются операторами break и continue. Типичным сценарием применения операторов меток являются вложенные циклы.

    // start 是一个标签
start: for (let i = 0; i < 10; i++) {
  for (let j = 0; j < 10; j++) {
    if (i === 5 && j === 5) {
      // continue 会跳到外层循环
    	continue start;
      // break 会跳出外层循环
      // break start;
  	}
  	console.log(i)
  }   
}

  • операторы break и continue используются для операторов цикла, break означает выход из цикла, continue означает пропуск текущего цикла

    for (let i = 0; i < 10; i++) {
  for (let j = 0; j < 10; j++) {
    if (i === 5 && j === 5) {
      // 跳过本次循环
      continue;
      // 跳出内层循环
      // break;
    }
    console.log(i)
  }
}

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

    // 不使用 with
const qs = location.search.substring(1);
const hostName = location.hostname;
console.log(qs, hostName)

// with
with(location) {
  const qs = search.substring(1)
  const hostName = hostname
  console.log(qs, hostName)
}

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

  • оператор switch, который использует оператор сравнения при сравнении каждого условия

функция

Функции являются основными компонентами любого языка, поскольку они могут инкапсулировать операторы, объединять логику и выполнять их в любом месте и в любое время. Функции в ECMAScript объявляются с помощью ключевого слова function, за которым следует набор параметров, а затем тело функции.

function fn(arg0, arg1, ...args) {
  console.log(arg0, arg1, ...args)
}
fn(1, 2, 3, 4, 5)	// 1 2 3 4 5

Лучшая практика предполагает, что функции либо имеют возвращаемое значение, либо не возвращают никакого значения. Функции, которые возвращают значение только при определенных условиях, могут вызвать неожиданные проблемы. Функции без оператора возврата возвращают значение undefined по умолчанию.

В строгом режиме имя функции не может иметь eval или arguments, а параметр функции не может иметь такое же имя.

Связь

Категории