Операторы spread и rest
? ???? ????? ... ??? ????. Spread ????????????? ??????????? ???????? ? ????????? ???????, rest ???????? ??????????. ????? ?????? ????? ? ?????????.
???????? ????? spread
const extras = ["mint", "lemon"];
const menu = ["tea", ...extras];
console.log(menu.join(" / "));
????????? ????? tea / mint / lemon. ? ????? ?????? ???????? ???????? extras, ? ?? ??? ?????? ????? ?????????.
??????????? ????????
const extras = ["mint", "lemon"];
const copy = [...extras];
copy[0] = "ginger";
console.log(extras[0]);
console.log(copy[0]);
copy ? ????? ??????? ??????; ??? ????????? ?? ?????? extras. ??? ????????????? ?????: ????????? ??????? ? ??????? ???????? ??????.
Spread ???????
const order = { guest: "lida", drink: "tea" };
const withSize = { ...order, size: "regular" };
console.log(order.size);
console.log(withSize.size);
? order ??? size, ? ? withSize ????. Spread ??????? ???? ?????????????: ????????? ???????? ?? ?????????? ????????????.
Rest ???????? ???????
const menu = ["tea", "mint", "lemon"];
const [first, ...remaining] = menu;
const order = { guest: "lida", drink: "tea" };
const { guest, ...details } = order;
console.log(first, remaining, details);
first ????? tea, remaining ? ["mint", "lemon"], ? details ???????? drink, ?? ?? guest. ??? ???? ????????????? ? ??????? ??????.
Rest-?????????
<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>Spread and Rest</title></head>
<body>
<p id="result"></p>
<script>
const extras = ["mint", "lemon"];
const menu = ["tea", ...extras];
function list(first, ...others) {
return [first, ...others].join(" / ");
}
document.getElementById("result").textContent = list(...menu);
</script>
</body>
</html>
? list(...menu) ?????????????? ?????????? ??? ??????. ? function list(first, ...others) rest ???????? ?????? ????????? ? ????????? ??????. ??????? ????????? ? tea / mint / lemon.
Таблица ясно показывает различие: точки одинаковы, но их позиция определяет, разворачивает JavaScript значения или собирает остаток.
📊 ???? ?????, ??? ???????????
| ??????? | ???????? | ?????? |
|---|---|---|
| ??????, object ??? ????? | Spread ????????????? | [..., extras], { ...order }, list(...menu) |
| ?????????? ??? ???????? | Rest ???????? | const [first, ...remaining] = menu, function list(first, ...others) |
???????? ????????
???????? copy[0] ? ???????? ? extras[0]. ???????? ????????? ?????? ? ??????? ????????????? ???????????.
?????? ??????
?? ??????? rest ? ???????? ??????????, ?? ????? ???????? ????? ? ?? ??????? spread ? rest.
????
Spread ???????????? ? ???????, object ??? ??????; rest ? ? ?????????? ??? ?????????. ????? ?????????, ?????? ????????.
🧠 Проверьте Свои Знания
Проверьте Свои Знания
Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему
📝 Инструкции
- Внимательно прочитайте каждый вопрос
- Выберите лучший ответ на каждый вопрос
- Вы можете пересдавать тест столько раз, сколько захотите
- Ваш прогресс будет показан вверху