[TOC]
* * * * *
# JavaScript数据类型
计算机顾名思义就是可以做数学计算的机器,因此,计算机程序理所当然地可以处理各种数值。但是,计算机能处理的远不止数值,还可以处理文本、图形、音频、视频、网页等各种各样的数据,不同的数据,需要定义不同的数据类型。在JavaScript中定义了以下几种数据类型:字符串(String)、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空(Null)、未定义(Undefined)。
### 字符串(String)
字符串是存储字符(比如 "Bill Gates")的变量。
字符串可以是引号中的任意文本。您可以使用单引号或双引号:
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var a="hello world";//有引号 字符串
var b="123";//有引号 字符串
var c=" ";//有引号 字符串
var d="false";//有引号 字符串
console.log(typeof a);
console.log(typeof b);
console.log(typeof c);
console.log(typeof d);
</script>
</head>
<body>
</body>
</html>
~~~
![](https://box.kancloud.cn/b81b0946d88a276ab90c06a21a9bf215_92x116.png)
您可以在字符串中使用引号,只要不匹配包围字符串的引号即可:
~~~
var answer="It's alright";
var answer="He is called 'Johnny'";
var answer='He is called "Johnny"';
~~~
**连字符和加号(重点)**
键盘上+在JS中有两层含义:
1) 连字符
2) 加
~~~
<script type="text/javascript">
console.log("1" + "2"); //字符串与字符串的连字,所以输出12
console.log(1 + 2); //加号两边都是数字,所以相加,输出3
console.log(1 + "2"); //加号两边出现了字符串,所以就是连字符,输出12
console.log("1" + 2); //加号两边出现了字符串,所以就是连字符,输出12
console.log("1" + " " + "2"); //三个字符串拼接,输出1 2
console.log("1" + "" + "2"); //三个字符串拼接,但是第二个是空字符串,输出12
</script>
~~~
~~~
console.log("我" + "爱" + "你"); //连字符,把三个独立的汉字,连接在一起了console.log("我+爱+你"); //原样输出
console.log(1+2+3); //输出6
~~~
![](https://box.kancloud.cn/90b8b017b3020b98937c827279c69e84_98x81.png)
同样是加号,有时候表示的是连字符,有时候表示的是加号。什么时候是连字符?什么时候是加呢?
如果加号两边都是数值,此时是加。否则,就是连字符。
~~~
<script type="text/javascript">
var a = "1";
var b = 2;
console.log(a + b);
</script>
~~~
![](https://box.kancloud.cn/81c1b5df8d4d57b1cd0e27b9cbe9a698_110x60.png)
~~~
var a = 1; //数字
var b = 2; //数字
console.log(a + b);
~~~
![](https://box.kancloud.cn/29946df68fbb45f2dc31d86ff6567b2f_74x48.png)
~~~
var a = 234234;
var b = 234323112;
console.log("a+b"); //由于加上了引号,所以就表示原样输出
~~~
![](https://box.kancloud.cn/b7d1909943bf2c3de5190c03ff079092_85x63.png)
~~~
var a = 1;
var b = 2;
console.log("a" + b); //"a"就不是变量了!所以就是"a"+2 输出a2
~~~
![](https://box.kancloud.cn/6b2f167a8f5fe0e9edb9e56710cb2edd_75x53.png)
~~~
var a = 123;
var b = "123";
console.log(a + "b");
~~~
![](https://box.kancloud.cn/033a849e96dc49a28e705040b073e8ec_97x63.png)
**JavaScript转义字符**
在我们写JAVAScript脚本时,可能会要HTML文档显示或使用某些特殊字符(例如:引号或斜线)。(例如:<img src="image5.jpg">)但是前面提过,声明一个字符串时,前后必须以引号括起来。如此一来,字符串当中引号可能会和标示字符串的引号搞混了,此时就要使用转义字符(Escape Character)。
| 代码 |输出 |
| --- | --- |
| \' | 单引号 |
| \" |双引号 |
| \& |和号 |
| \\ | 反斜杠 |
| \n | 换行符 |
|\r | 回车符 |
| \t | 制表符 |
| \b | 退格符 |
| \f | 换页符 |
~~~
document.write ("You \& me are singing!")
~~~
输出:You & me are singing!
### 数字(Number)
如果一个变量中,存放了数字,那么这个变量就是数值型的。
JavaScript种,只要是个数,那么就是数值型的,无论整浮、无论大小、无论正负,都是number类型的。
“浮”就是浮点数,就是“小数”,术语叫做“浮点数”。
~~~
<script type="text/javascript">
var a = 100; //类型都是number
var b = 234234234324324324; //类型都是number
var c = 3.234234234324324; //类型都是number
var d = -23423432432432432; //类型都是number
var e = -34.3423423432; //类型都是number
var f = 0.324234234; //类型都是number
console.log(typeof a); // number
console.log(typeof b); // number
console.log(typeof c); // number
console.log(typeof d); // number
console.log(typeof e); // number
console.log(typeof f); // number
</script>
~~~
数字类型的取值范围:
◆ 能表示的最大值是±1.7976931348623157乘以10的308次方
◆ 能表示的最小值是±5 乘以10的-324次方
数字类型的表示方式:
◆十进制表示法
◆十六进制表示法
以0x开头 数字0-9 和 a(A)-f(F)
◆八进制表示法
以数字0开头 0-7之间的组合。
![](https://box.kancloud.cn/94982a501246a533c81672340e324b7e_417x156.png)
除常用数值外,javascript还支持以下两个数值
**Infinity:**当在javascript中使用的数字大于javascript所能表示的最大值时,
javascript就会将其输出为Infinity,即无穷大的意思.
当在javascript中使用的数字小于javascript所能表示的最小值时,
javascript就会将其输出为-Infinity,即无穷小的意思.
**NaN:**javascript中的NaN是"not a number"(不是数字)的意思.如果在数字运算是产生了未知的结果或错误,
javascript就会返回NaN,这代表着数字运算的结果是一个非数字的特殊情况.
NaN是一个很特殊的数字,不会与任何数字相等,包括NaN,
在javascript中只能使用isNaN()函数来判断运算结果是不是NaN.
### 布尔(Boolean)
数值型里面的值,有无穷多个,因为世界上所有的数字,都是数值型;
字符串型的值,有无穷多个,因为世界上所有的文字、语句都是字符串型;
布尔类型的值,就两个,true、false。
~~~
<script type="text/javascript">
var a = true; //真
var b = false; //假
console.log(a); //输出
console.log(b); //输出
console.log(typeof a); //输出类型
console.log(typeof b); //输出类型
var c = "true";
var d = "false";
console.log(c);
console.log(d);
console.log(typeof c);
console.log(typeof d);
</script>
~~~
false、undefined 、null、0、”” 为 false
true、1、”somestring”、[Object] 为 true
### 数组(Array)
数组是编程的基础部分。一个数组就是一系列数据。我们可以储存许多数据在一个变量中,这提高了代码可读性,让人更好理解代码。这使相关数据传递到函数中执行更简单。
数组中数据称为 元素。
这是一个简单的数组:
~~~
// 1, 1, 2, 3, 5 和 8 是数组中的元素
var numbers = [1, 1, 2, 3, 5, 8];
~~~
~~~
<script type="text/javascript">
var myarr=new Array(1,2,3);
console.log(typeof(myarr));
var cars=new Array();
cars[0]="Audi";
cars[1]="BMW";
cars[2]="Volvo";
console.log(typeof(cars));
</script>
~~~
数组下标是基于零的,所以第一个项目是 [0],第二个是 [1],以此类推。
### 对象(Object)
对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔:
~~~
var person={firstname:"John", lastname:"Doe", id:5566};
~~~
上面例子中的对象 (person) 有三个属性:firstname、lastname 以及 id。
空格和折行无关紧要。声明可横跨多行:
~~~
var person={
firstname : "John",
lastname : "Doe",
id : 5566
};
~~~
对象属性有两种寻址方式:
~~~
name=person.lastname;
name=person["lastname"];
~~~
JavaScript的内置对象:
~~~
<script type="text/javascript">
var mydate=new Date();
console.log(typeof(mydate));
</script>
~~~
### 空(Null)与未定义(Undefined)
Undefined 这个值表示变量不含有值。
可以通过将变量的值设置为 null 来清空变量。
~~~
cars=null;
person=null;
~~~
~~~
<script type="text/javascript">
var a; //undefined未定义类型
var b=null;//空类型 object //在内存中不存在这个值
var c=""; //string 字符串类型 //特殊的空 但内存中是存在的
console.log(typeof(a));
console.log(typeof(b));
console.log(typeof(c));
/*
null与undefined的区别是,
null表示一个变量被赋予了一个空值,
而undefined则表示该变量尚未被赋值。
*/
/*
这里必须要注意的是:
null不等同于空的字符串("")或0。
*/
</script>
~~~
- 前言
- 走进前端工程师的世界
- 前端知识图谱
- 前端学习方法
- 计算机基础知识
- 写一封信给4个月后的自己
- Github的使用
- 网页基础知识
- 2.1认识网页
- 2.2网页相关名词
- 2.3Web标准
- 2.4开发环境配置
- 2.4.1Hbuilder使用技巧
- 2.4.2SublineText使用技巧
- 大前端必会的PS技巧
- HTML
- 网页制作入门
- CSS
- HTML+CSS整站开发
- HTML5
- HTML5 概述
- HTML5 语法
- HTML5 属性
- HTML5 事件
- HTML5 浏览器支持
- HTML5 新元素
- HTML5 Video(视频)
- HTML5 Audio(音频)
- HTML5 Input类型
- HTML5 表单元素
- HTML5 语义元素
- HTML5 表单属性
- CSS3
- CSS3 介绍
- CSS3 选择器
- 基本选择符
- 关系选择符
- 属性选择符
- 伪类选择符
- 伪对象选择符
- CSS3 边框
- CSS3 圆角
- CSS3 背景
- CSS3 渐变
- CSS3 文本效果
- CSS3 字体
- CSS3 2D转换
- CSS3 3D转换
- CSS3 过渡
- CSS3 动画
- CSS3 多列
- CSS3 用户界面
- CSS3 图片
- CSS3 按钮
- CSS3 分页
- CSS3 框大小
- CSS3 弹性盒子
- CSS3 颜色
- CSS3 多媒体查询
- 附录1
- HTML5+CSS3整站开发
- 前端开发规范
- 规范目的
- 命名规则
- HTML开发规范
- CSS开发规范
- SCSS开发规范
- JavaScript开发规范
- JavaScript基础
- JavaScript简介
- JavaScript的发展历史
- JavaScript是前台语言
- 用法
- 认识语句和符号
- JavaScript输出
- JavaScript注释
- 体验js输出
- JavaScript 变量
- JavaScript 数据类型
- JavaScript数据类型的转换
- JavaScript运算符
- JavaScript流程控制语句
- 前端库
- 百度静态资源公共库
- 前端资源
- 学习网站类