『JavaScript』JS基本認識

本篇博客介紹一些JavaScript的一些簡單語法。

基本語法


JavaScript和C語言一樣,註釋有兩種

  • /* */多行註釋,注意不可嵌套
  • //單行註釋,只對//後面的有效。

JS中嚴格區分大小寫
JS中每一條語句都以分號結尾。如果不寫分號,瀏覽器會自動添加,但是會消耗一些系統資源。有的時候瀏覽器會加錯分號,所以在開發中分號必須寫。
JS中會忽略多個空格和換行,所以我們可以利用空格和換行對代碼進行格式化。

字面量和變量


  • 字面量都是一些不可改變的值。如:1、2、3…;字面量都是可以直接使用,但是我們一般都不會直接使用字面量。
  • 變量可以用來保存字面量,而且變量的值是可以任意改變的,變量更加方便我們使用,所以在開發中都是通過變量去保存一個字面量,而很少使用字面量。
  • 在JS中用var關鍵字來聲明一個變量
    在這裏插入圖片描述
    在這裏插入圖片描述

標識符


JS中所有的可以由我們自主命名的都可以稱爲是標識符。如:變量名、函數名、屬性名。命名一個標識符時需要遵守如下規則

  • 標識符中可以包含字母、數字、_和$
  • 標識符不能以數字開頭
  • 標識符不能是JS中的關鍵字或保留字

JS底層保存標識符時採用的是Unicode字符集,所以理論上講,所有的Unicode字符集中的字符都可以作爲標識符。

數據類型


  • JS中一共有六種數據類型,分別爲:String(字符串)Number(數值)Boolean(布爾值)Null(空值)Undefined(未定義)Object(對象)
  • 前五種屬於基本數據類型Object屬於引用數據類型
  • 可以使用運算符typeof來檢查一個變量的類型
    語法typeof 變量;

String類型


  • JS中,字符串需要使用雙引號引起來,使用單引號也可以
  • 引號不能嵌套。雙引號中不能放雙引號,可以放單引號;單引號中不能放單引號,可以放雙引號;如果想要在單引號或雙引號中放單引號或雙引號,需要使用轉義字符進行轉義
    在這裏插入圖片描述
    在這裏插入圖片描述
  • 我們使用typeof來看一下String類型
    在這裏插入圖片描述
    在這裏插入圖片描述

Number類型


  • JS中所有的數值都是Number類型,包括整數和浮點數;
    在這裏插入圖片描述
    在這裏插入圖片描述
  • JS中可以表示的數字的最大值Number.MAX_VALUE,如果使用Number表示的數字超過了最大值,會返回一個Infinity表示正無窮,Infinity是一個字面量Number.MIN_VALUE表示大於0的最小值即最小的整數
    在這裏插入圖片描述
    在這裏插入圖片描述
  • NaN也是一個特殊的數字,Not a Number;NaN是同樣是字面值常量,表示不是一個數字;
    在這裏插入圖片描述
    在這裏插入圖片描述
  • JS中整數的運算可以保證精確。但是浮點數的運算可能得到不精確的結果,所以不要使用JS進行對精確度要求比較高的運算。
    在這裏插入圖片描述
    在這裏插入圖片描述

Boolean類型


  • 布爾值只有兩個true(真)false(假)
    在這裏插入圖片描述
    在這裏插入圖片描述
  • 主要用來做邏輯判斷

Null類型


  • Null類型的值只有一個,就是null。null這個值專門用來表示爲空的對象使用typeof檢查null值,會返回object
    在這裏插入圖片描述
    在這裏插入圖片描述

Undefined類型


  • Undefined類型的值也只有一個,就是undefined。當聲明一個變量,但是並不給變量賦值時,它的值就是undefined
    在這裏插入圖片描述
    在這裏插入圖片描述

強制類型轉換


強制類型轉換就是將一個數據類型強制轉換爲其他的數據類型

轉爲String類型


