Javascript中的数据类型之旅

 更新时间:2015年10月21日 21:47  点击:3207

虽然Javascript是弱类型语言,但是,它也有自己的几种数据类型,分别是:Number、String、Boolean、Object、Udefined、Null。其中,Object属于复杂数据类型,Object   由无序的键值对组成。其余几种都属于简单数据类型。注意:变量类型首字母大写,而变量值首字母是小写的。

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字符的集合。必须用'或"括起来。

一、String

JavaScript的字符串类型用于表示文本数据。它是一组16位的无符号整数值的“元素”。在字符串中的每个元素占据了字符串的位置。第一个元素的索引为0,下一个是索引1,依此类推。字符串的长度是它的元素的数量

与 C 语言不同,JavaScript 中字符串是不可变的(译注:如,JavaScript 中对字符串的操作一定返回了一个新字符串,原始字符串并没有被改变)

Javascript中一切都是object-based

创建string,也有两种类型

1、使用字面量方式创建的字符串,为基本类型的string //string

2、使用String()创建的字符串,为基本类型的string  // string

3、使用构造函数 new String()的方式创建的字符串,为对象类型的 //string

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

object 和 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

二、boolean

不要将原始值true false,和值为true false的Boolean对象相混淆

1、如果Boolean构造函数的参数不是一个布尔值,则该参数会被转换成一个布尔值

2、如果参数是 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); // 而不要这样!初始化的时候//falsevar bNoParam = new Boolean();var bZero = new Boolean(0);var bNull = new Boolean(null);var bEmptyString = new Boolean("");var bfalse = new Boolean(false);//truevar btrue = new Boolean(true);var btrueString = new Boolean("true");var bfalseString = new Boolean("false");var bSuLin = new Boolean("Su Lin");

三、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);  // trueNumber.isNaN(Number.NaN); // trueNumber.isNaN(0 / 0)  // true// e.g. these would have been true with global isNaN()Number.isNaN("NaN");  // falseNumber.isNaN(undefined); // falseNumber.isNaN({});   // falseNumber.isNaN("blabla"); // false// These all return falseNumber.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));

四、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 definedvar foo;console.log(foo);//undefinedvar bar =null;console.log(bar);//nulltypeof null  // object (bug in ECMAScript, should be null)typeof undefined // undefinednull === undefined // falsenull == undefined // true

所以判断null,可以判断类型 + 值

五、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);//trueconsole.log(typeof foo === 'undefined');//trueconsole.log(window.foo === undefined);//trueconsole.log(bar === undefined);//Uncaught ReferenceError: bar is not definedconsole.log(typeof bar === 'undefined');//trueconsole.log(window.bar === undefined);//trueconsole.log(typeof undefined == 'undefined'); //trueconsole.log(typeof null == 'object');//trueconsole.log(null == undefined);//trueconsole.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"

六、Object

Javascript中一切皆Object

// Objectstypeof {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。

ps:js中的变量定义

    在JavaScript中,使用var来定义任何类型的变量,每一个变量只是用于保存数据的占位符。   

var temp;   //这句代码定义了一个变量,但其类型是未知的,可以存放任何类型的值,没有初始化的时候,test中存储是undefined。 
var temp=2; //这句代码定义了一个变量,并直接初始化为数值型。 
var temp="javascript"; // 这句代码定义了一个变量,并直接初始化微string型,单引号和双引号都可以,只要成对出现就行。 

2、变量的作用域

   在Javascript中,使用var定义的变量,其作用域是在定义该变量的方法或函数内。也就是说,使用var定义的变量是局部变量。
   例:

   function test() 
   { 
 var temp="Hello, Javascript!"; 
 } 

test(); //方法调用的时候创建变量并初始化,执行结束后变量被销毁。 
alert(temp); //undefined。因为变量temp已经被销毁,所以是未定义(undefined)。  

  如果在定义变量时,不使用var,那么定义的变量是全局变量。

  例:

function test2()  {   temp2="Hello, Javascript!";  } test2(); //调用方法时,创建变量并初始化,执行结束后变量依然存在。 alert(temp2); //Hello, Javascript! 变量值依然存在 

以上内容是小编给大家介绍的Javascript中的数据类型之旅,希望大家喜欢。

[!--infotagslink--]

