// // ES6 // // Переделайте предыдущее ДЗ используя максимум возможностей ES6. Отметьте облегчение (или утяжеление) синтаксиса. // // различия:; function difference() { // // --- Block scope variables // // В ES6 мы перешли от var к let/const. // // блоки кода и видимость только внутри блока кода для let // // ---- Multi-line strings // // ---- Destructuring Assignment -----; // ES5; // var array = [1, 2, 3, 4]; // var first = array[0]; // var third = array[2]; // ES6; // const array = [1, 2, 3, 4]; // const [first, , third] = array; // ES6; //обмен значениями // let a = 1; // let b = 2; // [a, b] = [b, a]; // ES5; // function margin() { // var left = 1, // right = 2, // top = 3, // bottom = 4; // return { left: left, right: right, top: top, bottom: bottom }; // ----// или ES6 - return [left, right, top, bottom]; но вызывающему коду придется знать о порядке данных. // } // ES6; // const user = { firstName: "Adrian", lastName: "Mejia" }; // function getFullName({ firstName, lastName }) { // // и деструктуризация // return `${firstName} ${lastName}`; // и `${ }` // } // // ------- Глубокое сопоставление // ES5; // function settings() { // return { display: { color: "red" }, keyboard: { layout: "querty" } }; // } // var tmp = settings(); // var displayColor = tmp.display.color; // var keyboardLayout = tmp.keyboard.layout; // console.log(displayColor, keyboardLayout); // red querty // ES6; // function settings() { // return { display: { color: "red" }, keyboard: { layout: "querty" } }; // } // const { // display: { color: displayColor }, // keyboard: { layout: keyboardLayout }, // } = settings(); // console.log(displayColor, keyboardLayout); // red querty // // Это также называют деструктуризацией объекта (object destructing). // // --------------- Классы и объекты ------------------------ // В ECMAScript 6 мы перешли от “функций-конструкторов” к “классам” . // // Каждый объект в JavaScript имеет прототип, который является другим объектом. // // Все объекты в JavaScript наследуют методы и свойства от своего прототипа. // // В ES5 объектно - ориентированное программирование достигалось с помощью функций - конструкторов. // // Они создавали объекты следующим образом: // ES5 // var Animal = (function () { // function MyConstructor(name) { // this.name = name; // } // MyConstructor.prototype.speak = function speak() { // console.log(this.name + ' makes a noise.'); // }; // return MyConstructor; // })(); // var animal = new Animal('animal'); // animal.speak(); // animal makes a noise. // // В ES6 есть новый синтаксический сахар. // // Можно сделать то же самое с меньшим кодом и с использованием ключевых слов class и construсtor. // // Также заметьте, как четко определяются методы: construсtor.prototype.speak = function () vs speak(): // ES6 // class Animal { // constructor(name) { // this.name = name; // } // speak() { // console.log(this.name + ' makes a noise.'); // } // } // const animal = new Animal('animal'); // animal.speak(); // animal makes a noise. // // ++ наследование // ES6 // class Lion extends Animal { // speak() { // super.speak(); // console.log(this.name + ' roars '); // } // } // const lion = new Lion('Simba'); // lion.speak(); // Simba makes a noise. // // Simba roars. // // ---------- Нативные промисы -------- вот тут я пока не понял, поэтому пока не заношу сюда // // // // ----- Стрелочные функции ------------ а тут как раз все понятно (как мне кажется) => тоже не заношу // // // // ----- FOR OF -------------- разве он не был всегда в JS ?????? (:шок:) // // // // ----- Параметры по умолчанию ---------------------- // ES5; // function point(x, y, isFlag) { // x = x || 0; // y = y || -1; // isFlag = isFlag || true; // console.log(x, y, isFlag); // } // // // // ----- Rest-параметры ---------------------- // ES6; // function printf(format, ...params) { // console.log("params: ", params); // console.log("format: ", format); // } // printf("%s %d %.2f", "adrian", 321, Math.PI); // // // // ----- Операция Spread ---------------------- // ES6 // Math.max(...[2,100,1,6,43]) // 100 // // ----------Мы также перешли от concat к spread'у: ----------- // ES5 // var array1 = [2,100,1,6,43]; // var array2 = ['a', 'b', 'c', 'd']; // var array3 = [false, true, null, undefined]; // console.log(array1.concat(array2, array3)); // ES6 // const array1 = [2,100,1,6,43]; // const array2 = ['a', 'b', 'c', 'd']; // const array3 = [false, true, null, undefined]; // console.log([...array1, ...array2, ...array3]); } // // // // ------------ Это только базовые возможности, о которых должен знать каждый разработчик ------------ // // // // ----------- http://kangax.github.io/compat-table/es6/ -------------------------- // // // // // // // a // Напишите функцию a, которая просто является коротким именем для alert. // интересно, а такой вариант решения прокатит?: const a = alert; // The End. // если нет, то вот код из предыдущего ДЗ // const a = function (message) { // alert(message); // } // ---------------------------------------------------------- // cube // Напишите функцию cube, которая возвращает число в третьей степени: const cube = function (toCube = 0) { return Math.pow(toCube, 3); }; // ---------------------------------------------------------- // avg2 // Напишите функцию avg2, которая рассчитывает среднюю для двух чисел: // Если без заморочек, то: // const avg2 = (a = 0, b = 0) => (a + b) / 2; // среднее арифметическое для любого количества аргументов const avg2 = function (...argArr) { if (!argArr.length) return 0; return argArr.reduce((a, b) => a + b) / argArr.length; }; // ---------------------------------------------------------- // sum3 // Напишите функцию sum3 для суммирования 3 чисел: // Обратите внимание, что sum3 от двух параметров тоже работает корректно. const arrSum = function (arr) { let sum = 0; for (item of arr) sum += item; return sum; }; // ---------------------------------------------------------- // intRandom // Напишите функцию intRandom, которая принимает два параметра: нижнюю и верхнюю границу, // и возвращает целое случайное число из этого диапазона включительно: // Обратите внимание, что если передан один параметр (intRandom(10) в примере выше), // то функция работает как будто первый параметр равен 0, // а переданный параметр становится вторым параметром(intRandom(0, 10)) // Используйте умножение для расширения значения встроенной функции Math.random c диапозона 1, // сложениe для смещения результата на первый параметр, и Math.round для округления результата const intRandom = function (min = 1, max = 0) { return min + Math.round(Math.random() * (max - min)); }; // ---------------------------------------------------------- // greetAll // Сделайтей функцию, которая приветствует всех, кто передан в качестве параметров. // Вам поможет arguments и for const greetAll = function greetAll() { let arr = [...arguments]; let all = arr.join(", "); if (all) { console.log(`Hi, ${all}!`); alert(`Hi, ${all}!`); } }; // ---------------------------------------------------------- // sum // Напишите функцию sum, которая сумирует любое количество параметров: // Используйте псевдомассив arguments для получения всех параметров, // и for для итерирования по нему const sum = function () { var total = 0; for (let item of arguments) { if (!isNaN(item)) total += +item; } return total; }; // ---------------------------------------------------------- // sort // Сделайте обобщенную функцию сортировки массива var persons = [ { name: "Иван", age: 17 }, { name: "Мария", age: 35 }, { name: "Алексей", age: 73 }, { name: "Яков", age: 12 }, ]; sort = function (arr, key = undefined, direction = true) { if (direction) { arr.sort(function (a, b) { if (a[key] > b[key]) return 1; if (a[key] < b[key]) return -1; return 0; }); } else arr.sort(function (a, b) { if (a[key] < b[key]) return 1; if (a[key] > b[key]) return -1; return 0; }); return arr; }; // sort(persons, "age"); //сортирует по возрасту по возрастанию // sort(persons, "name", false); //сортирует по имени по убыванию // ---------------------------------------------------------- // array map // Используя Array.map приведите все строки в массиве к числу. // Элементы других типов оставьте как есть: // ["1", {}, null, undefined, "500", 700] // должно превратиться в // [1, {}, null, undefined, 500, 700] let arr = ["1", {}, null, undefined, "500", 700].map((item) => parseInt(item, 10) || item); // - эта штука все же неверно сработает со строкой "0" ["0kijuib", "000", {}, null, undefined, "500", 700].map((item) => { if (typeof item == "string") return isNaN(parseInt(item, 10)) ? item : parseInt(item, 10); return item; }); // ---------------------------------------------------------- // array reduce // Получите произведение всех чисел в массиве, используя Array.reduce. // Не обрабатывайте типы данных, не являющиеся числом. // ["0", 5, 3, "string", null] // резуль?тат должен быть 15 let composition = ["0", 5, 3, "string", null].reduce((a, b) => (typeof b == "number" ? a * b : a), 1); // ---------------------------------------------------------- // object filter // Напишите свою реализацию Array.filter для объектов: // filter(phone,(key,value) => key == "color" || value == 2); // должно вернуть // { // ram: 2, // color: "black", // } // Для удаления пары ключ - значение используйте delete.Или сделайте копию объекта. let phone = { brand: "meizu", model: "m2", ram: 2, color: "black", }; // возвращает измененую ПОВЕРХНОСТНУЮ копию function filterCopy(obj, func) { let objCopy = Object.assign({}, obj); for (let [key, value] of Object.entries(objCopy)) { if (!func(key, value)) delete objCopy[key]; } return objCopy; } let phoneNew = filterCopy(phone, (key, value) => key == "color" || value == 2); // меняет существующий объект function filter(obj, func) { for (let [key, value] of Object.entries(obj)) { if (!func(key, value)) delete obj[key]; } } filter(phone, (key, value) => key == "color" || value == 2); // ---------------------------------------------------------- // object map // Напишите свою реализацию Array.map для объектов: // map({ name: "Иван", age: 17 }, function (key, value) { // var result = {}; // result[key + "_"] = value + "$"; // return result; // }); //должен вернуть {name_: "Иван$", age_: "17$"} const map = function (obj, func) { let objNew = {}; for (let key in obj) { objNew = { ...objNew, ...func(key, obj[key]) }; } return objNew; }; let testObj = map({ name: "Иван", age: 17 }, function (key, value) { var result = {}; result[key + "_"] = value + "$"; return result; }); // ---------------------------------------------------------- // Рекурсия // Sum // Напишите функцию, который будет считать сумму арифметической прогрессии рекурсивно. // В качестве параметров передаем 1-й элемент прогрессии, инкремент // и сколько всего элементов прогрессии должны быть просуммировано (включая первый) const sum = function (startValue, inc, numberOfElements) { if (numberOfElements < 1) return 0; if (numberOfElements === 1) return startValue; return startValue + sum(startValue + inc, inc, numberOfElements - 1); }; // вариант 2 // здесь передаем 1-й элемент прогрессии, инкремент // и не больше какого числа должен быть последний элемент const sum2 = function (startValue, inc, maxValue) { if (startValue + inc > maxValue) return startValue; return startValue + sum2(startValue + inc, inc, maxValue); }; // ---------------------------------------------------------- // HTML Tree // Сделать задание на синий пояс, используя рекурсию, без ограничения вложенности. // сделано еще в прошлый раз let someTree = { tagName: "table", //html tag subTags: [ //вложенные тэги { tagName: "tr", subTags: [ { tagName: "td", text: "some text", }, { tagName: "td", text: "some text 2", attrs: { bgcolor: "red", }, }, { tagName: "th", text: "some text right1", attrs: { bgcolor: "gray", }, }, ], }, { tagName: "tr", subTags: [ { tagName: "td", text: "some text 3", }, { tagName: "td", text: "some text 4", }, { tagName: "td", text: "some text right 2", }, ], attrs: { bgcolor: "#42ecff", }, }, { tagName: "tr", subTags: [ { tagName: "td", text: "some text 5", }, { tagName: "td", text: "some text 6", }, { tagName: "td", text: "some text right 3", }, ], attrs: { bgcolor: "#00FF00", }, }, ], attrs: { border: 1, align: "center", }, }; // функция для конструкции таблиц (и не только таблиц) // с любым числом колонок и строк // с любым набором атрибутов const сonstructor = function (item) { let node = document.createElement(item.tagName); if ("attrs" in item) { for (attrKey in item.attrs) { node.setAttribute(attrKey, item.attrs[attrKey]); } } if ("subTags" in item) { for (i in item.subTags) { node.append(сonstructor(item.subTags[i])); } } if ("text" in item) { node.innerText = item.text; } return node; }; document.body.append(сonstructor(someTree));