JavaScript 基礎（1）- 基本概念

JavaScript簡介

JavaScript組成

JavaScript由三部分組成：

1. ECMAScript：JavaScript的核心，簡寫：es，描述了語言的基本語法（var、for、if、array等）和數據類型（number、string、boolean、undefined、null、object、Symbol）
2. DOM：是 HTML 的應用程序接口（API），DOM 將把整個頁面規劃成由節點層級構成的文檔。用 DOM API 能夠輕鬆地操做HTML元素（getElementById、childNodes、appendChild、 innerHTML）。
3. BOM：對瀏覽器窗口進行訪問和操做，例如彈出新的瀏覽器窗口，移動、改變和關閉瀏覽器窗口，提供詳細的網絡瀏覽器信息（navigator object），詳細的頁面信息（location object），詳細的用戶屏幕分辨率的信息（screen object），對cookies的支持等等。

JavaScript註釋

JavaScript註釋由兩部分組成：

1. 單行註釋：

// 單行註釋
複製代碼

2. 單行註釋：

/* 多行註釋 不能嵌套使用 */
複製代碼

JavaScript引入方式

script標籤能夠有多個，按順序執行

1. 外部引入 .js 文件：

<script src='other.js'> // 要注意src指向的文件 路徑
    // 若是連接了外部js文件，script標籤內的代碼就不執行了
    // 此處不能添加js代碼
</script> 
複製代碼

2. 內部添加js代碼：

<script>
    console.log('hello world'); // 控制檯輸出
    alert('hello world'); // 提示框輸出
</script> 
複製代碼

JavaScript輸出方式

1. 頁面輸出：

document.write('hello world')；
複製代碼

2. 控制檯輸出：

console.log('hello world')；
複製代碼

3. 提示框輸出：

alert('hello world')；
複製代碼

JavaScript標識符

做用： 用來給變量、函數等命名

規則:

• 由字母、數字、下劃線、$組成

• 不能以數字開頭

• 不能使JavaScript中的關鍵字和保留字

  保留字：

  

  關鍵字：

  

• 區分大小寫

• 遵循駝峯命名原則

• 見名知意

JavaScript數據類型

基本數據類型

• 數字（Number）

  1. 浮點數和整數
  2. 特殊的數字類型
     • NaN: 表示不是數字，當運算操做符錯誤的時候，通常會獲得NaN
     • Infinity: 表示無窮大或無窮小，數字除以0獲得Infinity

• 字符串（String）

  特色：

  1. 單引號 或者 雙引號 引發來的 是字符串
  2. 兩個字符串相加不是運算，而已字符串的拼接
  3. 字符串加數字，先將數字轉化爲字符串，再進行拼接

• 布爾值（Boolean）

  包括 true 和 false，經常使用在判斷語句

  falsy值：

  1. 數字 0
  2. NaN
  3. ' '（空字符串）
  4. false
  5. undefined
  6. null

  console.log(new Boolean());         // false
  console.log(new Boolean(0));        // false
  console.log(new Boolean(null));     // false
  console.log(new Boolean(""));       // false
  console.log(new Boolean(false));    // false
  console.log(new Boolean(NaN));      // false
  複製代碼

  truthy值： 除了falsy值就是truthy

  console.log(new Boolean(1));                // true
  console.log(new Boolean(true));             // true
  console.log(new Boolean('true'));           // true
  console.log(new Boolean('false'));          // true
  console.log(new Boolean('Bill Gates'));     // true
  複製代碼

• Undefined

  聲明但未初始化的變量會獲得undefined

  var a;
  console.log(a); // undefined
  複製代碼

• Null

  一個沒有任何引用的空對象

  var a = null;
  console.log(typeof a); // object
  複製代碼

• Symbol

  凡是屬性名屬於 Symbol 類型，就都是獨一無二的，能夠保證不會與其餘屬性名產生衝突

  let a = Symbol('a');
  let b = Symbol('a');
  
  typeof s; // Symbol
  console.log(a === b); // false
  
  複製代碼

非基本數據類型

• Object
  1. Array
  2. Function

判斷數據類型

• typeof + 變量名

  typeof 不能正確判斷引用數據類型，如數組：

  typeof [] => 'Object'  
  複製代碼

• 變量名 + instanceof String/Number/Boolean/Object/Array/Function

  instanceof 不能判斷 null 和 undefined（報錯）, 以及用字面量方式建立的 基本數據類型（必須用new 關鍵字去建立基本數據類型）

  '1' instanceof String  // false
  new String('1') instanceof String // true
  複製代碼

• 變量名 + .constructor === String/Number/Boolean/Array/Function/Object

  constructor 不能判斷 null 和 undefined（報錯）, 下面這種狀況也不能正確判斷

  function Fn(){};
  Fn.prototype=new Array();
  var f=new Fn();
  console.log(f.constructor===Fn);  // false
  console.log(f.constructor===Array); // true
  複製代碼

• Object.prototype.toString.call(變量名) === '[object String/Number/Array/Date/Function/Object]'

  判斷數據類型最可靠的方法

  var a = Object.prototype.toString;
  console.log(a.call("aaa"));         // [object String]
  console.log(a.call(1));             // [object Number]
  console.log(a.call(true));          // [object Boolean]
  console.log(a.call(null));          // [object Null]
  console.log(a.call(undefined));     // [object Undefined]
  console.log(a.call([]));            // [object Array]
  console.log(a.call(function() {})); // [object Function]
  console.log(a.call({}));            // [object Object]
  複製代碼

變量和常量

變量

• 用var 或者 let 定義，如var num = 0
• 程序運行期間是能夠改變的

常量

• 用const定義，如const num = 0
• 程序運行期間是不能夠改變的（除object類型）