首頁 > 博客列表 > javascript：引入方式/變量與常量聲明/函數與高階函數/歸并參數/箭頭函數的語法/立即執(zhí)行函數的語法

博主信息

博文 70

粉絲 4

評論 5

訪問量 122303

專題推薦

更多>

javascript：引入方式/變量與常量聲明/函數與高階函數/歸并參數/箭頭函數的語法/立即執(zhí)行函數的語法

1.引入方式

方式	元素	含義
行內腳本	onclick	事件屬性
內部腳本	script	將js代碼寫在這對標簽中，建議位置放在</body>前面
外部腳本	script src””	在src中輸入外部的js文件路徑，引入外部腳本，效果和css外部樣式一樣

①行內腳本

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>元素屬性javascript</title>
  </head>
  <body>
    <div>
      <!-- onclick 這個是在元素內部使用，alert 是彈窗功能-->
      <button onclick="alert('這是一個彈窗')">按鈕</button>
    </div>
    <script>
      // document.write 是在網頁頁面輸出一個內容
      document.write("你好！");
    </script>
  </body>
</html>

行內腳本onclick，在html元素標簽內部使用，onclick是一個事件屬性

②內部腳本

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>內部javascript</title>
  </head>
  <body>
    <script>
      console.log("hollow");
    </script>
  </body>
</html>

行內腳本一對script標簽，建議放在</body>前面

③外部腳本

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>外部javascript</title>
    <script src="javascript.js"></script>
  </head>
  <body></body>
</html>

在src中輸入外部的js文件路徑，引入外部腳本，效果和css外部樣式一樣

2.變量與常量聲明

元素	語法	含義
let	let sum=”我是變量”；	這是聲明一個變量的語法，變量可以第二次更新賦值
const	const DOME=”我是常量”	常量用const聲明，這個元素屬性聲明的常量不會被第二次賦值，常量聲明用大寫字母

①let聲明變量

$a 第一次初始化值為150，$a+$b=155

$a 第二次被賦值15，結果變更為$a+$b=20

代碼塊

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>變量聲明</title>
  </head>
  <body>
    <!-- 在javascript中聲明一個變量是用 let聲明。也可以聲明多個變量 -->
    <script>
      let $a = 15 * 10;
      $b = 15 / 3;
      $a = 15;
      console.log($a + $b);
    </script>
  </body>
</html>

②const聲明常量

常量第一次聲明

大家可以看到，在使用const聲明一個常量之后，是不能進行第二次賦值的，第二次賦值之后會報錯。

代碼塊

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>常量聲明</title>
  </head>
  <body>
    <script>
      const DEME = "我是常量";
      DEME = "第二次賦值";
      console.log(DEME);
    </script>
  </body>
</html>

3.函數與高階函數

函數聲明	名稱	含義
function	xxx	聲明一個函數用function，例如：function deME()

①聲明函數

用function聲明函數 deMe是函數名稱,console.log調用函數，要把函數名稱寫入，用括號傳入參數

②匿名函數

匿名函數，是把函數傳給一個變量或者常量，好處是不會進行函數提升

③函數返回多個值

想要返回多個值不同的是在function rnturn 中，使用{}括號來進行輸入參數的，可以自定義名稱，例如：{ name: “張三”, gender: “男”, age: “46” };

④高階函數

高階函數
高階函數：使用函數為參數或者函數作為返回值的函數

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>javascript函數與高階函數</title>
  </head>
  <body>
    <script>
      // 用function聲明函數 deMe是函數名稱
      function deME(a, b) {
        return a + b;
      }
      //   調用函數，要把函數名稱寫入，用括號傳入參數
      console.log(deME(3, 7));
      // 匿名函數，是把函數傳給一個變量或者常量，好處是不會進行函數提升
      let sum = function (a, b) {
        return a + b;
      };
      console.log(sum(10, 7));
      //函數返回多個值
      function genDer() {
        return { name: "張三", gender: "男", age: "46" };
      }
      console.table(genDer());
      // 高階函數
      function Abc() {
        return function (a) {
          return (a = 1);
        };
      }
      console.log(Abc());
    </script>
  </body>
</html>

4.歸并參數

歸并參數
將所有參數壓到一個數組中來簡化參數的獲取過程
reduce語法,進行數組多值計算

歸并參數用…arr來表示一個數組，再用reduce語法來進行數組多值計算

 <!-- 歸并參數，將所有參數壓到一個數組中來簡化參數的獲取過程 -->
    <script>
      let sum = function (...arr) {
        //   歸并參數用...arr來表示一個數組，再用reduce語法來進行數組多值計算
        return arr.reduce((p, c) => p + c);
      };
      console.log(sum(1, 10, 20, 55, 60));
    </script>

5.箭頭函數

箭頭函數
箭頭函數可以簡化匿名函數的結構

①普通匿名函數

這是一個普通正常的匿名函數，下面我們用箭頭函數來簡化它。

②箭頭函數

這個是箭頭函數，簡化了function，{}，return。使得匿名函數非常的簡潔，=>這個就是箭頭函數的關鍵之一。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>箭頭函數</title>
  </head>
  <body>
    <!-- 箭頭函數可以簡化匿名函數的結構 -->
    <script>
      //普通的匿名函數
      let name = function (a, b) {
        return a + b;
      };
      console.log(name(5, 5));
      //箭頭函數
      name = (a, b) => a * b;
      console.log(name(10, 5));
    </script>
  </body>
</html>

6.立刻執(zhí)行函數

立刻執(zhí)行函數
立刻執(zhí)行函數可以聲明調用二合一

①普通函數

大家可以看到普通函數要自己回調輸入值，下面我們來用立即執(zhí)行函數來試試看。

②立即執(zhí)行函數

大家可以看到立即執(zhí)行函數可以聲明調用二合一，用兩個（）（）來表示把函數給裝進去。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>立刻執(zhí)行函數</title>
  </head>
  <body>
    <script>
      //   普通函數
      //   function name(a, b) {
      //     return a + b;
      //   }
      //   console.log(name(5, 10));
      //   立刻執(zhí)行函數()()
      (function name(a, b) {
        console.log(a * b);
      })(50, 50);
    </script>
  </body>
</html>

批改老師：

天蓬老師

批改狀態(tài)：合格

老師批語：

本博文版權歸博主所有，轉載請注明地址！如有侵權、違法，請聯(lián)系admin@php.cn舉報處理！

全部評論文明上網理性發(fā)言，請遵守新聞評論服務協(xié)議

0條評論

作者最新博文

JavaScript:時間對象，實例演示右下角廣告圖

2021-04-23 00:09:02

亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

javascript：引入方式/變量與常量聲明/函數與高階函數/歸并參數/箭頭函數的語法/立即執(zhí)行函數的語法

1.引入方式

①行內腳本

②內部腳本

③外部腳本

2.變量與常量聲明

①let聲明變量

代碼塊

②const聲明常量

代碼塊

3.函數與高階函數

①聲明函數

②匿名函數

③函數返回多個值

④高階函數

4.歸并參數

5.箭頭函數

①普通匿名函數

②箭頭函數

6.立刻執(zhí)行函數

①普通函數

②立即執(zhí)行函數