Microsoft Word - 正文.doc

Size: px

Start display at page:

Download "Microsoft Word - 正文.doc"

釜巢
4 years ago
Views:

1 第 1 章快速体验 JavaScript 如果你是初学者, 本章将告诉你如何编写 JavaScript 程序, 本章分别讲解了在浏览器和编辑器中编写 JavaScript 代码的方法, 变量条件循环对象等基本概念以及 JavaScript 语言的特点, 让你对 JavaScript 这门语言有个概览并且能够简单地应用 1-1 使用 Chrome 运行 JavaScript 代码 JavaScript 最大的用武之地在于浏览器, 浏览器也提供了越来越丰富的 JavaScript 调试工具, 不夸张地讲, 你完全可以使用浏览器工具进行 JavaScript 开发现在, 就请打开谷歌浏览器 Chrome, 使用快捷键 Command+Option+J 就可以直接打开调试模式, 如图 1-1 所示图 1-1 Chrome 浏览器的调试工具箱

2 现代 JavaScript 编程 : 经典范例与实践技巧在 Console 区, 键入 JavaScript 代码后, 可以直接在当前浏览器页面中运行, 例如, 在其中编写如下代码后按回车键 : document.write("<h1> 欢迎你学习本书 </h1>"); 此时, 浏览器的界面会显示如图 1-2 所示的信息图 1-2 浏览器界面 1-2 JavaScript 的变量变量是存储信息的容器在 JavaScript 中, 你总是需要使用变量来进行值的存储和传递 JavaScript 中的变量是无类型的, 这也是 JavaScript 语言的一大特点, 因为变量无类型, 开发者可以用同一个变量存储各种各样的值 var 关键字用来声明变量, 在 ES6(ECMAScript 6) 中提供了 let 关键字, 其声明的变量会受到块级作用域的影响, 应用也更加广泛请看下面的例子 : // 使用 var 声明变量 var name; // 为变量赋值 name = "Jaki"; // 使用 let 定义变量 let age = 25; 1-3 不同数据类型之间的运算 JavaScript 中提供了常用的数学运算符, 如 + - * / % 等, 还提供了众多逻辑运算符复合运算符位运算符和比较运算符如果需要更高级的数学运算, 你也可以使用 JavaScript 中的 Math 对象, 这是一个专门用来进行数学计算以及提供数学常数的对象需要注意, 在 JavaScript 中经常会出现不同数据类型之间的运算操作, 例如数值和字符串进行加法运算时, 会将拼接成的完整字符串作为结果数学运算符的用法如下 : // 数值的加减乘除取余运算 var a=1; 2

3 第 1 章快速体验 JavaScript var b=3; var c = a+b; //4 var d = a*b; //3 var e = b/a; //3 var f = a%3; //1 // 数值和字符串 + 运算 var g = a+"hello"; // 字符串 + 运算 var h = "hello"+"world"; //"1hello" //"helloworld" 1-4 分支语句对于编程语言, 函数是最小的功能单元, 语句是最小的处理单元语句决定了程序执行的结构分支语句是编程中十分重要的一种结构, 如果没有分支语句, 程序便无智能性可言和 C 语言类似,JavaScript 中的常用分支语句有 if if-else switch-case 等示例如下 : let a = 1; let b = 2; if (a>b) { console.log("a>b"); else if(a<b){ console.log("a<b"); else{ console.log("a==b"); switch(a) { case 1:{ console.log("a==1"); break; case 2:{ console.log("a==2"); break; default:{ console.log("a"); 3

4 现代 JavaScript 编程 : 经典范例与实践技巧 // 将打印 a<b a==1 console.log() 是浏览器中的打印函数, 它会将结果输出到 Console 控制台分支语句给了程序做选择的能力, 笔者建议 if 语句的嵌套最好不要超过 3 层, 过多的 if 嵌套会使代码读起来非常难于理解毕竟代码的真正意义是 : 给别人看, 顺便可以在机器上运行 1-5 循环语句计算机和人类相比, 最大的优势在于重复地做某件事情对于程序来说, 大量重复某些计算也十分必要例如, 统计公司中 1000 个员工的薪资, 笔者相信没有任何一个软件工程师会将同样的统计代码编写 1000 遍 JavaScript 中也提供了几种基础的循环语句, 例如 while 语句 for 语句等对于对象,JavaScript 中还提供了遍历对象属性的 for-in 方法某些特殊对象 ( 例如数组 ) 中封装了许多迭代方法, 这些会在后面的章节具体介绍在 JavaScript 中, 几种简单的循环结构示例如下 : //for 循环 var a=0; for (var i = 0; i < 10; i++) { a=a+1; console.log(a); //10 //while 循环 while(a>0){ a=a-1; console.log(a); //0 //do-while 循环 do{ a=a+1; while(a<10); console.log(a); //10 4

