【JS基礎】初談JS現有的數據類型

xeblog 發布于2019-08-21 18:42 / 1780人閱讀

摘要：相當于相當于相當于基礎類型不屬于包裝的對象類型小結數據類型是每一個語言的基礎由于屬于弱類型腳本語言因此數據只有在賦值后才能直到變量的數據類型下一次我們具體介紹對象的概念

前言

在《你所不知道的javascript上篇》書籍 以及《javascript權威指南》等書籍里面， 均有介紹js的數據類型，對象，原型，繼承。結合工作經驗, 以及借用一些開源庫和框架的源碼, 進行一次梳理。 首先介紹數據類型 ~~

數據類型

js 目前有以下幾大數據類型

undefined

null

string

boolean

number

symbol (ES6新增)

object

undefined類型

原始值類型. 表示某個變量已經聲明, 但是未分配內存空間給予該變量.

var foo; 
console.log(foo); /* 申明變量, 卻沒有賦值 */

function bar (a) {
  console.log(a); /* 函數形參聲明, 卻沒有對應實參賦值 */
}
bar();

function foo2 () {}
var bar2 = foo2(); /* 函數無return 或者, return 不帶任何返回值 */

var o = {foo: "foo"}
console.log(o.bar); /* 在對象中尋找不存在的屬性 */

var foo = "foo";
foo = undefined; /* 顯示將某個變量指向undefined, 消除引用標記 */

null 類型

原始值類型. 聲明變量此時為一個空的原始值. 由于歷史原因, 使用typeof null 返回 object表示為一個對象.

如果要驗證一個變量是否為null, 可以有以下幾種方式

function is_null (o) {
  return o === null;
}

function is_null (o) {
  return Object.prototype.toString.call(o) === "[object Null]";
}

string類型

原始值類型. string屬于不可變值類型, 當一個字符串進行相加后, 返回一個新的字符串引用。

var str = "hello world";
str = str + " liyanlong";
// 1. 棧內存 創建一個str變量
// 2. "hello wolrd" 內容存儲在堆中， 并將引用賦給 str變量
// 3. 獲取str的變量引用， 與新字符串 ` liyanlong` 進行連接操作. 產生新的引用地址并傳給str

簡單理解： string 類型的內容與 object的內容都存儲在堆中。不同的一點是, 無法對string的堆進行修改, 任何連接,分割字符串的操作都會產生一個新的堆引用。

boolean 類型

原始值類型, 只有true, false 兩個原始值.

typeof true // boolean
typeof false // boolean

number 類型

原始值類型. 存儲一切數值類型, 包括正負數, 整數, 小數, 科學計數.

typeof NaN // number
typeof Infinity // number
typeof 0 // number
typeof 1e2 // number
typeof -0.5 // number

檢查一個變量是否可成為無法成為合法的 number 類型

window.isNaN("12") // false
window.isNaN("foo") // true

檢查number是否為有限的number(非無窮)值

window.isFinite("123") // true
window.isFinite(Infinity) // false

symbol類型

原始值類型. 屬于ES6新增的一種數據類型. ES6允許屬性的key 為 symbol類型. 以此可以提供一個私有的屬性

let obj = (function () {
    let key = Symbol("你好");
    let obj = {
    };
    obj[key] = "私有變量";
    return {
        get foo () {
            return this[key];
        }
    };
})();
obj.foo = "hello world";
console.log(Object.getOwnPropertyNames(obj)); // ["foo"]
console.log(Object.getOwnPropertySymbols(obj)); // [Symbol(你好)]

let anotherKey = Symbol("你好");
console.log(obj[anotherKey]) // undefined
typeof anotherKey // "symbol"

object類型

引用類型. js中常見的引用對象有Array, Object, Date.

var arr = [];
var o = {};
var date = new Date()
typeof o // object
typeof arr // object
typeof date // object

函數也屬于對象類型, 它是一種可調用的對象, 并且能創建調用棧執行內部代碼. 只是函數在執行typeof 時,返回的是function

function Foo() {
}

typeof Foo // function 
Foo instanceof Object // true

值類型與引用類型

值類型屬于不可變類型, 由于具有固定長度大小, 因此可以存放在棧內存中，而引用類型屬于可變類型, 一個對象可以賦予多個屬性及值，屬性值又可以為一個新的引用對象。因此將引用類型存放在堆中

包裝類型

為了方便boolean, number, string 基本類型的處理及調用, 當我們在執行toString(), valueOf(), +操作符 以及函數方法的時候, 會隱世轉換為Boolean,Number, String對象類型. 執行后返回的又是基本類型。

var bool = true
var number = 1
var string = "hello world"

console.log(bool + number) // 2
// 相當于
console.log(Boolean(bool).valueOf() + number) // 2

console.log(bool + string) // true hello world
// 相當于
console.log(Boolean(bool).toString() + string) // true hello world

string.charAt(0) // h
// 相當于
console.log(String(string).charAt(0)） // h

// 基礎類型不屬于包裝的對象類型
bool instanceof Boolean // false
number instanceof Number // false
string instanceof String // false

小結

數據類型是每一個語言的基礎. 由于js屬于弱類型腳本語言, 因此數據只有在賦值后才能直到變量的數據類型. 下一次我們具體介紹js對象的概念.

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90735.html

一篇文章帶你學習js數據類型

摘要：走在前端的大道上本篇將自己讀過的相關數據類型文章中，對自己有啟發的章節片段總結在這會對原文進行刪改會不斷豐富提煉總結更新。相當于相當于相當于基礎類型不屬于包裝的對象類型參考文章基礎初談現有的數據類型走在前端的大道上本篇將自己讀過的相關 javascript 數據類型文章中，對自己有啟發的章節片段總結在這（會對原文進行刪改）,會不斷豐富提煉總結更新。數據類型 js 目前有以下幾大...

崔曉明 2019-08-26 11:43 評論0 收藏0
Flow - JS靜態類型檢查工具

摘要：介紹是個的靜態類型檢查工具，由出品的開源碼項目，問世只有一年多，是個相當年輕的項目。現在，提供了另一個新的選項，它是一種強靜態類型的輔助檢查工具。 showImg(https://segmentfault.com/img/bVH6mL?w=1200&h=675); 本章的目標是提供一些Flow工具的介紹與使用建議。Flow本質上也只是個檢查工具，它并不會自動修正代碼中的錯誤，也不會強制...

seanHai 2019-08-20 13:39 評論0 收藏0
React Native 在 Airbnb(譯文)

摘要：聲明有助于保持我們的同步與底層狀態的聲明性質。值得注意的是，這些挑戰并非特定于。這導致或上出現不一致或意外錯誤。崩潰監控我們使用在和上進行崩潰報告。橋接有一個橋接，用于在本機和之間進行通信。 showImg(https://segmentfault.com/img/bVbd0FA?w=740&h=433);在Android，iOS，Web和跨平臺框架的橫向對比中，React Nativ...

nihao 2019-08-22 18:50 評論0 收藏0
React Native 在 Airbnb(譯文)

摘要：聲明有助于保持我們的同步與底層狀態的聲明性質。值得注意的是，這些挑戰并非特定于。這導致或上出現不一致或意外錯誤。崩潰監控我們使用在和上進行崩潰報告。橋接有一個橋接，用于在本機和之間進行通信。 showImg(https://segmentfault.com/img/bVbd0FA?w=740&h=433);在Android，iOS，Web和跨平臺框架的橫向對比中，React Nativ...

chenatu 2019-08-02 10:57 評論0 收藏0