首頁 > 博客列表 > [JS基礎(chǔ)入門] 變量、常量及函數(shù)的語法與使用方式

博主信息

博文 10

粉絲 0

評(píng)論 0

訪問量 12216

專題推薦

更多>

相關(guān)推薦

熱門教程

更多>

相關(guān)教程

JavaScript的三種引用方式

行內(nèi)引用

行內(nèi)引用，直接與一個(gè)HTML元素的事件屬性綁定

<button onclick="document.querySelector('h1') .classList.toggle('active')">Click</button>

內(nèi)部引用

在head或body中，將js代碼寫到一對(duì) <scripu></scripu>標(biāo)簽中

<script>
    function togglecolor() {
      document.querySelector("h1").classList.toggle("active");
    }

外部引用
導(dǎo)入外部js腳本，實(shí)現(xiàn)了js代碼的共享，可以在多個(gè)html文件中使用
```
<script src="toggle.js">  </script>
```

語法和數(shù)據(jù)類型

本章內(nèi)容 變量與常量、函數(shù)與高階函數(shù)、函數(shù)的參數(shù)、歸并參數(shù)、箭頭函數(shù)與立即執(zhí)行函數(shù)。

1. 變量與常量

在應(yīng)用程序中，使用變量來作為值的符號(hào)名。變量的名字又叫做標(biāo)識(shí)符，其需要遵守一定的規(guī)則。
一個(gè) JavaScript 標(biāo)識(shí)符必須以字母、下劃線（_）或者美元符號(hào)（$）開頭；后續(xù)的字符也可以是數(shù)字（0-9）。因?yàn)?JavaScript 語言是區(qū)分大小寫的，所以字母可以是從“A”到“Z”的大寫字母和從“a”到“z”的小寫字母。

合法的標(biāo)識(shí)符示例：Number_hits，temp99，$credit 和 _name、

1.1 聲明變量

1.使用關(guān)鍵詞 var 。例如 var name = 42這個(gè)語法可以用來聲明局部變量和全局變量。

2.直接賦值：例如name = 42在函數(shù)外使用這種形式賦值，會(huì)產(chǎn)生一個(gè)全局變量。在嚴(yán)格模式下會(huì)產(chǎn)生錯(cuò)誤。因此你不應(yīng)該使用這種方式來聲明變量。

3.使用關(guān)鍵詞 let 。例如let name = 13這個(gè)語法可以用來聲明塊作用域的局部變量

1.2 變量求值

用 var 或 let 語句聲明的變量，如果沒有賦初始值，則其值為 undefined
變量：數(shù)據(jù)共享,重復(fù)使用
變量重復(fù)使用，就需要一個(gè)名稱來保存它

不賦初始值

let userName;
console.log(userName) // 打印結(jié)果為：undefined

第一次賦值
```
let userName="PHP用戶"
```

第二次賦值，更新，修改

userName ="第二次賦值"
console.log(userName)

1.3 變量的原始類型：

原始類型分為:數(shù)組number、字符串string、布爾型boolean、和兩種特殊類型NULL、undefined

數(shù)組（number）

數(shù)組就是以數(shù)字形式存在的值

let num=999;
console.log(typeof num); // 會(huì)返回 number類型

字符串（string）

字符串在一對(duì)“”中表示

let eamli="eamli@php.cn";
console.log(typeof eamli); // 會(huì)返回 string類型

布爾型（boolean）

布爾型只有兩個(gè)值, true真， false假

let isEmpty=true;
console.log(typeof isEmpty); // 會(huì)返回 boolean類型

NULl （空）

let obj = null;
console.log(obj, typeof null); // 會(huì)返回 NULL

undefined

創(chuàng)建了一個(gè)變量：只聲明不賦值，他就是undefined(未定義)

let num;
console.log( tupeof num); // 會(huì)返回 undefined

1.4 變量提升

JavaScript 變量的另一個(gè)不同尋常的地方是，你可以先使用變量稍后再聲明變量而不會(huì)引發(fā)異常。這一概念稱為變量提升。
JavaScript 變量感覺上是被“提升”或移到了函數(shù)或語句的最前面。但是，提升后的變量將返回 undefined 值。因此在使用或引用某個(gè)變量之后進(jìn)行聲明和初始化操作，這個(gè)被提升的變量仍將返回 undefined 值。

 console.log(x=== undefined);
 var x=1;

1.5 常量（const）

常量標(biāo)識(shí)符的命名規(guī)則和變量相同：常量通常都是用大寫字母，多個(gè)單詞之間使用下劃線_連接，或美元符號(hào)（$）開頭并可以包含有字母、數(shù)字或下劃線。

