Рест-оператор (. . .) -- "невідомі аргументи функції". Якщо ми не знаємо скільки буде аргументів, то можна використати рест-оператор (три крапки), який поверне масив.
// rest function test(a, b, ...rest) { return a + b + rest.join(''); } console.log(test('a', 'b', 'c', 'd', 'e')); // abcde
Спред-оператор має протилежну дію, хоч і позначається таким самим кодом. Якщо рест-оператор збирає елементи в масив, то спред розгортає елементи масива:
// spread const a = [1, 2, 3, 4, 5]; const b = ['a', 'b', 'c', 'd', 'e']; const c = [...a, ...b]; console.log(c) // [1, 2, 3, 4, 5, "a", "b", "c", "d", "e"]
Деструктуризація -- це розбирання на змінні частин об'єкту.
// destructurization const [one, two, three, four, five] = a; console.log(one, two, three, four, five) // 1 2 3 4 5
"Фокус" з обміном значеннями:
let d = 3; let e = 5; [d, e] = [e, d]; console.log(d, e) // 5 3
Спрощений синтаксис створення змінних:
let [text1, text2, text3, text4] = ['some text 1', 'some text 2', 'some text 3']; // text4 - undefined
Створюємо на базі об'єкта 2 змінні та 2 функції (newName, newAge, newNameF() i newAgeF()):
const firstObj = { name: 'Vasia Pupkin', age: 25, getName(){ return this.name; }, getAge(){ return this.age; } }; const {name: newName, age: newAge, getName: newNameF, getAge: newAgeF} = firstObj;
Синтаксис несподіваний. Зліва має бути властивість (або метод), а після двокрапки назва нової змінної (чи функції).
Спрощений варіант деструктуризації (нові змінні та функції матимуть назва властивостей та методів):
const {name, age, getName, getAge} = firstObj;
За допомогою деструктуризації можна розбивати і текст:
const ivan = 'Ivan'; const [s1, s2, s3, s4] = ivan; // I v a n