es6 函数的扩展

水深无声 2022-01-31 11:53 320阅读 0赞

### 函数的扩展 ###

*   *   *  传统函数参数默认值
         *  es6函数参数默认值
         *  rest 参数
         *  箭头函数
         *   *  箭头函数的使用注意点

### 传统函数参数默认值 ###

> 运算符 `||` 左侧为true，直接返回左侧的值，否则返回右侧的值

function fn(a,b) { 
    		let num = a || 11
    		let str = b || "bbbbb" 
    	}

### es6函数参数默认值 ###

function fn(a='aaa',b=22) { 
    		console.log(a,b)
    	}
    
    	fn('A',11); // 'A' 11
    	fn(); // 'aaa' 22

> `注意:` 参数变量是`默认声明`的，所以不能用`let`或`const`再次声明

function fn(a=11,b) { 
    		let a = 'aa'; // 错误 不能再次声明a 
    		const b = 22; // 错误 不能再次声明b
    	}

> `注意:` 参数不能有`同名`的

function(a,a,b,c){ 
    		...   //报错
    	}

> `注意:` 设定`参数默认值`一定要放在`最后`

function f(x = 1, y) { 
    	  return [x, y];
    	}
    	
    	f() // [1, undefined]
    	f(2) // [2, undefined])
    	f(, 1) // 报错
    	f(undefined, 1) // [1, 1]
    
    	//正确写法
    	function f2(y2,x2 = 1) { 
    	  return [x2, y2];
    	}

### rest 参数 ###

> `(...变量名)`用于获取函数的多余参数

function fn(...values){ 
    		console.log(values); // [1,2,3,4]
    		
    		let nums = 0
    		for(let i of values){ 
    			nums += i
    		}
    		return nums
    	}
    	
    	fn(1,2,3,4); // 10

> `注意:` `rest参数`必须是函数的`最后一个参数`，后面不能再跟其他参数

### 箭头函数 ###

> `()=>{} :` (参数:`超过1个用小括号`)=>\{函数体:`超过1句用大括号`\}

let fn = (a)=>{ 
    		return a+2
    	}
    	
    	//简写(参数和函数体不大于1，省略括号()和大括号{})
    	let fn = a => a+2
    
    	fn(1); // 3

> `注意:` 由于`大括号`被解释为`代码块` , 若`箭头函数`只返回一个`对象`,则要加括号`()` , 否则会报错

// 报错
    	let getId = id => {  id: id, name: "aaa" };
    	
    	// 不报错
    	let getId = id => ({  id: id, name: "aaa" });

> `注意:` 如果箭头函数只有`一行语句`，且不需要返回值。

let fn = () => void doesNotReturn();

#### 箭头函数的使用注意点 ####

>  *  函数体内的`this`对象，就是`定义时所在的对象`，而不是使用时所在的对象。
>  *  不可以当作构造函数，也就是说，`不可以使用new命令`，否则会抛出一个错误。
>  *  `不可以使用arguments`对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。
>  *  `不可以使用yield`命令，因此箭头函数不能用作 Generator 函数。