什么是 JavaScript

JavaScript 一种直译式脚本语言，一种基于对象和事件驱动并具有安全性的客户端脚本语言；也是一种广泛应用客户端 web 开发的脚本语言。简单地说，JavaScript 是一种运行在浏览器中的解释型的编程语言。

JavaScript 的基本结构

<script type="text/javascript">JS语句;</script>

JavaScript 的使用方法

HTML 标签中内嵌 JS：

<button onclick="alert('欢迎进入JavaScript世界')">点击我</button>

HTML 页面中直接使用 JS：

<script type="text/javascript">JS语句;</script>

引用外部 JS 文件：

<script src="JS文件路径"></script>

变量

变量：是用于存储信息的容器，是命名的内存空间，可以使用变量名称找到该内存空间；JavaScript 的变量是松散类型（弱类型）的，就是用来保存任何类型的数据。在定义变量的时候不需要指定变量的数据类型。JavaScript 定义变量有四种方法：const、let、var，还有一种是直接赋值，比如 a = "a"（不规范，不推荐使用） var 定义的变量可以修改，如果不初始化会输出 undefined，不会报错。 let 是块级作用域，定义的变量只在 let 命令所在的代码块内有效，变量需要先声明再使用。 const 定义的变量不可以修改，而且必须初始化，const 定义的是一个恒定的常量，声明一个只读的常量或多个，一旦声明，常量值就不能改变。在函数外声明的变量作用域是全局的，全局变量在 JavaScript 程序的任何地方都可以访问；在函数内声明的变量作用域是局部的（函数内），函数内使用 var 声明的变量只能在函数内容访问。

声明变量注意：

• JS 中所有变量类型声明，均使用 var 关键字。
• 变量的具体数据类型，取决于给变量赋值的执行。
• 同一变量可在多次不同赋值时，修改变量的数据类型。
• 变量的命名规范
• 变量命名名要符合驼峰法则：变量开头为小写，之后每个单词首字母大写。

JavaScript 变量的命名规则

• 变量命名必须以字母、下划线”_”或者”$”为开头。其他字符可以是字母、下划线、美元符号或数字。
• 变量名中不允许使用空格和其他标点符号，首个字不能为数字。
• 变量名长度不能超过 255 个字符。
• 变量名称对大小写敏感（y 和 Y 是不同的变量），JavaScript 语句和变量都对大小写敏感。
• 变量名必须放在同一行中。
• 不能使用脚本语言中保留的关键字、保留字、true、false 和 null 作为标识符。

JavaScript 中的变量的数据类型

String： 字符串类型，用 "" 或 '' 包裹的内容，称为字符串。
Number： 数值类型，可以是小数，也可以是正数。
Boolean： 布尔类型，可选值 true/false。
Object： 对象类型（引用类型）
Null： 表示为空的引用。var a = null;
Undefined： 表示未定义，用 var 声明的变量，没有进行初始化赋值。如：var a;

JavaScript 对象

对象：是封装一个事物的属性和功能的程序结构，是内存中保存多个属性和方法的一块存储空间。
JavaScript 对象是拥有属性和方法的数据，是变量的容器。
JavaScript 中所有事物都是对象：数字、字符串、日期、数组等。
JavaScript 对象可以是字面量创建、用作变量，数组元素和其他对象的属性、作为参数传递给函数及作为返回值。

用字面量创建：

let myObject = {}
function MyFunc() {}

用作变量、数组元素和对象属性

var myFunc = function () {}
myArray.push(function () {})
myObject.myFunc = function () {}

作为参数传递给其他函数：

function myFunc(someFunc) {
  someFunc()
}
myFunc(function () {})

作为返回值：

function myFunc() {
  return function () {}
}

在 JavaScript 中定义对象有 5 种方式：

• 基于已有对象扩充其属性和方法
• 工厂方式
• 构造函数方式
• 原型(“prototype”)方式
• 动态原型方式

JavaScript 中的对象分为三类：

• 内置对象（静态对象）： JS 本身已经内置对象，我们可以直接使用不需要定义它。常见的内置对象有 Global、Math（它们也是本地对象，根据定义每个内置对象都是本地对象）。
• 本地对象（非静态对象）： 必须实例化才能使用其方法和属性的就是本地对象。常见的本地对象有 Object、Function、Data、Array、String、Boolean、Number、RegExp、Error 等。
• 宿主对象： JS 运行和存活的地方，它的生活环境就是 DOM（文档对象模式）和 BOM（浏览器对象模式）。

JavaScript 函数

使用函数前要先定义才能调用，函数的定义分为三部分：函数名，参数列表，函数体定义函数的格式：

function 函数名(参数列表){
  函数执行部分；
  return 表达式；
}

函数有三种定义方法：

• 函数定义语句
• 函数直接量表达式
• Function 构造函数

函数有四种调用模式：

• 函数调用模式（通过函数调用）
• 方法调用模式（通过对象属性调用）
• 构造函数模式（如果是作为构造函数来调用，那么 this 指向 new 创建的新对象）
• 函数上下文（借用方法模式：它的 this 指向可以改变，而前三种模式是固定的）；函数上下文就是函数作用域；基本语法：apply 和 call 后面都是跟两个参数。）

函数的两种参数形式

• 形参：在函数定义时所指定的参数就称之为“函数的形参”。
• 实参：在函数调用时所指定的参数就称之为“函数的实参”。

运算符

