新手學前端之基礎知識（一）

阿新 • • 發佈：2019-01-02

JavaScript

JavaScript三部分組成：

ECMAScript(定義了JS的基本語法,命名規範,操作語句,變數,資料型別等最基礎最核心的知識)
DOM(document object model 文件物件模型) 提供了JS操作頁面上元素的常用屬性和方法
BOM(browser object model 瀏覽器物件模型) 提供了JS操作瀏覽器的常用屬性和方法

1. 命名規範

1.嚴格區分大小寫

        var test = "你好";
          console.log(test);
          console.log(Test);
          //Uncaught ReferenceError: Test is not defined

2.使用駝峰命名法

第一個單詞的首字母小寫,其餘每一個有意義的單詞的首字母都要大寫
只能使用數字、字母、下劃線命名
數字不能作為名字第一位
例如：

studentInfo1
student_info
1student_info (NO)

3.不能使用關鍵字和保留字

關鍵字就是在JS中有特殊含義的;保留字是未來可能會成為關鍵字的;
在真實專案中我們一些約定俗稱的規範
命名不要用拼音,不要縮減的太短,因為這兩類名字別人是很難看懂的
對於複雜的名字建議使用多個英文單詞拼接的方式留

字首

get/query 獲取
set/insert/add 增加插入
update/replace 修改替換
remove/del 刪除

字尾

Info 資訊
Import 重要

2、變數

1.變數:一個可變的量,它其實就是一個名字,它的作用是用來儲存值的,但是一個變數儲存的值可以發生改變.

2.常量:就是一個具體的固定的值,不會改變的 13、”你好”

       var 名字=值;//->JS中的定義變數並且賦值
       var num = 13;
       num = 12;
       console.log(num);

JS中的變數沒有什麼實際的意義,只是用來儲存值和代表值的,例如:num=12就是在給num這個變數儲存值,console.log(num)就是把num代表的值12在控制檯輸出

       var num1 = 12;
       var num2 = num1;
       //->把num1這個變數儲存的值賦值給num2這個變數，
       //"="在JS中的作用是賦值，“=”左邊是變數名字，
       //“=”右邊是給這個變數賦的值

JS中的變數有一個特點：它是鬆散型別的
因為只需要通過var來定義變數,變數儲存的值可以是任何的資料型別的

       var num = 12;
       num = "nihao";
       num = true;
       num = null;
       num = {name: "肖廣華", age: 49};
       num = [12, 23, 34];
       num = /^[+-]?(\d|([1-9]\d+))(\.\d+)?%/;
       num = function () {
           };
    [後臺]
    int num=12;
    String num="nihao";

3.資料型別

1.基本資料型別/值型別

number(數字)、string(字串)、boolean(布林 true/false)、null、undefined

2.引用資料型別

object(物件):{}物件、[]陣列、/^$/正則 date function(函式)

3.JS中資料型別檢測的方式

typeof:用來檢測資料型別的運算子

語法: typeof value;
返回值:首先是一個字串,其次字串中的內容才包含了對應的資料型別資訊
“number”、”string”、”boolean”、”undefined”、”object”、”function”
**侷限性:**typeof null; 是”object”, 但是null不是物件資料型別的

不能具體檢測出是陣列還是正則還是物件,因為typeof檢測物件資料型別那幾個細分的值,返回的結果都是“object

例如：

       console.log(typeof 12);//->"number"
       var str = "你好呀";
       console.log(typeof str);//->"string"

總結：

instanceof:用來檢測某一個例項是否屬於這個類

constructor:利用原型構造器的方式檢測資料型別

Object.prototype.toString.call( ):借用內建類Object原型上的toString方法實現資料型別檢測

騰訊面試題:

    console.log(typeof typeof typeof [12, 23]); //->"string"
    typeof [12, 23] ->"object"
    typeof "object" ->"string"
    typeof "string" ->"string"

由於typeof返回的結果首先是一個字串,所以當連續出現兩個及以上typeof同時檢測的時候,最後的結果都是”string”

