本章的重点：

  • 环境搭建和 JavaScript 基础
  • 控制结构和函数
  • JavaScript 面向对象编程
  • 调试工具

代码参仓库地址：
GitHub 上的托管地址是 https://github.com/PacktPublishing/Learning-JavaScript-Data-Structures-and-Algorithms-Third-Edition。
其他图书或视频的代码包也 可以到 https://github.com/PacktPublishing/查阅。

1.1 js数据结构与算法

Apache Cordova : 是一个能让开发者使用 HTML、CSS 和 JavaScript 等语言的混 合式框架，你可以通过它来搭建应用，并且生成供 Android 系统使用的 APK 文件和供 iOS（苹果 系统）使用的 IPA 文件
Electron :编写同时兼容 Linux、Mac OS 和 Windows 的桌面端应用

1.2 环境搭建

1.2.1准备：

安装 Chrome 或 Firefox 浏览器
选择一个喜欢的编辑器（如 Visual Studio Code）
一个 Web 服务器（XAMPP 或其他你喜欢的，这一步是可选的）
f12打开控制台 可以再console栏写任何自己想写的代码
image.png

1.2.2 使用 Web 服务器

  1. 由于我们会专注于服务端和浏览器上的 JavaScript，可以在 Chrome 上安装一个简单的 Web 服务器，它是一个叫作 Web Server for Chrome 的扩展。安装好之后，可以在浏览器地址栏中输 入 chrome://apps 来找到它 <br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/12426279/1630571548798-e628096f-b3d1-4a9c-b8ef-ba8dec254201.png#clientId=ub6c71c00-1fad-4&from=paste&height=262&id=u816edc43&margin=%5Bobject%20Object%5D&name=image.png&originHeight=262&originWidth=511&originalType=binary&ratio=1&size=65504&status=done&style=none&taskId=u6c5028b5-cc05-4715-8f2e-d8a4867a674&width=511)<br /> 打开 Web Server 扩展后，可以点击 CHOOSE FOLDER 来选择需要在哪个文件夹中开启服 务器。你可以新建一个文件夹来执行要在本书中实现的代码，也可以下载本书的源代码并将其解 压缩到你喜欢的目录下，然后就能通过设定的 URL（默认是 http://127.0.0.1:8887）来访问它了  <br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/12426279/1630571586221-d6311f09-f9cb-46f9-9bb2-388e892d60b9.png#clientId=ub6c71c00-1fad-4&from=paste&height=286&id=uc2c54145&margin=%5Bobject%20Object%5D&name=image.png&originHeight=286&originWidth=469&originalType=binary&ratio=1&size=53660&status=done&style=none&taskId=u6b6d3d5d-45ec-4000-a9f5-6408f0275e6&width=469)

或者用直接用npm包 http-server

1.2.3 Node.js http-server

搭建这个环境需要安装 Node.js 。首先要到 http://nodejs.org/下载和安装 Node.js。然后，打开终端应用（如果你用的是 Windows 操作系统， 打开 Node.js 的命令行，它随 Node.js 一同安装了），输入如下命令 

  1. npm install http-server -g

这条命令会在你的机器上安装一个 JavaScript 服务器：http-server。要启动服务器并在终 端应用上运行本书中的示例代码，请将工作路径更改至示例代码文件夹，然后输入 http server，如下图所示。

image.png
打开浏览器，通过 http-server 命令指定的端口访问
image.png

1.3 JavaScript 基础

在关闭 body 标签前引入 JavaScript 代码。这样浏览器就会在加载脚本之前解析和显示 HTML，有利于提 升页面的性能。
JavaScript 不是强类型语言 ， 在 JavaScript 中，我们只需要使用关键字 var，而不必指定变量类型
null 表示变量没有值，undefined 表示变量已被声明，但尚 未赋值
image.png

1.3.1 运算符

运算符（ 算术运算符、赋值运算符、比较运算符、逻辑运算符、位运算符、一元运算符和其他运算符 ）

image.png
image.png
image.png
image.png
image.png
image.png

1.3.1.1 其他类型转换成布尔值

image.png

1.3.1.2 typeof 运算符

可以返回变量或表达式的类型。我们看下面的代
image.png
image.png
原始数据类型：null、undefined、字符串、数、布尔值和 Symbol①。  派生数据类型/对象：JavaScript 对象，包括函数、数组和正则表达式
image.png

1.3.1.3 相等运算符（==和=== ）

1）==
image.png
image.png

image.png

  1.     该函数形式如下：
  2.     toPrimitive(input,preferedType?)
  3.     input是输入的值，preferedType是期望转换的类型，他可以是字符串，也可以是数字。
  5.     如果转换的类型是number，会执行以下步骤：
  6.      1. 如果input是原始值，直接返回这个值；
  7.      2. 否则，如果input是对象，调用input.valueOf()，如果结果是原始值，返回结果；
  8.      3. 否则，调用input.toString()。如果结果是原始值，返回结果；
  9.      4. 否则，抛出错误。
  11.      如果转换的类型是String，2和3会交换执行，即先执行toString()方法。
  12.     你也可以省略preferedType，此时，日期会被认为是字符串，而其他的值会被当做Number。

image.png
2） ===
image.png

1.4 控制结构

条件语句支持 if…else 和 switch。循环支 持 while、do…while 和 for

1.4.1 条件语句

if…else
switch 语
image.png

1.4.2 循环

image.png
image.png

1.5 函数

形参，实参，返回值

1.6 JavaScript 面向对象编程

  1. JavaScript 里的对象就是普通名值对的集合。创建一个普通对象有两种方式。
  2. 第一种方式是：
  3. var obj = new Object(); 
  4. 第二种方式是：
  5. var obj = {}; 
  6. 我们也可以这样创建一个完整的对象：
  7. obj = { 
  8.  name: { 
  9.  first: 'Gandalf', 
  10.  last: 'the Grey' 
  11.  }, 
  12.  address: 'Middle Earth' 
  13. }; 
  14. 可以看到，声明 JavaScript 对象时，键值对中的键就是对象的属性，值就是对应属性的值。
  15. 在本书中，我们创建的所有的类，如 Stack、Set、LinkedList、Dictionary、Tree、Graph
  16. 等，都是 JavaScript 对象

image.png
image.png
image.png

1.7 调试工具

Firefox、Safari、Edge 和 Chrome 都支持调试。
谷歌开发者工具的好教程 https://developer.chrome.com/devtools/docs/javascript-debugging
image.png