粗看ES6之函數

時間 2019-12-09

原文原文鏈接

標籤： es6 javascriptjavascript

箭頭函數

ES6爲了書寫方便引入了函數的全新簡寫方式-箭頭函數html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <script>
    //es5完法
    var show0 = function(str){
      console.log(str);
    }
    //es6寫法
    let show1 = (str)=>{
      console.log(str);
    }
    show0('這是測試0！');
    show1('這是測試1！');
  </script>
</body>
</html>

測試地址

箭頭函數的一些特性

當只有一個參數的時候能夠省略括號
當只有一個return語句的時候，大括號和return能夠省略

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <script>
    let show0 = (str)=>{
      console.log(str);
    }
    //省略括號
    let show1 = str=>{
      console.log(str);
    }
    let show2 = (str)=>{
      return str
    }
    //省略括號與中括號和return語句
    let show3 = str=>str;
    show0('測試0！');
    show1('測試1！');
    console.log(show2('測試2！'));
    console.log(show3('測試3！'));
  </script>
</body>
</html>

測試地址java

參數的變化

-參數的擴展/數組展開（...）
-默認參數es6

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>函數參數變化</title>
</head>
<body>
<script>
  //收集餘下參數並展開使用，...args必須放麼最後，收集餘下的全部可能的參數
  function show(a,b,...args){
    console.log(a,b,...args);
  }
  show(1,2,5,6);
  //展開數組
  let arr0=[1,2,3];
  let arr1=[4,5,6];
  let arr =[...arr0,...arr1];
  console.log(arr);
  //默認參數,當b/c沒有傳入值時取默認值，若是有傳入則取傳入值
  function show0(a,b=1,c=2){
    console.log(a,b,c);
  }
  show0(0);
</script>
</body>
</html>

測試地址數組

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。