JavaScript进阶之路(二)——变量与基本数据类型

前言

JavaScript中的变量为松散类型,所谓松散类型就是指当一个变量被申明出来就可以保存任意类型的值,就是不像SQL一样申明某个键值为int就只能保存整型数值,申明varchar只能保存字符串。一个变量所保存值的类型也可以改变,这在JavaScript中是完全有效的,只是不推荐。相比较于将变量理解为“盒子“,《JavaScript编程精解》中提到应该将变量理解为“触手”,它不保存值,而是抓取值。这一点在当变量保存引用类型值时更加明显。

JavaScript中变量可能包含两种不同的数据类型的值:基本类型引用类型。基本类型是指简单的数据段,而引用类型指那些可能包含多个值的对象。本文主要介绍基本数据类型及其特点。

基本类型包括:NullUndefinedNumberStringBoolean。引用类型主要包括:ObjectArrayDateRegExpFunction

接下来主要介绍五种基本类型。引用类型本菜希望在以后的博文中与大家交流。

申明

JavaScript中申明变量通过var操作符,申明的变量会成为其所在作用域内的局部变量,意思就是在全局申明的变量就是通常所说的全局变量,在函数内申明的变量就是以该函数为作用域的局部变量,局部变量会在函数执行完毕后被销毁,未通过var操作符申明的变量会默认为全局变量。需要一次申明多个变量时可以通过单var操作符的方式,代码会更加简洁。

var name = ‘susan‘,
    age = ‘23‘,
    sex = ‘female‘;

typeof操作符

在介绍基本类型值之前,先说下typeof操作符,typeof操作符会返回数据类型的字符串表示。用它来检测基本数据类型比较有效率,而检测引用类型时通常用instanceof操作符。

typeof undefined; //undefined
typeof 2015; //number
typeof false; //boolean
typeof null; //object
typeof ‘abc‘; //string
typeof {a:1}; //object

这里有一点不同的是,typeof在对null进行检测时会返回字符串“object”,因为在JavaScript中null被当作空对象指针,这一点在Douglas的《JavaScript语言精粹》也被吐槽过,不过了解下就可以了。

Undefined类型

Undefined类型只有一个特殊值即undefiend。所有未初始化的变量均会保存该值。

var aa;
alert(aa); //undefined

这里要注意一点,undefined与未定义的变量不同,如果在代码中调用某个未定义(申明)的变量,解析器会提示如下信息。

意为这个变量没有被申明过,查找的方式是通过沿作用域链向上搜索,如果在全局环境中都没有找到该变量的申明则抛出错误,这部分内容本菜以后和大家讨论。

Null类型

Null类型同样也只包含一个值即null,从逻辑上看它被当作空对象指针,正是由于这个特性,如果你定义某个变量时不确定当前赋何值,但未来需要赋某个object类型值时,正确的方式就是将该变量初始化为null。

这里提一句,在对null与undefined进行==比较时,会返回true,据《JavaScript高级程序设计》说,undefined派生自null,所以ECMA-262规定它俩相等性操作为true。

Boolean类型

Boolean俗称布尔,仅包括两个值:true和false。这里有一个Boolean()转型函数,它可以对任意类型的值使用,作用就是将其它类型值转换为布尔型。转换规则主要如下。

String型:非空字符串-true,空字符串("")-false

Number型:任何非0数-true,0与NaN-false

Object型:任何对象-true,null-false

Undefined型:false

但并非使用该转型函数才会使数据类型转换,当遇到if语句时会对数据进行自动的类型转换。自动类型转换有其优点也有弊端,这里不再扩展。重要的是通过Boolean转型函数理解转换规则,以便在编码中使用。

这里举个非常简单的例子:在某个app中需要通过检测本地是否缓存了用户ID来判断需不需要登录操作。

if (!localStorage[‘memberId‘]) {
   //登陆操作
}

这里当本地没有用户ID时,localStorage值为undefined,转换后为false值,非运算后为true,执行登录操作。而不需要写成localStorage[‘memberId‘] === undefined等等。

Number类型

JavaScript中的Number类型支持十进制、八进制以及十六进制的数值。关于浮点型的数值这里有几点要注意,在JavaScript中,0.1与.1相同,但是这种省略的写法是不推荐的。由于保存浮点型所需的内存是整型的两倍,所以JavaScript会在适当的时候将不必要的浮点型转换为整型,比如浮点型的10.0会自动保存为整型的10。特别需要注意的一点是,浮点型运算精度远不如整型,例子如下:

console.log(0.1 + 0.2);

可以看到,运算并没有得到预期的结果,所以在实际运算中要注意这一点,同时这个例子也反映出了JavaScript中浮点型的最高精度即为显示的17位小数。过大或过小的数可以使用科学计数法e来表示,这一点就不再赘述。

Infinity

