js之變量與數據類型

變量

聲明

一個變量被重新復賦值后，它原有的值就會被覆蓋，變量值將以最后一次賦的值為准。

var age = 18;
age = 81; // 最后的結果就是81因為18 被覆蓋掉了

同時聲明多個變量

同時聲明多個變量時，只需要寫一個 var/let， 多個變量名之間使用英文逗號隔開。

let age = 10, 
    name = 'zs', 
    sex = 2;

特殊情況

情況	說明	結果
var age; console.log(age)	只聲明 沒賦值	undefine
console.log(age)	不聲明 不賦值 直接使用	報錯
age = 10; console.log (age);	不聲明 只賦值	10

命名規范

• 由字母(A-Za-z)、數字(0-9)、下划線(_)、美元符號( $ )組成，如：usrAge, num01, _name

• 嚴格區分大小寫。var app; 和 var App; 是兩個變量

• 不能 以數字開頭。 18age 是錯誤的

• 不能 是關鍵字、保留字。例如：var、for、while

• 變量名必須有意義。

• 遵守駝峰命名法。首字母小寫，后面單詞的首字母需要大寫。 myFirstName

作用域

在JavaScript中，根據作用域的不同，變量可以分為兩種:👇

• 全局變量
• 局部變量

「全局變量」在全局作用域下聲明的變量(在函數外部定義的變量)

• 全局變量在代碼的任何位置都可以使用
• 在全局作用域下 var 聲明的變量 是全局變量
• 特殊情況下，在函數內不使用var聲明的變量也是全局變量(不建議使用)。例str = 'a'，省略了關鍵字，默認全局變量

「局部變量」在局部作用域下聲明的變量(在函數內部定義的變量)

• 局部變量只能在函數內部使用
• 在函數內部 var聲明的變量是局部變量
• 函數的形參實際上就是局部變量

「全局變量和局部變量的區別」

• 全局變量:在任何一個地方都可以使用，只有在瀏覽器關閉時才會銷毀，因此比較占內存
• 局部變量:旨在函數內部使用，當其所在的代碼塊被執行時，才會被初始化；當代碼塊運行結束后，就會被銷毀，因此更節省內存空間。

作用域鏈

「作用域鏈」如果函數中還有函數，那么在這個作用域中就又可以誕生一個作用域；根據[內部函數可以訪問外部函數變量] 的這種機制，用鏈式查找決定哪些數據能被內部函數訪問，就稱作作用域鏈。

  function f1() {
      var num = 123;
      function f2() {
          console.log( num );
      }
      f2();
  }
  var num = 456;
  f1();
/*
打印結果：123
*/

作用域鏈采取就近原則的方式來查找變量最終的值

  var a = 1;
  function fn1() {
      var a = 2;
      var b = '22';
      fn2();
      function fn2() {
          var a = 3;
          fn3();
          function fn3() {
              var a = 4;
              console.log(a); //a的值 4
              console.log(b); //b的值 '22'
          }
      }
  }
  fn1();

變量預解析(變量提升)

「預解析相關概念」JavaScript代碼是由瀏覽器中的JavaScript解析器來執行的。JavaScript解析器在運行JavaScript代碼的時候分為兩步: 「預解析相關概念」JavaScript代碼是由瀏覽器中的JavaScript解析器來執行的。JavaScript解析器在運行JavaScript代碼的時候分為兩步: 預解析和代碼執行。

• 「預解析」在當前作用域下，JS代碼執行之前，瀏覽器會默認把帶有 var 和 function聲明的變量在內存中進行提前聲明或定義。
• 「代碼執行」從上往下執行JS語句

預解析會把變量和函數的聲明在代碼執行之前完成，預解析也叫做變量、函數提升。

「變量預解析(變量提升)」 變量的聲明會被提升到當前作用域的最上面，變量的賦值不提升。

• 「預解析」在當前作用域下，JS代碼執行之前，瀏覽器會默認把帶有 var 和 function聲明的變量在內存中進行提前聲明或定義。
• 「代碼執行」從上往下執行JS語句

預解析會把變量和函數的聲明在代碼執行之前完成，預解析也叫做變量、函數提升。

「變量預解析(變量提升)」 變量的聲明會被提升到當前作用域的最上面，變量的賦值不提升。

例

  console.log(num);  // 結果是多少？
  var num = 10;      // ？
  
  //相當於
  var num;
  console.log(num);// 結果是 undefined
  num = 10;

//結果：undefined

注意：變量提升只提升聲明，不提升賦值。

「函數預解析(函數提升)」 函數的聲明會被提升到當前作用域的最上面，但是不會調用函數。

  fn();
  function fn() {
      console.log('打印');
  }

//相當於
 function fn() {
      console.log('打印');
 }
fn();	

 // 結果: 控制台打印字符串 --- "打印"

注意: 函數聲明代表函數整體，函數名代表整個函數，所以函數提升后，函數並沒有被調用！

「函數表達式聲明函數問題」

 // 函數表達式創建函數，會執行變量提升，此時接收函數的變量名無法正確的調用
fn();
var fn = function(){
    console.log("想不到吧");
}
  //相當於
