javascript入門教程 (2)

 

 

這篇我就不鋪墊和廢話了，咱們開始正式進入JS核心語法的學習…

首先咱們從基礎入手...

一. 基礎語法

1.1 區分大小寫

JS語法規定變量名是區分大小寫的

好比： 變量名 learninpro 和變量名 learnInPro 是兩個不一樣的變量。

 

1.2 標識符

JS中標識符指的是變量、函數、屬性等的名稱。

標識符的規則：

1. 第一個字符必須爲字母(a-zA-Z)，下劃線(_) 或 美圓符($)。

1. 其餘字符能夠爲字母(a-zA-Z)、下劃線(_)、美圓符($)或數字(0-9)。

1. 約定俗成通常標識符爲駝峯寫法。好比聲明一個變量 var learnInPro = 'xxx';

2. 不能把關鍵字，保留字，true，false，null做爲標識符。

關鍵字是一組在ECMAScript中有特殊用途的單詞，好比if、this、new 等等一大堆。

保留字跟關鍵字差很少，指的是ECMAScript以爲未來有可能成爲關鍵字的詞，這主要是爲了若是之後須要新增關鍵字的時候，將保留字變成關鍵字就不會形成以前開發的頁面和程序有報錯的問題。

對於關鍵字和保留字，個人意見是你們能夠簡單看下都有哪些，但其實不須要知道的很清楚，在命名標識符的時候，只要不去使用那些簡單單詞就不會命中他們。即便真的命中了也會有報錯，改個名字就行了…

 

1.3 js中的註釋

// 單行註釋

/*
  這是一個
  多行註釋
*/

/**
 * 也有人喜歡寫成這樣
 * 多是由於看的更清楚吧
 * 想用哪一種 看本身的喜愛
 */

 

1.4 變量

 

 

1.4.1 變量聲明

JS中使用： 關鍵字var + 空格 + 標識符 的方式去聲明一個變量，好比： var abc;

另外聲明的變量會有個默認值叫作undefined；

var abc;

console.log(abc);   // undefined

 

 

1.4.2 變量賦值

var abc = 'LearnInPro';

這句話的意思是聲明瞭一個變量abc，並把LearnInPro這個字符串賦給變量abc

var abc;

console.log(abc);   // undefined

abc = 'LearnInPro';

console.log(abc);   // LearnInPro

var a = 'LearnInPro';
// 或
var b;
b = 'LearnInPro';
// 這兩種都是推薦寫法，先聲明再賦值

c = 'LearnInPro';    
// 若是強行不聲明變量就賦值，也不會報錯，但強烈不推薦，不管怎樣必定要先聲明

 

 

1.4.3 局部變量 與 全局變量

function test(){
    var a = 'LearnInPro';
}

test();

console.log(a); // 報錯

這裏會報錯，函數會建立一個局部做用域，裏面的變量只能在這個局部做用域或者他的子做用域裏訪問。

function test() {
    var a = 'LearnInPro'
    function inner () {
        console.log(a);
    }
    inner();
}

test();

在這個例子中inner函數的做用域在test做用域的內部，因此能夠訪問到test做用域中的變量a

var a;

function test() {
    var a;
    function inner() {
        // a = 'LearnInPro';
        var a = 'LearnInPro';
    }
    inner();
    console.log(a); 
    // 若是inner函數中的聲明瞭a變量，這裏會打印undefined
    // 若是未聲明（註釋掉inner中的第二行，打開第一行），這裏會打印LearnInPro
}

test();

console.log(a); // undefined

變量賦值首先會尋找當前做用域下有沒有這個變量。若是沒有則向外層做用域尋找，直到找到最近的做用域裏聲明的變量並賦值給他。

 

1.5 數據類型

6種原始數據類型 + 1種複雜數據類型

 

原始數據類型：

• Undefined類型
• Null類型
• Boolean類型 好比true false
• Number類型 好比12345
• String類型 好比"xxx"
  • Symbol類型（es6） Symbol()

複雜數據類型

• Object類型

在開始將具體的數據類型以前，咱們先看下如何去判斷一個變量的數據類型呢？

這裏咱們須要用到typeof操做符來判斷

好比

var a = 1; 
　　console.log(typeof a) // "number"

    var a = "1";
　　console.log(typeof a) // "string"

 

 

1.5.1 Undefined類型

Undefined類型只有一個值 就是特殊的 undefined。

