ES6函数第二篇：剩余参数与展开运算符的练习
生活随笔
收集整理的這篇文章主要介紹了
ES6函数第二篇：剩余参数与展开运算符的练习
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
上一篇講了剩余參數和展開運算符，這一篇來幾個小練習鞏固一下吧
首先明確一點，展開運算符實現的克隆是淺克隆，即若克隆引用值，實際克隆的是它的地址，舉個栗子叭
【例1】
const obj = {name: 'jwh',age: '18',sex: 'female',hobby: ['read', 'sing', 'sport'] }; const obj1 = {...obj }; obj.hobby[0] = 'play'; console.log(obj1.hobby); console.log(obj.hobby); console.log(obj.hobby === obj1.hobby);【結果】
圖1?【例2】在下列輸入框中輸入數字，點擊計算按鈕，求最大值和最小值
例2圖 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><div><p><input type="number" value="0"></p><p><input type="number" value="0"></p><p><input type="number" value="0"></p><p><input type="number" value="0"></p></div><p><button>計算</button></p><p><h2>最大值：<span id="max"></span></h2><h2>最小值：<span id="min"></span></h2></p><script src="./max-min.js"></script> </body> </html> function getNumbers() {const inp = document.querySelectorAll('input');const num = [];for (let i = 0; i < inp.length; i++) {num.push(+inp[i].value);}return num; } const btn = document.querySelector('button'); btn.onclick = function () {const numbers = getNumbers();max.innerText = Math.max(...numbers);min.innerText = Math.min(...numbers); }【結果】
圖2【例3】剩余參數和展開運算符實現柯里化
function cal(a, b, c, d) {return a + b * c - d; } function curry(func, ...args) {return function (...subArgs) {const allArgs = [...args, ...subArgs];if (allArgs.length >= func.length) {//參數夠了return func(...allArgs);} else {//參數不夠，繼續固定return curry(func, ...allArgs)}} } const newCal = curry(cal, 1, 2) console.log(newCal(3, 4)); const newCal2 = newCal(8) console.log(newCal2(9))【注】對函數柯里化有問題請移步函數式編程之柯里化
總結
以上是生活随笔為你收集整理的ES6函数第二篇：剩余参数与展开运算符的练习的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 深入理解函数式编程之柯里化
- 下一篇： ES6函数第三篇：函数篇(新增API与箭