正在加载...
展开与剩余运算符
??? ... ??????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???????????????????
object spread
const order = { guest: "lida", drink: "tea" };
const withSize = { ...order, size: "regular" };
console.log(order.size);
console.log(withSize.size);
order ?? size?? withSize ??object 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 ???????????????????
🧠 测试您的知识
准备开始
测试您的知识
通过这个互动测验挑战自己，看看你对这个主题的理解程度如何
6
问题
70%
及格要求
∞
时间
∞
尝试次数
📝 说明
- 仔细阅读每个问题
- 为每个问题选择最佳答案
- 您可以随时重新参加测验
- 您的进度将显示在顶部