master

分支 (3)

管理

管理

master

test

testing

ES6
/
07_rest剩余参数.html

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>07_rest params</title>
</head>

<body>
	<!--
* 用途
1. rest(可变)参数
	*多个参数（用于函数调用）或多个元素（用于数组字面量）或者多个变量（用于解构赋值）
    *可取代arguments，比arguments灵活,只能是最后部分形参参数
	*需要依靠[Symbol.iterator]函数，而目前只有Array,Set,String内置[Symbol.iterator]方法，
	 而Object尚未内置该方法，因此无法使用展开运算符
  function add(...values) {
    let sum = 0;
    for(value of values) {
      sum += value;
    }
    return sum;
  }
2. 扩展运算符
  let arr1 = [1,3,5];
  let arr2 = [2,...arr1,6];
  arr2.push(...arr1);

rest剩余参数和扩展运算符区别：
	rest剩余参数：将多个参数整合为一个数组
	扩展运算符：  将可遍历对象的元素扩展为一个新的参数序列
-->
	<script type="text/javascript">
		// es5 使用arguments
		function sum() {
			let total = 0;
			console.log(arguments);//Arguments(5) [10, 20, 30, 40, 50, callee: ƒ, Symbol(Symbol.iterator): ƒ]
			for (let num of arguments) {
				total += num;
			}
			return total;
		};
		console.log(sum(10, 20, 30, 40, 50));//150

		// es6 使用rest剩余参数
		function sum2(...values) {
			console.log(values);//(5) [10, 20, 30, 40, 50]
			return values.reduce((prev, cur) => prev + cur, 0);
		}
		console.log(sum2(10, 20, 30, 40, 50));//150
	</script>
	<script>
		// 1.rest剩余参数,对函数参数的处理
		let obj = {
			name: 'kobe',
			age: 39,
			sex: undefined
		};
		function foo(...values) {
			console.log(values)//返回数组 [{…}]
			console.log(...values);//展开运算符 {name: "kobe", age: 39, sex: undefined}
		}
		foo(obj)

		function comverCurrency(rate, ...amounts) {
			return amounts.map((amount) => amount * rate)
		}
		console.log(comverCurrency(0.89, 12, 45, 67, 23))// [10.68, 40.05, 59.63, 20.47]
	</script>

	<script>

		// 2.rest剩余参数,变量的解构
		const player = ["jelly", 12345678, 4.6, 3.8, 10.5, 30.6]
		const [name, id, ...scores] = player
		console.log(name, id, scores)//jelly 12345678 Array(4)


	</script>
	<script>
		// 替代函数的 apply 方法
		// es5
		function f(x, y, z) {
			console.log(x + y + z);//3
		}
		let args = [0, 1, 2];
		f.apply(null, args)

		// es6
		function f2(x, y, z) {
			console.log(x + y + z);//3
		}
		f2(...args)


		// 应用Math.max方法，简化求出一个数组最大元素的写法。
		// es5
		console.log(Math.max.apply(null, args))//2

		// es6
		console.log(Math.max(...args))//2
	</script>

</body>

</html>