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);

【结果】

【例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);
}

【结果】

【例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函数第一篇：参数篇
目录 1.默认参数 2.剩余参数 3.展开运算符 1.默认参数 (1)使用在书写型参数,直接给形参进行赋值的值成为默认值,如此,在调用函数时,如果没有给对应的参数赋值(即它的值为undefined) ...
6. 函数参数与展开运算符
1.函数参数 a. function test(word){ console.log(word); }test('hello word'); b. function test(word = 'hell ...
ES6（二）——字符串模板、标签模板字符串、函数的默认参数、剩余参数、数组对象的展开语法、数值的表示、Symbol
一.字符串模板基本使用在ES6之前,如果我们想要将字符串和一些动态的变量(标识符)拼接到一起,是非常麻烦和丑陋的(ugly). ES6允许我们使用字符串模板来嵌入JS的变量或者表达式来进行拼接: 首 ...
深入理解javascript函数系列第二篇——函数参数
前面的话 javascript函数的参数与大多数其他语言的函数的参数有所不同.函数不介意传递进来多少个参数,也不在乎传进来的参数是什么数据类型,甚至可以不传参数.本文是深入理解javascript函数 ...
ES6/06/ES6简介，ES6新增语法，let声明变量，const声明常量，var,let和const总结，数组解构，对象解构，箭头函数，剩余参数
ES6简介 ES全称:ECMAScript ; 由ECMA国际化组织制定的标准脚本语言的标准化规范: 为什么使用ES6? 每一次标准的诞生都意味着语言的完善,功能的加强,JavaScript语言本身也 ...
20181210-es6(letconst解构模版字符串原理展开运算符、剩余运算符运用深拷贝原理 reduce原理箭头函数)...
变量声明 var 特点: 1.可以重复声明 2.不能定义常量 3.不支持块级作用域复制代码 let //1.不存在预解释变量提升 //2.暂时性死区 //3.具备块级,同一块内不能重复声明;let ...
Vue学习【第二篇】：ES6简单介绍
ECMAScript 6简介 ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了.它的目标,是使得 JavaScript ...
初步探究ES6之字符串模板和剩余参数，默认参数
本文介绍一下字符串模板以及剩余参数,默认参数的概念以及使用. 先来说说字符串模板. 字符串模板 ES6中允许使用反引号 ` 来创建字符串,此种方法创建的字符串里面可以包含由美元符号加花括号包裹的变量$ ...
ES6——函数参数默认值
ES6 之前,不能直接为函数的参数指定默认值,ES6 允许为函数的参数设置默认值,即直接写在参数定义的后面. function fun(x = 'Hello'){console.log(x); } f ...

ES6函数第二篇：剩余参数与展开运算符的练习

ES6函数第二篇：剩余参数与展开运算符的练习相关推荐

最新文章

热门文章