JavaScript基础-CSDN博客
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |
JavaScript是一种轻量级、解释型的Web开发语言获得了所有浏览器的支持是目前广泛使用的编程语言之一。本章将简要介绍JavaScript基本语法和用法。
1、编写JavaScript脚本
在HTML页面中嵌入JavaScript脚本需要使用<script>标签在<script>标签中可以直接编写JavaScript代码也可以编写单独的JavaScript文件然后通过<script>标签导入HTML文档。
1.1、设计第一个脚本程序
使用
【示例1】直接在页面中嵌入JavaScript代码。
第1步新建HTML文档保存为test.html然后在<head>标签内插入<script>标签。
第2步为<script>标签指定type属性值为“text/javascript”。现代浏览器默认<script>标签的类型为JavaScript脚本因此可以省略type属性。
第3步直接在
<!doctype html>
<html>
<meta charset="utf-8">
<title>test</title>
<script type="text/javascript">
function hi(){
document.write("<h1>Hello,World!</h1>");
}
hi();
</script>
上面JavaScript脚本先定义了一个hi()函数该函数被调用后会在页面显示字符“Hello,World!”。document表示DOM网页文档对象document.write()表示调用Document对象的write()方法在当前网页源代码中写入HTML字符串“<h1>Hello,World!</h1>”。
调用hi()函数浏览器将在页面中显示一级标题字符“Hello,World!”。
第4步保存网页文档在浏览器中预览显示效果如下图所示
【示例2】包含外部JavaScript文件。
第1步新建文本文件保存为test.js。注意扩展名为.js它表示该文本文件是JavaScript类型的文件。
第2步打开test.js文本文件在其中编写下面代码定义简单的输出函数。
function hi(){
alert("Hello,World!");
}
在上面代码中alert()表示Window对象的方法调用该方法将弹出一个提示对话框显示参数字符串“Hello,World!”。
第3步保存JavaScript文件注意与网页文件的位置关系。这里保存JavaScript文件位置与调用该文件的网页文件位于相同目录下。
第4步新建HTML文档保存为test1.html。在标签内插入一个
<script type="text/javascript" src="test.js"></script>
第5步在
<!doctype html>
<html>
<meta charset="utf-8">
<title>test</title>
<script type="text/javascript" src="test.js"></script>
<script type="text/javascript">
hi(); //调用外部JavaScript文件的函数
</script>
第6步保存网页文档在浏览器中预览
1.2、脚本位置
所有<script>标签都会按照它们在HTML中出现的先后顺序依次被浏览器解析。在不使用<script>标签的defer和async属性的情况下只有在解析完前面<script>标签中的代码之后才会开始解析后面的代码。
【示例1】在默认情况下所有
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script type="text/javascript" src="test.js"></script>
<script type="text/javascript">
hi();
</script>
</head>
<body>
<!-- 网页内容 -->
</body>
</html>
这样就可以把所有外部文件包括CSS文件和JavaScript文件的引用都放在相同的地方。但是在文档的<head>标签中包含所有JavaScript文件这意味着必须等到全部JavaScript代码都被下载、解析和执行完成以后才能开始呈现页面的内容。如果页面需要很多JavaScript代码这样无疑会导致浏览器在呈现页面时出现明显的延迟而延迟期间的浏览器窗口中将是一片空白。
【示例2】为了避免延迟问题现代Web应用程序一般都把全部JavaScript引用放在<body>标签中页面的内容后面
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<!-- 网页内容 -->
<<title>test</title>
<script type="text/javascript" src="test.js"></script>
<script type="text/javascript">
hi();
</script>
/body>
</html>
</html>
这样在解析包含的JavaScript代码之前页面的内容将完全呈现在浏览器中同时会感到打开页面的速度加快了。
1.3、JavaScript脚本基本规范
编写正确的JavaScript脚本需要掌握最基本的语法规范下面简单了解一下。
1、字符编码
JavaScript遵循Unicode字符编码规则。Unicode字符集中每个字符使用两个字节表示这意味着用户可以使用中文命名JavaScript变量。
注意在JavaScript第1、第2版本中仅支持ASCII字符编码Unicode字符只能出现在注释或者引号包含的字符串中。考虑到JavaScript版本的兼容性以及开发习惯不建议使用双字节的中文字符命名变量或函数名。
2、区分大小写
JavaScript严格区分大小写。为了避免输入混乱和语法错误建议采用小写字符编写代码。在特殊情况下才可以使用大写形式。
3、标识符
标识符(identifier)就是名称的专业术语JavaScript标识符包括变量、函数、参数和属性等。合法的标识符必须遵守如下规则:
- 第一个字符必须是字母、下画线(_)或美元符号($)。
- 除了第一个字符外其他位置可以使用Unicode字符。一般建议仅使用ASCII编码的字母不建议使用双字节的字符。
- 不能与JavaScript关键字、保留字重名。
- 可以使用Unicode转义序列。例如字符a可以使用“\u0061”表示。
【示例】定义变量a使用Unicode转义序列表示变量名。
var \u0061 = "字符a的Unicode转义序列是\\u0061";
console.log(\u0061);
4、直接量
直接量(literal)就是具体的值即能够直接参与运算或显示。例如字符串、数值、布尔值、正则表达式、对象直接量、数组直接量、函数直接量等。
5、关键字和保留字
关键字就是ECMA-262规定JavaScript语言内部使用的一组名称或命令这些名称具有特定的用途用户不能够自定义同名的标识符具体关键字如下表所示
保留字就是ECMA-262规定JavaScript语言内部预备使用的一组名称或命令这些名称目前还没有具体的用途但是为JavaScript升级版本预留备用。建议用户不要使用具体保留字如下表所示
6、分隔符
分隔符就是各种不可见的字符例如空格(\u0020)、水平制表符(\u0009)、垂直制表符(\u000B)、换页符(\u000C)、不中断空白(\u00A0)、字节序标记(\uFEFF)、换行符(\u000A)、回车符(\u000D)、行分隔符(\u2028)、段分隔符(\u2029)等。
在JavaScript中分隔符不被解析主要用来分隔各种记号如标识符、关键字、直接量等信息。在JavaScript脚本中常用分隔符格式化代码以方便阅读代码。
7、注释
注释就是不被解析的一串字符。JavaScript注释有两种方法
- 单行注释//单行注释信息。
- 多行注释/多行注释信息/。
【示例1】把位于“//”字符后一行内的所有字符视为单行注释信息。下面几条注释语句可以位于代码段的不同位置分别描述不同区域代码的功能。
//程序描述
function toStr(a){ //块描述
//代码段描述
return a.toString(); //语句描述
}
使用单行注释时在“//”后面的行内任何字符或代码都被忽视不再解析。
【示例2】使用“/”和“/”可以定义多行注释信息。
/*!
* jQuery JavaScript Library v3.3.1
* https://jquery.com/
*/
在多行注释中包含在“/”和“/”符号之间的任何字符都被视为注释文本而忽略。
8、转义序列
转义序列就是字符的一种表示方式映射。由于各种原因很多字符都无法直接在代码中输入或输出只能通过转义序列间接表示。
Unicode转义序列方法\u + 4位十六进制数字。
Latin-1转义序列方法\x + 2位十六进制数字。
【示例】字符“©”的Unicode转义为\u00A9ASCII转义为\xA9。
console.log("\xa9"); //显示字符?
console.log("\u00a9"); //显示字符?
提示在后面字符串章节中还会详细讲解转义字符这里仅简单了解一下。
2、变量
2.1、声明变量
在JavaScript中使用var语句可以声明变量。
【示例1】在一个var语句中可以声明一个或多个变量也可以为变量赋值。未赋值的变量初始为undefined。当声明多个变量时应使用逗号运算符进行分隔。
var a; //声明一个变量
var a, b, c; //声明多个变量
var b = 1; //声明并赋值
console.log(a); //返回undefined
console.log(b); //返回1
注意在非严格模式下JavaScript允许不声明就直接为变量赋值这是因为JavaScript解释器能够自动隐式声明变量。隐式声明的变量总是作为全局变量使用。在严格模式下变量必须先声明然后才能使用。
ECMAScript 6(ECMAScript 2015)新增两个重要的关键字let和const。
- let声明的变量只在let命令所在的代码块内有效。
- const声明只读的常量一旦声明常量的值就不能改变。ECMAScript 6新增块级作用域之前只有全局作用域和函数内的局部作用域。使用var关键字声明的变量不具备块级作用域的特性使用let关键字可以实现块级作用域。
【示例2】let声明的变量只在所属的代码块({})内有效在{}之外不能访问
var i = 5;
for (let i = 0; i < 10; i++) {
console.log(i);
}
console.log(i); //i为5
如果for (let i = 0; i < 10; i++)改为for (var i = 0;i < 10; i++)则console.log(i);将输出10因为可以访问循环体内变量i的值。
注意JaraScript中的变量声明需要注意以下几点。
- 使用var关键字声明的变量在任何地方都可以修改。
- 在相同的作用域或块级作用域中不能使用let关键字重置var或let关键字声明的变量也不能使用var关键字重置let关键字声明的变量。
- 在不同作用域或块级作用域中let关键字可以重新声明、赋值变量。
- var关键字定义的变量可以先使用再声明JavaScript变量提升但是let关键字定义的变量必须先声明再使用。
提示使用const定义常量与使用let定义变量的相似点都是块级作用域都不能在相同作用域内重复声明即在同一个作用域内不能拥有相同的名称。两者的区别const声明的常量必须初始化而let声明的变量不需要const定义常量的值不能通过再赋值修改也不能再次声明而let定义的变量值可以修改。
2.2、赋值变量
使用等号(=)运算符可以为变量赋值等号左侧为变量右侧为被赋的值。
【示例】变量提升现象。JavaScript在预编译期会先预处理声明的变量但是变量的赋值操作发生在JavaScript执行期而不是预编译期。
console.log( a ); //显示undefined
a =1;
console.log( a ); //显示1
var a;
在上面示例中声明变量放在最后赋值操作放在前面由于JavaScript在预编译期已经对变量声明语句进行了预解析所以第一行代码读取变量值时不会抛出异常而是返回未初始化的值undefined。第三行代码是在赋值操作之后读取则显示为数字1。
3、数据类型
3.1、基本类型
JavaScript定义了6种基本数据类型如下表所示
使用typeof运算符可以检测上述6种基本数据类型。
【示例】下面代码使用typeof运算符分别检测常用值的类型
console.log(typeof 1); //返回字符串"number"
console.log(typeof "1"); //返回字符串"string"
console.log(typeof true); //返回字符串"boolean"
console.log(typeof {}); //返回字符串"object"
console.log(typeof []); //返回字符串"object "
console.log(typeof function(){}); //返回字符串"function"
console.log(typeof null); //返回字符串"object"
console.log(typeof undefined); //返回字符串"undefined"
3.2、数字
数字(Number)也称为数值或数。
1.数值直接量
在JavaScript程序中直接输入的任何数字都被视为数值直接量。
【示例1】数值直接量可以细分为整型直接量和浮点型直接量。浮点数就是带有小数点的数值而整数是不带小数点的数
var int = 1; //整型数值
var float = 1.0; //浮点型数值
整数一般都是32位数值而浮点数一般都是64位数值。
【示例2】浮点数可以使用科学计数法表示
var float = 1.2e3;
其中e或E表示底数其值为10而e后面跟随的是10的指数。指数是一个整型数值可以取正负值。上面代码等价于
var float = 1.2*10*10*10;
var float = 1200;
【示例3】科学计数法表示的浮点数可以转换为普通的浮点数。
var float = 1.2e-3;
等价于
var float = 0.0012;
但不等于
var float = 1.2*1/10*1/10*1/10; //返回0.0012000000000000001
var float = 1.2/10/10/10; //返回0.0012000000000000001
2.二进制、八进制和十六进制数值
JavaScript支持把十进制数值转换为二进制、八进制和十六进制等不同进制的数值。
【示例4】十六进制数以“0X”或“0x”作为前缀后面跟随十六进制的数值直接量。
var num = 0x1F4; //十六进制数值
console.log(num); //返回500
十六进制的数是由09和af的数字或字母任意组合用来表示015的某个数字。
提示在JavaScript中可以使用toString(16)方法把十进制整数转换为十六进制字符串的形式表示。
【示例5】八进制数值以数字0为前缀其后跟随一个八进制的数值直接量。
var num = 0764; //八进制数值
console.log(num); //返回500
提示八进制或十六进制的数值在参与数学运算之后返回的都是十进制数值。
二进制数值以“0b”或“0B”作为前缀后面跟随二进制的数值直接量。例如
0b11 //等于十进制的3
注意各主流浏览器对二进制数值的表示方法支持不是很统一应慎重使用。
3.特殊数值
JavaScript定义了几个特殊的数值常量说明如下表所示
4.NaN
NaNNot a Number非数字值是在IEEE 754中定义的一个特殊的数值。
typeof NaN === 'number' //true
当试图将非数字形式的字符串转换为数字时都会生成NaN。
+ '0' //0
+ 'oops' //NaN
当NaN参与数学运算时则运算结果也是NaN。因此如果表达式的运算值为NaN那么可以推断其中至少一个运算数是NaN。
typeof不能分辨数字和NaN并且NaN不等同于它自己。
使用isNaN()全局函数可以判断NaN。
isNaN(NaN) //true
isNaN(0) //false
isNaN('oops') //true
isNaN('0') //false
使用isFinite()全局函数可以判断NaN和Infinity。因此可以使用它检测NaN、正负无穷大。如果是有限数值或者可以转换为有限数值那么将返回true。如果只是NaN、正负无穷大的数值则返回false。
【示例6】isFinite()会试图把检测的值转换为一个数字。如果值不是一个数字那么使用isFinite()直接检测就不是有效的方法通过自定义isNumber函数可以避免isFinite()的缺陷。下面自定义函数先判断值是否为数值类型如果是数值类型再使用isFinite()过滤出有效数字。
var isNumber = function isNumber(value) {
return typeof value === 'number' && isFinite(value);
}
3.3、字符串
JavaScript字符串(String)就是由0个或多个字符组成的字符序列。0个字符表示空字符串。
1.字符串直接量
字符串必须包含在单引号或双引号中。字符串直接量有如下几个特点:
1如果字符串包含在双引号中则字符串内可以包含单引号反之可以在单引号中包含双引号。例如定义HTML字符串时习惯使用单引号表示字符串HTML中包含的属性值使用双引号表示这样不容易出现错误。
console.log('<meta charset="utf-8">');
2在ECMAScript 3中字符串必须在一行内表示换行表示是不允许的。例如下面字符串直接量的写法是错误的。
console.log("字符串
直接量"); //抛出异常
如果要换行显示字符串可以在字符串中添加换行符(\n)。例如
console.log("字符串\n直接量"); //在字符串中添加换行符
3在ECMAScript 5中字符串允许多行表示。实现方法在换行结尾处添加反斜杠(\)。反斜杠和换行符不作为字符串直接量的内容。例如
console.log("字符串\
直接量"); //显示"字符串直接量"
4在字符串中插入特殊字符需要使用转义字符如单引号、双引号等。例如英文中常用单引号表示撇号此时如果使用单引号定义字符串就应该添加反斜杠转义字符单引号就不再被解析为字符串标识符而是作为撇号使用。
console.log('I can\'t read.'); //显示"I can't read."
5字符串中每个字符都有固定的位置。第1个字符的下标位置为0第2个字符的下标位置为1以此类推。最后一个字符的下标位置是字符串长度减1。
2.转义字符
转义字符是字符的一种间接表示方式。在特殊语境中无法直接使用字符自身。例如在字符串中包含说话内容
"子曰:"学而不思则罔思而不学则殆。""
由于JavaScript已经赋予双引号为字符串直接量的标识符如果在字符串中包含双引号就必须使用转义字符表示
"子曰:\"学而不思则罔思而不学则殆。\""
JavaScript定义反斜杠加上字符可以表示字符自身。注意一些字符加上反斜杠后会表示特殊字符而不是原字符本身这些特殊转义字符具体说明如下表所示
提示在一个正常字符前添加反斜杠时JavaScript会忽略该反斜杠。例如
console.log("子曰:\"学\而\不\思\则\罔\\思\而\不\学\则\殆\。\"")
3.4、布尔值
布尔型(Boolean)仅包含两个固定的值true和false其中true代表“真”而false代表“假”。
注意在JavaScript中undefined、null、“”、0、NaN和false 6个特殊值转换为布尔值时为false称为假值。除了假值之外其他任何类型的数据转换为布尔值时都是true。
【示例】使用Boolean()函数可以强制转换值为布尔值
console.log(Boolean(0)); //返回false
console.log(Boolean("")); //返回false
3.5、null
Null类型只有一个值即null它表示空值定义一个空对象指针。
使用typeof运算符检测null值返回Object表明它属于对象类型但是JavaScript把它归为一类特殊的值。
设置变量的初始化值为null可以定义一个备用的空对象即特殊的对象值或称为非对象。例如如果检测一个对象为空则可以对其进行初始化。
if( men == null) {
men = {
//初始化对象men
}
}
3.6、undefined
undefined是Undefined类型的唯一值它表示未定义的值。当声明变量未赋值时或者定义属性未设置值时默认值都为undefined。
【示例1】undefined派生自nullnull和undefined都表示空缺的值转化为布尔值都是假值可以相等:
console.log(null == undefined); //返回true
null和undefined属于两种不同类型使用全等运算符(===)或typeof运算符可以进行检测:
console.log(null === undefined); //返回false
console.log(typeof null); //返回"object"
console.log(typeof undefined); //返回"undefined "
【示例2】检测一个变量是否初始化可以使用undefined快速检测:
var a; //声明变量
console.log(a); //返回变量默认值为undefined
(a == undefined) && (a = 0); //检测变量是否初始化否则为其赋值
console.log(a); //返回初始值0
也可以使用typeof运算符检测变量的类型是否为undefined:
(typeof a == "undefined") && (a = 0); //检测变量是否初始化否则为其赋值
提示undefined隐含意外的空值而null隐含意料之中的空值。因此设置一个变量当参数为空值时建议使用null而不是使用undefined。
4、类型检测
使用typeof运算符可以检测基本数据类型本节再介绍两种更实用的方法。
4.1、使用constructor
constructor是Object类型的原型属性它能够返回当前对象的构造器类型函数。利用该属性可以检测复合型数据的类型如对象、数组和函数等。
【示例】检测对象和数组的类型常用于区分对象和数组
var o = {};
var a = [];
if(o.constructor == Object) console.log("o是对象");
if(a.constructor == Array) console.log("a是数组");
4.2、使用toString
toString是Object类型的原型方法它能够返回当前对象的字符串表示。利用该属性可以检测任意类型的数据如对象、数组、函数、正则表达式、错误对象、宿主对象、自定义类型对象等也可以对值类型数据进行检测。
【示例】在对象上动态调用Object的原型方法toString()就会返回统一格式的字符串表示然后通过这些不同的字符串表示可以确定数据的类型
var _toString = Object.prototype.toString; //引用Object的原型方法toString()
//使用apply方法在对象上动态调用Object的原型方法toString()
console.log( _toString.apply( o ) ); //表示为"[object Object]"
console.log( _toString.apply( a ) ); //表示为"[object Array]"
console.log( _toString.apply( f ) ); //表示为"[object Function]"
5、类型转换
JavaScript能够根据运算环境自动转换值的类型以满足运算需要。但是在很多情况下需要开发者手动转换数据类型以控制运算过程。
5.1、转换为字符串
把值转换为字符串有两种常用方法。
1.使用加号运算符
当值与空字符串相加运算时JavaScript会自动把值转换为字符串。
var n = 123;
n = n + "";
console.log(typeof n); //返回类型为string
2.使用toString()方法
当为简单的值调用toString()方法时JavaScript会自动把它们封装为对象。然后再调用toString()方法以获取对象的字符串表示
var a = 123456;
a.toString();
console.log(a); //返回字符串"123456"
使用加号运算符转换字符串实际上也是调用toString()方法完成。只不过是JavaScript自动调用toString()方法实现的。
5.2、转换为数字
把值转换为数字有3种常用方法。
1.使用parseInt()
parseInt()是一个全局函数它可以把值转换为整数。
【示例】把十六进制数字字符串“123abc”转换为十进制整数
var a = "123abc";
console.log(parseInt(a,16)); //返回十进制整数1194684
2.使用parseFloat()
parseFloat()是一个全局函数它可以把值转换为浮点数即它能够识别第一个出现的小数点号而第二个小数点号被视为非法。解析过程与parseInt()方法相同。
console.log(parseFloat("1.234.5")); //返回数值1.234
3.使用乘号运算符
如果变量乘以1则变量会被JavaScript自动转换为数值。乘以1之后结果没有发生变化但是值的类型被转换为数值。如果值无法被转换为合法的数值则返回NaN。
var a = 1; //数值
var b = "1"; //数字字符串
console.log(a + (b * 1)); //返回数值2
5.3、转换为布尔值
把值转换为布尔值有两种常用方法。
1.使用双重逻辑非
一个逻辑非运算符(!)可以把值转换为布尔值并取反两个逻辑非运算符就可以把值转换为正确的布尔值。
console.log( !!0 ); //返回false
console.log( !!1 ); //返回true
2.使用Boolean()函数
使用Boolean()函数可以强制地把值转换为布尔值。
console.log( Boolean(0) ); //返回false
console.log( Boolean(1) ); //返回true
5.4、转换为对象
使用new命令调用String()、Number()、Boolean()类型函数可以把字符串、数字和布尔值3类简单值包装为对应类型的对象。
【示例】分别使用String()、Number()、Boolean()类型函数执行实例化操作并把值“123”传入进去使用new运算符创建实例对象简单值分别被包装为字符串型对象、数值型对象和布尔型对象。
var n = "123" ;
console.log( typeof new String(n) ); //返回object
console.log( typeof new Number(n) ); //返回object
console.log( typeof new Boolean(n) ); //返回object
5.5、强制类型转换
JavaScript支持使用下面函数强制类型转换
- Boolean(value)把参数值转换为布尔型值。
- Number(value)把参数值转换为数字。
- String(value)把参数值转换为字符串。
【示例】分别调用上述3个函数把参数值强制转换为新的类型值
console.log( String(true) ); //返回字符串"true"
console.log( String(0) ); //返回字符串"0"
console.log( Number("1") ); //返回数值1
在JavaScript中使用强制类型转换非常有用但是应该根据具体应用场景确保正确转换值。
5.6、自动类型转换
JavaScript能够根据具体运算环境自动转换参与运算值的类型转换方法可参考上面多节描述常用值在不同运算环境中被自动转换的值列表如下表所示:
6、认识运算符
运算符就是根据特定算法对操作数执行运算并返回计算结果值的符号。运算符必须与操作数配合使用组成表达式才能够发挥作用。运算符、操作数和表达式比较如下。
- 运算符代表特定功能的运算。大部分由标点符号表示如+、-、=等还有5个由单词表示如delete、typeof、void、instanceof和in。JavaScript共定义了47个运算符。
- 操作数参与运算的对象包括直接量、变量、对象、对象成员、数组、数组元素、函数、表达式等。
- 表达式表示计算的式子由运算符和操作数组成。表达式必须返回一个计算值最简单的表达式是一个变量或直接量使用运算符把多个简单的表达式连接在一起就构成一个复杂的表达式。
不同运算符需要配合的操作数的个数不同可以分为3类
- 一元运算符一个运算符仅对一个操作数执行运算如取反、递加、递减、转换数字、类型检测、删除属性等运算。
- 二元运算符一个运算符必须包含两个操作数。例如两个数相加两个值比较。大部分运算符都需要两个操作数配合才能够完成运算。
- 三元运算符一个运算符必须包含三个操作数。JavaScript仅有条件运算符。
运算符的优先级决定执行运算的顺序。例如1+2*3的结果是7而不是9因为乘法优先级高虽然加号位于左侧。
注意使用小括号可以改变运算符的优先顺序。例如(1+2)*3的结果是9而不再是7。
在表达式中一元运算符、三元运算符和赋值运算符都遵循先右后左的顺序进行结合并运算。大部分二元运算符都遵循先左后右的顺序进行结合并运算。
7、算术运算
算术运算符包括加(+)、减(-)、乘(*)、除(/)、余数运算符(%)、数值取反运算符(-)。
7.1、加法运算
【示例1】注意特殊操作数的求和运算
var n = 5; //定义并初始化任意一个数值
console.log(NaN + n); // NaN与任意操作数相加结果都是NaN
console.log(Infinity + n); // Infinity与任意数相加结果都是Infinity
console.log(Infinity + Infinity); // Infinity与 Infinity相加结果是Infinity
console.log(( - Infinity) + ( - Infinity)); //负Infinity相加结果是负Infinity
console.log(( - Infinity) + Infinity); //正负Infinity相加结果是NaN
【示例2】加运算符能够根据操作数的数据类型决定是相加操作还是相连操作。
console.log( 1 + 1); //如果操作数都是数值则进行相加运算
console.log( 1 + "1"); //如果有一个字符串则进行相连运算
console.log(3.0 + 4.3 + "") //先求和再连接返回"7.3"
console.log(3.0 + "" + 4.3) //先连接再连接返回"34.3"
//3.0转换为字符串为3
提示在使用加法运算符时应先检查操作数的数据类型是否符合需要。
7.2、减法运算
【示例1】注意特殊操作数的减法运算。
var n = 5; //定义并初始化任意一个数值
console.log(NaN - n); // NaN与任意操作数相减结果都是NaN
console.log(Infinity - n); // Infinity与任意数相减结果都是Infinity
console.log(Infinity - Infinity); // Infinity与Infinity相减结果是NaN
console.log(( - Infinity) - ( - Infinity)); //负Infinity相减结果是NaN
console.log(( - Infinity) - Infinity); //正负Infinity相减结果是-Infinity
【示例2】在减法运算中如果数字为字符串先尝试把它转换为数值之后再进行运算。如果有一个操作数不是数字则返回NaN。
console.log(2 - "1"); //返回1
console.log(2 - "a"); //返回NaN
7.3、乘法运算
【示例】注意特殊操作数的乘法运算。
var n = 5; //定义并初始化任意一个数值
console.log(NaN * n); // NaN与任意操作数相乘结果都是NaN
console.log(Infinity * n); // Infinity与任意非0正数相乘结果都是Infinity
console.log(Infinity * ( - n)); // Infinity与任意非0负数相乘结果都是Infinity
console.log(Infinity * 0); // Infinity与0相乘结果是NaN
console.log(Infinity * Infinity); // Infinity与Infinity相乘结果是Infinity
7.4 除法运算
【示例】注意特殊操作数的除法运算。
var n = 5; //定义并初始化任意一个数值
console.log(NaN / n); //如果一个操作数是NaN结果都是NaN
console.log(Infinity / n); //Infinity被任意数除结果都是Infinity或-Infinity
//符号由第二个操作数的符号决定
console.log(Infinity / Infinity); //返回NaN
console.log(n / 0); //0除一个非无穷大的数结果都是Infinity或
// -Infinity符号由第二个操作数的符号决定
console.log(n / -0); //返回-Infinity解释同上
7.5 求余运算
求余运算也称模运算。例如
console.log(3 % 2); //返回余数1
模运算主要针对整数进行操作也适用浮点数。例如
console.log(3.1 % 2.3); //返回余数0.8000000000000003
【示例】注意特殊操作数的求余运算。
var n = 5; //定义并初始化任意一个数值
console.log(Infinity % n); //返回NaN
console.log(Infinity % Infinity); //返回NaN
console.log(n % Infinity); //返回5
console.log(0 % n); //返回0
console.log(0 % Infinity); //返回0
console.log(n % 0); //返回NaN
console.log(Infinity % 0); //返回NaN
7.6 取反运算
取反运算也称一元减法运算。
【示例】注意特殊操作数的取反运算。
console.log(-5); //返回-5。正常数值取负数
console.log(-"5"); //返回-5。先转换字符串数字为数值类型
console.log(-"a"); //返回NaN。无法完全匹配运算返回NaN
console.log(-Infinity); //返回-Infinity
console.log(-(-Infinity)); //返回Infinity
console.log(-NaN); //返回NaN
提示与一元减法运算符相对应的是一元加法运算符利用它可以快速地把一个值转换为数值。
7.7 递增和递减
递增运算和递减运算分为前置和后置两种方式
- 前置递增(++n)先递增再赋值。
- 前置递减(–n)先递减再赋值。
- 后置递增(n++)先赋值再递增。
- 后置递减(n–)先赋值再递减。
【示例】比较递增和递减的4种运算方式所产生的结果
var a=b =c= 4;
console.log(a++); //返回4先赋值再递增运算结果不变
console.log(++b); //返回5先递增再赋值运算结果加1
console.log(c++); //返回4先赋值再递增运算结果不变
console.log(c); //返回5变量的值加1
console.log(++c); //返回6先递增再赋值运算结果加1
console.log(c); //返回6变量的值也加1
提示递增运算符和递减运算符是相反的操作在运算之前都会试图转换值为数值类型如果失败则返回NaN。
8、逻辑运算
逻辑运算又称布尔代数就是布尔值true和false的“算术”运算。逻辑运算符包括逻辑与(&&)、逻辑或(||)和逻辑非(!)。
8.1、逻辑与运算
逻辑与运算(&&)是AND布尔操作。只有两个操作数都为true时才返回true否则返回false具体描述如下表所示
8.2、逻辑或运算
逻辑或运算(||)是布尔OR操作。如果两个操作数都为true或者其中一个为true就返回true否则返回false。具体描述如下表所示
8.3、逻辑非运算
逻辑非运算(!)是布尔取反操作(NOT)。作为一元运算符直接放在操作数之前把操作数的值转换为布尔值然后取反并返回。
【示例1】特殊操作数的逻辑非运算值。
console.log( ! {}); //如果操作数是对象则返回false
console.log( ! 0); //如果操作数是0则返回true
【示例2】如果对操作数执行两次逻辑非运算操作就相当于把操作数转换为布尔值。
console.log(!0); //返回true
console.log(!!0); //返回false
注意逻辑与和逻辑或运算的返回值不必是布尔值但是逻辑非运算的返回值一定是布尔值。
9、关系运算
关系运算也称比较运算需要两个操作数运算返回值总是布尔值。
9.1、大小比较
比较大小关系的运算符有4个说明如下表所示
提示操作数可以是任意类型的值但是在执行运算时会被转换为数字或字符串然后再进行比较。如果是数字则比较大小如果是字符串则根据字符编码表中的编号值从左到右逐个比较每个字符。
如果两个操作数都是数字或者一个是数值另一个可以被转换成数字则将根据数字大小进行比较
console.log(4>3); //返回true直接利用数值大小进行比较
console.log("4">Infinity); //返回false无穷大比任何数字都大
如果两个操作数都是字符串则执行字符串比较
console.log("4">"3"); //返回true根据字符编码表的编号值比较
console.log("a">"b"); //返回falsea编码为61b编码为62
console.log("ab">"cb"); //返回falsec编码为63
console.log("abd">"abc"); //返回trued编码为64
//如果前面相同则比较下个字符以此类推
注意字符比较是区分大小写的一般小写字符大于大写字符。如果不区分大小写则建议使用toLowerCase()或toUpperCase()方法把字符串统一为小写或大写之后再进行比较。
9.2、相等和全等
等值检测运算符包括4个详细说明如下表所示
在相等运算中应注意几个问题
- 如果操作数是布尔值则先转换为数值其中false转为0true转换为1。
- 如果一个操作数是字符串另一个操作数是数字则先尝试把字符串转换为数字。
- 如果一个操作数是字符串另一个操作数是对象则先尝试把对象转换为字符串。
- 如果一个操作数是数字另一个操作数是对象则先尝试把对象转换为数字。
- 如果两个操作数都是对象则比较引用地址。如果引用地址相同则相等否则不相等。
【示例】特殊操作数的比较
console.log("1" == 1) //返回true字符串被转换为数字
console.log(true == 1) //返回truetrue被转换为1
console.log(false == 0) //返回truefalse被转换为0
console.log(null == 0) //返回false
console.log(undefined == 0) //返回false
console.log(undefined == null) //返回true
console.log(NaN == "NaN") //返回false
console.log(NaN == 1) //返回false
console.log(NaN == NaN) //返回false
console.log(NaN != NaN) //返回true
提示NaN与任何值都不相等包括它自己。null和undefined值相等。在相等比较中null和undefined不允许被转换为其他类型的值。
10、赋值运算
赋值运算有以下两种形式
- 简单的赋值运算(=)把等号右侧操作数的值直接复制给左侧的操作数因此左侧操作数的值会发生变化。
- 附加操作的赋值运算赋值之前先对两侧操作数执行特定运算然后把运算结果再复制给左侧操作数具体说明如下表所示
11、对象运算
对象运算主要是针对对象、数组、函数这3类复合型对象执行的操作其涉及的运算符包括in、instanceof、delete。
11.1、归属检测
in运算符能够检测左侧操作数是否为右侧操作数的成员。其中左侧操作数是一个字符串或者可以转换为字符串的表达式右侧操作数是一个对象或数组。
【示例1】使用in运算符检测属性a、b、c、valueOf是否为对象o的成员
var o = { //定义对象
a:1, //定义属性a
b:function(){} //定义方法b
}
console.log("a" in o); //返回true
console.log("b" in o); //返回true
console.log("c" in o); //返回false
console.log("valueOf" in o); //返回true继承Object的原型方法
console.log("constructor" in o); //返回true继承Object的原型属性
instanceof运算符能够检测左侧的对象是否为右侧类型的实例。
【示例2】使用instanceof检测数组a是否为Array、Object和Function的实例。
var a = new Array(); //定义数组
console.log(a instanceof Array); //返回true
console.log(a instanceof Object); //返回trueArray是Object的子类
console.log(a instanceof Function); //返回false
提示如果左侧操作数不是对象或者右侧操作数不是类型函数则返回false。如果右侧操作数不是复合型对象则将返回错误。
11.2、删除属性
delete运算符能够删除指定对象的属性或者数组的元素。如果删除操作成功则返回true否则返回false。
【示例】使用delete运算符配合in运算符实现对数组成员执行检测、插入、删除或更新操作。
var a =[]; //定义数组对象
if("x" in a) //如果对象a中存在x
delete a["x"]; //则删除成员x
else //如果不存在成员x
a["x"] = true; //则插入成员x并为其赋值true
console.log(a.x); //返回true查看成员x的值
if(delete a["x"]) //如果删除成员x成功
a["x"] = false; //更新成员x的值为false
console.log(a.x); //返回false查看成员x的值
12、其他运算
12.1、条件运算符
条件运算符是唯一的三元运算符语法形式如下
b ? x : y
其中b操作数必须是一个布尔型的表达式x和y是任意类型的值。
- 如果操作数b的返回值为true则执行x操作数并返回该表达式的值。
- 如果操作数b的返回值为false则将执行y操作数并返回该表达式的值
注意在实战中需要考虑假值的干扰。使用typeof a !=“undefined"进行检测可以避开变量赋值为false、null、”"、NaN等假值时也误认为没有赋值。
12.2、逗号运算符
逗号运算符是二元运算符它能够先执行运算符左侧的操作数然后再执行右侧的操作数最后返回右侧操作数的值。
【示例】逗号运算符可以实现连续运算如多个变量连续赋值。
var a = 1, b = 2, c = 3, d = 4;
等价于
var a = 1;
var b = 2;
var c = 3;
var d = 4;
注意与条件运算符、逻辑运算符根据条件决定是否执行所有操作数不同逗号运算符会执行所有的操作数但并非返回所有操作数的结果它只返回最后一个操作数的值。
12.3、void运算符
void是一元运算符它可以出现在任意类型的操作数之前执行操作数却忽略操作数的返回值返回一个undefined。void常用于HTML脚本中执行JavaScript表达式但不需要表达式的计算结果。
【示例】使用void运算符让表达式返回undefined
var a = b = c = 2; //定义并初始化变量的值
d = void (a -= (b *= (c += 5))); //执行void运算符并把返回值赋予变量d
console.log(a); //返回-12
console.log(b); //返回14
console.log(c); //返回7
console.log(d); //返回undefined
由于void运算符的优先级比较高高于普通运算符的优先级所以在使用时应该使用小括号明确void运算符操作的操作数以避免引发错误。
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |