ES6-函数新增特性

雨点打透心脏的1/2处 2022-05-15 04:06 601阅读 0赞

1.函数参数的默认值

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

2. rest参数

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

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

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

例子：

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

3.箭头函数

（1）特点：

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

  1. <script>
  2. let fn = val = >val;
  3. //等同于
  4. let fn =function(val){
  5.   return val;
  6. }
  7. console.log(fn(200));//输出200
  8. </script>

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

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

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

例子1：

  1. <script>
  2.     let str =num=>{
  3.         console.log(num);
  4.         console.log(num+2);
  5.         return 200;
  6.     }
  7.     str(2);
  8. </script>

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

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

（2）箭头函数的作用：

a. 简化回调函数；

例子：js实现排序：

  1. <script>
  2.     let numList = [10,3,6,23,100,8,235];
  3.     numList.sort();//按位比较，并不是按照数字大小比较，所以进行回调
  5.     //JS
  6.     numList.sort(function(a,b){//a b两个数进行比较
  7.         return a-b;
  9.     })
  10.     console.log(numList);
  11. </script>

例子2：使用箭头函数：

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

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

例子：

  1. <script>
  2.   let obj = {
  3.     num:4;
  4.     fn:function(){
  5.         var f=function(){
  6.             console.log(this);//输出windoow，这个this是指函数声明所属的对象
  7.         }
  9.         let f =() =>{
  10.             console.log(this);//输出obj,this是函数声明时所在的对象
  11.         }
  12.     }
  13.   }
  14. </script>

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

  1. <script>
  2.   function demo(a,b,){//后面的逗号
  3.      console.log(a,b);
  4. }
  5. demo(10,20,);
  6. //再如
  7. let obj{
  8.     num : 100,
  9.     age : 20,//此时的逗号
  10. }
  11. </script>

发表评论

表情：
评论列表 （有 0 条评论，601人围观）

还没有评论，来说两句吧...

相关阅读