var fn;
fn();
fn = function(){
    console.log("想不到吧");
}
//結果：報錯提示 "fn is not a function"

//預解析案例1
  var num = 10;
  fun();
  
  function fun(){
    console.log(num);
    var num = 20;
  }
  
 // 相當於執行了以下操作 
  var num;
  
  function fun(){
    var num;
    console.log(num);
    num = 20;
  }
  num = 10;
  fun(); 
  
//結果打印 undefined

//預解析案例2
  var a = 18;
  f1();
  
  function f1(){
    var b = 9;
    console.log(a);
    console.log(b);
    var a = '123';
  }
  
 // 相當於執行了以下操作 
  var a;
  function f1(){
    var b;
    var a;
    b = 9;
    console.log(a);
    console.log(b);
    a = '123';  
  }
  a = 18;
  f1(); 

//結果為 undefined 9

// 預解析案例3
  f1();
  console.log(c);
  console.log(b);
  console.log(a);
  
  function f1() {
    var a = b = c = 9;
    console.log(a);
    console.log(b);
    console.log(c);
  }
  
  //相當於執行了以下操作 
  function f1() {
    var a;
    a = b = c = 9;	  //相當於 var a = 9; b=9; c=9; b和c 直接賦值，沒有var聲明，當全局變量看。
  
    console.log(a);
    console.log(b);
    console.log(c);
  }
  f1();
  console.log(c);
  console.log(b);
  console.log(a);

//結果為 9 9 9 9 9 "報錯--a is not defined"

//本例注意區分 集體聲明 var a = 9,b = 9, c = 9;	逗號隔開

數據類型

分類

JS 把數據類型分為兩類：

• 簡單數據類型

  • Number

  • String

  • Boolean

  • Undefined

  • Null

• 復雜數據類型 （object)

  • 對象(Object)
  • 數組(Array)
  • 函數(Function)

數字型Number

JavaScript 數字類型既可以用來保存整數值，也可以保存小數(浮點數）。

var age = 21; // 整數
var Age = 21.3747; // 小數

進制

最常見的進制有二進制、八進制、十進制、十六進制。

 // 1.八進制數字序列范圍：0~7
var num1 = 07; // 對應十進制的7
var num2 = 019; // 對應十進制的19
var num3 = 08; // 對應十進制的8
 // 2.十六進制數字序列范圍：0~9以及A~F
var num = 0xA;

現階段我們只需要記住，在JS中八進制前面加0，十六進制前面加0x

NaN - 非數字值 、isNaN()

NaN 屬性是代表非數字值的特殊值。該屬性用於指示某個值不是數字、

isNaN用來判斷一個變量是否為非數字的類型，非數字返回true，數字返回false

數字可以是數字或者對象

數字可以私有數據進行初始化，就像 x = 123;

JavaScript 數字對象初始化數據， var y = new Number(123);

實例

var x = 123;
var y = new Number(123);
typeof(x) // 返回 Number
typeof(y) // 返回 Object
(x === y) // 為 false，因為 x 是一個數字，y 是一個對象

字符串型 String

傳送門

布爾型 Boolean

布爾類型有兩個值：true 和 false

布爾型和數字型相加的時候， true 的值為 1 ，false 的值為 0。

console.log(true + 1); // 2
console.log(false + 1); // 1

Undefined 和 Null

一個聲明后沒有被賦值的變量會有一個默認值 undefined ( 如果進行相連或者相加時，注意結果）

var variable;
console.log(variable); // undefined
console.log('你好' + variable); // 你好undefined
console.log(11 + variable); // NaN
console.log(true + variable); // NaN

一個聲明變量給 null 值，里面存的值為空

var vari = null;
console.log('你好' + vari); // 你好null
console.log(11 + vari); // 11
console.log(true + vari); // 1

獲取變量的數據類型

typeof 可用來獲取檢測變量的數據類型

var num = 18;
console.log(typeof num) // 結果 number

數據類型轉換

使用表單、prompt 獲取過來的數據默認是字符串類型的，此時就不能直接簡單的進行加法運算，而需要轉換變量的數據類型。通俗來說，就是把一種數據類型的變量轉換成另外一種數據類型。

我們通常會實現3種方式的轉換：

• 轉換為字符串類型
• 轉換為數字型
• 轉換為布爾型

轉換為字符串

方式	案例
toString	var num = 1; var str = num.toString;
String()強制轉換	String(num)
加號拼接字符串	num + ""

轉換為數字型（重點）

方式	案例
parseInt(str)	parseInt('12')
parseFloat(str)	parseFloat('12.3')
Number(str)	Number('12')
隱式轉換（- * /）	'12' - 0 '12' * 1 '12' / 1

注意隱式轉換沒有加號，字符串用加號表示拼接字符串

轉換為布爾型

Boolean()

• 代表空、否定的值會被轉換為 false ，如 ''、0、NaN、null、undefined

• 其余值都會被轉換為 true

console.log(Boolean('')); // false
console.log(Boolean(0)); // false
console.log(Boolean(NaN)); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean('小白')); // true
console.log(Boolean(12)); // true