undefined在英文裏是未闡明的、未限定的意思。在使用var聲明變量，但未對變量進行賦值時，這個變量的值就是 undefined。

var a;
console.log(a === undefined);    // true
console.log(typeof a)  // "undefined"

 

 

1.5.2 Null類型

Null類型也是隻有一個值 就是null。

null值表示一個空的對象指針,通常一個變量若是將來咱們是打算讓他去存儲一個對象數據的話，那麼默承認以將它賦值成null。

var a = null;
console.log(typeof a)  // "Object"

用typeof來判斷數據類型的時候會發現，a的數據類型居然是Object。因爲null是空對象，因此咱們能夠理解爲空對象也是對象，因此typeof會把他判斷成Object。

另外

console.log(null == undefined);  // true
console.log(null === undefined);  // false

在JS中判斷兩個變量是否相等有兩組操做符。

==、!= —— 相等和不相等操做符，在判斷時，若是兩邊變量的數據類型不一樣，則會嘗試進行類型轉換後再去比較。

===、!== —— 全等和不全等操做符，在判斷時，直接比較。

好比：

console.log(1 == '1')  // true 
console.log(1 === '1')  // false

因爲字符串1和數字1是不一樣的數據類型 因此不全等 但在進行完類型轉換後是相等的。

至於相等操做符進行的類型轉換規則，咱們在後面單獨介紹，這裏咱們只要知道，=== 是必須數據類型和值都須要同樣纔會相等，而 == 則是數據類型不同也有可能相等。這裏咱們先簡單瞭解下就好，後面咱們會具體展開來講這個知識點。

因此，這裏咱們會發現null和undefined相等但不全等。這是由於在js底層實現上null是派生自undefined的，因此通過類型轉換後他們是相等的，這個咱們不須要過多糾結，記住就好。

 

 

1.5.3 Boolean類型

這個類型有兩個值: true 和 false

可是其餘任何數據類型的值均可以使用Boolean()函數將其轉換成Boolean類型的true或者false。

接下來咱們看下實際的轉換規則

Boolean	true	false
String	非空字符串	空字符串(「」)
Number	非零數字	0 和 NaN
Object	任何對象	—
Null	—	null
Undefined	—	Undefined

 

 

1.5.4 Number類型

數字類型，值爲全部的數字和一個特殊值 NaN(非數值) 這個後面咱們詳細再說他

咱們如今看下數字有哪些表示方式。

var a = 12;        // 整數
console.log('a:', a)  // 12

var b = 070;    // 8進制
console.log('b:', b);     // 56

var c = 0x10;     // 16進制
console.log('c:', c);     // 16

關於8和16進制知道有這麼回事兒就行 通常用不到也不推薦在代碼裏用

var d = 1.1;    // 小數，又叫浮點數
console.log('d:', d);    // 1.1

var e = 1.1e2;     // 科學計數法
console.log('e:', e);    // 110

範圍
在js中數字取值的範圍是 [-1.7976xxxxe308 ~ -5e-324, 0, 5e-324 ~ 1.7976xxxxe308]

這個也是，你們瞭解一下就行了，通常用不上。

可使用Number()函數將其餘類型的值轉換成數字類型

 

Number()的轉換規則

Boolean類型中 true -> 1， false -> 0
Null類型中 null -> 0
Undefined類型中 undefined -> NaN
String字符串類型中

• 空字符串"" -> 0
• 若是包含的是純數字，則轉化成數字 好比'1.1' -> 1.1, '001.1' -> 1.1
• 若是爲有效16進制格式則轉化爲10進制輸出 如 '0xf' -> 15
• 其餘不符合上述格式的轉化爲NaN 如 'asdf' -> NaN, 'a1.1' -> NaN, '1.1a' -> NaN, 'a0xf' -> NaN

對於Object來講有些麻煩，咱們這裏先簡單提早了解下Object對象類型，簡單來講他是一組數據和功能的集合

好比咱們簡單定義一個object：

var obj = {a: 1, b: 'aaa'};

console.log(obj.a, obj.b);  // 1 'aaa'

經過 obj.a、obj.b 來訪問他包含的值。這裏我們先簡單瞭解下後面咱們會詳細講解。

那麼在Number()來轉化對象的時候會先嚐試使用對象的 valueOf 方法沒有的話會用 toString 方法，並將其返回值用Number()轉化。