常量不可以通過重新賦值改變其值，也不可以在代碼運(yùn)行時(shí)重新聲明。所以聲明時(shí)必須賦值（初始化）

const GENDER = "female"; // 常量通常都是用大寫字母
console.log(GENDER);  // 在聲明時(shí)，首選常量，可以防止被誤改

2. 函數(shù)與高階函數(shù)

2.1 函數(shù)聲明

一個(gè)函數(shù)定義（也稱為函數(shù)聲明，或函數(shù)語句）由一系列的function關(guān)鍵字組成，依次為:

function :關(guān)鍵字 getName :函數(shù)名，函數(shù)名必須符合標(biāo)識(shí)符命名規(guī)范
() ：里面是參數(shù)列表,可以沒有參數(shù)，也可以有參數(shù)
{} ：-函數(shù)體- 寫在一對(duì)大括號(hào)里面{}，里面有多行代碼
一個(gè)函數(shù) 一定要有 返回值
例如，以下的代碼定義了一個(gè)簡(jiǎn)單的square函數(shù)：
```
function square(number) {
      return number*number;
    }
```
2.2 函數(shù)的調(diào)用

定義一個(gè)函數(shù)并不會(huì)自動(dòng)的執(zhí)行它。定義了函數(shù)僅僅是賦予函數(shù)以名稱并明確函數(shù)被調(diào)用時(shí)該做些什么。調(diào)用函數(shù)才會(huì)以給定的參數(shù)真正執(zhí)行這些動(dòng)作。例如，一旦你定義了函數(shù)square，你可以如下這樣調(diào)用它：

console.log(square(5)) // 得出的值為25

上述語句通過提供參數(shù) 5 來調(diào)用函數(shù)。函數(shù)執(zhí)行完它的語句會(huì)返回值25。

2.3 函數(shù)的提升

函數(shù)一定要處于調(diào)用它們的域中，但是函數(shù)的聲明可以被提升(出現(xiàn)在調(diào)用語句之后)，只有命名函數(shù)可以提升。
如下例：

console.log(square(5)); // 控制臺(tái)打印 結(jié)果：25
function square(a,b){
    return a*b
}  // 有名稱(square)的函數(shù)被稱為命名函數(shù)

函數(shù)域是指函數(shù)聲明時(shí)的所在的地方，或者函數(shù)在頂層被聲明時(shí)指整個(gè)程序

2.4 匿名函數(shù)

如果不希望函數(shù)提升，那就必須先聲明、再使用，用 匿名函數(shù)
所謂匿名函數(shù)，就是將函數(shù)名刪除（不添加函數(shù)名）
函數(shù)沒有名字，可以用變量或者常量來引用它

匿名函數(shù)
```
let num = function(a,b){
  reutrn a + b;
};
console.log(num(5,5));
```
匿名函數(shù)就是將一個(gè)函數(shù)的聲明作為值賦值給一個(gè)變量或常量
然后通過這個(gè)變量或常量來引用這個(gè)函數(shù)

2.5 函數(shù)的重寫

函數(shù)重寫，函數(shù)允許重寫

先聲明一個(gè)函數(shù)

function getName(name) {
      return "weLcome to:" + name;
    }

然后進(jìn)行函數(shù)重寫

function getName(name) {
      return "歡迎：" + name;
    }
console.log(getName("同學(xué)們"));

2.6 高階函數(shù)(回調(diào)函數(shù))

高階函數(shù) ：使用函數(shù)為參數(shù)，或者將函數(shù)做為返回值的函數(shù)

什么叫把函數(shù)作為參數(shù)？：就是把一個(gè)函數(shù)作為另一個(gè)函數(shù)的參數(shù)把它傳進(jìn)去就可以了

document.addEventListener("click", function () {
// function就是一個(gè)函數(shù)，這個(gè)函數(shù)出現(xiàn)在另外一個(gè)函數(shù)的參數(shù)位置上，因此它
// 就是一個(gè) *回調(diào)函數(shù)*
        alert("大家晚上好");
      });

3. 函數(shù)的參數(shù)

從ECMAScript 6開始，有兩個(gè)新的類型的參數(shù)：默認(rèn)參數(shù)，剩余參數(shù)

3.1 必選參數(shù)

在下面的例子中，調(diào)用函數(shù)時(shí)沒有實(shí)參傳遞給b，那么它的值就是undefined，于是計(jì)算a*b得到、函數(shù)返回的是 NaN

let num = function(a,b){
    return a * b
    }
console.log(num(5 ))// 得出結(jié)果NAN，因?yàn)闆]有給第二個(gè)參數(shù)傳參

由以上例子得出：sun 中的a,b 參數(shù)，少一個(gè)都不行，少一個(gè)最后的運(yùn)算結(jié)果就是NAN

