Javascript中的數據類型知多少

JavaScript 是一種弱類型或者說動態語言。這意味着你不用提早聲明變量的類型，在程序運行過程當中，類型會被自動肯定。這也意味着你可使用同一個變量保存不一樣類型的數據

根據ECMAScript 5.1的規範，javascript中共有六種數據類型，分別爲：Undefined, Null, Boolean,Number, String、Object。前五種屬於基本類型，最後一種屬於Object類型。

最新的ECMAScript 6 又加了一種類型：Symbol (ECMAScript 6 新定義) 

基本數據類型

• Undefined：只有一個值，爲undefined，意味着「空值(no value)」，適用於全部數據類型。
• Null：只有一個值，爲null，意味着「空對象(no object)」，只適用於對象類型。（literal）
• Boolean：有兩個值，爲true與false
• Number：的值是遵循IEEE 754標準的64位浮點數的集合，沒有整型數據結構。此外還包含三個特殊的值：NaN、Infinity、-Infinity
• String：值是有窮個Unicode字符的集合。必須用'或"括起來。

1、String

JavaScript的字符串類型用於表示文本數據。它是一組16位的無符號整數值的「元素」。在字符串中的每一個元素佔據了字符串的位置。第一個元素的索引爲0，下一個是索引1，依此類推。字符串的長度是它的元素的數量

與 C 語言不一樣，JavaScript 中字符串是不可變的（譯註：如，JavaScript 中對字符串的操做必定返回了一個新字符串，原始字符串並無被改變）

Javascript中一切都是object-based

建立string，也有兩種類型

一、使用字面量方式建立的字符串，爲基本類型的string //string 實際上保存就是的值，是一個基本類型

二、使用String()建立的字符串，爲基本類型的string  // string

三、使用構造函數 new String()的方式建立的字符串，爲對象類型的 //string 實際上保存的是一個指向字符串對象的指針

看代碼

 

var obj = 'abc';
obj.something = 1;
var firstChar = obj.charAt(0); //"a"
console.log(obj.something); //undefined
//實際上js作了這樣的處理
var obj = 'abc';
var temp = new String(obj);
var firstChar = temp.charAt(0); //"a"
temp.something = 1;
temp = null;
console.log(obj.something); //undefined

 

緣由是，建立了一個臨時的引用類型變量去訪問屬性，修改屬性，而後就被釋放了

 

再看一個例子

var str1 = "javascript"; //typeof str1 == string
var str2 = String("javascript"); //typeof str2 == string 不推薦
var str3 = new String('javascript'); //typeof str3 == object

new Sting 和 string的區別

s1 = "2 + 2";               // creates a string primitive
s2 = new String("2 + 2");   // creates a String object
console.log(eval(s1));      // returns the number 4
console.log(eval(s2));      // returns the string "2 + 2"

也就是說使用對象的時候，不會作類型轉換

字符串對象的轉換 valueof -》 string

console.log(eval(s2.valueOf())); // returns the number 4

2、boolean

不要將原始值true false,和值爲true false的Boolean對象相混淆

一、若是Boolean構造函數的參數不是一個布爾值,則該參數會被轉換成一個布爾值

二、若是參數是 0, -0, null,false, NaN, undefined, 或者空字符串 (""),生成的Boolean對象的值爲false. 其餘任何值,包括任何對象或者字符串"false", 都會建立一個值爲true的Boolean對象

var x = new Boolean(false);

if(x){
	console.log(x.valueOf(),typeof x); // false  object
}

上面會執行，很神奇的代碼

不要經過新建Boolean對象的方法來將一個非布爾值轉化成布爾值. 直接使用Boolean函數纔是正確的

var x = Boolean(expression);     // 這樣用
var x = new Boolean(expression); // 而不要這樣!

初始化的時候

//false
var bNoParam = new Boolean();
var bZero = new Boolean(0);
var bNull = new Boolean(null);
var bEmptyString = new Boolean("");
var bfalse = new Boolean(false);

//true
var btrue = new Boolean(true);
var btrueString = new Boolean("true");
var bfalseString = new Boolean("false");
var bSuLin = new Boolean("Su Lin");

3、Number

根據 ECMAScript 標準，JavaScript 中只有一種數字類型：基於 IEEE 754 標準的雙精度 64 位二進制格式的值（-(253 -1) 到 253 -1）。它並無爲整數給出一種特定的類型。除了可以表示浮點數外，還有一些帶符號的值：+Infinity，-Infinity 和 NaN (非數值，Not-a-Number)

數字類型只有一個整數，它有兩種表示方法： 0 可表示爲 -0 和 +0（"0" 是 +0 的簡寫）。 在實踐中，這也幾乎沒有影響。 例如 +0 === -0 爲真。 可是，你可能要注意除以0的時候：

42 / +0; // Infinity
42 / -0; // -Infinity

若是參數沒法被轉換爲數字，則返回 NaN。

在非構造器上下文中 (如：沒有 new 操做符)，Number 能被用來執行類型轉換

isNAN 類型判斷

Number.isNaN(NaN);        // true
Number.isNaN(Number.NaN); // true
Number.isNaN(0 / 0)       // true

// e.g. these would have been true with global isNaN()
Number.isNaN("NaN");      // false
Number.isNaN(undefined);  // false
Number.isNaN({});         // false
Number.isNaN("blabla");   // false

// These all return false
Number.isNaN(true);
Number.isNaN(null);
Number.isNaN(37);
Number.isNaN("37");
Number.isNaN("37.37");
Number.isNaN("");
Number.isNaN(" ");

原型鏈繼承的關係

console.log(Number.prototype.__proto__ == Object.prototype); //true
console.log(Number.prototype.__proto__.__proto__ == Object.prototype.__proto__);//true
console.log(Object.prototype.__proto__ === null);//true
console.log(typeof Number);//function

使用 Number 轉換 Date 對象

var d = new Date("December 17, 1995 03:24:00");
console.log(Number(d));

4、Null

null 是一個 JavaScript 字面量，表示空值（null or an "empty" value），即沒有對象被呈現（no object value is present）。它是 JavaScript 原始值 之一。

null 是一個字面量 (而不是全局對象的一個屬性，undefined 是 )

console.log(null); //null
console.log(undefined);//undefined

console.log(window.null);//undefined
console.log(window.undefined);//undefined

null與undefined的區別

console.log(foot);//Uncaught ReferenceError: foot is not defined

var foo;
console.log(foo);//undefined

var bar =null;
console.log(bar);//null

typeof null        // object (bug in ECMAScript, should be null)
typeof undefined   // undefined
null === undefined // false
null  == undefined // true

因此判斷null，能夠判斷類型 + 值

5、Undefined

在JavaScript中,undefined這個詞有多重含義.首字母大寫的Undefined表示的是一種數據類型,小寫的undefined表示的是屬於這種數據類型的惟一的一個值.但這兩種undefined都只能存在於文檔或規範中,不能存在於JavaScript代碼中.在JavaScript代碼中,你看到的undefined最有多是全局對象的一個屬性,該屬性的初始值是就是前面所說的原始值undefined,還有種狀況就是,這個undefined是個局部變量,就像其餘普通變量同樣,沒有任何特殊性,它的值不必定是undefined,但一般狀況下都是的.下面咱們所說的undefined,都指的是window.undefined這個屬性.