相关文章

  • 使用PHP+JavaScript将HTML页面转换为图片的实例分享

    这篇文章主要介绍了使用PHP+JavaScript将HTML元素转换为图片的实例分享,文后结果的截图只能体现出替换的字体,也不能说将静态页面转为图片可以加快加载,只是这种做法比较interesting XD需要的朋友可以参考下...2016-04-19
  • C#和JavaScript实现交互的方法

    最近做一个小项目不可避免的需要前端脚本与后台进行交互。由于是在asp.net中实现,故问题演化成asp.net中jiavascript与后台c#如何进行交互。...2020-06-25
  • 关于JavaScript中name的意义冲突示例介绍

    在昨天的《Javascript权威指南》学习笔记之十:ECMAScript 5 增强的对象模型一文中,对于一段代码的调试出现了一个奇怪现象,现将源代码贴在下面: 复制代码 代码如下: <script type="text/javascript"> function Person(){}...2014-05-31
  • php中浮点型(float)和整型(integer)数据类型详解

    文章分析了关于php中浮点型(float)和整型(integer)数据类型的用法区别以及在那种情况下会出现数据长度不够。 取值只能为True或者False,当其他类型转化为boolean类...2016-11-25
  • javascript自定义的addClass()方法

    复制代码 代码如下: //element:需要添加新样式的元素,value:新的样式 function addClass(element, value ){ if (!element.className){ element.className = value; }else { newClassName = element.className; newClas...2014-05-31
  • JavaScript中的this关键字使用方法总结

    在javascritp中,不一定只有对象方法的上下文中才有this, 全局函数调用和其他的几种不同的上下文中也有this指代。 它可以是全局对象、当前对象或者任意对象,这完全取决于函数的调用方式。JavaScript 中函数的调用有以下...2015-03-15
  • JavaScript中逗号运算符介绍及使用示例

    有一道js面试题,题目是这样的:下列代码的执行结果是什么,为什么? 复制代码 代码如下: var i, j, k; for (i=0, j=0; i<10, j<6; i++, j++) { k = i+j; } document.write(k); 答案是显示10,这道题主要考察JavaScript的逗...2015-03-15
  • javascript的事件触发器介绍的实现

    事件触发器从字面意思上可以很好的理解,就是用来触发事件的,但是有些没有用过的朋友可能就会迷惑了,事件不是通常都由用户在页面上的实际操作来触发的吗?这个观点不完全正确,因为有些事件必须由程序来实现,如自定义事件,jQue...2014-06-07
  • 详解javascript数组去重问题

    首先,我想到的是另建一个结果数组,用来存储原始数组中不重复的数据。遍历原始数组依次跟结果数组中的元素进行比较,检测是否重复。于是乎,我写出了如下代码A: Array.prototype.clearRepetitionA = function(){ var resul...2015-11-08
  • c# 数据类型占用的字节数介绍

    本篇文章主要是对c#中数据类型占用的字节数进行了详细的介绍。需要的朋友可以过来参考下,希望对大家有所帮助...2020-06-25
  • ActiveX控件与Javascript之间的交互示例

    1、ActiveX向Javascript传参 复制代码 代码如下: <script language="javascript" for="objectname" event="fun1(arg)"> fun2(arg); </script> objectname为ActiveX控件名,通过<object>标签里的id属性设定,如下; 复制...2014-06-07
  • Javascript类型转换的规则实例解析

    这篇文章主要介绍了Javascript类型转换的规则实例解析,涉及到javascript类型转换相关知识,对本文感兴趣的朋友一起学习吧...2016-02-27
  • JavaScript获取浏览器信息的方法

    Window有navigator对象让我们得知浏览器的全部信息.我们可以利用一系列的API函数得知浏览器的信息.JavaScript代码如下:function message(){ txt = "<p>浏览器代码名: " + navigator.appCodeName + "</p>";txt+= "<p>...2015-11-24
  • 详解JavaScript操作HTML DOM的基本方式

    通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。 HTML DOM (文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。 HTML DOM 模型被构造为对象的树: 通过可编程的对象模型,Java...2015-10-23
  • 跟我学习javascript的最新标准ES6

    虽然ES6都还没真正发布,但已经有用ES6重写的程序了,各种关于ES789的提议已经开始了,这你敢信。潮流不是我等大众所能追赶的。潮流虽然太快,但我们不停下学习的步伐,就不会被潮流丢下的,下面来领略下ES6中新特性,一堵新生代JS...2015-11-24
  • javascript设计模式之解释器模式详解

    神马是“解释器模式”?先翻开《GOF》看看Definition:给定一个语言,定义它的文法的一种表示,并定义一个解释器,这个解释器使用该表示来解释语言中的句子。在开篇之前还是要科普几个概念: 抽象语法树: 解释器模式并未解释如...2014-06-07
  • JavaScript操作URL的相关内容集锦

    ---恢复内容开始---1.location.href.....(1)self.loction.href="http://www.cnblogs.com/url" window.location.href="http://www.cnblogs.com/url" 以上两个用法相同均为在当前页面打开URL页面 (2)this.locati...2015-10-30
  • javascript实现tab切换的四种方法

    tab切换在网页中很常见,故最近总结了4种实现方法。 首先,写出tab的框架,加上最简单的样式,代码如下: <!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style> *{ pa...2015-11-08
  • 基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式

    前言在面向对象的编程范式中,封装都是必不可少的一个概念,而在诸如 Java,C++等传统的面向对象的语言中, 私有成员是实现封装的一个重要途径。但在 JavaScript 中,确没有在语法特性上对私有成员提供支持, 这也使得开发人员使...2015-10-30
  • javascript实现数独解法

    生生把写过的java版改成javascript版,第一次写,很不专业,见谅。唉,我是有多闲。复制代码 代码如下: var Sudoku = { init: function (str) { this.blank = []; this.fixed = []; this.cell =...2015-03-15