Javascript — циклы
Содержание:
- JavaScript
- Цикл while
- Цикл do…while
- Цикл for-in
- Пустые элементы
- The in Operator
- Definition and Usage
- Definition and Usage
- Вложенные циклы
- Цикл for…in
- JavaScript Bitwise Operators
- Parameter Values
- JavaScript Arithmetic Operators
- Использование for без блоков
- JavaScript
- Цикл for…of
- More Examples
- Comparison Operators
- JavaScript
- JavaScript
- Заключение
JavaScript
JS Array
concat()
constructor
copyWithin()
entries()
every()
fill()
filter()
find()
findIndex()
forEach()
from()
includes()
indexOf()
isArray()
join()
keys()
length
lastIndexOf()
map()
pop()
prototype
push()
reduce()
reduceRight()
reverse()
shift()
slice()
some()
sort()
splice()
toString()
unshift()
valueOf()
JS Boolean
constructor
prototype
toString()
valueOf()
JS Classes
constructor()
extends
static
super
JS Date
constructor
getDate()
getDay()
getFullYear()
getHours()
getMilliseconds()
getMinutes()
getMonth()
getSeconds()
getTime()
getTimezoneOffset()
getUTCDate()
getUTCDay()
getUTCFullYear()
getUTCHours()
getUTCMilliseconds()
getUTCMinutes()
getUTCMonth()
getUTCSeconds()
now()
parse()
prototype
setDate()
setFullYear()
setHours()
setMilliseconds()
setMinutes()
setMonth()
setSeconds()
setTime()
setUTCDate()
setUTCFullYear()
setUTCHours()
setUTCMilliseconds()
setUTCMinutes()
setUTCMonth()
setUTCSeconds()
toDateString()
toISOString()
toJSON()
toLocaleDateString()
toLocaleTimeString()
toLocaleString()
toString()
toTimeString()
toUTCString()
UTC()
valueOf()
JS Error
name
message
JS Global
decodeURI()
decodeURIComponent()
encodeURI()
encodeURIComponent()
escape()
eval()
Infinity
isFinite()
isNaN()
NaN
Number()
parseFloat()
parseInt()
String()
undefined
unescape()
JS JSON
parse()
stringify()
JS Math
abs()
acos()
acosh()
asin()
asinh()
atan()
atan2()
atanh()
cbrt()
ceil()
clz32()
cos()
cosh()
E
exp()
expm1()
floor()
fround()
LN2
LN10
log()
log10()
log1p()
log2()
LOG2E
LOG10E
max()
min()
PI
pow()
random()
round()
sign()
sin()
sqrt()
SQRT1_2
SQRT2
tan()
tanh()
trunc()
JS Number
constructor
isFinite()
isInteger()
isNaN()
isSafeInteger()
MAX_VALUE
MIN_VALUE
NEGATIVE_INFINITY
NaN
POSITIVE_INFINITY
prototype
toExponential()
toFixed()
toLocaleString()
toPrecision()
toString()
valueOf()
JS OperatorsJS RegExp
constructor
compile()
exec()
g
global
i
ignoreCase
lastIndex
m
multiline
n+
n*
n?
n{X}
n{X,Y}
n{X,}
n$
^n
?=n
?!n
source
test()
toString()
(x|y)
.
\w
\W
\d
\D
\s
\S
\b
\B
\0
\n
\f
\r
\t
\v
\xxx
\xdd
\uxxxx
JS Statements
break
class
continue
debugger
do…while
for
for…in
for…of
function
if…else
return
switch
throw
try…catch
var
while
JS String
charAt()
charCodeAt()
concat()
constructor
endsWith()
fromCharCode()
includes()
indexOf()
lastIndexOf()
length
localeCompare()
match()
prototype
repeat()
replace()
search()
slice()
split()
startsWith()
substr()
substring()
toLocaleLowerCase()
toLocaleUpperCase()
toLowerCase()
toString()
toUpperCase()
trim()
valueOf()
Цикл while
Инструкция while (англ. до тех пор, пока) создает цикл с предусловием. В скобках после слова while указывают некоторое логическое выражение или значение. Цикл начнется если значение этого выражения равно и будет работать до тех пор, пока это условие не обратится в . Общий синтаксис этого цикла выглядит так:
Следующий цикл while исполняется, пока значение переменной i меньше 3:
Выполнить код »
Скрыть результаты
После окончания третьей итерации условие i больше не является истинным, поэтому цикл завершается.
Для создания бесконечного цикла в качестве условия достаточно задать булево значение :
Это общепринятый способ создания бесконечного цикла. В прочих случаях (к примеру, если в рассмотренном нами примере убрать в коде i++) возможен вариант (в теории) создания бесконечного цикла. На практике, браузер выведет сообщение о «зависшем» скрипте и посетитель его остановит.
Цикл do…while
Инструкция do…while (англ. делай до тех пор, пока) отличается от цикла while тем, что в do…while сначала выполняется тело цикла, а затем проверяется условие продолжения цикла. Из-за такой особенности do…while называют циклом с постусловием. Таким образом, если условие do…while заведомо ложное, то хотя бы один раз блок операторов в теле цикла do…while всё равно выполнится.
Инструкция do…while представляет собой конструкцию из двух операторов, используемых совместно. Синтаксис этой конструкции следующий:
Пример do…while:
Выполнить код »
Скрыть результаты
Этот цикл продолжается, пока переменная i меньше 4. Она равна в начале цикла и увеличивается на 1 на каждой итерации.
Циклы с постусловием обычно используются, если тело цикла должно быть выполнено хотя бы один раз.
Цикл for-in
Цикл используется для перебора в случайном порядке перечисляемых свойств объекта и имеет следующий синтаксис:
for (переменная in объект) инструкция;
Слева от ключевого слова указывается имя переменной, которой перед началом каждой итерации цикла присваивается в виде строки имя одного из свойств объекта. Справа от ключевого слова указывается объект, свойства которого будут перебираться циклом. Цикл будет выполняться до тех пор, пока не будут перебраны все доступные свойства. Если переменная, представляющая объект, будет иметь значение или цикл не выполнится ни разу:
var obj = {x: 5, y: 10}; for (var prop in obj) { alert(prop); }
Чтобы связанный с циклом код был в одном месте, в цикле допускается объявлять переменную. Поэтому, в качестве выражения перед ключевым словом обычно выступает объявление переменной, которой будут присваиваться имена свойств.
С этой темой смотрят:
- Инструкции break и continue
- Метки инструкций
- Выражения и инструкции
- Преобразование типов данных
Пустые элементы
Массивы JavaScript допускают пустые элементы. Массив ниже синтаксически верный и имеет длину 3 элемента:
const arr = ; arr.length; // 3
Что еще более запутывает, так это то, что циклические конструкции трактуют иначе, чем . Ниже показано, как четыре циклических конструкции обрабатывают с пустым элементом. for/in и for/each пропускают пустой элемент, for и for/of — нет.
// Prints "a, undefined, c" for (let i = 0; i < arr.length; ++i) { console.log(arr); } // Prints "a, c" arr.forEach(v => console.log(v)); // Prints "a, c" for (let i in arr) { console.log(arr); } // Prints "a, undefined, c" for (const v of arr) { console.log(v); }
Если вам интересно, все 4 конструкции выведут «a, undefined, c» для .
Есть еще один способ добавить пустой элемент в массив:
// Equivalent to `` const arr = ; arr = 'e';
forEach() и for/in пропускают пустые элементы в массиве, for и for/of — нет. Поведение forEach() может вызвать проблемы, однако можно заметить, что дыры в массивах JavaScript, как правило, встречаются редко, поскольку они не поддерживаются в JSON:
$ node > JSON.parse('{"arr":}') { arr: } > JSON.parse('{"arr":}') { arr: } > JSON.parse('{"arr":}') SyntaxError: Unexpected token , in JSON at position 12
Таким образом, вам не нужно особо беспокоиться о дырах в пользовательских данных, если вы не предоставите своим пользователям доступ ко всей среде выполнения JavaScript.
Вывод: for/in и forEach() не реагируют на пустые элементы, также известные как «дыры», в массиве. Редко есть какая-либо причина рассматривать дыры как особый случай, а не рассматривать индекс как значение undefined. Если вы допускаете наличие дыр, ниже приведен пример файла .eslintrc.yml, который запрещает вызов forEach().
parserOptions: ecmaVersion: 2018 rules: no-restricted-syntax: - error - selector: CallExpression message: Do not use `forEach()`, use `for/of` instead
The in Operator
The in operator returns true if the specified property is in the specified object,
otherwise false:
Example
// Arraysvar cars = ;»Saab» in cars // Returns false (specify the index number instead of value)0 in cars // Returns true1 in cars // Returns true4 in cars // Returns false (does not exist)»length» in cars // Returns true (length is an Array property)// Objects
var person = {firstName:»John», lastName:»Doe», age:50};»firstName» in person // Returns true»age» in person // Returns true// Predefined objects»PI» in Math // Returns true»NaN» in Number // Returns true»length» in String // Returns true
Definition and Usage
The for statement creates a loop that is executed as long as a condition is
true.
The loop will continue to run as long as the condition is true. It will only
stop when the condition becomes false.
JavaScript supports different kinds of loops:
- for — loops through a block of code a number of times
- for/in — loops through the properties of an object
- for/of — loops through the values of an iterable object
- while — loops through a block of code while a specified condition is true
- do/while — loops through a block of code once, and then repeats the loop while a specified condition is true
Tip: Use the break statement
to break out of a loop, and the continue
statement to skip a value in the loop.
Definition and Usage
The for/in statement loops through the properties of an object.
The block of code inside the loop will be executed once for each property.
JavaScript supports different kinds of loops:
- for — loops through a block of code a number of times
- for/in — loops through the properties of an object
- for/of — loops through the values of an iterable object
- while — loops through a block of code while a specified condition is true
- do/while — loops through a block of code once, and then repeats the loop while a specified condition is true
Note: Do not use the for/in statement to loop through arrays
where index order is important. Use the for statement instead.
Вложенные циклы
Цикл внутри другого цикла называется вложенным. Вложенность циклов формально не ограничивается, однако нужно быть предельно осторожным, чтобы не допустить зацикливания. При каждой итерации внешнего цикла вложенный цикл выполняется полностью. Вложенные циклы можно создавать с помощью инструкции и инструкции .
Пример вложенного цикла:
Выполнить код »
Скрыть результаты
Теперь попытаемся разобраться, как это работает. Первый (внешний) цикл после каждой итерации увеличивает значение переменной i, а второй (внутренний) – переменной j. За одну итерацию внешнего цикла внутренний выполняется девять раз. По условию (i внешний цикл выполнится 9 раз. Соответственно вложенный цикл будет выполнятся тоже 9 раз, а код внутри него – 9*9 итого 81 раз.
Иными словами, код читаем так: натыкаемся на внешний цикл, делаем первый проход, во время прохода натыкаемся на еще один цикл (внутренний), делаем девять проходов по нему, каждый раз выводя текущее значение переменной j. Выводим значение i и далее возвращаемся в начало внешнего цикла для второго прохода и так 9 раз.
Цикл for…in
for…in используется для итерирования перечисляемых («enumerable») свойств объекта. Он применим ко всем объектам что имеют такие свойства.
Перечисляемое свойство — это такое свойство объекта, для которого параметр Enumerable установлен в true.
Синтаксис for…in
let rectangle={ height:100, width:200 } for(let prop in rectangle){ console.log(`${prop}=${rectangle}`) } // result height=100 width=200
Стоит заметить что цикл for in также проходит по унаследованным свойствам, если они перечисляемые. Кроме того, порядок выполнения случайный.
Цикл for…in и объекты
Метод for…in предоставляет самый простой способ итерирования ключей и значений объекта, так как объекты не имеют доступа к методу forEach для массивов. Конечно есть методы Object.keys и Object.values которые дают ту же функциональность, но цикл for…of более гибок.
Цикл for…in и массивы
Для массивов ключом является индекс. Из этого следует что индексы — это перечисляемые свойства.
Пример for…in для массива
let users= for(let index in users){ console.log(`users=${users}`) } // result users=root users=test
Но все же, в большинстве случаев не рекомендуется использовать цикл for..in для работы с массивами, преимущественно из-за того, что порядок итерирования не гарантируется.
Использование for…in для строк
Каждый символ в строке имеет индекс. И подобно массивам, ети индексы являются перечисляемыми свойствами.
Пример for…in для строки
let str= for(let index in str){ console.log(`${str}`) } // result I love JavaScript
JavaScript Bitwise Operators
Bit operators work on 32 bits numbers. Any numeric operand in the operation is converted into a 32 bit number. The result is converted back to a JavaScript number.
Operator | Description | Example | Same as | Result | Decimal |
---|---|---|---|---|---|
& | AND | x = 5 & 1 | 0101 & 0001 | 0001 | 1 |
| | OR | x = 5 | 1 | 0101 | 0001 | 0101 | 5 |
~ | NOT | x = ~ 5 | ~0101 | 1010 | 10 |
^ | XOR | x = 5 ^ 1 | 0101 ^ 0001 | 0100 | 4 |
<< | Left shift | x = 5 << 1 | 0101 << 1 | 1010 | 10 |
>> | Right shift | x = 5 >> 1 | 0101 >> 1 | 0010 | 2 |
The examples above uses 4 bits unsigned examples. But JavaScript uses 32-bit signed numbers.
Because of this, in JavaScript, ~ 5 will not return 10. It will return -6.
~00000000000000000000000000000101 will return 11111111111111111111111111111010
Parameter Values
Parameter | Description |
---|---|
statement1 | Optional. Executed before the loop (the code block) starts. Normally this statement is used to initialize a counter variable. To initiate multiple values, separate each value with a comma. Note: This parameter can be omitted. However, do not omit the semicolon «;» |
statement2 | Optional. Defines the condition for running the loop (the code block). Normally this statement is used to evaluate the condition of the counter variable. If it returns true, the loop will start over again, if it returns false, the loop will end.Note: This parameter can be omitted. However, do not omit the semicolon «;». Also, if you omit this parameter, you must provide a break inside the loop. Otherwise the loop will never end, which will crash your browser |
statement3 | Optional. Executed each time after the loop (the code block) has been executed. Normally this statement is used to increment or decrement the counter variable.Note: This parameter can be omitted (e.g. to increase/decrease values inside the loop) |
JavaScript Arithmetic Operators
Arithmetic operators are used to perform arithmetic between variables and/or values.
Given that y = 5, the table below explains the arithmetic operators:
Operator | Description | Example | Result in y | Result in x | Try it |
---|---|---|---|---|---|
+ | Addition | x = y + 2 | y = 5 | x = 7 | Try it » |
— | Subtraction | x = y — 2 | y = 5 | x = 3 | Try it » |
* | Multiplication | x = y * 2 | y = 5 | x = 10 | Try it » |
Division | x = y / 2 | y = 5 | x = 2.5 | Try it » | |
% | Modulus (division remainder) | x = y % 2 | y = 5 | x = 1 | Try it » |
++ | Increment | x = ++y | y = 6 | x = 6 | Try it » |
x = y++ | y = 6 | x = 5 | Try it » | ||
— | Decrement | x = —y | y = 4 | x = 4 | Try it » |
x = y— | y = 4 | x = 5 | Try it » |
For a tutorial about arithmetic operators, read our
JavaScript Arithmetic Tutorial.
Использование for без блоков
Все три выражения в заголовке цикла for являются необязательными.
Например, в блоке инициализации не требуется инициализировать переменные. Цикл в примере ниже полностью идентичен приведённому выше:
Выполнить код »
Скрыть результаты
Как и блок инициализации, блок выражения также не является обязательным. Если вы опускаете выражение, то вы должны обязательно разбить цикл в теле, чтобы не создавать бесконечный цикл:
Выполнить код »
Скрыть результаты
Можно опустить все три блока. Для избежания зацикливания используйте break для завершения цикла, а также изменяйте (увеличивайте или уменьшайте) переменную-счётчик, так чтобы условие для оператора break в какой-то момент сработало:
Выполнить код »
Скрыть результаты
Примечание: Любое из выражений в цикле for может отсутствовать, однако сами точки с запятой обязательно должны присутствовать, иначе будет синтаксическая ошибка.
JavaScript
JS Array
concat()
constructor
copyWithin()
entries()
every()
fill()
filter()
find()
findIndex()
forEach()
from()
includes()
indexOf()
isArray()
join()
keys()
length
lastIndexOf()
map()
pop()
prototype
push()
reduce()
reduceRight()
reverse()
shift()
slice()
some()
sort()
splice()
toString()
unshift()
valueOf()
JS Boolean
constructor
prototype
toString()
valueOf()
JS Classes
constructor()
extends
static
super
JS Date
constructor
getDate()
getDay()
getFullYear()
getHours()
getMilliseconds()
getMinutes()
getMonth()
getSeconds()
getTime()
getTimezoneOffset()
getUTCDate()
getUTCDay()
getUTCFullYear()
getUTCHours()
getUTCMilliseconds()
getUTCMinutes()
getUTCMonth()
getUTCSeconds()
now()
parse()
prototype
setDate()
setFullYear()
setHours()
setMilliseconds()
setMinutes()
setMonth()
setSeconds()
setTime()
setUTCDate()
setUTCFullYear()
setUTCHours()
setUTCMilliseconds()
setUTCMinutes()
setUTCMonth()
setUTCSeconds()
toDateString()
toISOString()
toJSON()
toLocaleDateString()
toLocaleTimeString()
toLocaleString()
toString()
toTimeString()
toUTCString()
UTC()
valueOf()
JS Error
name
message
JS Global
decodeURI()
decodeURIComponent()
encodeURI()
encodeURIComponent()
escape()
eval()
Infinity
isFinite()
isNaN()
NaN
Number()
parseFloat()
parseInt()
String()
undefined
unescape()
JS JSON
parse()
stringify()
JS Math
abs()
acos()
acosh()
asin()
asinh()
atan()
atan2()
atanh()
cbrt()
ceil()
clz32()
cos()
cosh()
E
exp()
expm1()
floor()
fround()
LN2
LN10
log()
log10()
log1p()
log2()
LOG2E
LOG10E
max()
min()
PI
pow()
random()
round()
sign()
sin()
sqrt()
SQRT1_2
SQRT2
tan()
tanh()
trunc()
JS Number
constructor
isFinite()
isInteger()
isNaN()
isSafeInteger()
MAX_VALUE
MIN_VALUE
NEGATIVE_INFINITY
NaN
POSITIVE_INFINITY
prototype
toExponential()
toFixed()
toLocaleString()
toPrecision()
toString()
valueOf()
JS OperatorsJS RegExp
constructor
compile()
exec()
g
global
i
ignoreCase
lastIndex
m
multiline
n+
n*
n?
n{X}
n{X,Y}
n{X,}
n$
^n
?=n
?!n
source
test()
toString()
(x|y)
.
\w
\W
\d
\D
\s
\S
\b
\B
\0
\n
\f
\r
\t
\v
\xxx
\xdd
\uxxxx
JS Statements
break
class
continue
debugger
do…while
for
for…in
for…of
function
if…else
return
switch
throw
try…catch
var
while
JS String
charAt()
charCodeAt()
concat()
constructor
endsWith()
fromCharCode()
includes()
indexOf()
lastIndexOf()
length
localeCompare()
match()
prototype
repeat()
replace()
search()
slice()
split()
startsWith()
substr()
substring()
toLocaleLowerCase()
toLocaleUpperCase()
toLowerCase()
toString()
toUpperCase()
trim()
valueOf()
Цикл for…of
Цикл for…of был добавлен в ES2015, для итерирования итерированных коллекций. То есть объектов что имеют свойство .
Свойство позволяет нам обойти коллекцию вызывая функцию ().next() для получения следующего элемента. Он применим к объектам классов Array, String, Map, Set, Uint8Array…
Пример for…of
let arr=; const it = arr(); console.log(it.next().value) console.log(it.next().value) console.log(it.next().value) // result angular typescript react undefined for (const element of arr) { console.log(element); } // Result angular typescript react undefined
Цикл for…of проходит по элементах коллекции и присваивает их значение переменой element.
Также можно использовать ключевые слова break и continue.
for (const element of ) { if (x.length === 0) break; console.log(element); }
Подводные камни for-of: он применим только к итерируемым объектам
Значение после of должно быть итерируемым. Что означает что нужно вручную переформатировать объект в массив чтобы получить его свойства.
const user = { email:'some@mail.com',login:'root' }; for (const prop of user) { // TypeError console.log(prop); } for (const prop of Array.from(user)) { // OK console.log(prop); }
Итерирование с использованием деструкции
Использование for…of вместе с destructuring assingment особенно полезно для итерирования пар .
const someMap = new Map(); someMap.set('key1', 10).set('key2', 20); for (const of someMap) { console.log(`key = ${key}, value = ${value}`); } // Result: key = key1, value = 10 key = key2, value = 20
Array.prototype.entries() также возвращает итерируемые пары ключ значения
const array = ; for (const of arr.entries()) { console.log(`key = ${key}, value = ${value}`); } // Result: key = 0, value = angular key = 1, value = typescript key = 2, value = react
Просмотры:
2 789
More Examples
Example
Loop through the indices of an array to collect the car names from the cars
array:
var cars = ;var text = «»;var i;for (i = 0; i < cars.length; i++) { text += cars + «<br>»;
}
Example above explained:
- First, we set a variable before the loop starts (var i = 0;)
- Then, we define the condition for the loop to run. As long as the variable is less than the length of the array (which is 4), the loop will continue
- Each time the loop executes, the variable is incremented by one (i++)
- Once the variable is no longer less than 4 (array’s length), the condition is false, and the loop will end
Example
Initiate multiple values in the first parameter:
var cars = ;var i;for (i = 0, len = cars.length, text = «»; i < len; i++) { text += cars + «<br>»;
}
Example
Omit the first parameter (set values before the loop starts):
var cars = ;var i = 2;var len = cars.length;var text = «»;for (; i < len; i++) {
text += cars + «<br>»;
}
Example
Using the continue statement — Loop through a block of code, but skip the value of «3»:
var text = «»;var i;for (i = 0; i < 5; i++) { if (i == 3) { continue;
} text += «The number is » + i + «<br>»;}
Example
Using the break statement — Loop through a block of code, but exit the loop when the variable i is equal
to «3»:
var text = «»;var i;for (i = 0; i < 5; i++) { if (i == 3) {
break; } text += «The number is » + i + «<br>»;}
Example
Omit the second parameter. In this example, we also use the break statement to exit the loop when i is equal to «3» (if the second parameter is omitted, you must provide a break
inside the loop. Otherwise the loop will never end, and your browser will crash):
var cars = ;var text = «»;
var i;for (i = 0; ; i++) { if (i == 3) { break;
} text += cars + «<br>»;}
Example
Loop through the indices of an array, in descending order (negative
increment):
var cars = ;var text = «»;var i;
for (i = cars.length — 1; i >= 0; i—) { text += cars + «<br>»;
}
Example
Omit the last parameter, and increment the values inside the loop:
var cars = ;var i = 0;var len = cars.length;for (; i < len;) { text += cars + «<br>»;
i++;}
Example
Loop through the nodes of a NodeList object and change the background color of all <p> elements in the list:
var myNodelist = document.getElementsByTagName(«P»);var i;for (i = 0; i < myNodelist.length; i++) { myNodelist.style.backgroundColor = «red»;}
Example
An example of a nested loop (a loop inside a loop):
var text = «»;var i, j;for (i = 0; i < 3; i++) { text += «<br>» + «i = » + i + «, j = «;
for (j = 10; j < 15; j++) { document.getElementById(«demo»).innerHTML = text += j + » «;
}}
Comparison Operators
Comparison operators are used in logical statements to determine equality or difference between variables or values.
Given that x = 5, the table below explains the comparison operators:
Operator | Description | Comparing | Returns | Try it |
---|---|---|---|---|
== | equal to | x == 8 | false | Try it » |
x == 5 | true | Try it » | ||
=== | equal value and equal type | x === «5» | false | Try it » |
x === 5 | true | Try it » | ||
!= | not equal | x != 8 | true | Try it » |
!== | not equal value or not equal type | x !== «5» | true | Try it » |
x !== 5 | false | Try it » | ||
> | greater than | x > 8 | false | Try it » |
< | less than | x < 8 | true | Try it » |
>= | greater than or equal to | x >= 8 | false | Try it » |
<= | less than or equal to | x <= 8 | true | Try it » |
For a tutorial about comparison operators, read our
JavaScript
Comparisons Tutorial.
JavaScript
JS Array
concat()
constructor
copyWithin()
entries()
every()
fill()
filter()
find()
findIndex()
forEach()
from()
includes()
indexOf()
isArray()
join()
keys()
length
lastIndexOf()
map()
pop()
prototype
push()
reduce()
reduceRight()
reverse()
shift()
slice()
some()
sort()
splice()
toString()
unshift()
valueOf()
JS Boolean
constructor
prototype
toString()
valueOf()
JS Classes
constructor()
extends
static
super
JS Date
constructor
getDate()
getDay()
getFullYear()
getHours()
getMilliseconds()
getMinutes()
getMonth()
getSeconds()
getTime()
getTimezoneOffset()
getUTCDate()
getUTCDay()
getUTCFullYear()
getUTCHours()
getUTCMilliseconds()
getUTCMinutes()
getUTCMonth()
getUTCSeconds()
now()
parse()
prototype
setDate()
setFullYear()
setHours()
setMilliseconds()
setMinutes()
setMonth()
setSeconds()
setTime()
setUTCDate()
setUTCFullYear()
setUTCHours()
setUTCMilliseconds()
setUTCMinutes()
setUTCMonth()
setUTCSeconds()
toDateString()
toISOString()
toJSON()
toLocaleDateString()
toLocaleTimeString()
toLocaleString()
toString()
toTimeString()
toUTCString()
UTC()
valueOf()
JS Error
name
message
JS Global
decodeURI()
decodeURIComponent()
encodeURI()
encodeURIComponent()
escape()
eval()
Infinity
isFinite()
isNaN()
NaN
Number()
parseFloat()
parseInt()
String()
undefined
unescape()
JS JSON
parse()
stringify()
JS Math
abs()
acos()
acosh()
asin()
asinh()
atan()
atan2()
atanh()
cbrt()
ceil()
clz32()
cos()
cosh()
E
exp()
expm1()
floor()
fround()
LN2
LN10
log()
log10()
log1p()
log2()
LOG2E
LOG10E
max()
min()
PI
pow()
random()
round()
sign()
sin()
sqrt()
SQRT1_2
SQRT2
tan()
tanh()
trunc()
JS Number
constructor
isFinite()
isInteger()
isNaN()
isSafeInteger()
MAX_VALUE
MIN_VALUE
NEGATIVE_INFINITY
NaN
POSITIVE_INFINITY
prototype
toExponential()
toFixed()
toLocaleString()
toPrecision()
toString()
valueOf()
JS OperatorsJS RegExp
constructor
compile()
exec()
g
global
i
ignoreCase
lastIndex
m
multiline
n+
n*
n?
n{X}
n{X,Y}
n{X,}
n$
^n
?=n
?!n
source
test()
toString()
(x|y)
.
\w
\W
\d
\D
\s
\S
\b
\B
\0
\n
\f
\r
\t
\v
\xxx
\xdd
\uxxxx
JS Statements
break
class
continue
debugger
do…while
for
for…in
for…of
function
if…else
return
switch
throw
try…catch
var
while
JS String
charAt()
charCodeAt()
concat()
constructor
endsWith()
fromCharCode()
includes()
indexOf()
lastIndexOf()
length
localeCompare()
match()
prototype
repeat()
replace()
search()
slice()
split()
startsWith()
substr()
substring()
toLocaleLowerCase()
toLocaleUpperCase()
toLowerCase()
toString()
toUpperCase()
trim()
valueOf()
JavaScript
JS Array
concat()
constructor
copyWithin()
entries()
every()
fill()
filter()
find()
findIndex()
forEach()
from()
includes()
indexOf()
isArray()
join()
keys()
length
lastIndexOf()
map()
pop()
prototype
push()
reduce()
reduceRight()
reverse()
shift()
slice()
some()
sort()
splice()
toString()
unshift()
valueOf()
JS Boolean
constructor
prototype
toString()
valueOf()
JS Classes
constructor()
extends
static
super
JS Date
constructor
getDate()
getDay()
getFullYear()
getHours()
getMilliseconds()
getMinutes()
getMonth()
getSeconds()
getTime()
getTimezoneOffset()
getUTCDate()
getUTCDay()
getUTCFullYear()
getUTCHours()
getUTCMilliseconds()
getUTCMinutes()
getUTCMonth()
getUTCSeconds()
now()
parse()
prototype
setDate()
setFullYear()
setHours()
setMilliseconds()
setMinutes()
setMonth()
setSeconds()
setTime()
setUTCDate()
setUTCFullYear()
setUTCHours()
setUTCMilliseconds()
setUTCMinutes()
setUTCMonth()
setUTCSeconds()
toDateString()
toISOString()
toJSON()
toLocaleDateString()
toLocaleTimeString()
toLocaleString()
toString()
toTimeString()
toUTCString()
UTC()
valueOf()
JS Error
name
message
JS Global
decodeURI()
decodeURIComponent()
encodeURI()
encodeURIComponent()
escape()
eval()
Infinity
isFinite()
isNaN()
NaN
Number()
parseFloat()
parseInt()
String()
undefined
unescape()
JS JSON
parse()
stringify()
JS Math
abs()
acos()
acosh()
asin()
asinh()
atan()
atan2()
atanh()
cbrt()
ceil()
clz32()
cos()
cosh()
E
exp()
expm1()
floor()
fround()
LN2
LN10
log()
log10()
log1p()
log2()
LOG2E
LOG10E
max()
min()
PI
pow()
random()
round()
sign()
sin()
sqrt()
SQRT1_2
SQRT2
tan()
tanh()
trunc()
JS Number
constructor
isFinite()
isInteger()
isNaN()
isSafeInteger()
MAX_VALUE
MIN_VALUE
NEGATIVE_INFINITY
NaN
POSITIVE_INFINITY
prototype
toExponential()
toFixed()
toLocaleString()
toPrecision()
toString()
valueOf()
JS OperatorsJS RegExp
constructor
compile()
exec()
g
global
i
ignoreCase
lastIndex
m
multiline
n+
n*
n?
n{X}
n{X,Y}
n{X,}
n$
^n
?=n
?!n
source
test()
toString()
(x|y)
.
\w
\W
\d
\D
\s
\S
\b
\B
\0
\n
\f
\r
\t
\v
\xxx
\xdd
\uxxxx
JS Statements
break
class
continue
debugger
do…while
for
for…in
for…of
function
if…else
return
switch
throw
try…catch
var
while
JS String
charAt()
charCodeAt()
concat()
constructor
endsWith()
fromCharCode()
includes()
indexOf()
lastIndexOf()
length
localeCompare()
match()
prototype
repeat()
replace()
search()
slice()
split()
startsWith()
substr()
substring()
toLocaleLowerCase()
toLocaleUpperCase()
toLowerCase()
toString()
toUpperCase()
trim()
valueOf()
Заключение
Как правило, for/of — это самый надежный способ перебора массива в JavaScript. Он более лаконичен, чем обычный цикл for, и не имеет такого количества граничных случаев, как for/in и forEach(). Основным недостатком for/of является то, что вам нужно проделать дополнительную работу для доступа к индексу массива (см. дополнение), и вы не можете строить цепочки кода, как вы можете это делать с помощью forEach(). Но если вы знаете все особенности forEach(), то во многих случаях его использование делает код более лаконичным.
Дополнение: Чтобы получить доступ к текущему индексу массива в цикле for/of, вы можете использовать функцию .
for (const of arr.entries()) { console.log(i, v); // Prints "0 a", "1 b", "2 c" }
Оригинал: For vs forEach() vs for/in vs for/of in JavaScript
Spread the love