方法一調用被轉換數據類型的toString()方法,該方法不會影響到原變量,它會將轉換的結果返回。

  • 下面看一個例子
    在這裏插入圖片描述
    在這裏插入圖片描述
  • 注意null和undefined這兩個值沒有toString()方法,如果調用會報錯。
    在這裏插入圖片描述
    在這裏插入圖片描述
    在這裏插入圖片描述
    在這裏插入圖片描述

方式二調用String()方法,並將被轉化的數據作爲參數傳入

  • 使用String()方法進行強制類型轉換對於Number和Boolean類型實際上調用的是toString()方法。但是對於Null和Undefined類型會將null或undefined轉爲"null"或"undefined"
    在這裏插入圖片描述
    在這裏插入圖片描述

轉爲Number類型


方式一使用Number()方法

  • String類型轉Number類型。如果是純數字的字符串,則直接將其轉換爲數字;如果字符串中有非數字的內容,則轉換爲NaN;如果字符串是子串或者是一個全部是空格的字符,則轉爲0
    在這裏插入圖片描述
    在這裏插入圖片描述
  • Boolean類型轉爲Number類型true轉爲1false轉爲0
    在這裏插入圖片描述
    在這裏插入圖片描述
  • Null類型轉爲Number類型轉數字爲0
    在這裏插入圖片描述
    在這裏插入圖片描述
  • Undefined類型轉Number類型undefined轉數字爲NaN
    在這裏插入圖片描述
    在這裏插入圖片描述

方式二這種方式專門針對字符串

  • parseInt()方法把一個字符串轉換爲一個整數。會將字符串中有效的整數內容取出來,然後轉換爲Number
    在這裏插入圖片描述
    在這裏插入圖片描述
  • parseFloat()方法把一個字符串轉換爲浮點數
    在這裏插入圖片描述
    在這裏插入圖片描述
    該方法可以傳第二個參數指定轉換爲幾進制的數字
    在這裏插入圖片描述
    在這裏插入圖片描述
  • 如果對非String類型使用parseInt()和parseFloat()方法,它會先將其轉換爲String,然後再操作

轉換爲Boolean類型


使用Boolean()方法

  • Number類型轉Boolean類型除了0和NaN,其餘的都是true
    在這裏插入圖片描述
    在這裏插入圖片描述
  • String類型轉Boolean類型除了空串,其餘的都是true
    在這裏插入圖片描述
    在這裏插入圖片描述
  • Null類型和Undefined類型都會轉爲falseObject類型會轉爲true
    在這裏插入圖片描述
    在這裏插入圖片描述

運算符


通過運算符可以對一個或多個值進行運算。如:typeof就是運算符,可以獲得一個值的類型。將該值的類型以字符串的形式返回。

算數運算符


常見的算數運算符有:+ - * / %,這五種

  • 對非Number類型的值進行運算的時候,會先將其轉換爲Number類型
    在這裏插入圖片描述
    在這裏插入圖片描述
  • 任何值和NaN進行運算,結果都是NaN
    在這裏插入圖片描述
    在這裏插入圖片描述
  • 注意,當+的兩個操作數中有字符串時,執行的是字符串拼接操作
    在這裏插入圖片描述
    在這裏插入圖片描述
    我們可以利用這一特性對一個其他類型的數據加上一個空串來將其轉換爲String類型
    在這裏插入圖片描述
    在這裏插入圖片描述
  • /是算數除,不是整除
    在這裏插入圖片描述
    在這裏插入圖片描述
  • 任何類型的值作- * /運算時都會自動先轉換爲Number類型,可以利用這一特性,將其他類型的值轉換爲Number類型
    在這裏插入圖片描述
    在這裏插入圖片描述

一元運算符


只需要一個操作數的運算符。如:+ - ++ --等。

  • 正號(+),將一個數轉換爲正數,如果操作數是非Number類型,先將其轉換爲Number類型可以利用這一特性將其他類型的值轉爲Number類型
    在這裏插入圖片描述
    在這裏插入圖片描述
  • 負號(-)將一個數轉換爲其相反數
  • 自增運算符(++)和自減運算符(–)和C語言的用法一樣,含義也相同

邏輯運算符


