Ось п’ять, на перший погляд, простих запитань з JavaScript, пов'язаних із параметрами та аргументами. Однак, я впевнений, що більшість з вас не зможе відповісти на всі правильно.
function fn(args){
console.log(args);
}
fn('orange','apple','grapes');
function fn(arg1,...args){
console.log(args);
}
fn('orange','apple','grapes');
function fn([arg1, arg2]){
console.log(arg1);
}
fn('orange','apple','grapes');
function fn([arg1,arg2,arg3]){
console.log(arg1,arg2,arg3);
}
fn(['orange','apple','grapes']);
function fn([arg1,...arg2]){
console.log(arg1,arg2);
}
fn('orange','apple','grapes');
Тепер давайте розглянемо пояснення до деяких із цих прикладів:
1) Одиничний параметр:
function fn(args){
console.log(args);
}
fn('orange','apple','grapes');//orange
Ми передаємо три аргументи, але за допомогою цього синтаксису JavaScript розглядатиме лише перший аргумент.
2) Оператор Rest:
function fn(arg1,...args){
console.log(args);
}
fn('orange','apple','grapes');//['apple', 'grapes']
Оператор Rest збирає всі аргументи, передані функції, перетворює їх на масив і присвоює цей масив змінній args. Варто зазначити, що оператор Rest працює лише в кінці, тому наступний код буде некоректним:
function fn(...args,arg2){
console.log(args);
}
3) Деструктуризація параметрів:
[] очікує на масив як аргумент і деструктурує його:
function fn([arg1,arg2,arg3]){
console.log(arg1,arg2,arg3);
}
fn(['orange','apple','grapes']);// orange apple grapes
А що виведе цей код:
function fn([arg1, arg2]){
console.log(arg1);
}
fn('orange','apple','grapes');
Ми передаємо лише один аргумент — перше значення 'orange'. Оскільки [] очікує масив, але ми передаємо рядок, він перетворюється на масив: ['o', 'r', 'a', 'n', 'g', 'e'], і буде взято перші два елементи, тому результат буде:
// o r
Перекладено з: Think You Know JavaScript? These Simple-Looking Questions Might Prove You Wrong!