ES6:剩余参数与展开运算符【在input中取得最大值和最小值】

剩余参数
arguments的缺陷:

  1. 如果和形参配合使用,容易导致混乱
  2. 从语义上,使用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)
}

输出结果:
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_45044349/article/details/119981959
今日推荐