Skip to content

Latest commit

 

History

History
162 lines (133 loc) · 5.3 KB

05. Типы, стрелочные функции, методы.md

File metadata and controls

162 lines (133 loc) · 5.3 KB

for-in

// Проитерироваться по полям объекта при помощи цикла for ... in
let user = { name: 'tom', age: 20 };
for (let property in user) {
  console.log(property);
  console.log(user[property]);
}

ЗАДАНИЕ
Из объекта пользователя user (3 произвольных поля) сформировать массив строк вида "имя_поля - значение_поля".
Реализовать это в виде функции, которая принимает объект и возвращает массив. Использовать цикл for-in

let user = { name: 'tom', age: 20, legs: 4 };
function getProperties(object) {
  let result = [];
  for (let property in user) {
    result[result.length] = property + ' - ' + user[property];
  }
}

Типы, typeof

let a = 1;

let myAl = alert;
myAl();
myAl(1);

let myC = console.log;
myC(1);

// ПОДРОБНЕЕ ПРО ФУНКЦИИ
// https://learn.javascript.ru/function-expressions
function myFunction() { return 1 }
const myFunction = function() { return 1 }

myFunction //=> ƒ myFunction() { console.log(1) } (записали без скобок)
myFunction() //=> 1 (записали со скобками)

// В JS у всего есть тип. Для его определения используется typeof
// https://learn.javascript.ru/types-intro#type-typeof
typeof 1 //=> "number"
typeof "alex" //=> "string"
typeof undefined //=> "undefined"

let user  = { name: 'alex' };
typeof user //=> "object"
typeof null //=> "object"
// У функции тоже есть тип. Этот тип - function
typeof alert //=> "function"

Стрелочные функции

// https://learn.javascript.ru/string#kavychki
let name = 'Alex';
let age = 19;
let description = `${name} - ${age}`; // строка записывается в `, значения - в ${}

// ЗАДАНИЕ
// Создать 2 числовые переменные a и b. Вывести в консоль выражение
// значение_a + значение_b = сумма_a_и_b

// https://learn.javascript.ru/arrow-functions-basics
let sum = (number1, number2) => number1 + number2;


// Если функция занимает несколько строк, нужно добавлять {} и слово return
let sum = (number1, number2) => {
  let result = number1 + number2;
  return result;
}
// ЗАДАНИЕ
// Описать функцию, которая принимает число и возвращает квадрат этого числа

// Методы
let user = { name: 'Tom' };
user.sayHi = function() {
  console.log('Hi');
}
// то же самое
user.sayHi = () => console.log('Hi');

let array = [1, 2, 3];
array.push(5);

// https://learn.javascript.ru/array-iteration#foreach
[10, 20, 30].forEach((element) => element ** 2);

// ЗАДАНИЕ
// Создать функцию, которая принимает массив чисел и возвращает массив строк
// число - индекс
// Например,
myFunc([2, 2, 2, 2]) //=>
// ["2 - 0", "2 - 1", "2 - 2", "2 - 3"]
// Возведение в степень - `**`, добавление элемента в массив - `push`, обход массива - `forEach`

Методы массива

[10, 20, 30].forEach((element, index) => console.log(`${index} - ${element}`));
// ЗАДАНИЕ
// Создать функцию, которая принимает массив чисел и возвращает массив строк
// число - число_в_степени_индекс_числа_в_массиве
// Например,
myFunc([2, 2, 2, 2]) //=>
// ["2 - 1", "2 - 2", "2 - 4", "2 - 8"]
// Возведение в степень - `**`, добавление элемента в массив - `push`, обход массива - `forEach`

function getArray(numbers) {
  let arr = [];
  numbers.forEach((element, index) => {
    arr.push(`${element} - ${element ** index}`)
  })
  return arr;
}

// https://learn.javascript.ru/array-methods#map
[1, 2, 3].map((element) => element ** 2);

// ЗАДАНИЕ
// Описать функцию, которая принимает массив имен и возвращает массив объектов { name: имя }
// Принимает ['alex', 'julia']
// Возвращает [{ name: 'alex' }, { name: 'julia' }]

function getObjects(namesArr) {
  // for (let nameStr of namesArr)
  let objectsArr = namesArr.map(nameStr => {
    let object = {};
    object.name = nameStr;
    return object;
  })
  return objectsArr;
}

// Или более короткая, но менее привычная запись
function getObjects(names) {
return names.map(name => { return { name: name } })
}

// Про другие методы читайте здесь https://learn.javascript.ru/array-methods

setTimeout

// Функция setTimeout
// https://learn.javascript.ru/settimeout-setinterval
let showAlert = () => alert('hello');
setTimeout(showAlert, 3000);
// или так:
setTimeout(() => alert('hello'), 3000);

// ЗАДАНИЕ
// Есть разметка <div></div>
// Через 3 секунды после загрузки страницы создать элемент p с текстом