函数默认值问题
在ES6之前,不能直接为函数指定默认值,但是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
解析:缺点在于如果给参数y赋值了,但是对应的布尔值是false,则会出现最后一样的输出结果
ES6实现方式
function log(x, y = 'World') { console.log(x, y); } log('Hello') // Hello World log('Hello', 'China') // Hello China log('Hello', '') // Hello
ps: 参数变量是默认声明的,所以不能用let或者const再次声明,否则会报错;
使用参数默认值时,函数不能有同名参数;
参数默认值是惰性求值的;
例子
//不能let或者const再次声明参数变量x function foo(x = 5) { let x = 1; // error const x = 2; // error } //使用参数默认值,参数不能同名 // 不报错 function foo(x, x, y) { // ... } // 报错 function foo(x, x, y = 1) { // ... } //参数默认值惰性求值 //参数p的默认值是x+1.每次调用函数foo,都会重新计算x+1,而不是默认p=100 let x = 99; function foo(p = x + 1) { console.log(p); } foo() // 100 x = 100; foo() // 101
与解构赋值默认值结合使用
//只使用解构赋值默认值 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() //报错 解构赋值默认值和函数参数默认值结合使用 function foo({x, y = 5} = {}) { console.log(x, y); } foo() // undefined 5
没有第二个参数时,函数参数的默认值就会生效,然后才是解构赋值的默认值生效,变量想y
才会取到默认值5。
例题
// 写法一 function m1({ x = 0, y = 0 } = {}) { return [x, y]; } // 写法二 function m2({ x, y } = { x: 0, y: 0 }) { return [x, y]; } // 函数没有参数的情况 console.log(m1());// [0, 0] console.log(m2());// [0, 0] // x 和 y 都有值的情况 console.log(m1({ x: 3, y: 8 }));// [3, 8] console.log(m2({ x: 3, y: 8 }));// [3, 8] // x 有值,y 无值的情况 console.log(m1({ x: 3 }));// [3, 0] console.log(m2({ x: 3 }));// [3, undefined] // x 和 y 都无值的情况 console.log(m1({})) // [0, 0]; console.log(m2({}));// [undefined, undefined] console.log(m1({ z: 3 }));// [0, 0] console.log(m2({ z: 3 }));// [undefined, undefined]
解析:相同:都有函数参数默认值
不同:
写法一 函数参数默认值为空对象 设置了对象解构赋值的默认值
写法二 函数参数默认值为一个有具体属性的对象 没有设置对象解构赋值默认值
箭头函数
//无参数的箭头函数 var f = () => 5; 等价于 var f = function () { return 5 }; //一个参数的箭头函数 var f = v => v; 等价于 var f = function(v) { return v; }; //2个参数的箭头函数 var sum = (num1, num2) => num1 + num2; 等价于 var sum = function(num1, num2) { return num1 + num2; };
ps:
//箭头函数代码块语句多于一条,需要使用花括号括起来,并且使用return语句 var sum = (num1, num2) => { return num1 + num2; } //如果箭头函数直接返回一个对象,必须加上括号,否则会报错 // 报错 let getTempItem = id => { id: id, name: "Temp" }; // 不报错 let getTempItem = id => ({ id: id, name: "Temp" });
箭头函数注意事项
(1)函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。 (2)不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。 (3)不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。 (4)不可以使用yield命令,因此箭头函数不能用作 Generator 函数。
箭头函数的this的问题
function foo() {
setTimeout(() => {
console.log('id:', this.id);
}, 100);
}
var id = 21;
foo.call({ id: 42 });
//输出结果为42 并非21
函数绑定运算符
它是并排的两个冒号(::),该运算符会自动将左边的对象,作为上下文环境(this对象),绑定到右边的函数上,
写法:对象::函数
作用:用函数运算符来取代call,apply,bind调用。
应用:
//普通双冒号运算符应用 foo::bar 等同于 bar.bind(foo) foo::bar(...arguments) 等同于 bar.apply(foo,arguments) //双冒号左边为空,右边是一个对象的方法,则是将该方法绑定到该对象上 let log = ::console.log; // 等同于 let log = console.log.bind(console);
相关资料:https://www.cnblogs.com/wangyingblog/p/5583825.html
http://www.jb51.net/article/80861.htm
http://blog.csdn.net/ganyingxie123456/article/details/70855586