【JavaScript高程总结】数据类型

数据类型

JavaScript语言的每一个值，都属于某一种数据类型。JavaScript的数据类型，共有六种。（ES6又新增了第七种Symbol类型的值，本教程不涉及。）

  • 数值（number）：整数和小数（比如1和3.14）
  • 字符串（string）：字符组成的文本（比如"Hello World"）
  • 布尔值（boolean）：true（真）和false（假）两个特定值
  • undefined：表示“未定义”或不存在，即此处目前没有任何值
  • null：表示空缺，即此处应该有一个值，但目前为空
  • 对象（object）：各种值组成的集合

原始类型（primitivetype）

即它们是最基本的数据类型，不能再细分了。

  • 数值
  • 字符串
  • 布尔值

合成类型（complex type）

因为一个对象往往是多个原始类型的值的合成，可以看作是一个存放各种值的容器。

  • 对象(object)(对象包括：狭义的对象（object）／数组（array）／函数（function））

特殊值

  • undefined
  • null

1,typeof运算符／instanceof运算符／Object.prototype.toString方法(值的数据类型判断)

JavaScript有三种方法，可以确定一个值到底是什么类型。

  • typeof运算符
  • instanceof运算符
  • Object.prototype.toString方法(待续......)

typeof运算符

（1）原始类型（数值、字符串、布尔值分别返回number、string、boolean。）

typeof 123 // "number"
typeof '123' // "string"
typeof false // "boolean"

（2）函数（函数返回function）

function f() {}
typeof f
// "function"

（3）undefined（undefined返回undefined）

typeof undefined
// "undefined"
利用这一点，typeof可以用来检查一个没有声明的变量，而不报错。

v
// ReferenceError: v is not defined

typeof v
// "undefined"
实际编程中，这个特点通常用在判断语句。

// 错误的写法
if (v) {
   // ...
}
// ReferenceError: v is not defined

// 正确的写法
if (typeof v === "undefined") {
  // ...
}

（4）其他（除此以外，其他情况都返回object）

typeof window // "object"
typeof {} // "object"
typeof [] // "object"
typeof null // "object"
/*从上面代码可以看到，空数组（[]）的类型也是object，这表示在JavaScript内部，数组本质上只是一种特殊的对象。另外，null的类型也是object，这是由于历史原因造成的，为了兼容以前的代码，后来就没法修改了，并不是说null就属于对象，本质上null是一个类似于undefined的特殊值。*/

instanceof运算符符(用于区分array和object)

既然typeof对数组（array）和对象（object）的显示结果都是object，那么怎么区分它们呢？instanceof运算符可以做到。

var o = {};
var a = [];

o instanceof Array // false
a instanceof Array // true

2,null 和 undefined 的区别

null与undefined都可以表示“没有”，含义非常相似。将一个变量赋值为undefined或null，老实说，语法效果几乎没区别。

var a = undefined;
// 或者
var a = null;
上面代码中，a变量分别被赋值为undefined和null，这两种写法的效果几乎等价。

在if语句中，它们都会被自动转为false，相等运算符（==）甚至直接报告两者相等。

if (!undefined) {
  console.log('undefined is false');
}
// undefined is false

if (!null) {
  console.log('null is false');
}
// null is false

undefined == null
// true

上面代码说明，两者的行为是何等相似！Google公司开发的JavaScript语言的替代品Dart语言，就明确规定只有null，没有undefined！

既然含义与用法都差不多，为什么要同时设置两个这样的值，这不是无端增加复杂度，令初学者困扰吗？这与历史原因有关。

1995年JavaScript诞生时，最初像Java一样，只设置了null作为表示"无"的值。根据C语言的传统，null被设计成可以自动转为0。

Number(null) // 0
5 + null // 5

但是，JavaScript的设计者Brendan Eich，觉得这样做还不够，有两个原因。

首先，null像在Java里一样，被当成一个对象。但是，JavaScript的数据类型分成原始类型和合成类型两大类，Brendan Eich觉得表示"无"的值最好不是对象。

其次，JavaScript的最初版本没有包括错误处理机制，发生数据类型不匹配时，往往是自动转换类型或者默默地失败。Brendan Eich觉得，如果null自动转为0，很不容易发现错误。

因此，Brendan Eich又设计了一个undefined。他是这样区分的：null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。

Number(undefined) // NaN
5 + undefined // NaN

但是，这样的区分在实践中很快就被证明不可行。目前null和undefined基本是同义的，只有一些细微的差别。

null的特殊之处在于，JavaScript把它包含在对象类型（object）之中。

typeof null // "object"

上面代码表示，查询null的类型，JavaScript返回object（对象）。

这并不是说null的数据类型就是对象，而是JavaScript早期部署中的一个约定俗成，其实不完全正确，后来再想改已经太晚了，会破坏现存代码，所以一直保留至今。

用法和含义

  • null表示空值，即该处的值现在为空。典型用法是：
    1.作为函数的参数，表示该函数的参数是一个没有任何内容的对象。
    2.作为对象原型链的终点。

  • undefined表示不存在值，就是此处目前不存在任何值。典型用法是：
    1.变量被声明了，但没有赋值时，就等于undefined。
    2.调用函数时，应该提供的参数没有提供，该参数等于undefined。
    3.对象没有赋值的属性，该属性的值为undefined。
    4.函数没有返回值时，默认返回undefined。

--

var i;
i // undefined

function f(x){console.log(x)}
f() // undefined

var  o = new Object();
o.p // undefined

var x = f();
x // undefined

3,Boolean

布尔值代表“真(true)”和“假(false)”两个状态,布尔值只有这两个值。

下列运算符会返回布尔值：

两元逻辑运算符： && (And)，|| (Or)
前置逻辑运算符： ! (Not)
相等运算符：===，!==，==，!=
比较运算符：>，>=，<，<=

如果JavaScript预期某个位置应该是布尔值，会将该位置上现有的值自动转为布尔值。转换规则是除了下面六个值被转为false，其他值都视为true。

undefined
null
false
0
NaN
""（空字符串）

布尔值往往用于程序流程的控制，请看一个例子。

if ('') {
  console.log(true);
}
// 没有任何输出

上面代码的if命令后面的判断条件，预期应该是一个布尔值，所以JavaScript自动将空字符串，转为布尔值false，导致程序不会进入代码块，所以没有任何输出。

需要特别注意的是，空数组（[]）和空对象（{}）对应的布尔值，都是true。

if ([]) { console.log(true); } // true

if ({}) { console.log(true); } // true

4,Number

JavaScript的数字类型和其它语言有所不同，没有整型和浮点数的区别，统一都是Number类型，可以表示十进制、八进制、十六进制

var a = 10; //十进制
var b = 073; //八进制
vat c = 0xf3; //十六进制

浮点数

浮点数是指数字包含小数点，小数点后至少有一位数字(没有或者是0会转为整数)，前面可以没有

var a = 0.27;
var b = .45;

对于极大或极小的数字可以使用科学计数法

var a = 3.1e5; //310000

浮点数最高精度是17位，但是在计算的时候精度不如整数

1 - 0.9; // 0.09999999999999998
0.1 + 0.2; //0.30000000000000004

数值范围

JavaScript Number不能表示所有数字，有个范围

Number.MIN_VALUE: 5e-324
Number.MAX_VALUE: 1.7976931348623157e+308

如果超过这个范围数字会被转为特殊的Infinity值表示无穷，-Infinity表示负无穷

可以通过函数isFinite判断数字是否是无穷

isFinite(Number.MAX_VALUE + 1); // true
isFinite(Infinity);  // false
isFinite(NaN);       // false
isFinite(-Infinity); // false

isFinite(0);         // true
isFinite(2e64);      // true

isFinite("0");       // true

5,NaN

NaN含义是Not a Number，表示非数字，NaN和任何值都不相等，包括自己

NaN == NaN; //false

数值转换

有三个函数可以把非数值转换为数值

  • Number()
  • parseInt()
  • parseFloat()

Number规则相当复杂而且不合理，几乎不使用，常用的是后两个，两个规则类似

parseInt()

  • 忽略字符串前面的空白字符，找到第一个非空白字符
  • 如果第一个字符不是-或者数字返回NaN
  • 如果是继续解析，直到非数值模式为止
  • 0开头会当做八进制，0x开头会当做十六进制，但是可以指定第二个参数指定基数

--

parseInt('blue'); //NaN
parseInt('-23ABS'); // -23
parseInt('0xf1'); // 241
parseInt('101', 2); // 5

数值参考

6,String

String是Unicode字符组成的序列，俗称字符串，可以用双引号或者单引号表示，没有区别，匹配即可

字符串也有一些转义字符

\n---换行
\r---回车
\t---水平制表符
\b---空格
\\---\（斜杠）
\'---单引号（'）,在单引号表示字符串的时候用。例如：'He said,\'hey.\''
\"---双引号（"）
\xnn---以十六进制代码nn表示一个字符（其中n为0~F）例如：\x41表示'A'
\unnn--- 以十六进制代码nnn表示一个Unicode（其中n为0~F）例如：\u03a3表示希腊字符Σ

字符串的长度可以通过length属性获得

"123".length; // 3

转换为字符串

把一个值转换为字符串有两种方法

方法一：.toString()（方法）

第一种是几乎每个值都有的toString()方法，该方法返回字符串副本；唯独null和undefined没有这个方法所以当不确定转换的值是不是null或undefined用到第二个方法；

var age=11;
var ageAsString=age.toString();   //得到字符串：'11'
var found=true;
var foundAsString=found.toString();   //得到字符串：'true'
多数情况调用该方法不要传递参数；参数的作用是通过传入基数（参数）可以把数值转换成二进制，八进制，十进制，十六进制，其他任意有效进制格式；（默认是十进制）的字符串如下
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'

方法二：String()(转型函数)

当不确定转换的值是不是null或undefined用到String()
遵循下列转换规则：

  • 如果值有toString()方法，则调用该方法（无参数）

  • 如果是null，则返回"null"

  • 如果是undefined，则返回"undefined"

    var val1=10
    var val2=true
    var val3=null
    var val4

    alert(String(val1)); //"10"
    alert(String(val2)); //"true"
    alert(String(val3)); //"null"
    alert(String(val4)); //"undefined"

字符串方法

1，indexOf：获取字符位置(ES5中数组也有同样的方法查找制定数组内元素.indexOf(elment)从头开始找/.lastIndexOf(elment)从尾开始找)

"abc".indexOf('b'); // 1

2，toLowerCase：转换为小写，toUpperCase：转换为大写

"aBcD".toLowerCase(); // "abcd"
"aBcD".toUpperCase(); // "ABCD"

3，trim：删除两端空白字符(IE9+)

" sd f ".trim(); // "sd f"

4，replace：字符串替换

"abc".replace('b', 'B'); // "aBc"

5，split：分割字符串位数组(常用)

"a,bc,d,e".split(','); // [a, bc, d, e]

6，substr(start, length)：获取子字符串

"abcdef".substr(2,3); // "cde"

7，substring(start, end)：获取子字符串

"abcdef".substring(2,3); // "c"

7,Object

对象（object）是JavaScript的核心概念，也是最重要的数据类型。JavaScript的所有数据都可以被视为对象，这也是我们常说的一切皆为对象。

简单说，所谓对象，就是一种无序的数据集合，由若干个“键值对”（key-value）构成。key我们称为对象的属性，value可以是任何JavaScript类型，甚至可以是对象

var o = new Object();
o.name = 'Byron';
o.age = 24;

我们也可以通过字面量的方式定义对象，实际上这种方法更常用

var o = {
    name: 'Byron',
    age:24
}

key可以使用引号包裹，也可以直接写，对象有一个默认的方法toString，用来返回对象的字符串表示

console.log(o); // Object {name: "Byron", age: 24}
console.log(o.toString()); // [object Object]
object的属性读取有两种方式

o.name;
o['name'];

参考
http://javascript.ruanyifeng.com/grammar/basic.html

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,921评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,635评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,393评论 0赞 338
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,836评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,833评论 5赞 368
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,685评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,043评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,694评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 42,671评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,670评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,779评论 1赞 332
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,424评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,027评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,984评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,214评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,108评论 2赞 351
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,517评论 2赞 343

推荐阅读更多精彩内容

  • JavaScript程序
    第2章 基本语法 2.1 概述 基本句法和变量 语句 JavaScript程序的执行单位为行（line），也就是一...
    悟名先生阅读 4,114评论 0赞 13
  • JavaScript高级程序设计-笔记
    第3章 基本概念 3.1 语法 3.2 关键字和保留字 3.3 变量 3.4 数据类型 5种简单数据类型：Unde...
    RickCole阅读 5,096评论 0赞 21
  • 第5章 引用类型
    第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,211评论 0赞 4
  • 今天帮助了同班小伙伴
    今天找竹英买花，然后就开始了谈如何卖花的大计，恰巧她也想在肇大通上投广告，所以就帮她编辑了文案和做了图片。 虽然效...
    雯子_a642阅读 145评论 2赞 0