JavaScript 經常搞混的地方


Posted by chihyu on 2021-01-25

JS 的資料型態

  • null
  • undefined
  • string
  • number
  • boolean
  • symbol(ES6)
  • object (array, function, date)

判斷資料型態

typeof 取得資料型態:

console.log(typeof 123) // number
console.log(typeof function() {}) // function 
console.log(typeof null) // object,這是一個不會被修正的 bug

另一個判斷型態的方法(比上面的方法更仔細):

Object.prototype.toString.call()
console.log(Object.prototype.toString.call(null)) // null
console.log(Object.prototype.toString.call([])) // array
console.log(Object.prototype.toString.call(1)) // number

對 Primitive type 去執行甚麼動作的時候,會回傳的是一個新的值,所以要另外宣告一個新的變數,對 Object 則是原本的東西去做改變,不用另外再宣告一個變數

Primitive type 原始型態(不能改變):

var str = "hello"
var newStr = str.toUpperCase()
console.log(str, newStr) // hello, HELLO

Object:

var arr = [1]
arr.psuh(2)
console.log(arr) // [1, 2]

賦值

  • "=" 是賦值,primitive type 賦值甚麼就是甚麼,Object 則是把賦值的東西放在某個記憶體位置,所以 Object 賦值的東西是看他對應到的記憶體位置是甚麼才是甚麼
    var obj = {
      number:10
    }
    0x01:{ // 記憶體位置 0x01 存放 number:10
      number:10
    }
    obj:0x01 // obj 對應 0x01 這個記憶體位置的東西
    
  • 給一個 object 宣告一個已經存在的 object,兩個 object 共用同一個記憶體位置
    var obj = {
      number:10
    } 
    var obj2 = obj 
    console.log(obj2) // 10
    0x01:{ // 記憶體位置 0x01 存放 number:10
      number:10
    }
    obj:0x01 // obj 對應 0x01 這個記憶體位置的東西
    obj2:0x01 // obj2 對應到跟 obj 一樣的記憶體位置
    
  • 已宣告的 object 再重新宣告一個值,新的值會存在另一個新的記憶位置,與原本舊的值的記憶位置不相干
    var obj = {
      number:10
    } 
    var obj2 = obj 
    console.log(obj2) // 10
    obj2 = {
    number :20
    }
    console.log(obj, obj2) // 10, 20
    0x01:{ // 記憶體位置 0x01 存放 number:10
      number:10
    }
    0x02: {
      number:20
    }
    obj:0x01 // obj 對應 0x01 這個記憶體位置的東西
    obj2:0x02 // obj2 對應到一個新的記憶體位置
    

== 與 ===

"==" 會進行型態的轉換,所以型態不同但值相同時進行比較會相等

"===" 要連型態都相等比較時才會相等

console.log(1 == "1") true
console.log(1 === "1") false

object 型態的東西用 === 進行比較時,不管值是否相等,要指向同一個記憶體位置才會是相等的

var arr1 = [1]
var arr2 = [1] 
consoel.log(arr1 === arr2) // false,因為兩個東西的記憶體位置不同
var arr1 = [1]
var arr2 = arr1
console.log(arr1 === arr2) //true

NaN (Not a Number)

  • NaN 的型態是 number
  • NaN 不等於任何東西,包含自己
  • isNaN() 判斷是不是 NaN
    var a = Number("hello")
    console.log(a) // NaN
    console.log(a === a) // false
    console.log(isNaN(a)) // true
    

var、let 與 const

ES6 之後,一個 { } 是一個作用域

var 變數

  • 全域變數 function scope,以 function 為作用的界線
  • 若 function 內使用已宣告的變數,找最近的,同一層沒有就往上一層找

let 變數

  • 區域變數 block scope,以 block { } 為作用的界線

const 常數

  • 區域變數 block scope,以 block { } 為作用的界線
  • 值不可以改,但是如果是 object 的話可以,只要記憶體位置不變就可以改變
值可變 作用域
const 不可以 block
let 可以 block
var 可以 function

#Web #javascript







Related Posts

關於 React 小書:前端應用狀態管理—狀態提升

關於 React 小書:前端應用狀態管理—狀態提升

[第二週] 位元運算  判斷奇偶數不是只能取餘數

[第二週] 位元運算 判斷奇偶數不是只能取餘數

瀏覽器渲染流程

瀏覽器渲染流程


Comments