03 函数之默认值、剩余参数
基本使用和操作方法看下面的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<title>03 函数之默认值、剩余参数</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link href="css/style.css" rel="stylesheet"> -->
</head>
<body>
<script>
// 1.带参数默认值的函数
// 之前的es5的写法
// function add(a,b) {
// a = a || 10; //a有值的时候,赋值给a,没有值的时候默认为10。
// b = b || 20;
// return a + b;
// }
// console.log(add()); //输出:30
// es6的写法
// 参数的默认值 不会影响arguments对象,它表示实参的个数、
// function add(a, b = 20) {
// console.log(arguments);
// return a + b;
// }
// console.log(add(10)); //输出:50 传一个值时,只赋给第一个形参a,b还是默认值20。
// 2.默认的表达式可以是一个函数
// function getVal(val) {
// return val + 5;
// }
// function add2(a, b = getVal(5)) { //函数getVal调用上面的函数。
// return a + b;
// }
// console.log(add2(10)); //输出:20
// 3.不具名参数的函数
// es5写法:
/*function pick(object) {
let result = Object.create(null);
for(let i = 1; i < arguments.length; i++){ //i=1,是要排除bookData中的第一个值:book。
result[arguments[i]] = object[arguments[i]]
}
return result;
}
let book = {
title:"小猿圈wiki",
author: 'mjj',
year: 2019
}
let bookData = pick(book,"author", "year");
console.log(bookData);*/
// 4.剩余参数 : 由三个点...和一个紧跟着的具名参数指定
// 剩余参数 后面不能有多余的具名参数,它必须放在形参的最后面
// 设计剩余参数的目的是为了取代arguments
// es6写法:
function pick(object, ...keys /* ,last */ ) {
let result = Object.create(null);
for (let i = 0; i < keys.length; i++) {
result[keys[i]] = object[keys[i]]
}
return result;
}
let book = {
title: "es6教程",
author: 'longfei',
year: 2019
}
let bookData = pick(book, "author", "year");
console.log(bookData); //输出:{author: 'longfei', year: 2019}
// function checkArgs(...args) {
// console.log(args);
// console.log(arguments);
// }
// checkArgs('a', 'b', 'c');
</script>
</body>
</html>