Javascript(笔记34) - ES6特性 - 函数参数默认值、rest参数、扩展运算符
发布时间：2022-11-15 10:20:21 320 相关标签： # javascript# html# java# java# 数据
Javascript(笔记34) - ES6特性 - 函数参数默认值、rest参数
函数参数赋初始值
很多语言都支持给函数赋初始值，也比较好理解；
1 形参初始值
先看个常规的：
function add(a, b, c) {
return a + b + c;
}
console.log(add(1, 2, 3)); // 6
如果参数没传够：最后输出 NaN ；
function add(a, b, c) {
return a + b + c;
}
console.log(add(1, 2)); // NaN
这时候，可以给形参来个初始值：可以输出正确的结果；
function add(a, b, c=5) {
return a + b + c;
}
console.log(add(1, 2)); // 8
如果实参我也传够了3个：那就以实参为准；
function add(a, b, c = 5) {
return a + b + c;
}
console.log(add(1, 2, 3)); // 6
具有默认值的参数，一般位置要靠后放；
2 与解够赋值结合
function connect({host,port,user,pswd}){
console.log(host); // localhost
console.log(port); // 8080
console.log(user); // root
console.log(pswd); // root
}
connect({
host:'localhost',
port:8080,
user:'root',
pswd:'root'
});
形参也可以使用默认值：
function connect({host ="127.0.0.1",port,user,pswd}){
console.log(host); // 127.0.0.1
console.log(port); // 8080
console.log(user); // root
console.log(pswd); // root
}
connect({
port:8080,
user:'root',
pswd:'root'
});
实参传了，就用实参，实参没传，就用默认值；
rest参数
ES6 引入 rest 参数，用于获取函数的实参，用来代替 arguments
arguments 获取实参：
function sum(a,b){
console.log(arguments);
}
sum(1,3);
arguments 不是数组，可以理解为类数组；有些数组的方法是不能使用的；
rest 参数的写法：用 3个点加标识符表示形参，这个参数是数组。
function sum(...args) {
console.log(args);
}
sum(1, 3, 5, 7);
返回了数组，就要可以使用数组的方法，如：filter some every map 等方法；
如果参数有多个，而且存在 rest 参数，那么就 rest 参数要放到参数的最后，否则报错；
function sum(a, b, ...args) {
console.log(a);
console.log(b);
console.log(args);
}
sum(1, 3, 5, 7, 9, 11);
1 给了 a ，3 给了 b， 剩下的都给了 ...args 。
扩展运算符
"..." 扩展运算符能将“数组”转换为逗号分隔的“参数序列”。
const mz = ['西游记','红楼梦','三国演义','水浒传'];
function read(){
console.log(arguments);
}
read(...mz); // 相当于： read('西游记','红楼梦','三国演义','水浒传');
注意这里的 “...” 和 rest 参数的"..." 可一样；rest 参数是放在形参里的；
看下具体应用：
1，数组的合并
之前使用数组的 concat 方法：现在使用 扩展运算符更方便；
const tianwang = ['张学友','刘德华'];
const gangjie = ['李嘉欣','张曼玉'];
// const star = tianwang.concat(gangjie);
const star = [...tianwang,...gangjie]; // 相当于把两个数组展开来，又放在数组里；
console.log(star);
2，数组的克隆
const fruit = ['apple','orange','banana'];
const myFruit = [...fruit];
console.log(myFruit); // ['apple','orange','banana']
如果有引用数据的话，也是浅拷贝；
3，将伪数组转为真正的数组
HTML里有3个div:
<div></div>
<div></div>
<div></div>
JS里获取到这3个 div :
const divs = document.getElementsByTagName('div');
console.log(divs); // 获取到的是个类数组，实际是 Object；
const arrDivs = [...divs]; // 用扩展运算符转换一下，变真正数组；
console.log(arrDivs); // [div, div, div]
arrDivs 变真正数组，可以使用数组的方法；
文章来源： https://blog.51cto.com/ahuiok/5847962
特别声明：以上内容（图片及文字）均为互联网收集或者用户上传发布，本站仅提供信息存储服务！如有侵权或有涉及法律问题请联系我们。
举报