非(!),取反操作,如果操作數爲非Boolean類型會先將其轉換爲Boolean類型,然後再運算。

  • 我們可以藉助這一特點,來將其他類型的值轉換爲Boolean類型
    在這裏插入圖片描述
    在這裏插入圖片描述

非布爾值的與或
對於非布爾值,進行與或運算。會先將其轉換爲布爾值,然後再進行運算並且返回原值

  • 與運算(&&)。如果第一個值爲true,則返回第二個值;如果第一個值爲false,則直接返回第一個值
    在這裏插入圖片描述
    在這裏插入圖片描述
  • 或運算(||)。如果第一個值爲true,直接返回第一個值;如果第一個值爲false,則返回第二個值
    在這裏插入圖片描述
    在這裏插入圖片描述

賦值運算符


  • 可以將符號右側的值賦值給符號左側的變量
  • 如:== += -= *= /= %=

關係運算符


通過關係運算符可以比較兩個值之間的大小關係。如果關係成立,返回true關係不成立返回false。常見的關係運算符有:> >= < <=

  • 非Number類型的情況。對於非Number類型的比較,比較前會先將其轉換爲Number類型。
  • 任何類型的任何值和NaN做任何比較結果都是false
    在這裏插入圖片描述
    在這裏插入圖片描述
  • 如果關係運算符的兩個操作數都爲String類型時,不會將其轉換爲Number類型進行比較,而是進行String類型的字典序比較
    在這裏插入圖片描述
    在這裏插入圖片描述

相等運算符


相等運算符用來比較兩個值是否相等。不等運算符(!=)用來判斷兩個值是否不相等,會對變量進行自動類型轉換

  • 當==的兩個操作數類型不同的時候,會轉爲相同的類型,再進行比較。大部分情況下都是轉爲Number類。
  • undefined衍生自null,這兩個值做相等判斷的時候,會返回true
    在這裏插入圖片描述
    在這裏插入圖片描述
  • NaN不和任何值相等,包括它自身
    在這裏插入圖片描述
    在這裏插入圖片描述
  • 判斷一個值是不是NaN,可以使用方法isNaN()
    在這裏插入圖片描述
    在這裏插入圖片描述

全等運算符(==)用來比較兩個值是否全等,不會做隱式類型轉換。類型不同直接返回false不全等運算符(!==),判斷兩個值是否不全等,不會做隱式類型轉換。類型不同直接返回true

  • 我們來看一個代碼演示
    在這裏插入圖片描述
    在這裏插入圖片描述

條件運算符


  • 條件運算符也就是三目運算符,和C語言中的含義一樣,使用也相同,? :

流程控制語句


流程控制語句分爲三類

  • 條件判斷語句
  • 條件分支語句
  • 循環語句

在看這三種語句之前,我們先來了解一下JS中的代碼塊的含義。

  • JS中可以使用{}來爲語句進行分組,同一個{}中的語句稱爲一組語句;
  • 注意,JS中的代碼塊只具有分組的作用沒有其他作用不會形成一個局部域。代碼塊內定義的變量,在代碼塊外可以訪問到。
    在這裏插入圖片描述
    在這裏插入圖片描述

條件判斷語句


我們直接來一個問題來理解一下條件判斷語句

  • 從鍵盤上輸入一個數,判斷這個數是奇數還是偶數
    我們可以使用prompt()方法獲取鍵盤上輸入的內容,以字符串的方式返回
    在這裏插入圖片描述
    在這裏插入圖片描述

條件分支語句


同樣的,我們來看一個問題幫助理解

  • 從鍵盤上輸入1~7,根據輸入輸出星期幾
    在這裏插入圖片描述
    在這裏插入圖片描述

循環控制語句


我們直接來看一個問題

  • 判斷1~10中每個數是偶數還是奇數打印出所有的結果
    在這裏插入圖片描述
    在這裏插入圖片描述

break和continue

使用break語句可以結束循環;使用continue語句可以結束本次循環,立即進入下一次循環。和C語言中的用法相同。

  • JS中可以爲循環語句創建一個label,來標識當前循環
  • 使用break和continue時,後可以跟label,來break或continue指定循環

我們來看一下效果
在這裏插入圖片描述
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章