Последние оригинальные статьи 😊:
- «Учебное пособие Amazing Webpack HMR (включая анализ исходного кода)»
- Удивительное руководство по процессу сборки Webpack
- Дополнительные материалы "WeakMap, которых вы не знаете"
- Дополнения к "Кляксе, которую вы не знаете"
- Потрясающее руководство по tsconfig.json
- «200 строк JS-кода помогут вам реализовать компилятор кода»
предисловие
Недавно проинтервьюировал многих фронтенд-кандидатов с начальником отдела, в том числеБольшинство людей, которые хотят перейти на лучшую учебную атмосферу, но хорошую учебную атмосферу тоже нужно немного создать 🌺.
С этой целью мы сформировали нашу внутреннюю команду "Современный JavaScript-коммандос», первое содержание обученияУчебник по современному JavaScriptсерии, чтобы помочь членам группы систематически закреплять свое обучение, иПусть каждый разработает метод систематического обучения и выведет резюме обучения.
Эта статья является первой частью резюме моего исследования, и я надеюсь, что ее можно использовать в качестве списка для самопроверки, чтобы помочь вам закрепить свои знания и извлечь уроки из прошлого.
Здесь также поделитесь «депозитной системой» и «депозитной регистрационной формой» нашей исследовательской группы 🍀
Затем начните делиться содержимым контрольного списка самопроверки.
1. Привет, мир!
1. Метод внедрения сценария
Есть два способа импортировать скрипты JavaScript:
-
<script>Скрипт вставки этикетки; -
<script>ЭтикеткаsrcЗадайте адрес скрипта.
2. Атрибут тега скрипта
<script>Теги имеют следующие общие свойства:
2.1 src
src: указывает URI внешнего скрипта, если он установленsrcфункция, содержимое тега script будет игнорироваться;
<script src="example-url.js"></script>
2.2 type
type: указывает язык скрипта, на который ссылаются, значением атрибута является тип MIME, включаяtext/javascript, text/ecmascript, application/javascript, а такжеapplication/ecmascript. Если это свойство не определено, сценарий будет рассматриваться как JavaScript.
ES6 добавляет новые значения свойствmodule, код будет рассматриваться как модуль JavaScript.
<script type="text/javascript"></script>
2.3 async
asyncУказывает, что как только скрипт станет доступен, он будет выполняться асинхронно.
Примечание: атрибут async доступен только для внешних скриптов (только при использовании атрибута src).
Существует несколько способов выполнения внешних скриптов:
еслиasync="async": скрипт выполняется асинхронно относительно остальной части страницы (скрипт будет выполняться по мере продолжения парсинга страницы);
если не использоватьasync а такжеdefer="defer": Скрипт будет выполнен, когда страница завершит разбор;
Если ни использоватьasyncни использоватьdefer: прочитайте и выполните сценарий непосредственно перед тем, как браузер продолжит анализ страницы;
<script async="async"></script>
2.4 defer
deferСвойство указывает, следует ли откладывать выполнение скрипта до загрузки страницы.
Если ваш скрипт не изменяет содержимое документа, добавьте атрибут defer в<script>теги для ускорения обработки документов. Поскольку браузер знает, что он сможет безопасно прочитать остальную часть документа без выполнения сценария, он отложит интерпретацию сценария до тех пор, пока документ не будет показан пользователю.
<script defer="defer"></script>
Подробности можно прочитать"МДН<script>Глава ".
Во-вторых, структура кода.
1. Заявление
Операторы — это синтаксические структуры и команды, которые выполняют действия. Такие как:alert('Hello, world!')Это можно использовать для отображения оператора сообщения.
2. Точка с запятой
При наличии разрыва строки точку с запятой в большинстве случаев можно опустить. Но не все, например:
alert(3 +
1
+ 2);
Новичкам рекомендуется не опускать точку с запятой.
3. Примечания
Однострочные комментарии начинаются с двух символов косой черты.//Начинать.
// 注释文本
console.log("leo");
Многострочные комментарии начинаются с косой черты и звездочки.“/*”и заканчивается звездочкой и косой чертой“*/”.
/*
这是多行注释。
第二行注释。
*/
console.log("leo");
3. Современный режим, "использовать строго"
1. Функция
Строгий режим JavaScript — это способ использования ограниченного JavaScript с неявным выходом из «небрежного режима».
"use strict"Директивы переводят движок браузера в «современный» режим, изменяя поведение некоторых встроенных функций.
2. Используйте
Добавив в начало скрипта файл/функцию"use strict";объявление для включения строгого режима.
Включите строгий режим глобально:
// index.js
"use strict";
const v = "Hi! I'm a strict mode script!";
Включите строгий режим внутри функции:
// index.js
function strict() {
'use strict';
function nested() {
return "And so am I!";
}
return "Hi! I'm a strict mode function! " + nested();
}
3. На заметку
-
"use strict"Его необходимо определить в самом верху скрипта (кроме внутренних функций), иначе строгий режим может быть не включен. - Находясь в строгом режиме, строгий режим нельзя отключить.
4. Опыт
включить"use strict"После этого присваивание неопределенного элемента вызовет исключение:
"use strict";
leo = 17; // Uncaught ReferenceError: leo is not defined
включить"use strict", возникает исключение при попытке удалить неудаляемое свойство:
"use strict";
delete Object.prototype; // Uncaught TypeError: Cannot delete property 'prototype' of function Object() { [native code] }
Подробности можно прочитать«Глава строгого режима MDN».
4. Переменные
1. Введение
Переменная — это «именованное хранилище» данных.
2. Используйте
В настоящее время есть три ключевых слова, которые можно использовать для определения переменных: var/let/const. Разницу между тремя можно прочитать"Пусть команда и const".
let name = "leo";
let name = "leo", age, addr;
let name = "leo", age = 27, addr = "fujian";
3. Предложения по именованию
Именование переменных имеет 2 ограничения:
- Имена переменных должны содержать толькобуквы, цифры, символы
$а также_. - первый символ долженнечисловой. Есть также несколько предложений по именованию переменных:
- Константы обычно пишутся заглавными буквами, например
const PI = 3.141592; - Используйте читаемые имена, такие как
userNameилиshoppingCart.
4. На заметку
- Имена переменных JavaScript чувствительны к регистру, как и переменные
leoа такжеLeoразные; - Имена переменных JavaScript допускают неанглийские буквы, но не рекомендуются, например
let 平安 = "leo"; - избегать использования
a,b,cэто сокращение.
Пять, тип данных
JavaScript — этослабо типизированныйИлидинамический язык. Это означает, что вам не нужно заранее объявлять тип переменной, тип будет автоматически определен во время выполнения программы. Это также означает, что вы можете использовать одну и ту же переменную для хранения разных типов данных:
var foo = 42; // foo is a Number now
foo = "bar"; // foo is a String now
foo = true; // foo is a Boolean now
Подробности можно прочитать«Типы данных и структуры данных MDN JavaScript».
1. Восемь типов данных
Первые семь являются базовыми типами данных, также известными как примитивные типы (само значение не может быть изменено), в то время какobjectдля сложных типов данных.
Восемь типов данных:
-
numberДля любого типа числа: целое число или число с плавающей запятой, целое число в диапазоне ±2. -
bigintДля целых чисел произвольной длины. -
stringДля строк: строка может содержать один или несколько символов, поэтому отдельного односимвольного типа не существует. -
booleanиспользуется дляtrueа такжеfalse. -
nullдля неизвестных значений - только одинnullНезависимый тип значения. -
undefinedдля неопределенных значений - только одинundefinedНезависимый тип значения. -
symbolдля уникальных идентификаторов. -
objectдля более сложных структур данных.Подробно о каждом типе будет рассказано позже.
2. Определить тип данных
пройти черезtypeofПроверка оператора:
- Две формы:
typeof xилиtypeof(x). - Возвращает имя типа в виде строки, например.
"string". -
typeof nullвернусь"object"- Это ошибка в языке программирования JavaScript, на самом деле это не ошибка.object.
typeof "leo" // "string"
typeof undefined // "undefined"
typeof 0 // "number"
typeof NaN // "number"
typeof 10n // "bigint"
typeof true // "boolean"
typeof Symbol("id") // "symbol"
typeof [1,2,3,4] // "object"
typeof Math // "object" (1) Math 是一个提供数学运算的内建 object。
typeof null // "object" (2) JavaScript 语言的一个错误，null 不是一个 object。null 有自己的类型，它是一个特殊值。
typeof alert // "function" (3) alert 在 JavaScript 语言中是一个函数。
Шесть, преобразование типов
Переменные JavaScript можно преобразовать в новые переменные или другие типы данных:
- с помощью функции JavaScript
- Автоматическое преобразование через сам JavaScript
1. Преобразование строк
через глобальный методString()Преобразуйте **другие типы данных (любой тип чисел, букв, логических значений, объектов)** в тип String:
String(123); // "123"
// Number方法toString()/toExponential()/toFixed()/toPrecision() 也有同样效果。
String(false); // "false"
// Boolean方法 toString() 也有同样效果。
String(new Date()); // "Sun Jun 07 2020 21:44:20 GMT+0800 (中国标准时间)"
// Date方法 toString() 也有同样效果。
String(leo);
2. Числовое преобразование
Другие типы данных можно преобразовать в числовой тип следующими способами:
- унарный оператор
+
const age = +"22"; // 22
-
Numberметод
const age = Number("22"); // 22
Number.parseFloat("22"); // 22
Number.parseInt("22"); // 22
- Другие способы преобразования числового типа
// 布尔值
Number(false) // 返回 0
Number(true) // 返回 1
// 日期
const date = new Date();
Number(date); // 返回 1591537858154
date.getTime(); // 返回 1591537858154，效果一致。
// 自动转换
5 + null // 返回 5 null 转换为 0
"5" + null // 返回"5null" null 转换为 "null"
"5" + 1 // 返回 "51" 1 转换为 "1"
"5" - 1 // 返回 4 "5" 转换为 5
3. Преобразование логических значений
Правила преобразования следующие:
- Интуитивно «нулевые» значения (такие как
0, пустой строки,null,undefinedа такжеNaN) станетfalse. - Другие значения становятся
true.
Boolean(1); // true
Boolean(0); // false
Boolean("hello"); // true
Boolean(""); // false
Boolean("0"); // true
Boolean(" "); // 空白, 也是 true (任何非空字符串是 true)
4. Резюме
7. Операторы
1. Концепция оператора
Общие операторы, такие как сложение+, вычитание-,умножение*и деление/, чтобы привести пример, чтобы ввести некоторые понятия:
let sum = 1 + 2;
let age = +18;
в:
- операция сложения
1 + 2середина,1а также22 операнда, левый операнд1И правильный операнд2,Прямо сейчасОперанд — это объект, над которым действует оператор. -
1 + 2Выражение содержит 2 операнда, поэтому его еще называют знаком плюс в выражении+дляБинарный оператор. - существует
+18плюс войти+соответствует только одному операнду, тоунарный оператор.
2. + оператор
let msg = "hello " + "leo"; // "hello leo"
let total = 10 + 20; // 30
let text1 = "1" + "2"; // "12"
let text2 = "1" + 2; // "12"
let text3 = 1 + "2"; // "12"
let text4 = 1 + 2 + "3"; // "33"
let num = +text1; // 12 转换为 Number 类型
3. Приоритет оператора
Приоритет операторов определяет порядок выполнения операций в выражении, причем операторы с более высоким приоритетом выполняются первыми. В таблице ниже все операторы ранжированы в порядке старшинства от высокого (20) до низкого (1).
| приоритет | Тип операции | Актуальность | оператор |
|---|---|---|---|
| 20 | 圆括号 |
н/д (не актуально) | ( … ) |
| 19 | 成员访问 |
слева направо | … . … |
需计算的成员访问 |
слева направо | … [ … ] |
|
new(со списком параметров) |
n/a | new … ( … ) |
|
| вызов функции | слева направо | … ( … ) |
|
| Необязательная цепочка | слева направо | ?. |
|
| 18 | new(без списка параметров) | справа налево | new … |
| 17 | пост инкремент(оператор после) | n/a | |
… ++ |
|||
| пост декремент(оператор после) | … -- |
||
| 16 | логическое не | справа налево | ! … |
| побитовое НЕ | ~ … |
||
| унарное сложение | + … |
||
| унарное вычитание | - … |
||
| Предварительное увеличение | ++ … |
||
| Предекремент | -- … |
||
| typeof | typeof … |
||
| void | void … |
||
| delete | delete … |
||
| await | await … |
||
| 15 | власть | справа налево | … ** … |
| 14 | умножение | слева направо | |
… * … |
|||
| разделение | … / … |
||
| по модулю | … % … |
||
| 13 | добавление | слева направо | |
… + … |
|||
| вычитание | … - … |
||
| 12 | Побитовый сдвиг влево | слева направо | … << … |
| побитовый сдвиг вправо | … >> … |
||
| беззнаковый сдвиг вправо | … >>> … |
||
| 11 | меньше, чем | слева направо | … < … |
| меньше или равно | … <= … |
||
| больше, чем | … > … |
||
| больше или равно | … >= … |
||
| in | … in … |
||
| instanceof | … instanceof … |
||
| 10 | знак равенства | слева направо | |
… == … |
|||
| не знак равенства | … != … |
||
| полный знак равенства | … === … |
||
| неконгруэнтный знак | … !== … |
||
| 9 | побитовое И | слева направо | … & … |
| 8 | Побитовое исключающее ИЛИ | слева направо | … ^ … |
| 7 | побитовое ИЛИ | слева направо | … | … |
| 6 | логический и | слева направо | … && … |
| 5 | логический или | слева направо | … || … |
| 4 | условный оператор | справа налево | … ? … : … |
| 3 | назначать | справа налево | … = … |
… += … |
|||
… -= … |
|||
… *= … |
|||
… /= … |
|||
… %= … |
|||
… <<= … |
|||
… >>= … |
|||
… >>>= … |
|||
… &= … |
|||
… ^= … |
|||
… |= … |
|||
| 2 | yield | справа налево | yield … |
| yield* | yield* … |
||
| 1 | спред оператор | n/a |
...… |
| 0 | запятая | слева направо | … , … |
3 > 2 && 2 > 1
// return true
3 > 2 > 1
// 返回 false，因为 3 > 2 是 true，并且 true > 1 is false
// 加括号可以更清楚：(3 > 2) > 1
8. Сравнение значений
1. Общие сравнения
Сравнение значений в JS очень математическое:
- Больше / Меньше / Больше или равно / Меньше или равно:
a>b/a<b/a>=b/a<=b; - Равенство судей:
// 使用 ==，非严格等于，不关心值类型
// == 运算符会对比较的操作数做隐式类型转换，再比较
'1' == 1; // true
// 使用 ===，严格相等，关心值类型
// 将数字值 -0 和 +0 视为相等，并认为 Number.NaN 不等于 NaN。
'1' === 1; // false
- Анализ не равно:
И суждений, как равных, два:
!=/!==.
2. Суждение о равенстве (Object.is())
Кроме того, ES6 добавилObject.isметод, чтобы определить, являются ли два значения одинаковыми, синтаксис выглядит следующим образом:
Object.is(value1, value2);
Два значения совпадают, если выполняется любое из следующих условий:
- Оба значения
undefined - Оба значения
null - Оба значения
trueили обаfalse - Два значения — это строки, состоящие из одинакового количества символов в одинаковом порядке.
- два значения относятся к одному и тому же объекту
- оба значения являются числами и
Object.is('foo', 'foo'); // true
Object.is(window, window); // true
Object.is('foo', 'bar'); // false
Object.is([], []); // false
var foo = { a: 1 };
var bar = { a: 1 };
Object.is(foo, foo); // true
Object.is(foo, bar); // false
Object.is(null, null); // true
// 特例
Object.is(0, -0); // false
Object.is(0, +0); // true
Object.is(-0, -0); // true
Object.is(NaN, 0/0); // true
Совместимость с полифилл-процессингом:
if (!Object.is) {
Object.is = function(x, y) {
// SameValue algorithm
if (x === y) { // Steps 1-5, 7-10
// Steps 6.b-6.e: +0 != -0
return x !== 0 || 1 / x === 1 / y;
} else {
// Step 6.a: NaN == NaN
return x !== x && y !== y;
}
};
}
3. Сравнение null и undefined
Суждение о равенстве относительно простое:
null == undefined; // true
null === undefined; // false
Для других сравнений они сначала преобразуют номер бита:nullПеревести в0,undefiedПеревести вNaN.
null > 0; // false 1
null >= 0; // true 2
null == 0; // false 3
null < 1; // true 4
требует внимания:null == 0; // falseВот потому что:undefinedа такжеnullпроверить на равенство==серединаПреобразование типов производиться не будет., у них есть свои независимые правила сравнения, поэтому они не будут равны ничему, кроме взаимного равенства.
undefined > 0; // false 1
undefined > 1; // false 2
undefined == 0; // false 3
Строки 1 и 2 обе возвращаютсяfalseПотому чтоundefinedпреобразуется по сравнению сNaN,а такжеNaNэто специальное числовое значение, которое возвращается при сравнении с любым значениемfalse.
строка 3 возвращаетfalseпотому что это проверка на равенство, аundefinedтолько сnullРавно, не равно другим значениям.
9. предупреждение/подсказка/подтверждение
1. alert
Отображает диалоговое окно предупреждения с указанным текстом и кнопкой OK.Примечание. Модальное окно всплывает и приостанавливает выполнение сценария до тех пор, пока пользователь не нажмет кнопку «ОК».
// 语法
window.alert(message);
alert(message);
// 示例
alert('hello leo!');
messageЯвляется ли текстовая строка отображаемой в диалоговом окне.Если переданы другие типы значений, она будет преобразована в строку.
2. prompt
Отображает диалоговое окно, содержащее текстовое сообщение, предлагающее пользователю ввести текст.Примечание. Модальное окно всплывает и приостанавливает выполнение сценария до тех пор, пока пользователь не нажмет кнопку «ОК».При нажатии OK, чтобы вернуться к тексту, нажмите Отмена или нажмите Esc, чтобы вернутьсяnull.
Синтаксис следующий:
let result = window.prompt(text, value);
-
resultСтрока для хранения текста, введенного пользователем, или null. -
textСтрока, которая предлагает пользователю ввести текст. Если нет содержимого подсказки, этот параметр можно опустить. -
valueЗначение по умолчанию в поле ввода текста, этот параметр также можно не указывать. Однако в Internet Explorer 7 и 8 отсутствие этого параметра приводит к тому, что в поле ввода отображается значение по умолчанию «undefined».
3. confirm
Window.confirm()метод отображает модальное диалоговое окно с необязательным сообщением и двумя кнопками (ОК и Отмена).Примечание. Модальное окно всплывает и приостанавливает выполнение сценария до тех пор, пока пользователь не нажмет кнопку «ОК».Синтаксис следующий:
let result = window.confirm(message);
- message — необязательная строка для отображения в диалоговом окне.
- Результат — логическое значение, указывающее, следует ли выбрать «ОК» или «Отмена» (true означает «ОК»).
10. Условные операторы: если и '?'
1. если заявление
Когда оператор if, когда условное выражение, выражение будет преобразовано в логическое значение, когда код выполняется внутри truey. Правила преобразования, такие как:
- количество
0, пустой строки"",null,undefinedа такжеNaNбудет преобразован вfalse. Потому что они называются «ложными» значениями. - другие значения преобразуются в
true, поэтому их называют "правдивыми".
2. Тернарный оператор
Условный (тернарный) оператор— единственный оператор в JavaScript, который принимает три операнда. За условием следует вопросительный знак (?), если условиеtruthy, будет выполнено выражение А после вопросительного знака, после выражения А следует двоеточие (:), если условиеfalsy, будет выполнено выражение B после двоеточия. Этот оператор часто используется как[if](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else)Используйте краткую форму утверждения.
грамматика:
condition ? exprIfTrue : exprIfFalse
- условие Результат вычисления используется как выражение для условия.
- exprIfTrue Выражение exprIfTrue будет оцениваться, если условие выражения оценивается как истинное (равно истинному или может быть преобразовано в истинное).
- exprIfFalse Если условие выражения оценивается как ложное (которое может быть преобразовано в ложное), то выражение exprIfFalse будет выполнено. Пример:
let getUser = function(name){
return name === 'leo' ? 'hello leo!' : 'unknow user';
}
// 可以简写如下：
let getUser = name => name === 'leo' ? 'hello leo!' : 'unknow user';
getUser('leo'); // "hello leo!"
getUser('pingan'); // "unknow user"
11. Логические операторы
Вы можете подробно прочитать«Логические операторы MDN».
1. Введение в операторы
Логические операторы показаны в следующей таблице (где_expr_может быть любойТипы, не обязательно логическое значение):
| оператор | грамматика | иллюстрировать |
|---|---|---|
Логическое И, И (&&) |
_expr1_ && _expr2_ |
подобноexpr**1**может быть преобразован вtrue, затем вернутьсяexpr**2**; иначе вернутьexpr**1**. |
логическое или, ИЛИ (||) |
_expr1_ || _expr2_ |
подобноexpr**1**может быть преобразован вtrue, затем вернутьсяexpr**1**; иначе вернутьexpr**2**. |
Логическое НЕ, НЕ (!) |
!_expr_ |
подобноexprможет быть преобразован вtrue, затем вернутьсяfalse; иначе вернутьtrue. |
Если значение может быть преобразовано вtrueтогда это значение называетсяtruthy, если его можно преобразовать вfalse, то это значение называетсяfalsy.
будет преобразован вfalseВыражения:
-
null; -
NaN; -
0; - пустой строки (
""or''или ````); -
undefined. несмотря на то что&&а также||Операторы могут принимать нелогические операнды, но их все же можно считать логическими операторами, поскольку их возвращаемое значение всегда можно преобразовать в логическое значение. Если вы хотите явно преобразовать их возвращаемое значение (или выражение) в логическое значение, используйтедвойной оператор НЕ(который!!)илиBooleanКонструктор. В JavaScript есть три логических оператора:||(или),&&(а также),!(Нет).
2. Пример оператора
- Логическое И (&&) Возвращает true, если все условия истинны, иначе false.
a1 = true && true // t && t 返回 true
a2 = true && false // t && f 返回 false
a3 = false && true // f && t 返回 false
a4 = false && (3 == 4) // f && f 返回 false
a5 = "Cat" && "Dog" // t && t 返回 "Dog"
a6 = false && "Cat" // f && t 返回 false
a7 = "Cat" && false // t && f 返回 false
a8 = '' && false // f && f 返回 ""
a9 = false && '' // f && f 返回 false
- логическое или ( || ) Возвращает true, если одно из всех условий истинно, иначе false.
o1 = true || true // t || t 返回 true
o2 = false || true // f || t 返回 true
o3 = true || false // t || f 返回 true
o4 = false || (3 == 4) // f || f 返回 false
o5 = "Cat" || "Dog" // t || t 返回 "Cat"
o6 = false || "Cat" // f || t 返回 "Cat"
o7 = "Cat" || false // t || f 返回 "Cat"
o8 = '' || false // f || f 返回 false
o9 = false || '' // f || f 返回 ""
- Логическое НЕ (!)
n1 = !true // !t 返回 false
n2 = !false // !f 返回 true
n3 = !'' // !f 返回 true
n4 = !'Cat' // !t 返回 false
- Двойное невезение ( !! )
n1 = !!true // !!truthy 返回 true
n2 = !!{} // !!truthy 返回 true: 任何 对象都是 truthy 的…
n3 = !!(new Boolean(false)) // …甚至 .valueOf() 返回 false 的布尔值对象也是！
n4 = !!false // !!falsy 返回 false
n5 = !!"" // !!falsy 返回 false
n6 = !!Boolean(false) // !!falsy 返回 false
3. Правила преобразования логических значений
- Преобразовать && в ||
condi1 && confi2
// 转换为
!(!condi1 || !condi2)
- Преобразовать || в &&
condi1 || condi2
// 转换为
!(!condi1 && !condi2)
4. Значение короткого замыкания
Поскольку порядок вычисления логических выражений слева направо, можно также «закоротить» вычисления с помощью следующих правил:
-
(some falsy expression) && (_expr)_Результат расчета короткого замыкания ложный. -
(some truthy expression) || _(expr)_Результат расчета короткого замыкания верен. Короткое замыкание означает часть expr в приведенном выше выражении.не будет выполнен, поэтому любые побочные эффекты expr не сработают (например, если expr является вызовом функции, этот вызов не произойдет). Причина этого в том, что значение всего выражения определяется после вычисления первого операнда. См. пример:
function A(){ console.log('called A'); return false; }
function B(){ console.log('called B'); return true; }
console.log( A() && B() );
// logs "called A" due to the function call,
// then logs false (which is the resulting value of the operator)
console.log( B() || A() );
// logs "called B" due to the function call,
// then logs true (which is the resulting value of the operator)
5. Обратите внимание
И операция&&Соотношение приоритетов или операция||под кайфом.
так что кодa && b || c && dполностью следовать&&Выражение заключено в скобки:(a && b) || (c && d).
12. Циклы: while и for
1. пока цикл
Вы можете подробно прочитать"МДН пока".пока операторВы можете выполнить указанный фрагмент кода в цикле, если условное выражение истинно, до тех пор, пока выражение не станет истинным, чтобы завершить цикл. Такие как:
var n = 0;
var x = 0;
while (n < 3) {
n++;
x += n;
}
Если тело цикла представляет собой одну строку, фигурные скобки можно опустить:
let i = 3;
while(i) console.log(i --);
2. сделать... в то время как цикл
Вы можете подробно прочитать"MDN делать...пока".do...whileоператор создает цикл, который выполняет указанный оператор до тех пор, покаconditionЗначение ложно. в исполненииstatementпосле обнаруженияcondition, поэтому указанныйstatementСделайте это хотя бы один раз.
Такие как:
var result = '';
var i = 0;
do {
i += 1;
result += i + ' ';
} while (i < 5);
3. для петли
Вы можете подробно прочитать"МДН для".forоператор используется для создания цикла и состоит из трех необязательных выражений, заключенных в круглые скобки, разделенных точкой с запятой, за которыми следует оператор для выполнения в цикле (обычнооператор блока).
Синтаксис такой:
for (begin; condition; step) {
// ……循环体……
}
Пример:
for (let i = 0; i < 3; i++) {
console.log(i);
}
описывать:
| begin | i = 0 |
Выполнить один раз при входе в цикл. |
|---|---|---|
| condition | i < 3 |
Проверяйте перед каждой итерацией цикла, если false, останавливайте цикл. |
| тело (тело цикла) | alert(i) |
Когда условие истинно, прогон повторяется. |
| step | i++ |
Выполняется после каждой итерации тела цикла. |
4. Необязательно для выражений
forВсе три выражения в круглых скобках в начале инструкции являются необязательными.
- Не указывайте блок инициализатора в выражении
var i = 0;
for (; i < 3; i++) {
console.log(i);
}
- Не указывайте в выражении условный блок, который должен быть необходим для завершения цикла в теле цикла, иначе будет бесконечный цикл
for (var i = 0;; i++) {
console.log(i);
if (i > 3) break;
}
- Не указывая все выражения, вам также необходимо указать условия завершения цикла в теле цикла.
var i = 0;
for (;;) {
if (i > 3) break;
console.log(i);
i++;
}
5. оператор перерыва
Вы можете подробно прочитать"МДН перерыв".
Оператор break прерывает текущий цикл,switchзаявление илиlabelоператора и передать управление программой оператору, непосредственно следующему за прерванным оператором.
В инструкции while:
function testBreak(x) {
var i = 0;
while (i < 6) {
if (i == 3) {
break;
}
i += 1;
}
return i * x;
}
В качестве альтернативы вы можете пометить блоки кода и указать в break метку оператора блока, который нужно пропустить:
outer_block:{
inner_block:{
console.log ('1');
break outer_block; // breaks out of both inner_block and outer_block
console.log (':-('); // skipped
}
console.log ('2'); // skipped
}
Следует отметить, что оператор break должен быть встроен в метку или блок кода, к которому он применяется, иначе будет сообщено об ошибке:
block_1:{
console.log ('1');
break block_2; // SyntaxError: label not found
}
block_2:{
console.log ('2');
}
6. продолжить оператор
Оператор continue завершает выполнение операторов в текущем цикле или отмечает текущую итерацию цикла и продолжает выполнение цикла на следующей итерации.
а такжеbreakРазница между операторами в том, что continue не завершает итерацию цикла, а:
- существует
whileВ цикле поток управления возвращается к условному решению; - существует
forВ цикле поток управления переходит к оператору обновления. Примечание: continue также должен находиться внутри соответствующего цикла, иначе будет сообщено об ошибке.
i = 0;
n = 0;
while (i < 5) {
i++;
if (i === 3) {
continue;
}
n += i;
}
С этикеткой:
var i = 0,
j = 8;
checkiandj: while (i < 4) {
console.log("i: " + i);
i += 1;
checkj: while (j > 4) {
console.log("j: "+ j);
j -= 1;
if ((j % 2) == 0)
continue checkj;
console.log(j + " is odd.");
}
console.log("i = " + i);
console.log("j = " + j);
}
7. Уведомление
запретитьbreak/continueСправа от '?':
(i > 5) ? console.log(i) : continue; // continue 不允许在这个位置
Это вызовет синтаксическую ошибку.
Обратите внимание, что синтаксические конструкции, не являющиеся выражениями, нельзя использовать с тернарным оператором.?использовать вместе. особенноbreak/continueТакие директивы нельзя использовать таким образом.
8. Резюме
Три цикла:
-
while- Проверяйте условие перед каждой итерацией. -
do..while- Проверяйте условие после каждой итерации. -
for (;;)- Условие проверяется перед каждой итерацией, можно использовать другие настройки. обычно используетсяwhile(true)построить «бесконечный» цикл. Такую петлю, как и любую другую петлю, можно пропустить черезbreakкоманду прекратить. Если мы не хотим ничего делать в текущей итерации и хотим перейти к следующей итерации, мы можем использоватьcontinueинструкция.break/continueПоддерживаются метки перед циклами. Этикеткаbreak/continueЕдинственный способ вырваться из вложенного цикла выйти наружу.
Тринадцать, оператор «переключиться»
switchОператоры используются для сопоставления значения выражения с оператором case и выполнения оператора, соответствующего случаю.switchОператоры могут заменить несколько операторов if, предоставляя более наглядный способ выбора нескольких ветвей.
1. Грамматика
switchЗаявление содержит хотя бы одинcaseКод кода и необязательныйdefaultБлок кода:
switch(expression) {
case 'value1':
// do something ...
[break]
default:
// ...
[break]
}
когдаexpressionЗначение выражения такое же, какvalue1При совпадении выполняется кодовый блок.
если нетcaseпредложение соответствует, выбираетdefaultпредложение выполняется, даже еслиdefaultПункт не является, непосредственно к исполнителюswitchконец.
2. Группировка вариантов использования
Так называемая группировка кейсов заключается в совместном использовании одного и того же фрагмента кода с несколькими ветвями кейсов, как в следующем примере.case 1 а такжеcase 2:
let a = 2;
switch (a) {
case 1: // (*) 下面这两个 case 被分在一组
case 2:
console.log('case is 1 or 2!');
break;
case 3:
console.log('case is 3!');
break;
default:
console.log('The result is default.');
}
// 'case is 1 or 2!'
3. На заметку
expressionЗначение выражения такое же, какcaseЗначения сравниваются на строгое равенство:
function f(n){
let a ;
switch(n){
case 1:
a = 'number';
break;
case '1':
a = 'string';
break;
default:
a = 'default';
break;
}
console.log(a)
}
f(1); // number
f('1'); // string
- **если нет
break, программа продолжится до следующего ** без каких-либо проверок**case**:
let a = 2 + 2;
switch (a) {
case 3:
console.log( 'Too small' );
case 4:
console.log( 'Exactly!' );
case 5:
console.log( 'Too big' );
default:
console.log( "I don't know such values" );
}
// Exactly!
// Too big
// I don't know such values
-
**default****Место ****case**Вышеупомянутое не влияет на сопоставление:
function f(n){
switch (n) {
case 2:
console.log(2);
break;
default:
console.log('default')
break;
case 1:
console.log('1');
break;
}
}
f(1); // 1
f(2); // 2
f(3); // default
switchсуществует в заявленииlet/constДублирующий вопрос утверждения:
// 以下定义会报错
function f(n){
switch(n){
case 1:
let msg = 'hello';
console.log(1);
break;
case 2:
let msg = 'leo';
break;
default:
console.log('default');
break;
}
}
// Error: Uncaught SyntaxError: Identifier 'msg' has already been declared
Это связано с двумяletнаходятся в одной и той же области блока, поэтому они считаются повторяющимися объявлениями одного и того же имени переменной.
Решение состоит в том, чтобы простоcaseОбертывание операторов в круглые скобки решает эту проблему:
function f(n){
switch(n){
case 1:{ // added brackets
let msg = 'hello';
console.log(msg);
break;
}
case 2: {
let msg = 'leo';
console.log(msg);
break;
}
default:
console.log('default');
break;
}
}
14. Функция
Функции позволяют вызывать часть кода несколько раз, избегая дублирования кода.
Некоторые встроенные функции, о которых мы узнали ранее:alert(msg) / prompt(msg, default) / confirm(quesyion)Ждать.
1. Определение функции
Существует два способа определения функций:объявление функцииа такжефункциональное выражение.
1.1 Описание функции
Если вы определяете простойgetUserфункция:
function getUser(name){
return 'hello ' + name;
}
getUser('leo"); // 函数调用
При определении функции через объявление функции оно должно состоять из следующих частей:
- имя функции -
getUser; - Список параметров функции —
name; - JS-оператор выполнения функции —
return 'hello ' + name.
1.2 Функциональные выражения
Аналогично объявлению переменных или сgetUserНапример:
let getUser = function(name){
return 'hello ' + name;
}
Кроме того, функциональные выражения также могут предоставлять имя функции и использоваться внутри функции для ссылки на саму функцию:
let fun = function f(n){
return n < 3 ? 1 : n * f(n - 1);
}
fun(3); // 3
fun(5); // 60
2. Вызов функции
Когда функция определена, она не выполняется автоматически, а должна вызываться с именем функции, как в приведенном выше примере:
fun(3); // 3
Просто обратите внимание:использоватьфункциональное выражениеПри определении функции метод вызова функции должен быть написан после определения, иначе будет сообщено об ошибке:
console.log(fun()); // Uncaught ReferenceError: fun is not defined
let fun = function(){return 1};
при использованииобъявление функциито проблема не возникает:
console.log(fun()); // 1
function fun(){return 1};
Причина в том, что подъем функций работает только с объявлениями функций, а не с функциональными выражениями.
3. Переменные в функциях
Внутри функции могут использоваться локальные переменные и внешние переменные.
3.1 Локальные переменные
Переменные, объявленные в функции, видны только внутри этой функции.
let fun = function(){
let name = 'leo';
}
fun();
console.log(name); // Uncaught ReferenceError: name is not defined
3.2 Глобальные переменные
Внешние переменные могут использоваться внутри функций, а значение внешних переменных может быть изменено.
let name = 'leo';
let fun = function(){
let text = 'Hello, ' + name;
console.log(text);
}
fun(); // Hello, leo
Когда в функции также есть переменная с тем же именем, что и у внешней переменной, внешняя переменная игнорируется:
let name = 'leo';
let fun = function(){
let name = 'pingan8787';
let text = 'Hello, ' + name;
console.log(text);
}
fun(); // Hello, pingan8787
4. Функциональные параметры
Начиная с ECMAScript 6, есть два новых типа параметров: параметры по умолчанию и остаточные параметры.
4.1 Параметры по умолчанию
Если функция не передает параметры, значение параметра по умолчанию равноundefined, обычно установка значений параметров по умолчанию выполняется так:
// ES6 之前，没有设置默认值
function f(a, b){
b = b ? b : 1;
return a * b;
}
f(2,3); // 6
f(2); // 2
// ES6，设置默认值
function f(a, b = 1){
return a * b;
}
f(2,3); // 6
f(2); // 2
4.2 Остальные параметры
Вы можете представлять собой неопределенное количество параметров в параметре как массив следующим образом:
function f (a, ...b){
console.log(a, b);
}
f(1,2,3,4); // a => 1 b => [2, 3, 4]
Теперь, когда мы говорим о параметрах, без объекта arguments не обойтись.
4.3 Объект аргументов
Фактические параметры функции хранятся вмассивоподобный объект аргументовсередина. Внутри функции мы можем использовать объект arguments для получения всех аргументов функции:
let fun = function(){
console.log(arguments);
console.log(arguments.length);
}
fun('leo');
// Arguments ["leo", callee: ƒ, Symbol(Symbol.iterator): ƒ]
// 1
В качестве практического примера реализуйте функцию, которая объединяет любое количество аргументов в строку и выводит:
let argumentConcat = function(separator){
let result = '', i;
for(i = 1; i < arguments.length; i ++){
result += arguments[i] + separator;
}
return result;
}
argumentConcat(',', 'leo', 'pingan'); //"leo,pingan,"
5. Возвращаемое значение функции
В любом месте функции укажитеreturnинструкция, чтобы остановить выполнение функции и вернуть возвращаемое значение, указанное функцией.
let sum = function(a, b){
return a + b;
};
let res = sum(1, 2);
console.log(res); // 3
по умолчанию пустойreturnили нетreturnВозвращаемое значение функции равноundefined.
15. Выражения функций
Функциональные выражения — это способ определения функций, который был представлен в предыдущих главах, и эта часть будет посвящена введению.функциональное выражениеа такжеобъявление функцииРазница:
1. Синтаксические различия
// 函数表达式
let fun = function(){};
// 函数声明
function fun(){}
2. Создайте разницу во времени
Выражения функций создаются при достижении кода и доступны только с этого момента. И до определения декларации функции его можно назвать.
// 函数表达式
fun(); // Uncaught ReferenceError: fun is not defined
let fun = function(){console.log('leo')};
// 函数声明
fun(); // "leo"
function fun(){console.log('leo')};
3. Рекомендации по применению
Рекомендуется отдавать приоритет синтаксису объявления функции, который обеспечивает большую гибкость в организации кода, поскольку мы можем вызвать функцию до ее объявления.
16. Функция стрелки
В этой главе кратко представлены основы стрелочных функций, а в последующих главах они будут представлены полностью.
Функция стрелка выражениеСинтаксис новой функции экспрессии ES6 также называетсяфункция жирной стрелки, изменения: более лаконичные функции иthis.
1. Код стал более лаконичным
// 有1个参数
let f = v => v;
// 等同于
let f = function (v){return v};
// 有多个参数
let f = (v, i) => {return v + i};
// 等同于
let f = function (v, i){return v + i};
// 没参数
let f = () => 1;
// 等同于
let f = function (){return 1};
let arr = [1,2,3,4];
arr.map(ele => ele + 1); // [2, 3, 4, 5]
2. На заметку
- Функция стрелки не существует
this; - Стрелочные функции нельзя использовать какКонструктор, то есть нельзя использовать
newсоздать экземпляр; - Функция стрелки не существует
argumentsобъект, т.е. нельзя использовать, можно использоватьrestвместо этого параметр; - Функции стрелок не могут быть использованы
yieldкоманда, т. е. не может использоваться как функция генератора. Простой пример:
function Person(){
this.age = 0;
setInterval(() => {
this.age++;
}, 1000);
}
var p = new Person(); // 定时器一直在执行 p的值一直变化
Суммировать
Эта статья является первой частью «Списка самопроверки интерфейса JavaScript для начинающих и среднего уровня». Представленный контент в основном основан на общих базовых знаниях, а в учебных материалах точки знаний вводятся в сочетании с встречающимися сценариями. в фактическом развитии. Я надеюсь, что это поможет каждому проверить свой собственный уровень JavaScript и выявить недостатки.
| Author | Ван Пинъань |
|---|---|
| pingan8787@qq.com | |
| Блог | www.pingan8787.com |
| pingan8787 | |
| Рекомендуемые статьи дня | GitHub.com/Ping An8787/… |
| Брошюра ЕС | js.pingan8787.com |
| База знаний Юкэ | Cute-FrontEnd |