-
函数参数的默认值
-
当不传入参数的时候默认使用形参里的默认值
-
function Point(x = 0, y = 0) { … }
-
案例
<script type="text/javascript"> // ES6之前的写法 function log(x, y) { y = y || 'World'; console.log(x, y); } log('Hello') // Hello World log('Hello', 'China') // Hello China log('Hello', '') // Hello World //使用ES6 函数参数的默认值 function log(x, y = 'World') { console.log(x, y); } log('Hello') // Hello World log('Hello', 'China') // Hello China log('Hello', '') // Hello //使用ES6 函数参数的默认值 function Point(x = 0, y = 0) { this.x = x; this.y = y; } let p = new Point(); p // { x: 0, y: 0 } </script>
-
与解构赋值默认值结合使用
//案例 1 function foo({x, y = 5}) { console.log(x, y); } foo({}) // undefined, 5 foo({x: 1}) // 1, 5 foo({x: 1, y: 2}) // 1, 2 foo() // TypeError: Cannot read property 'x' of undefined //案例 2 function fetch(url, { body = '', method = 'GET', headers = {} }) { console.log(method); } fetch('http://example.com', {}) // "GET" fetch('http://example.com') // 报错
-
-
rest 参数(“…变量名”)
-
用于获取函数的多余参数,这样就不需要使用arguments 对象。rest 参数搭配的变量是一个数组,该变量将多余的参数放入其中。
-
案例
//案例 1: function add(...values) { let sum = 0; for (let val of values) { sum += val; } return sum; } //10 console.log(add(2, 5, 3)); //案例 2: //下面是一个rest参数代替arguments变量的例子 // arguments变量的写法 function sortNumbers() { return Array.prototype.slice.call(arguments).sort(); } // rest参数的写法 const sortNumbers = (...numbers) => numbers.sort(); //案例 3: function push(array, ...items) { items.forEach(function(item) { array.push(item); console.log(item); }); } var a = []; push(a, 1, 2, 3)
-
注意
- rest参数之后不能再有其他参数(即只能是最后一个参数),否则会报错
// 报错 function f(a, ...b, c) { // ... }
-
-
箭头函数
-
作用:定义匿名函数
-
使用场景:多用来定义回调函数
-
基本语法:
- 没有参数: () => console.log(‘xxxx’)
- 一个参数: (i) => i+2
- 大于一个参数: (i, j) => i+j
- 函数体不用大括号: 默认返回结果
- 函数体如果有多个语句, 需要用{ }包围,若有需要返回的内容,需要手动返回(+ return)
-
箭头函数的特点:
- 简洁
- 箭头函数没有自己的this,箭头函数的this不是调用的时候决定的,而是在定义的时候所在的对象就是它的this
- 扩展理解
- 箭头函数的this看外层的是否有函数
- 如果有,外层函数的this就是内部箭头函数的this
- 如果没有,则this是window
-
案例
//案例 1: var f = v => v; //上面的箭头函数等同于: var f = function(v) { return v; }; let fun = function () { console.log('fun()'); }; fun(); //案例 2: //没有形参,并且函数体只有一条语句 let fun1 = () => console.log('fun1()'); console.log(fun1()); //案例 3: //一个形参,并且函数体只有一条语句 let fun2 = x => x; console.log(fun2(5)); //案例 4: //形参是一个以上 let fun3 = (x, y) => x + y; console.log(fun3(25, 39));//64 //案例 5: //函数体有多条语句 let fun4 = (x, y) => { console.log(x, y); return x + y; }; console.log(fun4(34, 48));//82
-
ES6之 函数(五)
最新推荐文章于 2022-12-14 16:41:58 发布