3.2 默認(rèn)參數(shù)

在JavaScript中，函數(shù)參數(shù)的默認(rèn)值是undefined。然而，在某些情況下設(shè)置不同的默認(rèn)值是有用的。這時(shí)默認(rèn)參數(shù)可以提供幫助
使用默認(rèn)參數(shù)，在函數(shù)體的檢查就不再需要了?，F(xiàn)在，你可以在函數(shù)頭簡(jiǎn)單地把5設(shè)定為b的默認(rèn)值：

let num = function(a ,b=5){
    return a*b
}
console.log(sum(5)); 
// 得出值為15，等價(jià)于console.log(sum(5,10))
console.log(sum(5, 15));
//得出值為20 ，以最終用戶傳入的值為準(zhǔn)，如果沒有傳，則使用默認(rèn)值

3.3 剩余參數(shù)

剩余函數(shù)又叫歸并參數(shù)(…)，允許將不確定數(shù)量的參數(shù)整合為數(shù)組，可以將所有參數(shù)壓縮到一個(gè)數(shù)組中統(tǒng)一處理

我們將這個(gè)數(shù)組的每一個(gè)數(shù)與第一個(gè)參數(shù)相加。這個(gè)例子是使用了一個(gè)箭頭函數(shù)，這將在下一節(jié)介紹

let arr = function(...acc){
    return acc.reduce((a,b)=>a + b  )
}
console.log(arr(5,5,5,5,5,5)) // 等于5*6=30

4. 箭頭函數(shù)與立即執(zhí)行函數(shù)。

4.1 箭頭函數(shù)

箭頭函數(shù)表達(dá)式（也稱胖箭頭函數(shù)）相比函數(shù)表達(dá)式具有較短的語法并以詞法的方式綁定 this。箭頭函數(shù)總是匿名的。

匿名函數(shù) 可以用 箭頭函數(shù) 在簡(jiǎn)化它。
換句話說,就是 箭頭函數(shù) 是用來簡(jiǎn)化 匿名函數(shù) 的

1.首先箭頭函數(shù)是不需要寫 function 的

2.然后要在 ) 和 { 之間寫上一個(gè)胖箭頭 =>

let num = (a,b) => {
  return a+b
};
console.log(num(10,20)) // 控制臺(tái)打印結(jié)果:30

進(jìn)一步簡(jiǎn)化

如果箭頭函數(shù)的代碼體只有一行語句，可以刪除大括號(hào) {}

刪除{} return 就也不能要了,他是自帶return功能

let num = (a,b) => a+b;
console.log(num(10,10)) // 控制臺(tái)打印結(jié)果:20

如果只有一個(gè)參數(shù)，那么連參數(shù)列表的圓括號(hào) ()，也可以刪除
```
let num = a,b => a+b;
console.log(num(5,5);) // 控制臺(tái)打印結(jié)果:10
```
箭頭函數(shù)雖好，但是可不要濫用
如果函數(shù)中要使用到 this. 就不要使用箭頭函數(shù) ，箭頭函數(shù)不支持 this.
因此箭頭函數(shù)不能當(dāng)構(gòu)造器函數(shù)使用
箭頭函數(shù)中的this始終是和上下文綁定的(當(dāng)前執(zhí)行環(huán)境)，而構(gòu)造函數(shù)中的this 始終指向一個(gè)新的對(duì)象
其他環(huán)境下可放心使用

4.2 立即執(zhí)行函數(shù)(縮寫：IIFE)

立即執(zhí)行函數(shù)用兩個(gè) ()() 表示
一個(gè)普通的函數(shù) 有兩部組成

1.聲明
```
let num = function(a,b){
  return a+b;
};
```
2.調(diào)用
```
console.log(num(5,5))
```

立即執(zhí)行函數(shù) ()() ：聲明、調(diào)用二合一，聲明后直接執(zhí)行:

將函數(shù)聲明放到第一個(gè)()中，將參數(shù)放到第二個(gè)()中
因?yàn)槭橇⒓凑{(diào)用，所以不需要函數(shù)名

(function (a,b){
         console.log(a*b)
       })(10,20)

不積蛙步,無以至千里；不積小流,無以成江海

以上便是變量與常量、函數(shù)與高階函數(shù)、函數(shù)的參數(shù)、歸并參數(shù)、箭頭函數(shù)與立即執(zhí)行函數(shù) 的基本使用方式

批改老師：

天蓬老師

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

老師批語：

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

全部評(píng)論文明上網(wǎng)理性發(fā)言，請(qǐng)遵守新聞評(píng)論服務(wù)協(xié)議

0條評(píng)論

作者最新博文

markdown與Emmet插件的使用方式

2021-03-20 00:42:10

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