剩余参数
arguments的缺陷:
- 如果和形参配合使用,容易导致混乱
- 从语义上,使用arguments获取参数,由于形参缺失,无法从函数定义上理解函数的真实意图
ES6的剩余参数专门用于手机末尾的所有参数,将其放置到一个形参数组中。
语法:
function (...形参名){
}
细节:
① 一个函数,仅能出现一个剩余参数
② 一个函数,如果有剩余参数,剩余参数必须是最后一个参数
展开运算符
使用方式:...要展开的东西
<body>
<div>
<p><input type="number" name="" id="" value="12"></p>
<p><input type="number" name="" id="" value="0"></p>
<p><input type="number" name="" id="" value="76"></p>
<p><input type="number" name="" id="" value="52"></p>
<p><input type="number" name="" id="" value="42"></p>
<p><input type="number" name="" id="" value="32"></p>
<p><input type="number" name="" id="" value="86"></p>
<p><input type="number" name="" id="" value="77"></p>
<p><input type="number" name="" id="" value="99"></p>
<p><input type="number" name="" id="" value="3"></p>
</div>
<p>
<button>计算</button>
</p>
<p>
<h2>最大值:<span id="spanmax"></span></h2>
<h2>最小值:<span id="spanmin"></span></h2>
</p>
<script src="./maxmin.js"></script>
</body>
function getValues() {
const numbers = [];
const inps = document.querySelectorAll("input")
for (let i = 0; i < inps.length; i++) {
numbers.push(+inps[i].value)
}
return numbers;
}
const btn = document.querySelector("button")
btn.onclick = function () {
const numbers = getValues(); //得到文本框中的所有数字形成的数组
spanmax.innerText = Math.max(...numbers)
spanmin.innerText = Math.min(...numbers)
}
输出结果: