函数的扩展
- rest参数
- 箭头函数
rest参数-三点运算符
ES6 引入 rest 参数（形式为“...变量名”），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中
<script type="text/javascript">
function foo(...value){//value为数组
value.forEach(function(item,index){
console.log(`索引：${index},值：${item}`);
})
}
foo(1,2,3);
//索引：0,值：1
//索引：1,值：2
//索引：2,值：3
</script>
注意：只能放到最后位置，前面如果还有其他的，他会去掉前面固定部分的参数
上面是三点运算符作为参数引用，
三点运算符的另外一个作用：作为拓展运算符使用：
扩展用法：将数组插入到另外一个数组的中间
let arr=[1,6];
let arr1=[2,3,4,5];
arr=[1,...arr1,6];//把arr1的每个值拿出来放到arr的中间
//遍历数组
console.log(arr);//数组
console.log(...arr); //数组遍历后的实际值
再来一个小例子
function push(array, ...items) {
for (var i = 0; i < items.length; i++) {
array.push(items[i]);
}
}
var a = [];
push(a, 1, 2, 3);
//扩展运算符
console.log(...a);
总结：三点运算符应用
1、作为扩展参数用
2、作为拓展运算符使用
箭头函数
最重要的一点：箭头函数this和普通函数的this：简头函数没有自己的作用域，这一点以后续axios调用时非常有用,多用于定义回调函数上
1、简头函数如果外层有函数，this就是外层函数
2、如果外层没有函数，this即是window
<script>
var name = '外部window';
var obj = {
name: '内部obj',
nameprintf: function() {
alert("非箭头函数:"+this)
},
nameprintf2: () => {
alert("箭头函数:"+this)
}
}
obj.nameprintf(); //'obj'
obj.nameprintf2();//window
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
用户名：<div id="demo">
</div>
<script type="text/javascript">
var demo=document.getElementById("demo");
//{} json对象 key：字符串 value:可以是属性也可以是函数
var obj = {
nameprintf: function() {
this.demo.innerText="123";
}, //普通函数
nameprintf2: () => {
console.log(this);
this.demo.innerText="456";
}
}
obj.nameprintf();//非箭头函数 this.demo不存在
obj.nameprintf2();//箭头函数结果 this.demo存在
</script>
</body>
</html>
简头函数小括号有几种情况：
1、没有形参时，小括号不可省略
<script type="text/javascript">
let fun = () => {
console.log("hello");
}
fun();
</script>
2、一个形参时，小括号可省略
let fun2 = username =>console.log(username);
fun2("wang.qj");
3、2-n个形参时，小括号不可省略
正确的写法：
let fun3 = (username,password) =>console.log(username,password);
fun3("wang.qj","123456");
错误的写法：
let fun4 = username,password =>console.log(username,password)
fun4("wang.qj","123456");
参数部分的小括号使用小结
1、没有参数时，括号不可省
2、一个参数时，可省略括号
3、大于一个时，小括号不可省略
总结一下：只有参数个数是一个时，可省略小括号
函数体的几点说明：
1、只有一条语句时，函数体的花括号可以省略，花括号省略时会把语句的执行结果返回，也就是相当于自动return 。
let x=10;
let y=20;
let fun = () =>x+y;
console.log(fun());//30
let fun2 = () =>{x+y;}
var value=fun2();
console.log(value); //undefined 因为这时没有返回值
2、函数体有多条语句时，花括号不可以省略
let fun2 = (x,y) =>{
let result=x+y;
return result;
}
console.log(fun2(20,30));//50
3、返回json
<script type="text/javascript">
let fun1=id=>{
return {name:"wang.qj",id:id};
}
alert(fun1(1).name);
</script>
4、由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号。
错误的写法：
<script type="text/javascript">
let fun1=id=>{name:"wang.qj",id:id};
alert(fun1(1).name);
</script>
正确的写法：
<script type="text/javascript">
let fun1=id=>({name:"wang.qj",id:id});
alert(fun1(1).name);
</script>
函数体使用总结：
为防止写错，尽量用以下方式
{
return ****;
}
网友评论