JavaScript能够保存的数值并不是无限大小的,当大于或小于某个界限时,该值会被自动转换为特殊值——Infinity,Infinity也包括正负两种。检测一个数值是否为Infinity可以通过isFinite()函数。

NaN

在Number类型中还有个很特殊的值,那就是NaN,即非数值(Not a Number)。这个特殊值的存在是为了避免在某些需要返回数值时因为运算问题未返回数值报错,影响程序运行。比如一个数除以0,在其他编程语言中会抛出错误,而在JavaScript中会返回NaN。

NaN有两个特点:1.任何涉及NaN的操作均会返回NaN,2.NaN不与任何值相等,包括他自己=.=,即做NaN == NaN的相等性验证时会返回false。

检测一个值是否为NaN可以用isNaN()函数,它会尝试将接收的参数转换为数值,意思就是字符串“10”可以被转换成数值10,而字符串“color”不行。转换成功返回false,反之为true。

数值转换

Number类型的数值转换方式可能通过三个函数:Number()parseInt()parseFloat()。由于Number()转换函数转换规则奇葩(复杂且不合理),所以这里主要介绍parseInt()与parseFloat()。

首先申明一点,parseInt()与parseFloat()函数是专门用于把字符串转换成数字的。这一点可能会导致困惑,明明是用来转换数值的,为什么要接收字符串。举个简单的例子,parseInt()在接收3.14这个浮点型数值时,会自动转换成该值的字符串表示——“3.14”,它会把3.14转换为3从逻辑上来看并不是它真的能对数值取整,而是在解析“3.14”这个字符串时遇到小数点“.”这个不能转换为数值的字符时会自动省略后面的东西。

有了以上的认识,我们来了解这两个函数具体的转换规则:

parseInt()函数在转换字符串时,会忽略前面的空格,直到找到第一个非空字符。如果第一个非空字符不是数字字符或者负号则返回NaN。如果第一个字符是数值字符会继续解析第二个,直到解析完整个字符串或者遇到了一个非数值字符(如上面3.14的例子)。

parseInt(""); //NaN
parseInt(3.14); //3
parseInt("4.12"); //4
parseInt("xyx123"); //NaN
parseInt("123xyx"); //123

parseInt()同样可以解析二进制、八进制与十六进制的数值,由于ECMAScript版本不同对非十进制数解析时会出现分歧,所以最好传入第二个参数作为基数。

parseInt(100111,2); //39
parseInt(123,8); //83
parseInt("0xBC",16); //188

与parseInt()函数类似,parseFloat()也是从第一个字符开始解析,直到字符串末尾或者遇到一个无效的浮点数字字符为止。比如,第一个小数点是有效的,第二个是无效的,因此后面的字符会被忽略。与parseInt()不同的是它始终会忽略开头的0,且不具备传入基数的能力,即只能解析十进制数值。

parseFloat("123xyx"); //123
parseFloat("xyx123"); //NaN
parseFloat("012.3"); //12.3
parseFloat("34.5"); //34.5
parseFloat("34.5.6"); //34.5

String类型

在JavaScript中字符串使用单、双引号没有区别,只是要注意起始与结束保持一致即可。JavaScript中也有转义字符,与其他语言基本一致,这里就不再赘述了。任何字符串都可以通过length属性来获取其长度。

var str = ‘Hello World‘;
alert(str.length); //11

这里简要说一个特点,ECMAScript中字符串一旦创建了就不能被改变,例如拼接某两个字符串,首先是创建一个新的字符串,将原有的字符串组合后装入其中,最后销毁原来的两个字符串。所以并不是像看上去那样进行简单的拼接。

字符串转换

要将一个值转换为字符串类型有两个方式:1.toString()方法,2.String()转型函数。这两个方法的区别就是null,undefined值没有toString()方法,而任何类型值都可以使用String()函数。

var num = 123;
num.toString(); //"123"
var boo = false;
boo.toString(); //"false"

多数情况下,调用toString()方法不必传递参数。当要确定输出数值的不同进制时,可以传入一个基数。

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

在不知道要转换的值是不是null或undefined时,可以使用String()方法。其规则为:如果该值有toString()方法则调用该方法,如果是null或undefined则返回其字符串表示.....好吧,总之用String()转型函数就不会错。

String(10); //"10"
String(true); //"true"
String(null); //"null"
String(undefined); //"undefined"

感谢您的浏览,希望能有所帮助。

时间: 2024-12-23 01:26:49

JavaScript进阶之路(二)——变量与基本数据类型的相关文章

JavaScript进阶之路(一)——历史与简介

上一篇博文距离现在已经四个月了,一直想写些什么无奈工作比较忙碌.我的恩师老王在毕业聚餐那天带着一声酒气告诉我一定要把博客坚持写下去,所以今天下决心要开始这个新的篇章. 之所以想要从头写一个关于JavaScript的系列是由于以下几个原因: 1.JavaScript是Web程序员的核心技术 2.很多人会使用JQuery写不错的特效却对JS中的继承.原型了解不多,本文旨在让本菜和大家一起提升“内力”,毕竟内力深厚了将来的武功造诣才会高 3.本菜在写博文的同时会不断的学习JS中不了解的东西,与大家一同

