ES6-函数新增特性

1.函数参数的默认值

<script>
function fn(a='小丁',b){
    console.log(a+"和"+b+""写代码);
}
fn('晓飞'，'小丽');//输出晓飞和小丽写代码；
fn('小丽');//暑促小丽和undefined写代码，实参赋值给形参是从前往后，所以有默认值的一般写在后面 fn(a, b='小丁')
</script>

2. rest参数

Rest参数接收函数的多余参数，组成一个数组，放在形参的最后，形式如下:

function func(a, b, ...theArgs) {
    // ...
}

rest参数是Array的实例，可以直接应用forEach方法，arguments类数组对象，不能使用forEach

例子：

<script>
function sum(){
   let sum = 0;
   args.forEach(function(val){
      sum += val;
   })
   return sum;
}
console.log(sum(1,2,3,4,5));
</script>

3.箭头函数

（1）特点：

a. 简化函数的声明；例子：

<script>
let fn = val = >val;
//等同于
let fn =function(val){
  return val;
}
console.log(fn(200));//输出200
</script>

b. 参数超过一个要加（）

<script>
let sum = (num1,num2) => num1+num2;
console.log(sum(1,5));//输出6
</script>

c. 函数体超过一行加{}，并写上return

例子1：

<script>
    let str =num=>{
        console.log(num);
        console.log(num+2);
        return 200;
    }
    str(2);
</script>

例子2：上面的例子当加上{}没加return时，显示undefined

<script>
let sum = (num1,num2) => {return num1+num2};
console.log(sum(1,5));//输出6
</script>

（2）箭头函数的作用：

a. 简化回调函数；

例子：js实现排序：

<script>
    let numList = [10,3,6,23,100,8,235];
    numList.sort();//按位比较，并不是按照数字大小比较，所以进行回调

    //JS
    numList.sort(function(a,b){//a b两个数进行比较
        return a-b;

    })
    console.log(numList);
</script>

例子2：使用箭头函数：

<script>
    let numList = [10,3,6,23,100,8,235];
    //箭头函数
    numList.sort((a,b) => a-b);
    console.log(numList);
</script>

b. 箭头函数中的this是函数声明时所在的对象

例子：

<script>
  let obj = {
    num:4;
    fn:function(){
        var f=function(){
            console.log(this);//输出windoow，这个this是指函数声明所属的对象
        }

        let f =() =>{
            console.log(this);//输出obj,this是函数声明时所在的对象
        }
    }
  }
</script>

4.函数参数的尾逗号（ES2017）

<script>
  function demo(a,b,){//后面的逗号
     console.log(a,b);
}
demo(10,20,);
//再如
let obj{
    num : 100,
    age : 20,//此时的逗号
}
</script>

猜你喜欢