咱們來看個例子:

var obj = {
        valueOf: function(){
            return 1;
        }
    }

    console.log(Number(obj));   // 1

    var obj2 = {
        valueOf: function(){
            //return 'asdf';
        }    // 全部函數都會有返回值 不寫return則默認返回undefined 而Number(undefined)會獲得NaN
    }

    console.log(Number(obj2));  // NaN

咱們這裏注意一個問題，就是在Number數據類型中 NaN 和 NaN 是不相等的。

因此

console.log(NaN == NaN) // false

那麼咱們怎麼去判斷一個變量時NaN呢？咱們須要使用isNaN這個方法

console.log(isNaN(NaN)) // true

最後一點關於Number類型的知識是

數字運算

1 + 2 * 3 = 7 先乘除後加減    
    (1 + 2) * 3 = 9
    4 % 5 -> 4 取餘操做
    更多的一些操做須要藉助Math對象裏的方法 好比
    Math.power(2, 3) -> 2的3次方等
    之後會幫你們總結

最後在Number類型中，有個比較重要的點

浮點數運算的精度問題

咱們來看一個例子

console.log(0.1 + 0.2)  // 結果是0.30000000000000004，而不是3

其實對於浮點數的四則運算，幾乎全部的編程語言都會有相似精度偏差的問題。首先計算機須要先把0.1和0.2轉化爲二進制，這個時候計算機發現0.1和0.2轉化爲的二進制是無限循環的。因爲JS採用的是IEEE754雙精度浮點數二進制儲存格式，最多能夠支持52位。通過截取轉化成10進制後，結果就變成了0.30000000000000004。

那麼如何解決呢？

方法也很簡單，就是將浮點數轉化成整數計算，舉個例子：

對於0.1 + 0.02 咱們須要轉化成 ( 10 + 2 ) / 1e2

對於0.1 * 0.02 咱們則轉化成 1 * 2 / 1e3

 

 

1.5.5 String類型

String類型比較簡單就是用單引號或者雙引號包裹起來的一種數據類型，俗稱字符串。

var a = 'learnInPro';
    console.log(a);

第一個知識點 字符串拼接使用+，好比：

var a = 'learn';
    var b = 'In';
    var c = a + b + 'Pro';
    console.log(c); // learnInPro

另外咱們知道在Number中 + 是一種運算符 因此這裏不要搞混

咱們舉幾個例子：

console.log(1 + 2)  // 3
    console.log('1' + '2')  // '12'
    console.log(1 + '2')    // '12'

在字符串中包含一些特殊的字符叫作轉義字符，他們在字符串中有一些特殊用途他們都是以’\’開頭
咱們來看個demo：

console.log('learn\nInPro');    
/** * learn * InPro */

console.log('learn\'InPro');    // learn'InPro
console.log("learn\"InPro");    // learn"InPro
console.log("learn\\InPro");    // learn\InPro

String類型能夠經過String()方法將其餘類型轉化成String類型，這個規則比較簡單，咱們來看下demo：

console.log( String(true) );    // "true"
    console.log( String(10) );      // "10"
    console.log( String(null) );    // "null"
    console.log( String(undefined) );   // "undefined"
    console.log( String({a: 1}) );    // "[object Object]"

 

 

1.5.6 Symbol類型

Symbol類型是ES6引入了一種新的原始數據類型，表示一個獨一無二的值。

var s = Symbol();

console.log(typeof s);  // "symbol"

Symbol類型表示一個獨一無二的值，兩個Symbol是不相等的。

var s1 = Symbol();
var s2 = Symbol();

console.log(s1 === s2) // false

因爲每個 Symbol 值都是不相等的，用於對象的屬性名，就能保證不會出現同名的屬性。能防止某一個屬性被不當心改寫或覆蓋。

var s = Symbol();

var obj = {
  [s]: 'learnInPro!'
};

console.log(obj[s]);    // learnInPro!

Symbol類型是ES6新引入的類型，這裏咱們簡單瞭解下就好，在之後有機會講ES6的時候再深刻講解。

 

 

這篇文章裏講解了JS的一些基本語法，還有6種原始數據類型，在下一章裏面咱們再繼續把另一種複雜數據類型Object和一些相關知識點講完。

額…另外就是若是你在學習前端的過程當中有任何問題想要諮詢歡迎關注LearnInPro的公衆號，在上面向我提問。👋

​