Javascript进阶之路-论对象的重要性

要了解JavaScript对象,我们可以从对象创建.属性操作.对象方法这几个方面入手.概括起来,包括以下几模块: 1.创建对象        1.1 对象直接量        1.2 通过new创建对象        1.3 Object.create    2.属性管理        2.1 属性查询和设置        2.2 删除属性        2.3 检测属性        2.4 枚举属性    3.属性封装        3.1 属性getter和setter        3.

JavaScript进阶之路——认识和使用Promise,重构你的Js代码

一转眼,这2015年上半年就过去了,差不多一个月没有写博客了,"罪过罪过"啊~~.进入了七月份,也就意味着我们上半年苦逼的单身生活结束了,从此刻起,我们要打起十二分的精神,开始下半年的单身生活.大家一起加油~~ 一直以来,JavaScript处理异步都是以callback的方式,在前端开发领域callback机制几乎深入人心.在设计API的时候,不管是浏览器厂商还是SDK开发商亦或是各种类库的作者,基本上都已经遵循着callback的套路.近几年随着JavaScript开发模式的逐渐成

【python3的进阶之路二】因特网客户端编程

一.文件传输 1.1 文件传输因特网协议 最流行的协议包括文件传输协议(FTP).UNIX到UNIX复制协议(UUCP).用于Web的超文本传输协议(HTTP).另外,还有(UNIX下的)远程文件复制命令rcp(以及更安全.灵活的scp和rsync). HTTP主要用于基于Web的文件下载以及访问Web服务,一般客户端无须登录就可以访问服务器上的文件和服务.大部分HTTP文件传输请求都用于获取网页(即将网页文件下载到本地). 而scp和rsync需要用户登录到服务器主机.在传输文件之前必须验证客

林大妈的JavaScript进阶知识(二):JS异步行为

JavaScript 是单线程执行的 JavaScript运行在浏览器中.浏览器是多线程的,但只分配了其中一条给JavaScript,作为它的主线程.对于编码者来说,JavaScript是单线程的.因此JavaScript中存在以下几种异步行为: 事件绑定(addEventListener) 定时器(setTimeout.setInterval) AJAX(axios).fetch 所有跟Promise的resolve.reject相关的行为(generator.async/await) Jav

【SSH进阶之路】Hiberante3搭建开发环境+简单实例(二)

Hibernate是非常典型的持久层框架,持久化的思想是非常值得我们学习和研究的.这篇博文,我们主要以实例的形式学习Hibernate,不深究Hibernate的思想和原理,否则,一味追求,苦学思想和原理,到最后可能什么也学不会,从实践入手,熟能生巧,思想和原理自然而然领悟. 上篇博文:[SSH进阶之路]Hibernate基本原理,我们介绍了Hibernate的基本概念.Hibernate的核心以及Hibernate的执行原理,可以很好帮助我们认识Hibernate,再看这篇博客之前,请先回顾上

从头开始学JavaScript (二)——变量及其作用域

原文:从头开始学JavaScript (二)--变量及其作用域 一.变量 ECMAscript变量是松散型变量,所谓松散型变量,就是变量名称可以保存任何类型的数据,每个变量仅仅是一个用于保存值的占位符. 定义:var firstDemo; 二.变量的作用域 2.1基本概念 使用var 定义变量:定义该变量的作用域的局部变量,这种定义变量的方法也被成为显式声明. 这么说不理解的话可以看看下面这个简单粗暴的例子: test();function test(){var firstDemo="hello

【SSH进阶之路】Spring的IOC逐层深入——为什么要使用IOC[实例讲解](二)

上篇博客[SSH进阶之路]Spring简介,搭建Spring环境--轻量级容器框架(一),我们简单的介绍了Spring的基本概念,并且搭建了两个版本的Spring开发环境,但是我们剩下了Spring最核心的两大技术:IoC和AOP,没有深入介绍.从这篇博文开始,我们开始一一的深入学习Spring的两个核心.Spring目前最引人注目的地方,就是IOC=Inversion  Of Control(控制反转)或者DI=Dependence  Injection(依赖注入)的设计思想. 这篇博客我们使

JavaScript基本概念(二)--- 变量

变量 1. 变量定义 Javascript中使用var来定义变量,具体格式如下所示: var  name = 1; 如果只声明了变量而没有对变量进行初始化,那么此时变量的值就是undefined;(为什么是undefined请看变量第三节) 当然,也可以一次定义多个变量,如下所示: var a1 = 1, a2 = true, a3 = “张三”; 由于javascript中的变量是松散类型的,也就是我们所说的弱类型的变量,因此不同类型的初始化的变量可以放在一行进行: 在javascript中定