在前面第十三节中，我们已经讲过很多种参数的传参方式
javascript核心技术（十三）函数的参数 实参 形参 默认值 https://www.teamczyx.com/thread-1964-1-1.html
下面我们再补充一种，就是ES6新增的...展开运算符，使用展开运算符可以自由的给函数传入一个数组作为参数。
<!DOCTYPE html>
<html>
<head>
<title>使用展开运算法给函数传参</title>
</head>
<body>
<script type="text/javascript">
console.log("展开数组");
var arr = [3,4,5];
console.log(arr);
console.log(...arr);
console.log(arr);//展开运算符不会改变原数组
console.log("展开字符串");
var str = 'hello';
console.log(str);
console.log(...str);
console.log('h', 'e', 'l');
console.log("使用展开数组的写法给函数传参");
function f1(m,n){
return m+n;
}
//如果参数放在数组中
var arr = [3,4];
//ES5中需要这样传入
console.log( f1(arr[0], arr[1]) );
console.log( f1.apply(null, arr) );
//ES6这样传入
console.log( f1(...arr) ); // m=3 n=4
//由于f1函数定了两个形参，所以不论传入多少实参，它都只能接收两个
var arr = [3,4,5,6];
console.log( f1(...arr) );// m=3 n=4
console.log("如果函数参数个数不确定");
//ES5中，可以在函数内部使用arguments获取到所有的实参
function f2(){
console.log(arguments);
}
var arr = [3,4];
f2.apply(null, arr);
var arr = [3,4,5,6];
f2.apply(null, arr);
//ES6中，在形参上使用...声明一个数组变量，接收所有的实参
function f2(...x){
console.log(x);
}
f2(3,4,5);
f2(3,4,5,6);
//还可以使用...语法，接收剩余的参数
function f3(m,n, ...x){
console.log(m,n,x);
}
f3(3,4,5);
f3(3,4,5,6);
</script>
</body>
</html>
请大家认真理解并总结以上代码，该语法在JS中被大量引用。
|
窥视卡
雷达卡
发表于 2023-1-29 12:34:35
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-2-22 01:59:50
