<>~==!!==Довідка. Відмінності між циклом forEach і for
function addTax(total) {
return total * 1.05;
}
addTax = 50;return addTax 50;addTax(50);addTax 50;let rate = 100;let 100 = rate;100 = let rate;rate = 100;var student = new Person();var student = construct Person;var student = Person();var student = construct Person();let modal = document.querySelector('#result');
setTimeout(function () {
modal.classList.remove('hidden');
}, 10000);
console.log('Results shown');
Javascript є синхронним і однопотоковим
class Animal {
static belly = [];
eat() {
Animal.belly.push('food');
}
}
let a = new Animal();
a.eat();
console.log(/* Snippet Here */); //Друкує food
a.prototype.belly[0]Object.getPrototype0f (a).belly[0]Animal.belly[0]a.belly[0]Довідка Javascript Class static Keyword
Afor (var i = 1; i <= 4; i++) {
setTimeout(function () {
console.log(i);
}, i * 10000);
}
Bfor (var i = 1; i <= 4; i++) {
(function (i) {
setTimeout(function () {
console.log(j);
}, j * 1000);
})(j);
}
Cfor (var i = 1; i <= 4; i++) {
setTimeout(function () {
console.log(i);
}, i * 1000);
}
Dfor (var i = 1; i <= 4; i++) {
(function (j) {
setTimeout(function () {
console.log(j);
}, j * 1000);
})(i);
}
Efor (var j = 1; j <= 4; j++) {
setTimeout(function () {
console.log(j);
}, j * 1000);
}
Alet discountPrice = function (price) {
return price * 0.85;
};
Blet discountPrice(price) {
return price * 0.85;
};
Clet function = discountPrice(price) {
return price * 0.85;
};
DdiscountPrice = function (price) {
return price * 0.85;
};
var Storm = function () {};
Storm.prototype.precip = 'rain';
var WinterStorm = function () {};
WinterStorm.prototype = new Storm();
WinterStorm.prototype.precip = 'snow';
var bob = new WinterStorm();
console.log(bob.precip);
/[0-9]{2,}:[0-9]{2,}:[0-9]{2,}//\d\d:\d\d:\d\d//[0-9]+:[0-9]+:[0-9]+// : : /ПРИМІТКА: усі перші три частково правильні та відповідатимуть цифрам, але другий варіант є найбільш правильним, оскільки він лише відповідатиме 2-значним значенням часу (12: 00:32). Перший варіант спрацював би, якби діапазон повторень виглядав як [0-9]{2}, однак через кому [0-9]{2,} буде вибрано 2 або більше цифр (120:000:321). Третій варіант відповідає будь-яким діапазонам цифр часу, одним і кратним (це означає, що 1:2:3 також збігатиметься).
Додаткові ресурси:
'use strict';
function logThis() {
this.desc = 'logger';
console.log(this);
}
new logThis();
undefinedwindow{desc: "logger"}functionlet roadTypes = ['street', 'road', 'avenue', 'circle'];
console.log(typeof 42);
'float''value''number''integer'selfobjecttargetsourcefunction addNumbers(x, y) {
if (isNaN(x) || isNaN(y)) {
}
}
exception('One or both parameters are not numbers')catch('One or both parameters are not numbers')error('One or both parameters are not numbers')throw('One or both parameters are not numbers')JSON.fromString();JSON.parse()JSON.toObject()JSON.stringify()Перетворення json на об’єкт javascript
for (var i = 0; i < 5; i++) {
console.log(i);
}
Object.get()Object.loop()Object.each()Object.keys()var a = ['dog', 'cat', 'hen'];
a[100] = 'fox';
console.log(a.length);
Пояснення: Map.prototype.size повертає кількість елементів у Map, тоді як Object не має вбудованого методу для повернення його розміру.
const dessert = { type: 'pie' };
dessert.type = 'pudding';
++--==||Student.parent = Person;Student.prototype = new Person();Student.prototype = Person;Student.prototype = Person();constvarletBoolean(0)Boolean("")Boolean(NaN)Boolean("false")thiscatchfunctionarrayclass X {
get Y() {
return 42;
}
}
var x = new X();
x.get('Y')x.Yx.Y()x.get().Ysum(10, 20);
diff(10, 20);
function sum(x, y) {
return x + y;
}
let diff = function (x, y) {
return x - y;
};
Ефективність пошуку Пояснення: Записи в об’єкті можна отримати за допомогою їх ключа, який може бути будь-яким заданим значенням (наприклад, ідентифікатор працівника, назва міста тощо), тоді як для отримання запису з масиву нам потрібно знати його індекс.
import _ from 'lodash';import 'lodash' as _;import '_' from 'lodash;import lodash as _ from 'lodash';[] == [];
var v = 1;
var f1 = function () {
console.log(v);
};
var f2 = function () {
var v = 2;
f1();
};
f2();
Замикання в js \/ вкладені функції
Пояснення: Ви не можете викликати reduce на undefined об'єкті... Це видасть помилку (your object is not defined...)
let arr = [];
typeofdeleteinstanceofvoidvar start = 1;
if (start === 1) {
let end = 2;
}
Блочна проти функціональної видимості
const x = 6 % 2;
const y = x ? 'One' : 'Two';
throwexceptioncatcherrorvar a;
var b = (a = 3) ? true : false;
<p class="pull">lorem ipsum</p>
Document.querySelector('class.pull')document.querySelector('.pull');Document.querySelector('pull')Document.querySelector('#pull')let answer = true;
if (answer === false) {
return 0;
} else {
return 10;
}
var start = 1;
function setEnd() {
var end = 10;
}
setEnd();
console.log(end);
function sayHello() {
console.log('hello');
}
console.log(sayHello.prototype);
function printA() {
console.log(answer);
var answer = 1;
}
printA();
printA();
1 потім 11 потім undefinedundefined потім undefinedundefined потім 1forEach() відрізняється від for?Різниця між forEach та for циклами
({}){}{ return {};}(({}))Пояснення: `“щоб переконатися, що задачі нижче у коді не запускаються, доки попередні не будуть завершені” Ви використовуєте нормальний (синхронний) потік, де кожна команда виконується послідовно. Асинхронний код дозволяє порушити цю послідовність: запустити тривалу функцію (виклик AJAX до зовнішньої служби) і продовжуйте запускати решту коду паралельно.
[3] == [3]3 == '3'3 != '3'3 === '3'cancel()stop()preventDefault()prevent()attachNode()getNode()querySelector()appendChild()breakpassskipcontinue(a,b) => ca, b => {return c;}a, b => c{ a, b } => c! This is a comment# This is a comment\\ This is a comment// This is a commentlet a = 5;
console.log(++a);
button.addEventListener(
'click',
function (e) {
button.className = 'clicked';
},
false,
);
e.blockReload();button.preventDefault();button.blockReload();e.preventDefault();function() { console.log('lorem ipsum'); }()();function() { console.log('lorem ipsum'); }();(function() { console.log('lorem ipsum'); })();Що таке Immediately Invoked Function Expression
Document.querySelector('img')Document.querySelectorAll('<img>')Document.querySelectorAll('img')Document.querySelector('<img>')function logThis() {
console.log(this);
}
logThis();
const Greeting = ({ name }) => <h1>Hello {name}!</h1>;
class Greeting extends React.Component { render() { return <h1>Hello {this.props.name}!</h1>; } }class Greeting extends React.Component { constructor() { return <h1>Hello {this.props.name}!</h1>; } }class Greeting extends React.Component { <h>Hello {this.props.name}!</h>; } }class Greeting extends React.Component { render({ name }) { return <h1>Hello {name}!</h1>; } }var obj;
console.log(obj);
ReferenceError: obj is not defined{}undefinednullclass TaxCalculator {
static calculate(total) {
return total * 0.05;
}
}
const foo = {
bar() {
console.log('Hello, world!');
},
name: 'Albert',
age: 26,
};
console.log('Я');
setTimeout(() => {
console.log('люблю');
}, 0);
console.log('Javascript!');
Я
Javascript!
люблю
люблю
Я
Javascript!
Вихід може змінюватися з кожним виконанням коду і не може бути визначений.
.
Я
люблю
Javascript!
Довідка особливо подивіться розділ ‘late timeouts’ .
const foo = [1, 2, 3];
const [n] = foo;
console.log(n);
Присвоєння з деструктуруванням
const foo = {
name: 'Albert',
};
map() та forEach() методами у Array prototype?forEach() повертає едине вихідне значення, тоді як метод map() виконує операцію на кожному значенні в масиві.map() повертає новий масив з перетворенням, що застосовується на кожному елементі вихідного масиву, тоді як метод forEach() пробігає через масив без зворотного значення.forEach() повертає новий масив з перетворенням, що застосовується на кожному елементі вихідного масиву, тоді як метод map() пробігає через масив без зворотного значення.function makeAdder(x) {
return function (y) {
return x + y;
};
}
var addFive = makeAdder(5);
console.log(addFive(3));
<script></script><js></js><javascript></javascript><code></code>let rainForests = ['Amazon', 'Borneo', 'Cerrado', 'Congo'];
rainForests.splice(0, 2);
console.log(rainForests);
["Amazon","Borneo","Cerrado","Congo"]["Cerrado", "Congo"]["Congo"]["Amazon","Borneo"]const numbers = [1, 2, 3, 4, 5];
//ВІДСУТНІЙ РЯДОК
const [one,two,three,four,five]=numbersconst {one,two,three,four,five}=numbersconst [one,two,three,four,five]=[numbers]const {one,two,three,four,five}={numbers}const obj = {
a: 1,
b: 2,
c: 3,
};
const obj2 = {
...obj,
a: 0,
};
console.log(obj2.a, obj2.b);
let animals = ['jaguar', 'eagle'];
//Відсутній рядок
console.log(animals.pop()); //Друкує jaguar
animals.filter(e => e === "jaguar");animals.reverse();animals.shift();animals.pop();shift() - видаляє перший елемент масиву і повертає видалений елемент.
pop() - видаляє останній елемент масиву і повертає видалений елемент.
reverse() - змінює порядок елементів у масиві на зворотній.
filter() - обирає кожен елемент у масиві, який відповідає умові.
//Відсутній рядок
for (var i = 0; i < vowels.length; i++) {
console.log(vowels[i]);
//Кожна буква, надрукована на окремому рядку;
//a
//e
//i
//o
//u
}
let vowels = "aeiou".toArray();let vowels = Array.of("aeiou");let vowels = {"a", "e", "i", "o", "u"};let vowels = "aeiou";const x = 6 % 2;
const y = x ? 'One' : 'Two';
console.log(y);
ПРИМІТКА: Це питання однакове з Q46.
Умовний оператор
let matrix = [["You","Can"],["Do","It"],["!","!","!"]];
matrix[1[2]]matrix[1][1]matrix[1,2]matrix[1][2]const animals = ['Rabbit', 'Dog', 'Cat'];
animals.unshift('Lizard');
let x = 6 + 3 + '3';
console.log(x);
var sound = 'grunt';
var bear = { sound: 'roar' };
function roar() {
console.log(this.sound);
}
bear.bind(roar);roar.bind(bear);roar.apply(bear);bear[roar]();c визначена у зовнішній області видимості?a, b => { return c; }a, b => c{ a, b } => c(a,b) => c//some-file.js
export const printMe = (str) => console.log(str);
import printMe from './some-file';import { printMe } from './some-file';import default as printMe from './some-file';const printMe = import './some-file';const arr1 = [2, 4, 6];
const arr2 = [3, 5, 7];
console.log([...arr1, ...arr2]);
[2, 3, 4, 5, 6, 7][3,5,7,2,4,6][3, 5, 7, 2, 4, 6][[2, 4, 6], [3, 5, 7]][2, 4, 6, 3, 5, 7]fetch()?done()then()finally()catch()array.slice()array.shift()array.push()array.replace()console.log(typeof 'blueberry');
stringarrayBooleanobject//HTML Markup
<div id="A">
<div id="B">
<div id="C">Натисніть тут</div>
</div>
</div>
//JavaScript
document.querySelectorAll('div').forEach((e) => {
e.onclick = (e) => console.log(e.currentTarget.id);
});
const myNumbers = [1, 2, 3, 4, 5, 6, 7];
const myFunction = (arr) => {
return arr.map((x) => x + 3).filter((x) => x < 7);
};
console.log(myFunction(myNumbers));
[4,5,6,7,8,9,10][4,5,6,7][1,2,3,4,5,6][4,5,6]let rainForestAcres = 10;
let animals = 0;
while (rainForestAcres < 13 || animals <= 2) {
rainForestAcres++;
animals += 2;
}
console.log(animals);
Reference MDN JavaScript Looping code
let cipherText = [...'YZOGUT QGMORTZ MTRHTILS'];
let plainText = '';
/* Missing Snippet */
console.log(plainText); //Prints YOU GOT THIS
for (let key of cipherText.keys()) {
plainText += key % 2 === 0 ? key : ' ';
}
for (let [index, value] of cipherText.entries()) {
plainText += index % 2 !== 0 ? value : '';
}
for (let [index, value] of cipherText.entries()) {
plainText += index % 2 === 0 ? value : '';
}
for (let value of cipherText) {
plainText += value;
}
var pokedex = ['Snorlax', 'Jigglypuff', 'Charmander', 'Squirtle'];
pokedex.pop();
console.log(pokedex.pop());
Пояснення: Метод pop() видаляє останній елемент із масиву та повертає його. Цей метод змінює довжину масиву.
<h1 class="content">LinkedIn Learning</h1>
<div class="content">
<span class="content">The LinkedIn Learning library has great JavaScript courses!</span>
</div>
[]undefined0nullconst lion = 1;
let tiger = 2;
var bear;
++lion;
bear += lion + tiger;
tiger++;
рядок 5, тому що lion не можна перепризначитирядок 6, тому що += оператор не можна використовувати з undefined змінною bearрядок 5, тому що префікс (++) не існує в javascriptрядок 3, тому що змінна bear undefinedresult після запуску цього коду?const person = { name: 'Dave', age: 40, hairColor: 'blue' };
const result = Object.keys(person).map((x) => x.toUpperCase());
["Name", "Age", "HairColor"]["DAVE", 40, "BLUE"]["NAME", "AGE", "HAIRCOLOR"]let animals = ["eagle", "osprey", "salmon"];
let key = animal => animal === "salmon";
if(/* Вставити фрагмент тут */){
console.log("swim");
}
animals.every(key)animals.some(key).length === 1animals.filter(key) === trueanimals.some(key)class RainForest {
static minimumRainFall = 60;
}
let congo = new RainForest();
RainForest.minimumRainFall = 80;
console.log(congo.minimumRainFall);
undefinedNone of these answers, as static is not a feature in Javascript.6080a.b в obj не викликаючи помилки якщо a - undefined?let obj = {};
obj?.a.bobj.a?.bobj[a][b]obj.?a.?bif (true) {
var x = 5;
const y = 6;
let z = 7;
}
console.log(x + y + z);
ReferenceError через x.18.undefined.ReferenceError через y.const x = [1, 2];
const y = [5, 7];
const z = [...x, ...y];
console.log(z);
[1,2,5,7][[1, 2], [5, 7]][2,7][2,1,7,5]const a = { x: 1 };
const b = { x: 1 };
a['x'] === b['x']a != ba === ba.x === b.xconsole.log(typeof 41.1);
Nothing. It resuults in a ReferenceError.decimalfloatnumberlet scores = [];
scores.push(1, 2);
scores.pop();
scores.push(3, 4);
scores.pop();
score = scores.reduce((a, b) => a + b);
console.log(score);
3467let bear = {
sound: 'roar',
roar() {
console.log(this.sound);
},
};
bear.sound = 'grunt';
let bearSound = bear.roar;
bearSound();
Нічого не буде надруковано.gruntundefinedroarvar cat = { name: 'Athena' };
function swap(feline) {
feline.name = 'Wild';
feline = { name: 'Tabby' };
}
swap(cat);
console.log(cat.name);
var thing;
let func = (str = 'no arg') => {
console.log(str);
};
func(thing);
func(null);
const myFunc = () => {
const a = 2;
return () => console.log('a is ' + a);
};
const a = 1;
const test = myFunc();
test();
const myFunc = (num1, num2 = 2, num3 = 2) => {
return num1 + num2 + num3;
};
let values = [1, 5];
const test = myFunc(2, ...values);
console.log(test);
var flagsJSON =
'{ "countries" : [' +
'{ "country":"Ireland" , "flag":"🇮🇪" },' +
'{ "country":"Serbia" , "flag":"🇷🇸" },' +
'{ "country":"Peru" , "flag":"🇵🇪" } ]}';
var flagDatabase = JSON.parse(flagsJSON);
let conservation = true;
let deforestation = false;
let acresOfRainForest = 100;
if (/* Фрагмент коду тут */){
++acresOfRainForest;
}
| [ ] !conservation | deforestation |
| [ ] deforestation && conservation | deforestation |
Демонстрація роботи localStorage
let cat = Object.create({ type: 'lion' });
cat.size = 'large';
let copyCat = { ...cat };
cat.type = 'tiger';
console.log(copyCat.type, copyCat.size);
let animals = [{ type: 'lion' }, 'tiger'];
let clones = animals.slice();
clones[0].type = 'bear';
clones[1] = 'sheep';
console.log(animals[0].type, clones[0].type);
console.log(animals[1], clones[1]);
a=5;
b=4;
alert(a++(+(+(+b))));
let cat = { type: "tiger", size: "large" };
let json = /* Фрагмент тут */;
console.log(json); // print {"type":"tiger"}
cat.toJSON("type");JSON.stringify(cat, ["type"]);JSON.stringify(cat);JSON.stringify(cat, /type/);const obj1 = { first: 20, second: 30, first: 50 };
console.log(obj1);
… у JS?print(typeof NaN);
<script type="text/javascript">a = 5 + "9"; document.write(a);</script>
function sum(num1, num2 = 2, num3 = 3) {
return num1 + num2 + num3;
}
let values = [1, 5];
let total = sum(4, ...values);
<h2 id="cleverest">girls</h2>
HTML DOM Style color властивість
var compare = function (test1, test2) {
// Відсутній рядок
};
compare(1078, '1078'); // yields true
test1==test2;if (true) {
var first = 'You';
}
function fScope() {
var second = 'got this!';
}
fScope();
console.log(first);
console.log(second);
console.log('hello' + 'world' + '!');
console.log(10 + 10);
const foo = () => console.log('First');
const bar = () => setTimeout(() => console.log('Second'), 0);
foo();
bar();
console.log('Third');
function scream(words) {
return words.toUpperCase() + '!!!';
}
scream('yay');