• 算术运算符： 主要是用来进行 JavaScript 中的算术操作。（+、-、\*、/、%、++、--）
• 赋值运算符： =用于给 JavaScript 变量赋值，其作用就是把右侧的值赋给左侧的变量。
• 关系运算符： 用于进行比较的运算符。主要有小于（<）、大于（>）、等于（==）、大于等于（>=）、小于等于（<=）、不等（!=）、恒等（===）、不恒等（!==）。
• 逻辑运算符： 逻辑运算符通常用于布尔值的操作，返回结果是一个布尔类型，一般和关系运算符配合使用，有三个逻辑运算符：逻辑与(AND) &&、逻辑或(OR) ||、逻辑非(NOT) !。
• 字符串连接运算符： 是用于两个字符串型数据之间的运算符，它的作用是将两个字符串连接起来。在 JavaScript 中，可以使用+和+=运算符对两个字符串进行连接运算。
• 三目操作符（条件运算符）： ?根据不同的条件，执行不同的操作/返回不同的值。

JavaScript 条件语句

分为四种条件语句：

• if 语句： 只有当指定条件为true时，使用该语句来执行代码
• if-else 语句： 当条件为true时执行代码，当条件为false时执行其他代码
• if-else if-else 语句： 使用该语句来选择多个代码块之一来执行
• switch 语句： 同上，switch 的工作原理如下： 首先设置表达式n（通常是一个变量），随后表达式的值会与结构中的每个case值作比较；如果存在匹配则该关联代码块执行；然后使用 break 来阻止代码自动的向下一个case运行；default关键词来规定匹配不存在时做的事情。

JavaScript 不同类型的循环

常见的循环主要是三种：for 循环、while 循环、do/while 循环。

• for 循环： 代码块有一定的次数。for 有三个表达式：1 声明循环变量 2 判断循环条件 3 更新循环变量特点：先判断再执行，与 while 相同。
• while 循环： 当指定的条件为 true 时循环指定的代码块。
• do/while 循环： 同 while 循环一样。特点：先执行再判断，即使初始条件不成立，do/while 循环至少执行一次。

循环结构的执行步骤：

• 声明变量
• 判断循环条件
• 执行循环体操作
• 更新循环变量
• 最后执行循环 2-4，直到条件不成立，跳出循环

JavaScript Break 和 Continue 语句

• break： 跳出本层循环，继续执行循环后面的语句。如果循环有多层，则 break 只能跳出一层。
• continue： 跳过本次循环剩余的代码，继续执行下一次循环。对与 for 循环，continue 之后执行的语句，是循环变量更新语句 i++；对于 while、do-while 循环，continue 之后执行的语句，是循环条件判断；因此，使用这两个循环时，必须将 continue 放到 i++之后使用，否则，continue 将跳过 i++进入死循环。

JavaScript 错误处理使用 try ... catch ... finally

一种是程序写的逻辑不对，导致代码执行异常； 另一种是执行过程中，程序可能遇到无法预测的异常情况而报错。 throw 声明 onerror 事件

JavaScript 框架（库）

jQuery 库

• jQuery 函数是$()或jQuery()函数。
• jQuery 库包含以下功能： HTML 元素选取、元素操作、CSS 操作、HTML 事件函数、JavaScript 特效和动画、HTML DOM 遍历和修改、AJAX、Utilities 面向对象编程包括 创建对象、原型继承、class 继承。类是对象的类型模板；实例是根据类创建的对象。

AngularJS 框架

AngularJS 最为核心的特性为：MVC、模块化、自动化双向数据绑定、语义化标签及依赖注入等。

React 库

React 被称为构建用户接口而提供的 JavaScript 库；主要用来构建 UI，其专注于 MVC 的 V 部分。

Vue.js 框架

Vue.js 是用来构建 Web 应用接口的一个框架，技术上，Vue.js 重点集中在 MVVM 模式的 ViewModel 层，用于连接视图和数据绑定模型

Require JS

RequireJS 是一个 JavaScript 模块加载器，提高网页的加载速度和质量。

d3.js

数据可视化和图表是 Web 应用中不可或缺的一部分。d3.js 就是最流行的可视化库之一，它允许绑定任意数据到 DOM，然后将数据驱动转换应用到 Document 中。

JavaScript 中的 this

this 的指向：

• 方法中的 this 指向调用它所在方法的对象。
• 单独使用 this，指向全局对象。
• 函数中，函数所属者默认绑定到 this 上。

this 的使用场合：

• 全局环境
• 构造函数
• 对象的方法
• Node

JavaScript 闭包

闭包是指有权访问另一个函数作用域中的变量的函数。创建闭包就是创建了一个不销毁的作用域。闭包需要了解的几个概念： 作用域链、执行上下文、变量对象。

闭包的优势：

• 缓存
• 面向对象中的对象
• 实现封装，防止变量跑到外层作用域中，发生命名冲突
• 匿名自执行函数，匿名自执行函数可以减少内存消耗

闭包的劣势：

• 可能导致内存泄漏
• 涉及到跨作用域访问是时会导致性能耗损

Window 对象

• 所有浏览器都支持 window 对象。它表示浏览器窗口。
• 所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
• 全局变量是 window 对象的属性。
• 全局函数是 window 对象的方法。

JSON

JSON 是一种轻量级的数据交换格式；JSON 是独立的语言；JSON 易于理解。

JSON 语法规则：

• 数据为 键/值对。
• 数据由逗号分隔。
• 大括号保存对象。
• 方括号保存数组。