在ES3中(Firefox4以前),window.undefined就是一個普通的屬性,你徹底能夠把它的值改變成爲任意的真值,但在ES5中((Firefox4以後),window.undefined成了一個不可寫,不可配置的數據屬性,它的值永遠是undefined.

一個未初始化的變量的值爲undefined,一個沒有傳入實參的形參變量的值爲undefined,若是一個函數什麼都不返回,則該函數默認返回undefined.

你可使用嚴格相等運算符來判斷一個值是不是undefined:

var foo;
console.log(foo === undefined);//true
console.log(typeof foo === 'undefined');//true
console.log(window.foo === undefined);//true

console.log(bar === undefined);//Uncaught ReferenceError: bar is not defined
console.log(typeof bar === 'undefined');//true
console.log(window.bar === undefined);//true

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

總結

• Null的值是null，表示一個空對象指針，沒有指向任何對象
• Undefined的值是undefined，表示申明變量或對象的屬性卻未初始化
• undefined值是派生自null的，因此對他們執行相等測試會返回true
• 數值、布爾值、對象和字符串值都有toString()方法。但null和undefined值沒有這個方法

多數狀況下，調用toString()方法沒必要傳遞參數。可是，在調用數值的toString()方法時，能夠傳遞一個參數：輸出數值的基數

var num = 10;
alert(num.toString());      //"10"
alert(num.toString(2));     //"1010"
alert(num.toString(8));     //"12"
alert(num.toString(10));    //"10"
alert(num.toString(16));    //"a"

在不知道要轉換的值是否是null或undefined的狀況下，還可使用轉型函數String()，這個函數可以將任何類型的值轉換爲字符串。String()函數遵循下列轉換規則：

　　● 若是值有toString()方法，則調用該方法（沒有參數）並返回相應的結果

　　● 若是值是null，則返回"null"

　　● 若是值是undefined，則返回"undefined"

 

6、Object

Javascript中一切皆Object

// Objects
typeof {a:1} === 'object';

// 使用Array.isArray或者Object.prototype.toString.call方法能夠從基本的對象中區分出數組類型
typeof [1, 2, 4] === 'object';

typeof new Date() === 'object';

// 下面的容易使人迷惑，不要這樣使用！
typeof new Boolean(true) === 'object';
typeof new Number(1) ==== 'object';
typeof new String("abc") === 'object';

// 函數
typeof function(){} === 'function';
typeof Math.sin === 'function';

實例化一個空Object

var o = new Object();
var o = new Object(undefined);
var o = new Object(null);
var o = {};

原型

定義屬性爲__proto__: 值 或 "__proto__": 值 時，不會建立名爲__proto__屬性。若是給出的值是對象或者null，那麼對象的[[Prototype]]會被設置爲給出的值。（若是給出的值不是對象也不是null，那麼對象的原型不會改變。）

var obj1 = {};
assert(Object.getPrototypeOf(obj1) === Object.prototype);

var obj2 = { __proto__: null };
assert(Object.getPrototypeOf(obj2) === null);

var protoObj = {};
var obj3 = { "__proto__": protoObj };
assert(Object.getPrototypeOf(obj3) === protoObj);

var obj4 = { __proto__: "not an object or null" };
assert(Object.getPrototypeOf(obj4) === Object.prototype);
assert(!obj4.hasOwnProperty("__proto__"));

在對象字面值中，僅有一次變動原型的機會；屢次變動原型，會被視爲語法錯誤。

不使用冒號記法的屬性定義，不會變動對象的原型；而是和其餘具備不一樣名字的屬性同樣是普通屬性定義。

var __proto__ = "variable";

var obj1 = { __proto__ };
assert(Object.getPrototypeOf(obj1) === Object.prototype);
assert(obj1.hasOwnProperty("__proto__"));
assert(obj1.__proto__ === "variable");

var obj2 = { __proto__() { return "hello"; } };
assert(obj2.__proto__() === "hello");

var obj3 = { ["__prot" + "o__"]: 17 };
assert(obj3.__proto__ === 17);

與JSON的區別

• JSON 只容許"property": value syntax形式的屬性定義。屬性名必須用雙引號括起來。且屬性定義不容許使用簡便寫法。
• JSON中，屬性的值僅容許字符串，數字，數組，true，false，或者其餘JSON對象。 
• JSON中，不容許將值設置爲函數。
•  Date 等對象，經JSON.parse()處理後，會變成字符串。
• JSON.parse() 不會處理計算的屬性名，會當作錯誤拋出。

defineProperty

Object.defineProperty() 方法直接在一個對象上定義一個新屬性，或者修改一個已經存在的屬性， 並返回這個對象

// 使用 __proto__
Object.defineProperty(obj, "key", {
  __proto__: null, // 沒有繼承的屬性
  value: "static"  // 沒有 enumerable
                   // 沒有 configurable
                   // 沒有 writable
                   // 做爲默認值
});

// 顯式
Object.defineProperty(obj, "key", {
  enumerable: false,
  configurable: false,
  writable: false,
  value: "static"
});

// 回收同一對象
function withValue(value) {
  var d = withValue.d || (
    withValue.d = {
      enumerable: false,
      writable: false,
      configurable: false,
      value: null
    }
  );
  d.value = value;
  return d;
}
// ... 和 ...
Object.defineProperty(obj, "key", withValue("static"));

// 若是 freeze 可用, 防止代碼添加
// value, get, set, enumerable, writable, configurable
// 到對象原型上
(Object.freeze||Object)(Object.prototype);

configurable當且僅當這個屬性描述符值爲 true 時，該屬性可能會改變，也可能會被從相應的對象刪除。默認爲 false。

enumerabletrue 當且僅當該屬性出如今相應的對象枚舉屬性中。默認爲 false。

value 與屬性相關的值。能夠是任何有效的 JavaScript 值（數值，對象，函數等）。默認爲 undefined。

writable  true 當且僅當可能用  賦值運算符 改變與屬性相關的值。 默認爲 false。

存取描述符同時具備如下可選鍵值：

get 一個給屬性提供 getter 的方法，若是沒有 getter 則爲  undefined。方法將返回用做屬性的值。 默認爲 undefined。

set 一個給屬性提供 setter 的方法，若是沒有 setter 則爲  undefined。該方法將收到做爲惟一參數的新值分配給屬性。 默認爲 undefined。

附上幾個簡單粗暴的校驗方式

//低版本ie中undefined變量能夠被修改，因此使用void 0 獲取真實的undefined值，
var isUndefined = function(obj) {
    //or: return typeof obj === 'undefined';
    return obj === void 0;
};
//typeof null 的結果是"object"。
var isNull = function(obj) {
    return obj === null;
};
// boolean值，number值和string值須要考慮兩種狀況，值爲字面量時使用typeof和Object.prototype.toString能檢測; 
// 值爲構造函數構建的時候須要使用Object.prototype.toString或者instanceof檢測
var isBoolean = function(obj) {
    return Object.prototype.toString.call(obj) == '[object Boolean]';
};
var isNumber = function(obj) {
    return Object.prototype.toString.call(obj) == '[object Number]';
};
var isString = function(obj) {
    return Object.prototype.toString.call(obj) == '[object String]';
};
var isNaN = function(obj) {
    return obj !== obj;
};

//typeof 操做符在引用類型的變量裏能對function有效。
var isFunction = function(obj) {
    //or:  return Object.prototype.toString.call(obj) == '[object Function]';
    return typeof obj === 'function';

};
var isDate = function(obj) {
    return Object.prototype.toString.call(obj) == '[object Date]';
}
var isArray = function(obj) {
    return Object.prototype.toString.call(obj) == '[object Array]';
}
var isObject = function(obj) {
    //or: return obj === Object(obj);
    return Object.prototype.toString.call(obj) == '[object Object]';
}
var isRegExp = function(obj) {
    //or: return obj === Object(obj);
    return Object.prototype.toString.call(obj) == '[object RegExp]';
}

var has = function(obj, key) {
    return Object.prototype.hasOwnProperty.call(obj, key);
};
//判斷數組，字符串，對象是否爲空
var isEmpty = function(obj) {
    if (obj == null) return true;
    if (isArray(obj) || isString(obj)) return obj.length === 0;
    for (var key in obj) if (has(obj, key)) return false;
    return true;
};

原理：在任何值上調用Object原生的toString() 方法，都會返回一個[object NativeConstructorName] 格式的字符串。每一個類在內部都有一個[ [Class] ]屬性，這個屬性就指定了上述字符串中的構造函數名NativeConstructorName

參考來源

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects