【JavaScript整理】

---

一、JavaScript 是什么

1.1 概念

• JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言 （Script 是脚本的意思）
• 脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行
• 现在也可以基于 Node.js 技术进行服务器端编程

1.2 作用

• 表单动态校验（密码强度检测）
• 网页特效
• 服务端开发(Node.js)
• 桌面程序(Electron)
• App(Cordova)
• 控制硬件-物联网(Ruff)
• 游戏开发(cocos2d-js)

1.3 浏览器执行 JS 简介

浏览器分成两部分：渲染引擎和 JS 引擎。

• 渲染引擎：用来解析HTML与CSS，俗称内核，比如 chrome 浏览器的 blink ，老版本的 webkit
• JS 引擎：也称为 JS 解释器。 用来读取网页中的JavaScript代码，对其处理后运行，比如 chrome 浏览器的 V8。
  浏览器本身并不会执行JS代码，而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码 。JS 引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以 JavaScript 语言归为脚本语言，会逐行解释执行。

1.4 js 的组成

1. ECMAScript
ECMAScript 是由ECMA 国际（ 原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为 JavaScript 或 JScript，但实际上后两者是 ECMAScript 语言的实现和扩展。
ECMAScript 规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。

2. DOM ——文档对象模型
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）。

3. BOM ——浏览器对象模型
BOM (Browser Object Model，简称BOM) 是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

1.5 js书写样式

JS 有3种书写位置，分别为行内、内嵌和外部。
（1）行内

（2）内嵌

（3）外部

1.6 js输入输出语句

注意：alert() 主要用来显示消息给用户，console.log() 用来给程序员自己看运行时的消息。

---

二、数据类型

变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。JavaScript 是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。
在代码运行时，变量的数据类型是由 JS引擎 根据 = 右边变量值的数据类型来判断的，运行完毕之后， 变量就确定了数据类型。
JavaScript 拥有动态类型，同时也意味着相同的变量可用作不同的类型。

JS 把数据类型分为两类：

• 简单数据类型 （Number,String,Boolean,Undefined,Null）
• 复杂数据类型 （object)

2.1 简单数据类型

2.1.1 数字型Number

JavaScript 数字类型既可以用来保存整数值，也可以保存小数(浮点数）。

• 数字型范围
  JavaScript中数值的最大和最小值。
  
• 数字型三个特殊值
  
• Infinity ，代表无穷大，大于任何数值
• -Infinity ，代表无穷小，小于任何数值
• NaN ，Not a number，代表一个非数值
• isNaN()
  用来判断一个变量是否为非数字的类型，返回 true 或者 false
  

2.1.2 字符串型 String

因为 HTML 标签里面的属性使用的是双引号，JS 这里我们更推荐使用单引号。

1. 字符串转义符
   类似HTML里面的特殊字符，字符串中也有特殊字符，我们称之为转义符。
   转义符都是 \ 开头的，常用的转义符及其说明如下：
   
2. 字符串长度
   字符的数量就是字符串的长度。通过字符串的 length 属性可以获取整个字符串的长度。
   
3. 字符串拼接

• 多个字符串之间可以使用 + 进行拼接，其拼接方式为 字符串 + 任何类型 = 拼接之后的新字符串。
• 拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串
  
  
  + 号总结口诀：数值相加 ，字符相连

4. 布尔型 Boolean
   布尔类型有两个值：true 和 false ，其中 true 表示真（对），而 false 表示假（错）。
   布尔型和数字型相加的时候， true 的值为 1 ，false 的值为 0。
   
5. Undefined 和 Null
   一个声明后没有被赋值的变量会有一个默认值 undefined ( 如果进行相连或者相加时，注意结果）
   
   一个声明变量给 null 值，里面存的值为空（学习对象时，我们继续研究null)
   

2.1.3 获取变量数据类型

1. 获取检测变量的数据类型
   typeof 可用来获取检测变量的数据类型。
   
2. 字面量
   字面量是在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值。

---

三、js运算符

3.1 运算符的概念

运算符（operator）也被称为操作符，是用于实现赋值、比较和执行算数运算等功能的符号。
JavaScript中常用的运算符有：

• 算数运算符
• 递增和递减运算符
• 比较运算符
• 逻辑运算符
• 赋值运算符

3.2 算数运算符

概念：算术运算使用的符号，用于执行两个变量或值的算术运算。

3.3 递增和递减运算符

如果需要反复给数字变量添加或减去1，可以使用递增（++）和递减（ -- ）运算符来完成。
在 JavaScript 中，递增（++）和递减（ – ）既可以放在变量前面，也可以放在变量后面。放在变量前面时，我们可以称为前置递增（递减）运算符，放在变量后面时，我们可以称为后置递增（递减）运算符。
注意：递增和递减运算符必须和变量配合使用。

1. 前置递增运算符++num
   使用口诀：先自加，后返回值
2. 后置递增运算符num++
   使用口诀：先返回原值，后自加

3.4 比较运算符

概念：比较运算符（关系运算符）是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值（true / false）作为比较运算的结果。

“=小结：”

3.5 逻辑运算符

概念：逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值。后面开发中经常用于多个条件的判断。

3.6 赋值运算符

概念：用来把数据赋值给变量的运算符。

3.7 运算符优先级

• 一元运算符里面的逻辑非优先级很高
• 逻辑与比逻辑或优先级高

---

四、js流程控制

4.1 流程控制的概念

在一个程序执行的过程中，各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。
简单理解： 流程控制就是来控制我们的代码按照什么结构顺序来执行。
流程控制主要有三种结构，分别是顺序结构、分支结构和循环结构，这三种结构代表三种代码执行的顺序。

4.2 顺序流程控制

顺序结构是程序中最简单、最基本的流程控制，它没有特定的语法结构，程序会按照代码的先后顺序，依次执行，程序中大多数的代码都是这样执行的。

4.3 分支流程控制

4.3.1 分支结构的概念

由上到下执行代码的过程中，根据不同的条件，执行不同的路径代码（执行代码多选一的过程），从而得到不同的结果
JS 语言提供了两种分支结构语句：

1. if语句
2. switch 语句

4.3.2 if 语句

4.3.3 if else语句（双分支语句）

4.3.4 if else if 语句(多分支语句)

4.3.5 三元表达式

三元表达式也能做一些简单的条件选择。 有三元运算符组成的式子称为三元表达式。

如果表达式1为 true ，则返回表达式2的值，如果表达式1为 false，则返回表达式3的值

4.3.6 分支流程控制 switch 语句

switch 语句也是多分支语句，它用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特定值的选项时，就可以使用 switch。

• switch ：开关 转换 ， case ：小例子 选项
• 关键字 switch 后面括号内可以是表达式或值， 通常是一个变量
• 关键字 case , 后跟一个选项的表达式或值，后面跟一个冒号
• switch 表达式的值会与结构中的 case 的值做比较
• 如果存在匹配全等(===) ，则与该 case 关联的代码块会被执行，并在遇到 break 时停止，整个 switch 语句代码执行结束
• 如果所有的 case 的值都和表达式的值不匹配，则执行 default 里的代码
• 执行case 里面的语句时，如果没有break，则继续执行下一个case里面的语句。

switch 语句和 if else if 语句的区别

4.4 循环流程控制

4.4.1 循环的概念

循环目的：
在实际问题中，有许多具有规律性的重复操作，因此在程序中要完成这类操作就需要重复执行某些语句。
在Js 中，主要有三种类型的循环语句：

• for 循环
• while 循环
• do…while 循环

4.4.2 for 循环

在程序中，一组被重复执行的语句被称之为循环体，能否继续重复执行，取决于循环的终止条件。由循环体及循环的终止条件组成的语句，被称之为循环语句。
for 循环主要用于把某些代码循环若干次，通常跟计数有关系。其语法结构如下：

• ==初始化变量：==通常被用于初始化一个计数器，该表达式可以使用 var 关键字声明新的变量，这个变量帮我们来记录次数。
• ==条件表达式：==用于确定每一次循环是否能被执行。如果结果是 true 就继续循环，否则退出循环。
• ==操作表达式：==每次循环的最后都要执行的表达式。通常被用于更新或者递增计数器变量。当然，递减变量也是可以的。

4.4.3 双重 for 循环

很多情况下，单层 for 循环并不能满足我们的需求，比如我们要打印一个 5 行 5 列的图形、打印一个倒
直角三角形等，此时就可以通过循环嵌套来实现。
循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构，例如在for循环语句中，可以再嵌套一个for 循环，这样的 for 循环语句我们称之为双重for循环。

4.4.4 while 循环

while 语句可以在条件表达式为真的前提下，循环执行指定的一段代码，直到表达式不为真时结束循环。
while语句的语法结构如下：

4.4.5 do while 循环

do… while 语句其实是 while 语句的一个变体。该循环会先执行一次代码块，然后对条件表达式进行判断，如果条件为真，就会重复执行循环体，否则退出循环。
do… while 语句的语法结构如下：

4.4.6 continue break

1. continue 关键字
   continue 关键字用于立即跳出本次循环，继续下一次循环（本次循环体中 continue 之后的代码就会少执行一次）。
   例如，吃5个包子，第3个有虫子，就扔掉第3个，继续吃第4个第5个包子，其代码实现如下：
2. break 关键字

break 关键字用于立即跳出整个循环（循环结束）。
例如，吃5个包子，吃到第3个发现里面有半个虫子，其余的不吃了，其代码实现如下：

---

五、js数组

5.1 数组的概念

数组是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式。

5.2 创建数组

JS 中创建数组有两种方式：

• 利用 new 创建数组
  

• 利用数组字面量创建数组
  

---