结合实际工作,说得夸张一点,ES6开始的函数默认值、箭头函数已经成为了前端开发中原子级别、最最基础的知识点。在几大前端框架的项目中,函数默认值、箭头函数可以说是无处不在。毕业求职那会,面试中被问到最多的也是这两个知识点。目前工作也快一年了,回过头来看,这两个点平平无奇,像每天都要吃饭睡觉,普通、简单、却又影响深远
一、函数默认值
基本用法
function greet(x, y='World') {
console.log(x, y)
}
greet('Hello'); // Hello World
greet('Hello', 'China'); // Hello China
greet('Hello', ''); // Hello
greet(); // undefined World
复制代码
通过检查函数对应位置的参数是否被赋值,判断是否使用函数默认值,判断规则如下:
if(typeof y === 'undefined') { // 此处是(===),比较过程中不转换变量类型,所以 基本用法第三个调用只输出了 ‘Hello’
y = 'World';
}
复制代码
默认值与解构赋值结合
参考对象的解构赋值,所以有个坑就是不能对 undefined 进行解构
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(); // Cannot destructure property 'a' of 'undefined' as it is undefined.
复制代码
参数默认值的位置
还是一纸小白那些年看到函数默认值的时候脑子里就立马蹦出来这个骚想法:有了函数默认值那不得随意传了~~了解到后面内容才被啪啪打脸
阮一峰的ES6标准入门是这样说的:默认值的参数应该是函数的尾参数。
骚想法:那是不是只要给第一个设置了默认值及之后的参数都设置默认值就好了?
可以这样做,但是失去了灵活性,感觉有点违背了参数默认值的初衷
function foo(x, y=5, z) {
console.log(x, y, z);
}
foo(); // undefined 5 undefined
foo(1); // 1 5 undefined
foo(1, , 2); // 报错 y内心os:啥意思,欺负我有默认值啥都不给我!!!!
foo(1, undefined, 2); // 1 5 2
复制代码
对于此处的参数y来说:我可以不要(undefined),但你不能不给
可以看出,设置了默认值之后,后续的参数是可以不设置默认值的,但是传参的时候默认值参数就无法省略了
二、箭头函数
基本用法
var f= v => v;
等价于
var f = function(v) {
return v;
}
复制代码
就是这么简单直白(简洁!简洁!简洁!)
注意事项
-
箭头函数体内的this对象就是定义时 定义时 定义时所在的对象
function foo() { setTimeout(()=>{ console.log(this.id); },1000); } function yoo() { setTimeout(function(){ console.log(this.id); },1000); } var id = 66; foo.call({ id: 99 }); // 99 yoo(); // 66 复制代码
对于普通函数,setTimeout执行时this指向全局对象window,这是输出66
箭头函数的this是指向函数生效时所在的环境,即上例中为{ id: 99 } (关于apply,call,bind会再开一期总结)
-
箭头函数不能当作构造函数
作为箭头函数,你还想着new个对象(○´・д・)ノ,不会吧~不会吧!
-
不可以使用arguments对象,替代方案是rest参数
-
不可以使用yield命令,即箭头函数不能用作Generator函数
前端人每日问题思考
正式开发中很少有权限、机会(几乎没有)为一个项目增加新的外部依赖包,也就是自己yarn add
这种事情,该怎么接触一些新工具?