5 第 1 章快速体验 JavaScript 1-6 函数函数是 JavaScript 中的第一等公民, 函数在 JavaScript 中的重要性和高级特性后面会有专门的章节进行系统地介绍在 JavaScript 中, 函数以 function 关键字定义, 当然在 ES6 标准中, 也可以使用箭头函数函数是实现某一功能的代码单元, 例如模拟加法运算, 代码如下 : function add(a,b) { return a+b; console.log(add(1,2)); 你也可以将函数赋值给变量, 将变量作为函数进行调用, 这种函数通常被称为匿名函数, 代码如下 : let addfunc = function(a,b){ return a+b; console.log(addfunc(1,3)); 如果使用箭头函数的写法, 示例代码如下 : let newadd = (a,b)=>{ return a+b; console.log(newadd(1,4)); 1-7 理解对象 JavaScript 是一种面向对象语言, 对象是 JavaScript 的核心你可以简单地将 JavaScript 中的对象理解为键值映射, 在其他语言中, 这种数据结构通常也叫作 Dictionary 或 Map JavaScript 中内置了许多对象, 例如 Number 数值对象 String 字符串对象等你也可以创建自定义的对象, 代码如下 : var people = { name:'jaki', age:25 5

6 现代 JavaScript 编程 : 经典范例与实践技巧上面的代码定义了一个人对象, 其中有两个属性, 分别表示这个人的姓名和年龄对象中除了可以定义属性来存储对象的内容外, 也可以定义方法来描述对象的行为, 例如 : var people = { name:'jaki', age:25, sayhi:()=>{ console.log("hello World"); 无论是访问对象的属性还是调用对象的方法, 在 JavaScript 中都可以使用点语法, 例如 : console.log(people.name); people.sayhi(); 如果你有其他语言的面向对象编程基础, 可能会对上面的代码有些疑惑,JavaScript 中的对象并不依赖于类, 后面章节会有更深入的专题介绍 1-8 数组对象的使用数组在 JavaScript 中也是一种对象, 其是 JavaScript 内置的 Array 对象在实际开发中, 数组的应用非常广泛 JavaScript 中的 Array 对象存放数据的类型也十分自由, 并不需要全部一致, 例如 : var array = [1,"one"," 一 "]; console.log(array[0]); //1 console.log(array[1]); //one JavaScript 中的数组在创建时也没有严格的长度限制, 你可以在需要的时候任意增长或缩短数组的长度例如, 使用 push 方法可以在数组的末尾追加元素, 使用 pop 方法也可以将数组末尾的元素删除 array.pop(); array.push(2); 6

7 第 1 章快速体验 JavaScript 1-9 编写闰年判断小程序通过上面的概览, 你应该已经可以使用 JavaScript 结合一点 HTML 知识来编写简单的网页小程序了 ( 例如判断某个年份是否为闰年 ) 关于闰年的知识, 笔者相信你在小学数学课上就学习过闰年的判断条件为 : 可以被 4 整除但是不能被 100 整除, 或者可以直接被 400 整除的年份下面就来编写这样一个小程序新建一个 HTML 文件, 在其中编写如下代码 : <!DOCTYPE html> <html> <head> <title> 闰年判断小程序 </title> <script type="text/javascript"> function check(){ let value = document.getelementsbyname("input")[0].value; if (!Number(value)) { alert(" 请你输入正确的年份 "); return; if (Number(value)%4===0 && Number(value)%100!==0) { alert(value+" 是闰年!"); else if (Number(value)%400===0) { alert(value+" 是闰年!"); else{ alert(value+" 是平年!"); </script> <style type="text/css"> h1 { text-align: center; div { text-align: center; button { 7

现代 JavaScript 编程 : 经典范例与实践技巧 margin-left: 30px; </style> </head> <body> <h1> 闰年判断小程序 </h1> <div><input type="text" name="input" /><button onclick="check()"> 检验 </button></div> </body> </html> 上面使用到的

8 现代 JavaScript 编程 : 经典范例与实践技巧 margin-left: 30px; </style> </head> <body> <h1> 闰年判断小程序 </h1> <div><input type="text" name="input" /><button onclick="check()"> 检验 </button></div> </body> </html> 上面使用到的 getelementsbyname 方法是 document 对象内置的方法, 可以通过 name 来获取一组标签对象在浏览器中打开此文件, 输入年份, 即可进行验证, 效果如图 1-3 所示图 1-3 闰年判断小程序 1-10 使用 Sublime Text 来编写 JavaScript 代码 Chrome 浏览器提供的开发者工具虽然强大, 但是只适用于已完成项目的检查与调试, 无法用来进行完整项目的开发可以编写 JavaScript 代码的编辑器十分多, 例如专门开发大型 Web 项目的 WebStorm 小巧的用于开发移动端网页的 HBuilder 通用编辑器 Sublime Text 等工具对于 JavaScript 语法部分的学习, 强烈建议使用 Sublime Text 工具首先, 其拥有轻量级占内存极小运行极快的特点其次,Sublime Text 有大量插件支持, 能够很好地提供代码高亮智能补全代码格式化等高级开发工具所提供的功能最重要的是,Sublime Text 可以配置编译系统, 有了它, 我们就不再需要依赖浏览器来进行 JavaScript 代码的运行与调试了笔者推荐使用 Sublime Text 3.0 版本, 本书的示例操作和命令都是以 3.0 为准的下载 Sublime Text 最新版本的网址 : 8

第 1 章快速体验 JavaScript 下载安装完成 Sublime Text 后, 其已经自带了代码高亮的功能, 可以进行 JavaScript 代码的编写, 但是并没有自动补全代码格式化与运行 JavaScript 代码的功能, 这里会为大家一一解决, 现在我们将把 Sublime Text 武装成一款强大的 JavaScript 编辑器 1.

9 第 1 章快速体验 JavaScript 下载安装完成 Sublime Text 后, 其已经自带了代码高亮的功能, 可以进行 JavaScript 代码的编写, 但是并没有自动补全代码格式化与运行 JavaScript 代码的功能, 这里会为大家一一解决, 现在我们将把 Sublime Text 武装成一款强大的 JavaScript 编辑器 1. 安装 Sublime Text 插件管理器 PackageControl Sublime Text 的插件十分丰富, 但是快速找到并安装所需要的插件很不容易, 如果你有开发 ios 软件的经验, 一定知道 CocoaPods 第三方库管理工具对应 Sublime Text, PackageControl 就是一款很好的插件管理器在 Sublime Text 中有两种方式可以进行 PackageControl 插件的安装 : 第一种方式是直接在 Sublime Text 的控制台键入如下代码, 之后按 Enter 键来进行 PackageControl 工具的安装 : import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.proxyhandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( ' + pf.replace(' ','%20')).read()) 在 Sublime Text 中使用 Control+` 的方式可以直接打开控制台, 将上面的代码粘贴进去并按 Enter 键进行安装, 如图 1-4 所示图 1-4 使用代码的方式进行 PackageControl 工具的安装第二种安装方式是直接下载, 手动安装由于网络与 Sublime Text 版本更新不可控, 使用 9

现代 JavaScript 编程 : 经典范例与实践技巧代码进行 PackageControl 工具的安装不一定会成功, 可以直接下载 PackageControl

sublime-package 下载完成后, 如图 1-5 所示, 打开 Sublime Text 工具的插件目录 :Preferences Browse Packages

所示图 1-6 将 PackageControl 安装文件放入 Installed Packages 文件夹中之后将 Sublime Text 完全关掉, 重启

10 现代 JavaScript 编程 : 经典范例与实践技巧代码进行 PackageControl 工具的安装不一定会成功, 可以直接下载 PackageControl 进行安装, PackageControl 工具下载地址 : 下载完成后, 如图 1-5 所示, 打开 Sublime Text 工具的插件目录 :Preferences Browse Packages 图 1-5 Sublime Text 的插件目录将下载到的 PackageControl 安装文件放入 Installed Packages 文件夹中, 如图 1-6 所示图 1-6 将 PackageControl 安装文件放入 Installed Packages 文件夹中之后将 Sublime Text 完全关掉, 重启 Sublime Text, 如果在 Preferences 中可以看到 Package Control 项目, 说明已经成功安装, 如图 1-7 所示图 1-7 成功安装 PackageControl 工具 10

第 1 章快速体验 JavaScript 上面所提供的 PackageControl 安装包下载地址服务器在国外, 在国内访问时常会出现波动, 如果你无法从上面的地址下载 PackageControl 安装包, 可以尝试如下地址 : http://zyhshao.github.io/file/package%20control.sublime-package 2.

11 第 1 章快速体验 JavaScript 上面所提供的 PackageControl 安装包下载地址服务器在国外, 在国内访问时常会出现波动, 如果你无法从上面的地址下载 PackageControl 安装包, 可以尝试如下地址 : 2. 使用 PackageControl 安装 JavaScript 代码智能提示插件 SublimeCodeIntel 对代码的智能提示是高级编辑工具必备的一项功能 SublimeCodeIntel 是一个全功能的代码自动提示插件, 支持众多流行的程序语言, 例如 JavaScript HTML CSS Python PHP 等使用 PackageControl 可以十分方便地进行 SublimeCodeIntel 插件的安装首先打开 Sublime Text 编辑工具, 在 Mac 电脑中使用 Command+Shift+P 来打开 PackageControl 命令行, 在其中输入 package control 便会自动检索出 PackageControl 工具所提供的所有命令,PackageControl 工具中提供了许多易用的命令, 如安装插件查看已安装的插件列表删除插件等, 如图 1-8 所示图 1-8 PackageControl 工具提供的命令也可以通过如图 1-9 所示的方式打开 PackageControl 命令行 :Sublime Text Preference Package Control 在 PackageControl 命令行中输入 Install Package 并按 Enter 键就会进入安装插件的命令行, 此时会自动显示插件列表, 如图 1-10 所示在其中输入 SublimeCodeIntel 后按 Enter 键进行安装即可, 如图 1-11 所示 ( 安装需要数分钟时间 ) 如果安装成功, 在 Sublime Text Preference Package Setting 中会看到 SublimeCodeIntel 项 11

12 现代 JavaScript 编程 : 经典范例与实践技巧图 1-9 打开 PackageControl 命令行图 1-10 插件列表图 1-11 安装 SublimeCodeIntel 插件在执行 Install Package 命令时,Sublime Text 会从 PackageControl 官方网站拉取一个 JSON 文件, 这个文件中包含所有 Sublime Text 的插件信息, 大小在数兆左右不幸的是, 由于国 12

"http://zyhshao.github.io/file/channel_v3.

13 第 1 章快速体验 JavaScript 内网络的限制, 这个文件的下载依然困难重重笔者个人维护着一个此 JSON 文件的下载地址, 无法成功拉取到文件的朋友可以尝试通过路径 Sublime Text Preferences Package Settings Package Control Settings-User 打开用户配置文件, 如图 1-12 所示图 1-12 打开 Package Control 用户配置文件在其中添加如下配置信息 : "channels": [ " ], 添加完成后, 配置文件看上去如图 1-13 所示图 1-13 进行用户配置文件设置上面已经将插件列表 JSON 文件的拉取地址修改为 channel_v3.json 成功安装 SublimeCodeIntel 插件后, 你可以尝试编写一些 JavaScript 代码, 可以看到 SublimeCodeIntel 插件的智能提示十分强大, 如图 1-14 所示 13

JsFormat 项 JsFormat 插件的使用十分简单, 选中要进行格式化的 JavaScript 代码, 使用 Control+Option (Alt)+F 即可对其进行格式化图 1-15 安装 JsFormat 插件 4.

14 现代 JavaScript 编程 : 经典范例与实践技巧图 1-14 SublimeCodeIntel 的代码智能提示 3. 安装 JavaScript 代码格式化插件缩进规范的代码会使我们在编写程序时赏心悦目, 在 PackageControl 的插件列表中输入 JsFormat, 按 Enter 键进行此插件的安装, 如图 1-15 所示安装成功后, 同样可以在 Sublime Text Preferences Package Settings 中看到 JsFormat 项 JsFormat 插件的使用十分简单, 选中要进行格式化的 JavaScript 代码, 使用 Control+Option (Alt)+F 即可对其进行格式化图 1-15 安装 JsFormat 插件 4. 在 Sublime Text 中运行 JavaScript 代码前边我们做了很多工作, 安装了一些易用的 Sublime Text 插件, 这些工具可以帮助我们更加愉悦地进行 JavaScript 代码的编写代码的编写是为了运行, 以学习而言, 能够实时地看到代码运行的结果也会大大提高学习效率,Sublime Text 自带对 Lua Python Ruby 等语言的编译运行功能, 但是并不支持 JavaScript 语言, 我们做一些额外的配置, 来使 Sublime Text 支持运行 JavaScript 代码 Node.js 是一款 JavaScript 运行时编译环境, 首先需要在系统中安装 Node.js 环境, 下载安装包地址 : 14

15 第 1 章快速体验 JavaScript 安装完 Node.js 后, 打开终端工具, 在其中输入如下命令来查看 Node.js 的路径 : $ which node 打开 Sublime Text 工具, 选择其中的 Tools Build System New Build System, 如图 1-16 所示在新建的文件中写入如下信息 : { "cmd": ["/usr/local/bin/node", "$file"], "selector": "source.js" 图 1-16 新建编译工具需要注意, 上面的 /user/local/bin/node 部分需要替换成你在终端中使用 which node 命令查找到的路径之后将文件进行保存, 命名为 JavaScript.sublime-build 即可新建一个 Sublime Text 文件, 将其命名为 text.js 将 Tools Build System 中的编译工具选择新创建的 JavaScript, 编写一段 JavaScript 测试代码, 使用 Command+B 进行代码的编译运行, 可以看到, 在 Sublime Text 控制台打印出了代码的执行结果与所耗时间, 如图 1-17 所示到此, 已经配置完成了一款十分快速且强大的 JavaScript 代码学习工具, 后面我们将使用 Sublime Text 来一步步进入 JavaScript 的编程世界, 一起玩起来吧! 15

现代 JavaScript 编程 : 经典范例与实践技巧图 1-17 在 Sublime Text 编辑器中进行 JavaScript 代码的执行 1-11 JavaScript 的语法特点 JavaScript 是一种对大小写字母敏感的语言, 也就是说, 无论是变量名函数名还是其他, 都是区分大小写的例如, 下面的代码声明了两个完全不同的变量 : // 大小写敏感 var name;

16 现代 JavaScript 编程 : 经典范例与实践技巧图 1-17 在 Sublime Text 编辑器中进行 JavaScript 代码的执行 1-11 JavaScript 的语法特点 JavaScript 是一种对大小写字母敏感的语言, 也就是说, 无论是变量名函数名还是其他, 都是区分大小写的例如, 下面的代码声明了两个完全不同的变量 : // 大小写敏感 var name; var NAME; 如果你熟悉一些编译型语言, 例如 C++ Java Swift, 那么你可能会固执地认为所有变量都要有强制的类型以确定其在内存中分配的空间大小但是, 学习 JavaScript 时, 你需要忘记这条准则 JavaScript 中的变量是动态弱类型的, 你可以将一个变量先赋值为字符串类型的值, 再将其修改为数值类型的值总之,JavaScript 中的变量没有特定的类型, 你可以将其赋值为任意类型的值示例如下 : // 动态类型 var dy = "string" dy = 1 dy = true // 字符串 // 数字 // 布尔虽然 JavaScript 允许对一个变量进行多种类型值的赋值, 但是在开发中, 笔者还是强烈建议不要这样做, 规范与固定意义的变量会使你的项目看起来赏心悦目 16

17 第 1 章快速体验 JavaScript 在 JavaScript 中, 每行结尾的分号可有可无, 这一点十分类似 Swift 语言, 但是需要注意, 如果你在同一行中写了多条语句, 需要使用分号进行语句的分隔良好的代码风格习惯是一行内只写一条语句, 并且加上分号, 这样做不仅方便进行代码的压缩, 而且在调试时可以很好地暴露出现问题代码所在的位置示例如下 : // 关于分号 var value1 = 1; var value2 = 2; console.log(value2); var value3 = 3 // 行末尾可以省略分号在 JavaScript 中, 可以使用反斜杠进行字符串的折行编写, 有些时候这样做可以使你的代码看起来更加漂亮, 示例如下 : // 使用反斜杠进行字符串的折行 var value4 = "\ Welcome to JavaScript \ My Good Friend!"; console.log(value4); 任何编程语言都会提供注释的能力, 一个优秀的开发者不仅会写代码, 更需要会写注释 JavaScript 中有两种方式进行注释的编写, 其完全遵照了 C 语言的注释风格使用双斜杠进行单行注释, 使用双斜杠中间嵌入两个星号来进行多行注释, 示例如下 : // 这里是单行注释 /* 这里是多行注释 */ 1-12 编程练习练习 1: 在 Chrome 浏览器的调试模式下, 使用 alert 函数在当前网页上弹出一个警告框解析 : 在 Chrome 浏览器中使用快捷键 Command+Option+J 可以快速打开调试模式, 在 Console 区键入如下代码后按回车键 : alert(" 你好,Google"); 弹出窗口效果, 如图 1-18 所示 17

18 现代 JavaScript 编程 : 经典范例与实践技巧图 1-18 在网页弹出警告框练习 2: 使用 JavaScript 表达式描述语句 :3 加 5 的和与 6 的乘积除以 12 解析 : var result = (3+5)*6/12; 练习 3: 使用 JavaScript 实现简单逻辑 : 如果小明的年龄大于 12 岁, 小明就可以参加夏令营, 否则不能参加夏令营, 小明的真实年龄是 10 岁解析 : var xiaomingage = 10; if(xiaomingage > 12){ console.log(" 可以参加夏令营 "); else{ console.log(" 不能参加夏令营 "); 练习 4: 试着使用 JavaScript 编写求 10 的阶乘的运算解析 : let result = 1; for(let i = 1;i<=10;i++){ result = result*i; console.log(result); //

19 第 1 章快速体验 JavaScript 练习 5: 将例 4 中的计算过程封装成函数解析 : function func(param){ let result = 1; for(let i = 1;i<=10;i++){ result = result*i; return result; console.log(func(10)); // 练习 6: 对象是 JavaScript 描述复杂数据类型的方式, 试着用对象来描述一辆商品汽车要求 : 奔驰牌汽车, 价格是元, 颜色是红色的, 有自动驾驶和人工驾驶两种行驶方式解析 : var car = { brand:" 奔驰 ", price:" ", color:"red", go:function(isauto){ if (isauto) { console.log(" 正在自动驾驶 "); else{ console.log(" 正在人工驾驶 "); 练习 7: 使用数组存放班级 10 名学生的期末考试成绩 : 解析 : var record = [67,76,87,56,98,98,67,89,78,67]; 19

20 第 2 章 ECMAScript 的语法世界 ECMAScript 是 JavaScript 的核心语法标准, 它是 JavaScript 中最重要的组成部分本章将通过一系列范例来帮助你窥探 ECMAScript 的语法世界对于一门高级编程语言, 在学习时你只需要把握两条主线 : 面向过程与面向对象在学习面向过程时, 要注意语言的变量函数运算流程分支循环跳转等关键点 ; 在学习面向对象时, 则要注意语言的对象类属性方法继承扩展等关键点 JavaScript 语言有高效的面向过程的特点, 又有强大的基于原型的面向对象的能力现在, 我们就一起开始探索这门神奇的语言吧 2-1 理解变量变量一词来源于数学, 其代表函数中能够发生改变的量值在计算机语言中, 用于存储计算结构或表示值的抽象概念需要注意, 变量有可能是可变的, 也有可能是不可变的, 变量具体的意义由不同的编程语言所定义在 JavaScript 中, 使用 var(var 是 variable 单词的缩写 ) let 和 const 关键字来进行变量的声明如果你看过一些 JavaScript 程序, 可能会发现其中充斥着大量 var 关键字确实如此,let 和 const 关键字是 ECMAScript 6 之后引入的新特性, 老版本的 ECMAScript 中只有 var 一个关键

21 第 2 章 ECMAScript 的语法世界字来进行变量的声明和定义关于声明与定义, 最大的区别是 : 声明只是在程序中预定了一个变量名称, 不需要进行存储空间的建立 ; 定义则是对变量进行赋值, 需要建立存储空间示例代码如下 : // 变量的声明与定义 var name; var age = 25; // 进行变量的声明 // 进行变量的定义你也可以在同一语句中进行多个变量的声明或定义, 例如 : // 进行多个变量的声明 let a,b,c,d,e=3; console.log(a,b,c,d,e); //undefined undefined undefined undefined 3 let 和 const 关键字在声明和定义变量时, 语法和 var 关键字完全一致不同的是,let 声明的变量会受作用域的影响,const 定义的变量不能够被修改, 也可以将其理解为常量 2-2 变量的命名在对变量进行命名时, 需牢记下面两条规则 : (1) 变量名的第 1 个字符必须是字母下画线或者美元符号 (2) 除了第 1 个字符之外, 其余字符可以是下画线美元符号或者任意数字与字母下面这些变量名都是合法的 : var _myname_,myname,$name,_3name,n3; 下面这些变量名都是非法的 : // 不合法的变量名 var 3l; var %2; 虽然 JavaScript 对变量的命名比较自由, 但并不意味着开发者在命名变量时可以随心所欲正确地对变量命名应该能够做到见形知意, 并且从外观上看起来不突兀, 很自然比较著名的变量命名方法有如下几种 : 1.Camel( 驼峰 ) 命名法 Camel 命名法是指变量的首字母小写, 接下来的每个单词的首字母大写, 示例如下 : 21

22 现代 JavaScript 编程 : 经典范例与实践技巧 // 驼峰命名法 var myname; 2. Pascal 命名法 Pascal 命名法是指变量的首字母进行大写, 其后每个单词的首字母也进行大写,Pascal 命名法有时也被称为大驼峰命名法, 示例如下 : //Pascal 命名法 var MyName; 3. 匈牙利类型命名法 Camel 与 Pascal 命名法只针对变量的意义进行解释, 匈牙利类型命名法中还加入了变量的类型, 其规则是在 Pascal 命名法的基础上, 在变量名的最前面加上变量类型的标识例如数字型变量添加 i 标识字符串变量添加 s 标识, 示例如下 : // 匈牙利类型命名法 var iage = 25; var sname = 'jaki'; 表 2-1 列出了常用类型对应的标识表 2-1 常用类型对应的标识类型数组布尔浮点数字整数函数对象正则表达式字符串任意类型标识 a b f i fn o re s v 另外, 对于一些大小写不敏感的编程语言, 也常常采用下画线命名法 4. 下画线命名法单词与单词之间使用下画线进行分割, 示例如下 : 22

23 第 2 章 ECMAScript 的语法世界 // 下画线命名法 var my_name; 作用域与作用域链作用域对于一门编程语言至关重要, 在许多编程语言中, 都以大括号进行作用域的划分例如,C 语言中的 for 循环体 while 循环体 if 分支块等构成一个作用域, 在其中定义的变量只在作用域内有效, 出了作用域则不能被访问到在 ECMAScript 中, 除了块级作用域外 ( 与 let 相关 ), 作用域是以函数来进行区分的, 初学者往往会在这里产生迷惑作用域控制着变量的可见性与生命周期在进行软件设计时, 开发者应该遵循最小暴露原则, 将一些不必要的变量和函数隐藏起来 ECMAScript 中的作用域可以笼统地划分为两类 : 全局作用域与局部作用域全局作用域中的变量和函数在代码中的任何地方都可以访问到 ( 最外层函数和定义的变量 ), 例如 : // 全局作用域 function globalfunc(){ console.log("globalfunc"); var name = 'Jaki'; var age = 25; 上面代码中的函数 globalfunc 变量 name 和 age 都在全局作用域内 // 局部作用域 function subblock(){ var subject = 'JavaScript'; function show(param){ console.log("subblock "+param); show(subject); // console.log(subject); // 程序会抛出异常 // show("s"); // 程序会抛出异常 subblock(); //subblock JavaScript 上面代码中的 subblock 函数创建了一个局部作用域, 其中的变量 subject 和函数 show 都只能在其作用域内进行访问另外, 在进行变量访问时,ECMAScript 会遵循作用域链的方式从内到外逐层访问, 如果在内层作用域中可以访问到变量, 就会停止寻找, 示例如下 : 23

24 现代 JavaScript 编程 : 经典范例与实践技巧 function func(){ console.log(name); function func2(){ var name = ' 珲少 '; console.log(name); func2(); // 珲少 func(); //Jaki // 访问到全局作用域的 name // 访问到局部作用域的 name 由此可知, 在 ECMAScript 中, 如果你频繁访问一个全局作用域中的变量, 将是十分影响性能的 2-3 变量提升 ECMAScript 中有一个十分奇怪的语法规则 : 变量提升如果你使用了一个从未声明过的变量, 程序运行会直接抛出异常但是如果代码中有过对此变量的声明, 无论在声明前使用还是在声明后使用, 程序都不会抛出异常, 例如 : // 变量提升 console.log(name); var name = "Jaki"; console.log(name); //undefined //Jaki 还有一点, 如果你直接对一个未经声明的变量进行赋值, 就相当于直接在全局作用域中创建了这样一个变量, 这是一种十分危险的做法, 会造成无意的变量泄露, 例如 : // 变量泄露 function func(){ age = 24; // 泄露为全局变量 func(); console.log(age); //24 造成这种语法特性的原因是 :JavaScript 解释器在对代码进行扫描时, 会将全局作用域中声明的变量和函数先定义为全局符号, 运行到具体声明处才进行赋值这种语法特性多多少少会对开发者造成一些误解, 在许多流行的编程语言中, 变量在声明之前是不能使用的如果说上面的示例代码你仍然觉得没有什么好紧张的, 那么下面的代码就能说明问题了 : 24

25 第 2 章 ECMAScript 的语法世界 // 变量提升 console.log(name); //undefined if (false) { var name = "Jaki"; for (var i = 0 ; i < 3; i++){ var sum = i; console.log(i); //3 console.log(sum); //2 上面的示例代码中, 首先 if 条件判断语句值为假,if 代码块永远不会执行到, 但是从打印结果可以看出, 第一句打印并未抛出异常,name 变量还是被声明了而后面的循环结构中, 我们在 for 循环条件结构中声明了一个 i 变量, 在循环体内声明了 sum 变量, 可是当循环结束后, i 变量依然存在, 变成了全局变量 sum 变量同样也变成了全局变量, 这种所谓的变量提升会消耗一部分无用内存, 并对之后的代码编写产生额外的风险在 ES6 标准中, 新引入块级作用域可以完美地解决这些问题, 下一示例中再来研究 let 与块级作用域 2-4 块级作用域 ES6 标准中的块级作用域实际上是由 let 与 const 关键字决定的在 ES6 标准中新引入了 let 和 const 关键字, 其用法与 var 关键字十分类似, 都是进行变量的声明不同的是,var 声明的变量会存在变量泄露和变量提升, 从而成为全局变量的问题而 let 和 const 声明的变量则只在其所在的代码块中有效所谓代码块, 即由大括号包裹起来的区域, 其可以是一些常用的语法结构, 如分支结构循环结构等, 也可以是开发者自行创建的区域示例如下 : // 块级作用域 { var a = 10; let b = 10; console.log(b); //10 console.log(a); //10 console.log(b); // 程序抛出异常上面的代码当程序运行到 console.log(b) 时会抛出异常也就是说, 使用 let 命令声明的变量, 一旦脱离其所在的代码块, 这个变量就不能再被使用这种局部变量十分适合用于 for 循环结构, 例如 : 25

26 现代 JavaScript 编程 : 经典范例与实践技巧 for(let i=0;i<3;i++){ console.log(i); // 程序抛出异常 let 命令还有一个规则, 其不存在变量提升, 即在变量声明之前, 此变量是不可使用的, 而不是 undefined, 例如 : console.log(a); let a = 10; // 程序抛出异常使用 let 声明的变量也不可以进行重复声明, 如下的写法也会抛出异常 : let a = 10; let a = 11; // 程序抛出异常关于块级作用域还有一个特点需要特别注意, 如果在块级作用域内使用 let 或 const 声明了某个变量, 那么此作用域会形成对此变量的屏蔽也就是说, 即便外层作用域中也有同名的变量, 也会被屏蔽掉, 这种语法特性被称为暂时性死区, 示例如下 : let tmp = 10; { console.log(tmp); // 程序抛出异常 let tmp = 11; console.log(tmp); //11 上面的示例代码说明, 在块级作用域中使用 let 声明了变量, 那么在声明之前, 这个变量都不能使用 ( 尽管全局中也定义了同名的变量 ) 我们回过头再来理解一下块级作用域在 ES5 标准中是没有块级作用域这个概念的, 我们在编写代码时, 很容易产生内层变量覆盖外层变量和局部变量泄露为全局变量的问题块级作用域使作用域内的变量不受外界影响, 同时也不会影响外界, 提高了代码的安全性同时, 块级作用域也是可以嵌套的, 外层作用域无法读取内层作用域的变量, 示例如下 : // 将打印 /* Hello World Wa New */ { let a = "New"; { 26

27 第 2 章 ECMAScript 的语法世界 let a = "Wa"; { let a = "Hello World"; console.log(a); console.log(a); console.log(a); 对于函数的声明, 在 ES6 中也是遵守块级作用域规则的, 在作用域内声明的函数只能在作用域内使用, 例如 : { let func = function(){ console.log("function"); func(); //function func(); // 程序抛出异常 2-5 ECMAScript 中的数据类型变量是用来存储特定意义的值在 JavaScript 中, 变量可以存储两种类型的值 : 原始值和引用值原始值和引用值的区别在于存储的位置与访问的方式不同原始值是存储在栈中的简单数据, 引用值是存储在堆中的对象数据也就是说, 当你通过变量名访问原始值时, 会直接访问到其存储在栈中的数据 ; 而通过变量名访问引用值时, 会首先获取存储在栈中的对象地址, 根据地址再向堆中查找真正的对象数据 ECMAScript 中定义的原始类型有 5 种, 分别为 Undefined( 未定义类型 ) Null( 空对象类型 ) Boolean( 布尔类型 ) Number( 数字类型 ) String( 字符串 ) 类型图 2-1 描述了原始值与引用值的差异原始值所占的内存大小一般是固定不变的, 将其存储到栈中可以更快地进行数据访问而引用值所占的内存通常较大并且不固定, 但其地址所占的内存大小是固定不变的, 将其地址存入栈中不会影响性能在 5 种原始类型中,String 类型十分特殊, 因为其大小也是不固定的在 Java Objective-C 等语言中, 字符串通常会被定义为引用类型, 但 JavaScript 中依然将其作为一种原始类型 27

14; PI = 3; // 抛出异常需要注意, 在使用 const 声明变量时, 要同时为其进行赋值, 一旦 const 变量被定义, 后面就不能够再对它进行修改 const 关键字声明的变量和 let 关键字声明的变量享有同样的作用域规则, 这里不再赘述 const

28 现代 JavaScript 编程 : 经典范例与实践技巧图 2-1 原始值与引用值图示 2-6 再看 const 关键字我们前面提到,const 关键字用来声明的变量不可修改在许多编程语言中, 除了有变量的概念, 还有常量的概念常量就是值不能改变的量, 在 ES6 标准中, 使用 const 关键字来进行常量的声明修改常量的值会使程序抛出异常, 示例如下 : const PI = 3.14; PI = 3; // 抛出异常需要注意, 在使用 const 声明变量时, 要同时为其进行赋值, 一旦 const 变量被定义, 后面就不能够再对它进行修改 const 关键字声明的变量和 let 关键字声明的变量享有同样的作用域规则, 这里不再赘述 const 声明的常量有一点需要额外注意, 即 const 实际保证的是常量空间存储的数据不可被修改, 而常量所对应的值有时是可以修改的例如, 常量对应的是一个对象, 你可以修改此对象的属性和方法, 但不可以直接将此常量指向的对象修改掉, 示例如下 : const teacher = { name:"jaki", age:25 ; // 对对象进行修改没问题 teacher.name = "Lucy"; teacher.age = 24; 28

29 第 2 章 ECMAScript 的语法世界 // 直接修改常量的指向则会报错 teacher = { name:"lucy", age:24 ; 2-7 Undefined 与 Null 前面讲过,JavaScript 中定义的原始类型有 5 种 :Undefined Null Boolean Number String 切记, 只有这 5 种原始类型原始类型数据是直接使用字面值来创建的其中,Undefined 和 Null 类型比较特殊 Undefined 类型只有一个值, 即 undefined 其意义也如所描述的那样, 即未被定义的例如, 一个变量只是被声明, 其值就是 undefined, 其类型就是 Undefined 类型 JavaScript 中的 typeof 关键字可以用来获取变量或值的类型, 示例如下 : //Undefined 类型 var unknown; console.log(typeof unknown); // 将打印 undefined 需要注意, 仅仅被声明但未被赋值的变量是未定义的, 实际上从没有声明过的变量也是未定义的, 示例如下 : // 未声明过的变量也是未定义的 console.log(typeof unknown2); // 将打印 undefined typeof 是一个特殊的运算符, 但如果将未声明过的变量用于其他运算符, 将会产生运行错误执行一个没有返回值的函数后, 也会返回 undefined 值, 示例如下 : //1 个无返回值的函数 function func(){ console.log("func"); var v1 = func(); // 将打印 func console.log(v1); // 将打印 undefined 可能你现在对函数还不太理解, 不用担心, 后面我们会专门学习函数的相关内容 Null 类型是 ECMAScript 中另一种只有一个值的类型, 其字面值为 null Null 类型的定义唯一的用途是作为空对象的占位现在, 你可能对对象也不太理解, 在介绍原始值与引用值 29

30 现代 JavaScript 编程 : 经典范例与实践技巧时提到过对象, 对象是一种复杂数据类型, 对象变量中实际存储的是对象的引用地址 ECMAScript 中的对象不属于原始类型, 原则上它们之间并不会产生强关系, 然而在实际开发中, 开发者往往需要一种约定的值来表示空对象, 即要有一个约定的值来描述一个无用的地址, 这个值就是 null 开发者在使用对象前, 发现变量中存储的引用地址为 null 时, 就知道此对象还没有被初始化, 或者此对象已经不存在了如果在 JavaScript 中使用 typeof 来对 null 值进行类型检查, 你会惊奇地发现其返回的类型是 object, 这或许是 JavaScript 前期实现上的一个错误, 但是其也恰恰与 null 是空对象的占位这一概念完全契合因此, 在 ECMAScript 标准中沿用了这一定义示例如下 : //Null 类型 var obj = null; console.log(typeof obj); // 将打印 object 现实世界中, 很多设计可能都不是最正确的, 却无疑是最合适的一个很有趣的例子来自键盘设计客观地说, 目前主流键盘布局并不科学, 这种 QWERTY 布局的键盘设计之初是供打字机用的, 而 ABCDEF 排序的键盘在打字速度过快时, 往往会产生卡顿问题为了解决这个问题, 克里斯托夫拉森肖尔斯刻意将高频字符放置在相反的方向, 以最大限度地放慢敲键速度也就是说, 现代键盘的布局设计是为了降低打字速度另一种更科学的键盘布局方式为 DVORAK 布局, 如果在互联网上搜索 DVORAK 关键字, 你会搜出很多理由阐述这种布局的好处, 然而其依旧无法成为主流, 人们的习惯根深蒂固且不会轻易尝试去改变 2-8 关于 Boolean 类型 Boolean 定义的原始值有两个, 分别为 true 和 false 通俗地讲,Boolean 值就是用来描述事物的真与假, 是与非的概念, 其在逻辑运算中有着很广泛的应用, 一个简单的条件结构示例如下 : var number = 10; var result = number>10; if (result) { console.log(" 大于 10"); else{ console.log(" 不大于 10"); // 将打印不大于 10 30

31 第 2 章 ECMAScript 的语法世界上面代码中的 number>10 其实是一种比较运算, 其运算的结果就是 Boolean 值 2-9 关于 Number 类型 Number 类型用来描述数字, 和其他编程语言不同的是 :JavaScript 中的 Number 类型既可以描述整数值, 也可以描述浮点值示例如下 : //Number 类型 var num1 = 100 var num2 = 3.14 console.log(typeof num1); console.log(typeof num2); // 整数值 // 浮点值 // 将打印 number // 将打印 number 在数值前添加前缀可以将其描述为八进制或十六进制的数值八进制需要将 0 作为前缀, 十六进制需要将 0x 作为前缀, 示例如下 : // 八进制 var num3 = 011; // 对应十进制 9 // 十六进制 var num4 = 0x11; // 对应十进制 17 需要注意, 很多编程语言并不介意数值量前面是否添加前缀 0,JavaScript 语言对这一点要求十分严格, 多余的 0 会改变数值的进制方式, 造成不可控的错误对于非常大或非常小的数值,JavaScript 中也可以使用科学计数法进行描述, 使用字母 e 来描述 10 的 e 次方, 示例如下 : // 科学计数法 var num5 = 1.01e3; // 对应 1010 var num6 = e-6; // 对应 JavaScript 中还定义了一些特殊的数值,Number.MAX_VALUE 和 Number.MIN_VALUE 分别用来表示 Number 类型所能表示的最大值与最小值, 示例如下 : //Number 最大可以表示的值 console.log(number.max_value); // 打印 e+308 //Number 最小可以表示的值 console.log(number.min_value); // 打印 5e-324 当计算值超出了 Number 类型所能表示的极限时, 会被认作无穷 JavaScript 中也专门定义了特殊的 Number 值来表示无穷, 其中 Number.POSITIVE_INFINITY 表示正无穷大, 31

32 现代 JavaScript 编程 : 经典范例与实践技巧 Number.NEGATIVE_INFINITY 表示负无穷大, 它们的值分别为 Infinity 与 -Infinity, 示例如下 : // 正无穷 console.log(number.positive_infinity); // 负无穷 console.log(number.negative_infinity); // 将打印 Infinity // 将打印 -Infinity JavaScript 中定义的最后一个比较特殊的 Number 值为 NaN, 为 Not a Number 的缩写, 表示不是一个数字这个值在字符串向数字转换失败时会被返回, 示例如下 : //NaN 值 var num7 = Number("w"); console.log(num7); // 将打印 NaN 需要注意,NaN 这个值十分特殊, 其不可以进行计算也不可以进行比较, 并且与其自身也不相等, 例如如下的比较将会返回 false: console.log(nan == NaN); // 将打印 false 如果要判断一个变量的值是否是 NaN, 需要使用如下方法 : console.log(isnan(num7)); // 将返回 true 2-10 关于 String 类型 String 类型是 ECMAScript 中唯一没有固定大小的原始类型, 用来存储多个 Unicode 字符在 C Java 等语言中, 字符和字符串是两种不同的类型, 字符使用单引号包裹, 字符串则使用双引号包裹在 ECMAScript 中删去了字符的概念, 字符串可以使用单引号包裹, 也可以使用双引号包裹, 但是如果要在字符串中嵌套字符串, 单双引号必须交替使用示例如下 : //String 类型 var str1 = "Hello"; var str2 = 'World'; var str3 = "Hello 'World'"; 和 C Swift Java Perl 等语言类似,JavaScript 中也定义了一些转义字符, 如表 2-2 所示 32

33 第 2 章 ECMAScript 的语法世界表 2-2 JavaScript 中的转义字符转义字符含义 \n 换行 \t 制表符 \b 空格 \r 回车 \f 换页符 \\ 反斜杠 \' 单引号 \" 双引号 \0nnn 使用八进制代码表示字符 \xnn 使用十六进制代码表示字符 \unnnn 使用十六进制 Unicode 码表示字符某些编程语言会定义专门的函数来拼接处理字符串当然在 ECMAScript 中,String 对象里也定义了许多操作字符串的方法对于字符串拼接, 更简单的方法是直接使用加法运算符, 示例如下 : // 字符串的拼接 var str4 = "hello"+" "+"world"; console.log(str4); //hello world 2-11 对象简介 ECMAScript 中的引用类型实际上指的就是对象对象是一组功能行为互补的数据集合, 其可以用来模拟实现生活中的事物举一个简单的例子, 如果要开发一款教学系统, 这个系统中需要包含老师和学生两类成员其中, 老师就是一种对象, 学生也是一种对象老师对象中可能会包含姓名教师编号专业所带班级等, 学生对象中可能会包含姓名年龄所学课程所在班级等当然, 除了这些描述对象属性的数据外, 对象中还需要包含一些行为, 例如老师要进行教学学生要学习考试等在 ECMAScript 中,Object 类型就是这样一种引用类型, 其创建出来的实例被称为对象对象的创建有两种方式, 第一种, 可以直接通过 Object 构造方法来新建对象以教师对象为例, 代码如下 : 33

34 现代 JavaScript 编程 : 经典范例与实践技巧 // 创建教师对象 var teacher = new Object(); // 为教师对象添加一些属性 teacher.name = ' 珲少 '; teacher.age = 25; teacher.subject = 'JavaScript'; // 为教师对象添加行为方法 teacher.teach = function(){ console.log(' 正在进行教学...'); ; 上面的代码为教师对象添加了姓名年龄和所教科目的属性, 并且为其添加了一个教学行为 teach 的方法第二种, 也可以直接通过字面值的方式来创建教师对象, 示例如下 : // 字面值直接创建对象 var teacher2 = { name:'jaki', age:25, teach:function(){ console.log(' 正在进行教学...'); ; 如果将 teacher 对象与 teacher2 对象的类型都进行打印, 可以看到它们都是 Object 类型, 例如 : console.log(teacher); //{ name: ' 珲少 ', age: 25, subject: 'JavaScript', teach: [Function] console.log(teacher2); //{ name: 'Jaki', age: 25, teach: [Function] console.log(typeof teacher); //object console.log(typeof teacher2); //object 要使用对象的某个属性, 有两种方式可以获取, 比较方便且常用的方式是点语法, 示例如下 : // 取对象的属性 console.log(teacher.name); // 珲少 console.log(teacher.age); //25 console.log(teacher.subject); //JavaScript 也可以通过键名字符串的方式来获取对象的属性, 示例如下 : 34

35 第 2 章 ECMAScript 的语法世界 // 通过键名字符串取值 console.log(teacher['name']); // 珲少需要注意, 通过键名字符串的方式来取对象的属性时, 所传入的键必须是字符串类型的对象中定义的函数用来描述对象的行为, 同样可以使用点语法来使对象执行行为, 示例如下 : // 让对象执行行为 teacher.teach(); // 将打印正在进行教学... 同样, 使用键名获取到的方法也可以执行 : teacher['teach'](); // 将打印正在进行教学... 至此, 我们可以简单理解, 万事万物都可以作为对象 ( 但并不是全部 ) 基本的数据组合为简单的对象, 简单的对象组合成复杂的对象, 复杂的对象协作完成复杂的功能这里, 对于对象我们不做深入的研究, 后面会详细介绍更加复杂的面向对象机制 2-12 算术运算符运算符是用来执行程序代码运算的一个完整的表达式应该由两部分组成 : 操作数与运算符例如, 简单的加法表达式 1+2 中, 数字 1 和数字 2 都是操作数, 符号 + 是加法运算符, 其作用是将前后两个操作数进行加法运算在 ECMAScript 中, 运算符可以分为如下几类 : (1) 算术运算符 (2) 赋值运算符 (3) 关系运算符 (4) 逻辑运算符 (5) 位运算符 (6) 自增自减条件逗号等特殊运算符其中, 算术运算符用来做常见的数学运算, 例如加减乘除等符号 + 是 ECMAScript 中的加法运算符, 数字或者字符串都可以使用 + 运算符进行相加操作示例如下 : // 加法运算中的几个特殊规则 console.log(1+nan); console.log(infinity+infinity); //NaN //Infinity 35

36 现代 JavaScript 编程 : 经典范例与实践技巧 console.log(-infinity + -Infinity) //-Infinity console.log(1+'1'); //11 在数学中, 与加法互为逆运算的是减法,JavaScript 中使用符号 - 来进行减法运算, 示例如下 : // 减法运算符 var sub = 10-5; console.log(sub); //5 减法运算符有一点非常特殊, 如果进行减法运算的两个操作数中有字符串类型, 且其中的字符串类型可以转换为数字, 则 JavaScript 会自动将其转换为数字再进行减法运算但如果其中有字符串不能转换为数字, 则计算结果为 NaN, 示例如下 : console.log("10"-5); //5 console.log("10"-"3"); //7 console.log("s"-3); //NaN console.log("10"-"a"); //NaN 针对一些特殊值的减法运算,JavaScript 中也定义了一些规则, 如下 : (1) 如果某个操作数是 NaN, 则运算的结果为 NaN (2) 正无穷值减去正无穷值, 结果为 NaN (3) 负无穷值减去负无穷值, 结果为 NaN (4) 正无穷值减去负无穷值, 结果为正无穷值 (5) 负无穷值减去正无穷值, 结果为负无穷值示例如下 : // 减法运算中的几个特殊规则 console.log(1-nan); console.log(infinity-infinity); console.log(-infinity - -Infinity); console.log(infinity - -Infinity); console.log(-infinity - Infinity); //NaN //NaN //NaN //Infinity //-Infinity 当符号 + 与符号 - 作为一元运算符时, 它就成了正号运算符与负号运算符对数字进行正号或负号运算时, 正号运算会保持数字的正负性, 负号运算会改变数字的正负性, 示例如下 : console.log(+num1); // 不改变符号 10 console.log(+num2); // 不改变符号

37 第 2 章 ECMAScript 的语法世界 console.log(-num1); // 改变符号 -10 console.log(-num2); // 改变符号 10 正负运算符还有一个很实际的用途, 即可以将字符串值强制转成数字值, 这在开发中十分常用示例如下 : console.log(typeof +"1") //number ECMAScript 中使用乘法运算符 * 来进行乘法运算, 示例如下 : // 乘法运算符 var mul = 3*4; console.log(mul); //12 对于乘法运算, 也存在下面几条特殊的规则 : (1) 如果某个操作数是 NaN, 则结果为 NaN (2) 无穷值乘以 0, 结果为 NaN (3) 无穷值乘以 0 以外的其他数字, 结果为无穷值 (4) 无穷值乘以无穷值, 结果为无穷值示例代码如下 : // 乘法运算中的几个特殊规则 console.log(1*nan); console.log(infinity*0); console.log(infinity * 1); console.log(infinity * -1); console.log(infinity * Infinity); console.log(-infinity * -Infinity); console.log(-infinity * Infinity); //NaN //NaN //Infinity //-Infinity //Infinity //Infinity //-Infinity 运算符 / 在 ECMAScript 中用来进行除法运算, 示例如下 : // 除法运算符 var del = 88/10; console.log(del); //8.8 除法运算符对于特殊值运算的规则如下 : (1) 如果某个操作数是 NaN, 则结果为 NaN (2) 无穷值除以无穷值, 结果为 NaN (3) 无穷值除以非无穷值, 结果为无穷值 (4) 非无穷值除以无穷值, 结果为 0 37

38 现代 JavaScript 编程 : 经典范例与实践技巧 (5) 任何数除以 0, 结果为无穷值 (6)0 除以任何数, 结果为 0 示例代码如下 : // 除法运算中的几个特殊规则 console.log(10/nan); //NaN console.log(infinity/infinity); //NaN console.log(infinity/100); //Infinity console.log(10/infinity); //0 console.log(100/0); //Infinity console.log(0/100); //0 ECMAScript 中还支持求余运算, 取余运算也叫取模运算符号 % 为取模运算符示例如下 : // 取模运算符 var res = 17%8; console.log(res); //1 var res2 = 10.7%1.5 console.log(res2); // 约等 0.2 对于特殊值的取模运算, 有如下规则 : (1) 无穷值对任何值取模结果都是 NaN (2) 非无穷值对无穷值取模结果为非无穷值本身 (3)0 对任何数取模结果都是 0 (4) 任何数对 0 取模结果都是 NaN 示例代码如下 : // 取模运算中的几个特殊规则 console.log(infinity%1); //NaN console.log(infinity%infinity); //NaN console.log(100%infinity); //100 console.log(0%100); //0 console.log(100%0); //NaN 需要注意, 在很多编程语言中, 取模运算都不可以以浮点数作为操作数 JavaScript 是一种相对特殊的语言, 它并没有对浮点数的取模运算做太严格的控制 38

39 第 2 章 ECMAScript 的语法世界 2-13 赋值运算符赋值运算符的作用是将表达式的值赋给变量从接触到 ECMAScript 语言开始, 我们就一直在使用赋值运算符, 最简单的赋值运算符使用示例如下 : // 赋值运算符 var string = "Hello World"; ECMAScript 中还提供了一些复合赋值运算符, 示例如下 : // 复合运算符 // 复合加赋值运算符 var v1 = 0; v1+=10; // 相当于 v1=v1+10; console.log(v1); //10 v1-=9; // 相当于 v1=v1-9; console.log(v1); //1 v1*=10; // 相当于 v1=v1*10; console.log(v1); //10 v1/=10; // 相当于 v1=v1/10; console.log(v1); //1 v1&=0; // 相当于 v1=v1&0; console.log(v1); //0 v1 =1; // 相当于 v1=v1 1; console.log(v1); //1 v1<<=1; // 相当于 v1=v1<<1; console.log(v1); //2 v1>>=1; // 相当于 v1=v1>>1; console.log(v1); //1 v1>>>=1; // 相当于 v1=v1>>>1; console.log(v1); 其中, & << 等符号可能看上去有些陌生, 这些是 ECMAScript 中的位运算符, 后面会专门介绍位运算的相关知识, 这里你只需要记住, 复合赋值运算符实际上是将一个变量作为操作数, 经过计算后再赋值给它自身 39

40 现代 JavaScript 编程 : 经典范例与实践技巧 2-14 关系运算符在代码的编写过程中, 比较操作十分常用, 例如比较两个字符串是否相同比较两个数字的大小等比较运算符的计算结果将会返回一个布尔值, 通过布尔值的真或假可以实现不同的业务逻辑数字之间的比较是最常规的比较, 示例如下 : // 数字之间的比较 console.log(1<2); console.log(1>2); console.log(1==2); //true //false //false 符号 < 为小于运算符, 当第 1 个操作数小于第 2 个操作数时, 结果为 true, 否则结果为 false > 为大于运算符, 当第 1 个操作数大于第 2 个操作数时, 结果为 true, 否则结果为 false 需要额外注意, 在 ECMAScript 中, 等于运算符用符号 == 来表示, 这和数学中的 = 有些差异, 初学者容易混淆, 需特别注意比较运算符也可以用于字符串与字符串之间的比较操作, 字符串的比较遵守这样的法则 : 逐字符进行字符码大小的比较, 如果字符码相同, 就比较下一个字符, 直到比较出结果或者比较完所有字符示例如下 : // 字符串与字符串进行比较 console.log("a">"b"); console.log("a"<"b"); console.log("ss"=="ss"); //false //true //true 需要特别注意, 如果是描述数字的字符串, 比较时依然会遵守上面的法则, 例如 : console.log("12">"3"); //false 12 > 3 的比较结果返回的是 false, 这是正确的因为 JavaScript 解释程序会将字符 1 与字符 3 的字符码进行比较, 将结果返回数字和字符串进行比较相对要棘手些首先, 如果是描述数字的字符串与数字进行比较, JavaScript 解释程序会将字符串强制转换成数字类型后再进行比较, 例如 : console.log("3">10); //false 如果是非数字的字符串与数字进行比较, 结果将永远是 false console.log("a">0); //false 40

41 第 2 章 ECMAScript 的语法世界 ECMAScript 中还可以使用 >= 与 <= 进行不小于和不大于的比较运算, 其规则和 > 符号与 < 符号一致示例如下 : console.log(12<=12); console.log(1>=2); //true //false 关于等于与不等于的比较, 在 ECMAScript 中有两类 : 一类是相等比较 == 与不相等比较!= ; 另一类是全等比较 === 与不全等比较!== 全等比较运算并非是 ECMAScript 语言所独有的, 许多编程语言中都有类似的运算符, 例如 Swift 在进行相等或不相等比较时, 不同类型间数据的比较遵守如下几条原则 : (1) 布尔值在比较运算前会被转换成数值,true 转换成 1,false 转换成 0 (2) 描述数字的字符串与数字进行比较前会被转换成数字 (3) 对象和字符串进行比较前, 会将对象转换成字符串 "[object Object]" (4)null 值和 undefined 值进行相等比较, 结果为 true 示例代码如下 : console.log(true==1); console.log(2==true); console.log(false==0); console.log("11"==11); var obj = {name:'jaki'; console.log(obj=="[object Object]"); console.log(1!=2); console.log(null==undefined); //true //false //true //true //true //true //true 需要注意, 如果进行比较操作的是引用值而非原始值, 则比较的实际是所引用对象的地址再次提醒,NaN 与 NaN 进行相等比较, 结果是 false == 与!= 运算在进行比较前, 会根据上面的规则对操作数进行类型的转换, 全等运算符 === 与不全等运算符!== 在比较前不会做任何类型转换, 换句话说, 全等和不全等进行比较时, 既会比较类型, 又会比较值, 只有类型和值完全相等的两个操作数才被认为是全等示例如下 : // 全等比较 console.log(11==="11"); console.log(true!==1); //false //true 有一个很有趣的小例子, 在 JavaScript 中, 如果下面的代码输出 false: 41

42 现代 JavaScript 编程 : 经典范例与实践技巧 console.log(ex>1); 那么如下代码将一定输出 true 么? console.log(ex<=1); 答案是否定的, 如果 ex 变量在进行比较转换时被转换成了 NaN, 那么上面两句输出的都将是 false: var ex = "ss"; console.log(ex>1); console.log(ex<=1); //false //false 2-15 逻辑运算符逻辑运算对于一门编程语言至关重要, 它是分支和循环结构的基础,ECMAScript 中支持的逻辑运算有 3 种 : 逻辑与运算逻辑或运算和逻辑非运算 ECMAScript 中使用符号 && 进行逻辑与运算逻辑运算通常在两个布尔类型的操作数之间进行, 与运算需要遵守表 2-3 所示的运算规则表 2-3 与运算符的运算规则操作数 1 操作数 2 结果 true true true true false false false true false false false false 上面的运算规则可以简要概述为 : 进行逻辑与运算的两个操作数都为 true, 结果才为 true, 只要有一个操作数为 false, 结果就为 false 在有些强类型的编程语言中, 逻辑运算符只能在布尔值之间进行运算, 在 ECMAScript 中, 逻辑运算的操作数可以是任意类型的, 并且其运算结果也不一定是布尔类型的值, 规定如下 : (1) 在两个对象间进行逻辑与运算, 结果将返回第二个对象 (2) 在进行逻辑与运算的两个操作数中, 如果有一个操作数为 null, 则结果为 null (3) 在进行逻辑与运算的两个操作数中, 如果有一个操作数为 NaN, 则结果为 NaN (4) 在进行逻辑与运算的两个操作数中, 如果有一个操作数为 undefined, 则结果为 undefined 42

43 第 2 章 ECMAScript 的语法世界示例代码如下 : // 与运算的相关规则 var obj = {name:'jaki'; // 两个对象进行逻辑与运算, 结果为第二个对象 console.log({&&obj); console.log(null&&true); //null console.log(true&&null); //null console.log(nan&&true); //NaN console.log(true&&nan); //NaN console.log(undefined&&true); //undefined console.log(true&&undefined); //undefined 下面来看一个十分有趣的小例子 : var v1 = 10; var v2 = true; console.log(v2&&(v1++)); console.log(v1); var v3 = 10; var v4 = false; console.log(v4&&(v3++)); console.log(v3); 你能猜出上面代码中的 console.log(v1) 与 console.log(v3) 分别会打印出什么样的结果吗? 结果是 console.log(v1) 将打印出 11, 而 console.log(v3) 将打印出 10 对上面的结果是不是有些意外? 其实很多编程语言在处理逻辑运算时都有这样一种法则 : 如果第一个操作数已经可以确定此表达式的结果, 则不会再执行第二个操作数从上面的代码来看,v4 为 false 时, 已经可以确定此与运算结果为 false, 因此 v3++ 将不会被执行到 ECMAScript 中使用符号进行逻辑或运算逻辑或运算遵守表 2-4 所示的运算规则表 2-4 运算符的运算规则操作数 1 操作数 2 结果 true true true true false true false true true false false false 和逻辑与运算一样,ECMAScript 中的逻辑或运算也不一定会返回逻辑值规定如下 : 43

44 现代 JavaScript 编程 : 经典范例与实践技巧 (1) 如果有一个操作数为对象, 当对象为第 1 个操作数时, 结果为对象本身 ; 当对象为第 2 个操作数时, 如果第 1 个操作数为 false, 则结果为对象本身, 如果第 1 个操作数为 true, 则结果为 true (2) 如果两个操作数都为对象, 则返回第一个操作数示例代码如下 : // 或运算规则 console.log(obj false); //obj console.log(true obj); //true console.log({ obj); /{ 因此, 在进行逻辑或运算时, 如果第一个操作数已经可以决定表达式的值, 则不会再执行到第二个操作数处 ECMAScript 中的逻辑非运算使用! 符号定义, 需要注意, 逻辑非运算一定会返回布尔值逻辑非运算也被称为逻辑取反运算, 其遵守表 2-5 所示的运算规则表 2-5! 运算符的运算规则操作数 True False 结果 false true 当操作数不全是逻辑值时, 有如下规则 : (1) 如果操作数是对象, 则返回 false (2) 如果操作数是数字 0, 则返回 true (3) 如果操作数是非 0 数字, 则返回 false (4) 如果操作数是 null, 则返回 true (5) 如果操作数是 NaN, 则返回 true (6) 如果操作数是 undefined, 则返回 true 2-16 位运算符我们知道, 程序中的所有数在计算机内存中都是以二进制的形式存储的这很好理解, 进制的实质是确定计数时逢几进一人类有 10 只手指, 因此很久以前, 祖先就习惯了使用十进制来计数计算机的核心是由电子元件组成的, 而电子元件最容易描述的两种状态是高电平与低电平, 因此使用二进制计数是最安全最便捷的方式 44

45 第 2 章 ECMAScript 的语法世界在介绍 ECMAScript 中的位运算前, 先来简单地了解一下 JavaScript 中二进制计数 JavaScript 中只有一种数值类型 : 原始类型 Number 但是实际上,JavaScript 中存储的数值有两种, 分别为有符号数和无符号数其实这和大多数编程语言类似, 只是有些强类型的语言会将数值类型再进行细化, 比如 8 位整型 32 位整型 64 位整型 32 位浮点型或 64 位浮点型 JavaScript 中所有的数值默认都是 32 位的 ( 当然, 这样说并不准确, 具体的位数和计算机环境有关, 目前大多都是 32 位的 ) 位数即表示一个数字需要多少个二进制位, 我们暂定 JavaScript 中所有的数值都是 32 位的, 那么 8 这个十进制数在内存中存储的数据如下 : 上面每一个方格表示一个二进制位, 中间的省略号代表省略中间的 0, 一共 32 个小方格, 代表 32 个数位 JavaScript 中所有的数值创建时默认都是有符号的, 虽然存储一个数值需要 32 位, 我们能够操作的实际上只有 31 位, 最后一位作为符号位, 符号位为 0 表示这个数值是正数, 符号位为 1 表示这个数值是负数对于正数, 存储在内存中的二进制数据很好理解, 将此正数的二进制形式放入内存, 其余位补零即可但是对于负数, 其在内存中是以二进制补码方式存储的, 计算补码的步骤如下 : (1) 确定该数的绝对值的二进制形式 (2) 对此二进制码求反码 (0 和 1 互相交替 ) (3) 在反码的基础上加 1 根据上面的规则, 以十进制数 -8 为例, 其绝对值的二进制形式为 , 对其求反码为 , 在其基础上再加 1 得到 , 即十进制数 -8 实际存在内存中的数据如下 : 相对于有符号数而言, 无符号数中并没有负数, 所有的数值都是正数, 在这种情况下, 正负位就失去了作用, 因此对于无符号数来说, 其 32 个二进制位都用来表示数字额外说一点, 计算机中为什么要采用补码的方式来存储数据呢? 对于有符号数, 最高位表示的是符号, 如果直接进行二进制形式的存储, 难免会出现这样一种情况 :0 可以表示为正数 0 和负数 0, 这有悖现实规律因此, 人们采用补码的方式使现实的数值与计算机内存中存储的二进制数据一一对应, 正数的补码是其本身, 负数的补码是其反码加 1 经过这样的计算后, 无论是正数 0 还是负数 0, 在计算机内存中存储的都是全 0 码, 做到了统一理解了计算机中的二进制计算原理, 我们再来看位运算符顾名思义, 位运算就是在二进制位的基础上进行运算, 其直接对二进制位进行操作 ECMAScript 中支持的位运算有 7 种, 分别为按位非运算按位与运算按位或运算按位异或运算按位左移运算按位有符号右移运算和按位无符号右移运算 45

46 现代 JavaScript 编程 : 经典范例与实践技巧按位非运算使用符号 ~ 来定义, 它也被称为按位取反运算, 即原二进制位是 1 的变为 0, 原二进制位是 0 的变为 1 示例代码如下: var v3 = ~8; console.log(v3); //-9 对 8 进行按位取反运算后, 结果将为 -9, 如果将十进制换成二进制表示, 这个过程就很好理解, 首先 8 的二进制形式如下 : 按位取反后如下 : 前面说过, 负数存储的实际上是补码, 那么通过逆运算, 先对补码减 1, 如下 : 再对补码减 1 后得到的反码取反, 如下 : 上面的原码就是我们最终结果的绝对值形式, 将其转换成十进制并且加上负号, 就得到了 -9 在编程中, 你并不需要对每一次按位取反操作都进行如上推演, 上面介绍的过程只是原理, 理解了原理后, 我们可以通过技巧记忆的方式来快速得到想要的答案, 即对数值的按位取反操作实际上就是将此数值求负再减 1 按位与运算使用 & 符号定义, 是一个二元运算符, 其进行运算的两个操作数的对应二进制位分别进行与运算后将结果返回, 即如果进行运算的相应位都为 1, 最终结果数值的此二进制位为 1, 否则为 0 示例代码如下: var v4 = 1&9; console.log(v4); //1 分解上述代码的计算过程如下 1 的二进制码 : 的二进制码 :

47 第 2 章 ECMAScript 的语法世界进行按位与运算后 : 最终结果为 1 按位或运算使用符号定义, 是一个二元运算符, 其进行运算的两个操作数的对应二进制位分别进行或运算后将结果返回, 即如果进行运算的相应位都为 0, 最终结果的此二进制位为 0, 否则为 1 示例代码如下: var v5 = 8 3; console.log(v5); //11 分解上述代码的计算过程如下 8 的二进制码 : 的二进制码 : 进行按位或运算后 : 最终结果为 11 按位异或运算使用符号 ^ 定义, 是一个二元运算符, 其进行运算的两个操作数对应二进制位分别进行异或运算后将结果返回, 即如果进行运算的相应位不同, 最终结果数值的此二进制位为 1, 否则为 0 示例代码如下: var v6 = 8^11; console.log(v6); //3 分解上述代码的计算过程如下 8 的二进制码 : 的二进制码 : 进行按位异或运算后 :

48 现代 JavaScript 编程 : 经典范例与实践技巧最终结果为 3 按位左移运算使用符号 << 定义, 其作用是将二进制数据向左移动指定的位数, 右侧空出来的位将进行补零操作需要注意, 按位左移操作并不会影响符号位, 移动过程并不包括符号位, 示例代码如下 : var v7 = -2<<2; console.log(v7); //-8 分解上述代码的计算过程如下 -2 的二进制码 ( 补码 ): 进行左移两位的运算后 : 对补码求原码 : 最终结果为 -8 与按位左移运算相对应的还有按位右移运算需要注意, 按位右移运算有两种 : 有符号按位右移运算与无符号按位右移运算其中, 有符号按位右移运算与按位左移运算互为逆运算, 使用 >> 符号定义, 示例如下 : var v8 = -8>>2; console.log(v8); //-2 无符号按位右移运算和有符号按位右移运算最大的不同在于 : 无符号按位右移运算时, 并不保留符号位, 会将符号位一起进行移动, 其使用 >>> 符号定义正数的符号位为 0, 因此对正数并没有影响, 负数就不同了, 示例如下 : var v9 = 8>>>2; console.log(v9); //2 var v10 = -8>>>2; console.log(v10); // 具体过程这里不再重复, 你可以根据前面的示例自行推导一下因此, 在使用无符号右移运算时要极其小心 48

49 第 2 章 ECMAScript 的语法世界 2-17 自增与自减运算符 C 语言中定义了自增与自减两种运算符, 它们是很多初学者的噩梦你或许猜到了, ECMAScript 中也定义了这两种运算符, 并且和 C 语言中定义的用法基本一致自增运算符使用符号 ++ 定义, 自减运算符使用符号 -- 定义简单理解, 自增运算符是在操作数本身的基础上进行加 1 运算, 自减运算符是在操作数本身的基础上进行减 1 运算, 示例代码如下 : // 自增与自减运算符 var a = 10; var b = 10; // 进行自增与自减运算 a++; b--; console.log(a); // 将打印 11 console.log(b); // 将打印 9 需要注意, 自增和自减运算符可以放在操作数后面, 也可以放在操作数前面如果将运算符放在操作数后面, 通常称其为后置自增 / 减运算符 ; 如果将运算符放在操作数前面, 通常称其为前置自增 / 减运算符前置与后置虽然只是一字之差, 其运算过程与结果却差别很大先来看下面这个例子 : // 自增 / 减运算符的前置与后置 var c = 10; var d = 10; console.log(c++); // 将打印 10 console.log(++d); // 将打印 11 console.log(c); // 将打印 11 console.log(d); // 将打印 11 单独打印变量 c 和变量 d 的结果都将是 11, 说明无论是前置自增运算还是后置自增运算, 都是在原操作数的基础上进行加 1 运算然而如果对 c++ 和 ++d 这两个表达式的返回值进行打印, 可以发现前置自增运算返回的是运算完成后的值, 而后置自增运算返回的是运算前的值同样的规则也适用于自减运算符, 示例代码如下 : 49

50 现代 JavaScript 编程 : 经典范例与实践技巧 var e = 10; var f = 10; console.log(e--); // 将打印 10 console.log(--f); // 将打印 9 console.log(e); // 将打印 9 console.log(f); // 将打印条件运算符在开发中, 条件语句的编写必不可少, 然而最简单的条件结构也需要至少 3 行功能代码, 示例如下 : // 条件结构 var res; if(true){ res = 10; else{ res = 0; console.log(res); // 将打印 10 JavaScript 中提供了条件运算符?: 来简化表达的条件结构上面的示例可以简化成如下代码 : // 条件表达式 var res = true?10:0; console.log(res); // 将打印 10 条件运算符组成的表达式结构为逻辑值? 表达式 1: 表达式 2, 当问号前面的逻辑值为 true 时, 运算结果为表达式 1 的值, 当问号前面的逻辑值为 false 时, 运算结果为表达式 2 的值 2-19 逗号运算符与 delete 运算符 ECMAScript 中还定义了一种逗号运算符, 其作用是将多个表达式放入一行语句中执行, 示例如下 : 50

51 第 2 章 ECMAScript 的语法世界 // 逗号表达式 var r1 = 1+3,r2=1*3; console.log(r1),console.log(r2); // 将打印 4 3 逗号运算符在进行多个变量的声明时, 十分方便 JavaScript 中还提供了一个十分特殊的运算符 delete, delete 运算符用于将对象中的某个属性删除, 示例如下 : var obj = { name:" 珲少 ", age:25 ; console.log(obj.name); delete obj.name; console.log(obj.name); // 将打印珲少 // 将打印 undefined 用即可关于对象的更多内容, 后面章节会详细介绍, 这里你只需要了解 delete 运算符的作 2-20 关于运算符的优先级与结合性在任何编程语言中, 运算符的优先级与结合性都是一个老生常谈的话题小学数学老师都一遍遍地告诉过我们先乘除, 后加减的法则在 ECMAScript 语法中, 也遵守类似的法则例如如下表达式计算的值是 22 而不是 28: var res = 2+5*4; console.log(res); // 结果为 22 所谓运算符的优先级, 是指不同运算符在同一个表达式中执行运算的先后顺序优先级高的运算符将优先被执行运算, 例如上面示例代码中的 * 运算符的优先级要高于 + 运算符, 因此先进行乘法运算, 再进行加法运算除了优先级的概念外, 运算符还有结合性概念对于优先级相同的运算符, 结合性决定了其表达式中运算的执行顺序, 结合性分为左结合性和右结合性, 左结合性的运算符将从左向右依次执行, 右结合性的运算符将从右向左依次执行, 示例如下 : // 结合性 // 左结合性 var a = 1+2+3; // 结果为 6, 相当于 (1+2)+3 51

52 现代 JavaScript 编程 : 经典范例与实践技巧 // 右结合性 var b = c = 5; // 相当于 c=5; b=c; 常用运算符的优先级与结合性如表 2-6 所示表 2-6 运算符的优先级与结合性运算符优先级结合性小括号 :() 19 - 后置递增 : 后置递减 : 逻辑非 :! 15 右按位非 :~ 15 右正号运算符 :+ 15 右负号运算符 :- 15 右前置递增 :++ 15 右前置递减 :-- 15 右 Delete 15 右乘法 :* 14 左除法 :/ 14 左取模 :% 14 左加法 :+ 13 左减法 :- 13 左按位左移 :<< 12 左按位右移 :>> 12 左按位无符号右移 :>>> 12 左小于 :< 11 左小于等于 :<= 11 左大于 :> 11 左大于等于 :>= 11 左等于 :== 10 左非等 :!= 10 左全等 :=== 10 左非全等 :!== 10 左按位与 :& 9 左按位异或 :^ 8 左按位或 : 7 左逻辑与 :&& 6 左 52

53 第 2 章 ECMAScript 的语法世界 ( 续表 ) 运算符优先级结合性逻辑或 : 5 左条件 :?: 4 右赋值 := 3 右逗号 :, 0 左来看一个小例子, 你能猜出下面代码的计算结果吗? // 例子 var i=3; var j=3; var n=3; var a = i++ + i++ + i++; //3+4+5 var b = ++j + ++j + ++j; //4+5+6 var c = n n + n++; //3+5+5 console.log(""+i+" "+j+" "+n+" "+a+" "+b+" "+c); //6,6,6,12,15,13 无论你对运算符的优先级与结合性记忆如何, 给你一个建议 : 如果有控制运算顺序的必要, 请强制使用小括号, 一目了然, 省时省心 2-21 隐式类型转换不夸张地说, 类型转换在 ECMAScript 中无时无刻不在进行有些类型转换浅显易见, 例如使用内置函数来进行类型转换, 代码如下 : var n1 = 5; var s1 = String(n1); // 数值转换成字符串 console.log(s1,typeof s1); //5 string 这种使用函数手动进行类型转换的方式常常被称为显式类型转换, 显式转换一般不会为代码带来风险作为开发者, 我们可以一眼看出转换前后的类型在 ECMAScript 中, 最令开发者提心吊胆的是隐式转换, 稍不留神就会掉入其中的陷阱当你将数字与字符串进行相加操作时, 数字会被隐式转换成字符串再进行加操作, 这在前边的案例中也有介绍其实在 ECMAScript 中, 对象之间的加操作也会被隐式转换成字符串, 例如 : 53

54 现代 JavaScript 编程 : 经典范例与实践技巧 var obj1 = {name:"jaki"; var obj2 = {age:25; var v1 = obj1+obj2; console.log(v1); //[object Object][object Object] 加法运算符虽然会经常产生隐式转换, 但是其并不是真正的雷区真正的雷区是关系运算符前面介绍过, 在进行相等比较时,ECMAScript 中提供了两种运算符, 一种是相等运算符 ==, 另一种是全等运算符 === 前面我们说全等运算符要求除了值相等外, 类型也要相等其实这是一种不正确的说法 ( 只是因为便于理解记忆并且比较流行, 所以我们姑且这么说 ), 相等与全等运算符的真正区别在于相等运算符会进行隐式类型转换, 而全等运算符不会第一种说法会让你误认为全等运算符做了更多工作 : 既比较值又比较类型实际上恰好相反, 相等运算符做的工作更多 : 比较前先进行隐式类型转换我们来看一个简单的命题 : 有变量 a,a ==!a 一定不成立这个命题乍看上去必然为真, 那么我们通过代码来测试一下 : var a="0"; var res = (a ==!a); console.log(res); //true 上面的打印结果为 true, 你一定目瞪口呆, 一个值的取反竟然和它本身是相等的如果你了解隐式类型转换的过程, 这个神奇的结果其实一点也不神奇首先, 对字符串 "0" 进行逻辑非运算时, 会被转换成逻辑值 false, 进行等于比较运算时, 逻辑值 false 会被隐式类型转换为数值 0, 而字符串 "0" 也会被隐式转换成数值 0, 因此比较的结果为 true 相等运算符在进行不同类型间的比较时, 大部分情况都会朝数值的方向进行隐式类型转换, 在使用时一定要格外注意还有一些经常会令开发者疑惑的情况, 请看下面的命题 : (1) 有变量 a 和 b, 且都不等于 NaN, 则 a>b a<b 和 a==b 中一定有一个是成立的 (2) 有变量 a 和 b, 且都不等于 NaN, 则 a>=b 和 a<=b 中一定有一个是不成立的这两个命题看上去都是无懈可击的, 看过如下代码, 你就会改变想法了 : var a = {; var b = {; console.log(a>b); console.log(a<b); console.log(a==b); //false //false //false 54

55 第 2 章 ECMAScript 的语法世界 console.log(a>=b); console.log(a<=b); //true //true 奇怪吧, 上面的代码前 3 个全部打印了 false, 当对对象进行大于或小于比较时, 会将其隐式转换为字符串, 对象转换成字符串后都为 [object Object], 因此前两个 log 语句都打印了 false 而针对 a==b 的比较, 这里并没有进行隐式类型转换, 回忆一下前面讲解过的值类型与引用类型就能豁然开朗, 对于对象只有其引用完全相同时, 才算相等第 2 个命题也是假的, 后两个打印了 true, 击破这个命题的原因在于 ECMAScript 中对 >= 和 <= 两种运算符的运算会自动被转换成 < 和 > 隐式类型转换是 ECMAScript 中的一把双刃剑, 其给开发者编写代码带来便利的同时, 也存在很多隐患, 在编写代码时一定要多多注意 2-22 编程练习练习 1: 预测下面 log 语句输出的值 var a = 3; var b = {age:26; var c = a; c = 4; var d = b; d.age = 25; console.log(a,c,b.age,d.age); 解析 : 将会输出 : 本练习主要考察对 JavaScript 中值类型和引用类型的理解值类型数据直接存在变量所在的内存中, 在赋值时会直接复制原始值, 引用类型变量中存放的是数据所在的地址, 赋值时赋的是地址, 因此在修改时会影响所有的变量练习 2: 编写一个函数, 对传入的参数进行类型检查, 如果为 undefined 或者 null, 返回布尔值假, 否则返回真解析 : function check(param){ if (param == undefined param == null) { return false; return true; 55

56 现代 JavaScript 编程 : 经典范例与实践技巧练习 3: 分别用八进制和十六进制和科学计数法来表示十进制数 99 解析 : 科学计数法 :9.9e1 八进制 :0143 或 0o143 十六进制 :0x63 练习 4: 编写函数, 实现如下功能传入两个字符串参数, 以换行符将两个字符串进行拼接, 之后返回解析 : function func(s1,s2){ return s1+'\n'+s2; console.log(func(" 你好 ","JavaScript")); 练习 5: 用两种方式创建教师对象, 为其添加一个 name 属性, 并用两种方式来进行属性的访问解析 : var teacher1 = { name:'jaki' var teacher2 = new Object(); teacher2.name = 'Lucy'; console.log(teacher1.name,teacher2['name']); //Jaki Lucy 练习 6: 创建一个函数, 其功能是生成 1~100 间的一个随机数解析 : function rand(){ return Math.floor(Math.random()*100); console.log(rand()); floor 是 JavaScript 中的一个数学函数, 用来进行浮点数的向下取整,random 函数用来生成一个 0 到 1 之间的随机浮点数练习 7: 思考一下, 如何编写一个函数, 不使用乘法运算符来实现乘以 2 的 n 次方运算解析 : function func(param,c){ 56

57 第 2 章 ECMAScript 的语法世界 return param<<(c); console.log(func(3,2)); //3*2^2 = 12 由于二进制数的运算特点, 因此使用左移位运算可以快速实现乘以 2 的 n 次方运算练习 8: 编写一个函数, 实现如下逻辑若传入的参数为布尔值, 则进行取反后返回 ; 若传入的是字符串值, 则在前面拼接 hello,string: 后返回 ; 如果是大于 100 的数值, 就返回 100, 不大于 100 的数值则返回 1; 如果是对象, 就返回字符串 Object ; 其他情况均返回数值 0 解析 : function func(param){ if (typeof param === 'boolean') { return!param; if (typeof param === 'string') { return "hello,string:"+param; if (typeof param === 'number') { if (param>100) { return 100; else{ return 1; if (typeof param === 'object') { return "Object"; return 0; 练习 9: 编写函数, 使用条件运算符实现如下逻辑输入的参数能整除 3, 就返回 true, 否则返回 false 解析 : function func(param){ return param%3==0?true:false; console.log(func(1)); //false 57

58 现代 JavaScript 编程 : 经典范例与实践技巧练习 10: 你能看出下面 log 语句的输出吗? console.log(1=='1'); console.log(1==='1'); console.log(nan===infinity); console.log(infinity == Infinity+1); console.log(nan == NaN); console.log({=={); 解析 : console.log(1=='1'); //true console.log(1==='1'); //false console.log(nan===infinity); //false console.log(infinity == Infinity+1); //true console.log(nan == NaN); //false console.log({=={); //false == 运算符和 === 运算符的最大区别是 == 会进行隐式类型转换 58

C++ 程序设计告别 OJ1 - 参考答案 MASTER 2019 年 5 月 3 日 1

C++ 程序设计告别 OJ1 - 参考答案 MASTER 2019 年 5 月 3 日 1 C++ 程序设计告别 OJ1 - 参考答案 MASTER 2019 年月 3 日 1 1 INPUTOUTPUT 1 InputOutput 题目描述用 cin 输入你的姓名 ( 没有空格 ) 和年龄 ( 整数 ), 并用 cout 输出输入输出符合以下范例输入 master 999 输出 I am master, 999 years old. 注意 "," 后面有一个空格,"." 结束,