4.JS中等號的三種情況:

“=”賦值
“==”是判斷左右兩邊的值是否相等

console.log(12 == "12");//->true

在”==”等於號進行比較的時候,我們發現左右兩邊的資料型別是不一樣的,瀏覽器會預設的把它們先轉換為一樣的(在這裡是把”12”通過Number(“12”)先強制轉換為了數字12),然後在比較值是否相等

“===”是判斷左右兩邊的值是否絕對相等

console.log(12 === "12");//->false

”===”絕對相等,不僅僅值要一樣,而且資料型別也要一樣,不能像”==”那樣,不一樣資料型別會轉換,“===”是不會轉換的

5.number：正數、負數、零、小數、NaN

NaN: not a number 不是一個數,但是屬於number資料型別的
typeof NaN : "number"
NaN==NaN : false
因為我們也不知道每一邊的NaN到底是啥，NaN和任何的值都不相等

1.嚴格的轉換:Number()

           console.log(Number(true));//->1
           console.log(Number(false));//->0
           console.log(Number(null));//->0
           console.log(Number(""));//->0
           console.log(Number(undefined));//->NaN

把undefined是不能轉換為有效數字的

console.log(Number("12"));//->12
console.log(Number("12px"));//->NaN

如果是把一個字串轉換為數字,只有字串中的每一個字元都是有效的數字字元,才可以正常轉換,相反只要有一個不是有效的數字字元,最後的結果就是NaN

2.非嚴格轉換:parseInt / parseFloat

從左到右一次查詢,把有效的數字字元轉換為數字,但是一但遇到一個非有效的數字字元,立即停止查詢(不管後面是否還有都不在查找了)

    console.log(parseInt("12px"));   ->12
    console.log(parseInt("12px13"));  ->12
    console.log(parseInt("px13"));    ->NaN
    console.log(parseInt("13.5px"));  ->13
    console.log(parseFloat("13.5px"));    ->13.5

3.數字的常用方法toFixed(n):保留小數點後面n位

var num = 3.141592654;
console.log(num.toFixed(2));//->3.14

4、檢測是否為有效的數字

isNaN( )用來檢測是否為有效數字的方法,如果當前的值是有效數字返回的結果是false,如果不是有效>數字,返回的結果是true

       console.log(isNaN(12));//->false
       console.log(isNaN("nihao"));//->true
       console.log(isNaN("12"));//->false

說明”12”也是有效數字
如果檢測的值不是number型別的,瀏覽器會預設先通過Number把它強制轉換為number型別,然後在檢測是否為有效的數字
console.log(isNaN("12px"));//->true

NaN和

騰訊面試題：

    var num = parseFloat("px12.5");//->num=NaN
    if (num == 12.5) {//->NaN==12.5
        console.log(12.5);
    } else if (num == NaN) {//->NaN==NaN
        console.log(NaN);
    } else if (typeof num === "number") {//typeof NaN="number" ->"number"==="number"
        console.log("number");
    } else {
        console.log("no");
    }

6.boolean

1、boolean:true/false

! 先把值轉換為布林型別,然後在取反
!! 把值轉換為布林型別 ==>> Boolean()

2、把其他的資料型別轉換為布林型別

只有五個值(“”、0、NaN、null、undefined)轉換為布林型別會變為false,其餘的都是true

3、都什麼情況下會把其他的值轉換為布林型別?

!、!!、Boolean
if(1){}

如果條件判斷中只有一個單獨的值,那它的任意是：首先把這個值轉換為布林型別,然後看是真還是假,是真的話條件成立,反之條件不成立.

4、字串:在JS中用””包起來的都是字串

var str = "welcome to c~~";

一個字串中的字元是以數字作為索引,索引從0開始,索引0代表第一個字元

console.log(str[0]);
    console.log(str[1]);
    console.log(str.length);//->獲取字串一共有多少個字元 21
    console.log(str[str.length - 1]);//->獲取最後一個字元