1、JavaScript介绍

1.1、JavaScript是什么？

JavaScript是一门完备的动态编程语言。当应用于HTML文档时，可为网站提供动态交互特性。由布莱登布兰登·艾克发明。

1.2、JavaScript的作用

• 网页特效：监听用户的一些行为让网页做出应对的反馈
• 表单验证：针对表单数据的合法性进行判断
• 数据交互：获取后台数据进行解析，然后渲染到网页
• 服务端编程：编写后台服务（node.js）

1.3、JavaScript的组成

• 核心（ECMAScript）
• 文档对象模型（DOM）
• 浏览器对象模型（BOM）

1.4、JavaScript的注释

• 单行注释： //
• 多行注释： /* */

1.5、JavaScript的结束符

• 分号;
• 换行符默认为结束符

1.6、什么是字面量？

• 字面量是用于表达源代码中的一个固定值的表示法
• 字面量有数字字面量、字符串字面量、数组字面量、对象字面量等

1.7、JavaScript的结输入输出语句

• 输入：prompt()
• 输入：alert()在浏览器窗口、document.write()在body内、console.log()在控制台

1.8、内联JavaScript

<button onclick="alert('hello world')">点击</button>

1.9、内部JavaScript

<script>
  alert('hello world')
</script>

注意：script标签需要放在HTML文件的底部，因为浏览器会按照代码在文件中的顺序加载HTML。如果先加载的JavaScript会修改下方的HTML，可能会由于HTML尚未加载而失效。

1.10、外部JavaScript

<script src="my.js"></script>

注意：

1. script标签中间无需写代码，否则会被忽略。
2. 外部JavaScript会使代码更加有序，更易于复用，且没有了脚本的混合，HTML也会更加易于阅读。

2、变量

2.1、什么是变量？

变量是计算机中用来存储数据的容器，简单理解是一个盒子。

2.2、变量的基本使用

2.2.1 声明变量

语法：

var name;

• 声明变量由两部分构成：关键字（var）、变量名也叫标识符（name）
• var即关键字，是系统提供专门用来定义变量的词语

2.2.2 变量赋值

var name;
name = '张三';

2.2.3 变量更新

var name;
name = '张三';
name = '李四';

2.2.4 声明多个变量

var name='张三', age = 20;

2.3、变量的本质

• 内存：计算机中用来存储数据的地方，相当于一个空间
• 变量：是程序中内存中申请的一块用来存储数据的小空间，用来存储数据的

2.4、变量的命名规范

• 不能用关键字即含有特殊含义的字符，例如：var、for、if、of、else等
• 只能用字母、下划线、数字、$组成，且数字不能开头
• 字母严格区分大小写，如Name和name是不同的变量
• 起名要有意义
• 遵循小驼峰命名法，例如：userInfo、userList

3、数据类型

3.1、为什么要区分数据类型

• 更加充分和高效的利用内存
• 方便使用数据

3.2、数据类型分类

• 基本数据类型：Number（数字型）、String（字符串型）、Boolean（布尔型）、Undefined（未定义型）、Null（空类型）
• 引用数据类型：Object（对象型）、Function（函数型）、Array（数组型）

3.2.1 数字类型（Number）

• 正数、负数、小数统称为数字类型

3.2.2 字符串类型（String）

• 通过单引号（‘’）、双引号（“”）或模板字符串包裹的都叫字符串
• 模板字符串使用反引号（``）包裹，使用变量时直接用$包裹即可，例如：$${name}

3.2.3 布尔类型（Boolean）

• 表示肯定或否定时在计算机中对应的是布尔类型数据
• 表示肯定的数据用true，表示否定的数据用false

3.2.4 未定义类型（Undefined）

• 未定义是比较特殊的类型，只有一个值undefined
• 只声明变量未赋值的情况下，变量的默认值为undefined

3.2.5 空类型（Null）

• Null表示值为空，表示尚未创建的对象
• Null与Undefined的区别是Null表示赋值了，但内容为空。Undefined表示未赋值
• Null比较特殊，数据类型检测时为object

3.3、数据类型检测

通过typeof关键字可以检测数据类型

var name = '张三';
var age = 18;
var flag = false;
var sex;
var user = null;
console.log(typeof name) // string
console.log(typeof age) // number
console.log(typeof flag) // boolean
console.log(typeof sex) // undefined
console.log(typeof user) // object

3.4、数据类型转换

3.4.1、隐式数据类型转换

介绍：某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换

规则：

• +号两边只要有一个是字符串，都会把另外一个转成字符串
• 除了+以外的算术运算符，都会把数据转换成数字型
• +号作为正号解析可以转换成数字型

3.4.1、显式数据类型转换

• 转为数字型：Number()、parseInt()、parseFloat()

注意：

1. 如果转换的内容有非数字，转换失败结果为NaN
2. NaN也是Number类型的数据，代表非数字

• 转为字符串型：String()、toString()

4、运算符

4.1、算术运算符

介绍：数学运算符也叫算术运算符，主要包括加（+）、减（-）、乘（*）、除（/）、取余（%）

优先级：

• 乘、除、取余优先级相同
• 加、减优先级相同
• 乘、除、取余优先级大于加、减
• 使用（）可以提升优先级

4.1、赋值运算符

运算符	例子	等同于
=	a = b	a = b
+=	a += b	a = a + b
-=	a -= b	a = a - b
*=	a *= b	a = a * b
/=	a /= b	a = a / b
%=	a %= b	a = a % b

4.2、一元运算符

自增：

• 符号：++
• 作用：让变量值+1
• 前置自增：先自加在使用
• 后置自增：先试用再自加

自减：

• 符号：–
• 作用：让变量值-1
• 前置自减：先自减在使用
• 后置自减：先试用再自减

4.3、比较运算符

运算符	描述
>	左边是否大于右边
<	左边是否小于右边
>=	左边是否大于或等于右边
<=	左边是否小于等于右边
==	左右两边是否相等
===	左右两边是否类型和值都相等
!==	左右两边是否不全等

4.4、逻辑运算符

符号	名称	读法	特点	口诀
&&	逻辑与	并且	两边都为true结果才为true	一假则假
||	逻辑或	或者	两边有一个为true就为true	一真则真
!	逻辑非	取反	true变false;false变true	真变假;假变真

4.4、运算符优先级

优先级	运算符	顺序
1	小括号	()
2	一元运算符	++、--、!
3	算术运算符	先*、/、%后+、-
4	关系运算符	>、>=、<、<=
5	相等运算符	==、!=、===、!==
6	逻辑运算符	先&&后`
7	赋值运算符	=
8	逗号运算符	,

5、语句

5.1、表达式和语句

• 表达式：是一组代码的集合，JavaScript解析器会将其计算出一个结果
• 语句：JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。

5.2、分支语句

5.2.1 if分支语句

单分支：

if (条件) {
    满足条件要执行的代码
}

双分支：

if (条件) {
    满足条件要执行的代码
} else {
    不满足条件执行的代码
}

多分支：

if (条件1) {
    满足条件1要执行的代码
} else if (条件2) {
    满足条件2要执行的代码
} else {
    不满足条件执行的代码
}

5.2.2 三元运算符

条件 ? 满足条件执行的代码 : 不满足条件执行的代码

5.2.3 switch语句

switch (数据) {
    case 值1:
        执行代码1
        break;
    case 值2:
        执行代码2
        break;
    case 值3:
        执行代码3
        break;
    default:
        代码n
        break;
}

注意：

1. switch case语句一般用于等值判断，不适合于区间判断
2. switch case一般需要配合break关键字使用；没有break会造成case穿透

5.3、循环

5.3.1 for循环

for (声明记录循环次数的变量; 循环条件; 变化值) {
    需要执行的代码
}

5.3.2 while循环

while (循环条件) {
    要重复执行的代码(循环体)
}

5.3.3 do/while循环

do {
    需要执行的代码
} while (条件);

5.3.4 退出循环

• continue：结束本次循环，继续下次循环
• break：跳出所在循环

6、数组

6.1、什么是数组

简介：数组是一种可以按顺序保存数据的数据类型

• 元素：数组中保存的每一个数据都叫做数组元素
• 下标：数组中数据的编号
• 长度：数组中数据的个数，通过数组的length属性获得

6.2、数组的基本使用

声明语法

var 数组名 = [数据1,数据1,数据1,数据1,...];

取值语法

数组名[下标]

遍历数组

for (var i = 0; i < 数组名.length; i++) {
    数组名[i]
}

操作数组

• 增：尾部新增arr.push(新增内容)、头部新增arr.unshift(新增内容)
• 删：arr.pop()删除尾部、arr.shift()删除头部、arr.splice(下标, 个数)、
• 改：数组[下标] = 新值
• 查：数组[下标]

7、函数

7.1、什么是函数？

函数：函数是被设计为执行特定任务的代码块

说明：函数可以把具有相同或相似逻辑的代码包裹起来，通过函数调用执行这些被包裹的代码逻辑，这么做的优势是有利于精简代码方便复用

7.2、函数的使用

声明语法

function 函数名() {
    函数体
}

命名规范

• 和变量命名基本一致
• 尽量小驼峰式命名法
• 前缀应该为动词

调用语法

函数名()

7.3、函数传参

声明语法

function 函数名(参数列表) {
    函数体
}

调用语法

函数名(传递的参数列表)

7.3.1 形参和实参

• 形参：声明函数时写在函数名右边小括号里的叫形参
• 实参：调用函数时写在函数名右边小括号里的叫实参
• 形参可以理解为在这个函数内声明的变量，实参可以理解为是给这个变量赋值
• 尽量保持形参和实参的个数一致

7.4、函数返回值

• 当函数需要返回数据出去时，用return关键字
• 语法：return 数据

说明：

1. 在函数体中使用return关键字能够将内部的执行结果交给函数外部使用
2. 函数内部只能出现一次return，并且return后面的代码不会再被执行
3. return会立即结束当前函数
4. 函数没有return1时，默认返回undefined

7.5、匿名函数

介绍：将匿名函数赋值给一个变量，并且通过变量名称进行调用。我们将这个称为函数表达式

语法：

var fn = function(){}

调用：

fn()

7.6、立即执行函数

语法：

方式1
(function () {})()

方式2
(function () {}())

8、作用域

8.1、作用域概述

• 通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用性
• 作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突
• 全局作用域：全局有效，作用于所有代码执行的环境
• 局部作用域：局部有效，作用于函数内的代码环境，也叫函数作用域
• 块级作用域：{}内有效，块级作用域由{}包裹

8.2、变量作用域

• 全局变量：函数外部的变量，在任何区域都可以访问和修改
• 局部变量：函数内部的变量，在当前函数内部访问和修改

8.3、作用域链

• 只要是代码，就至少有一个作用域
• 写在函数内部的局部作用域
• 如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域
• 根据在函数内部可以访问函数外部的变量这种机制，用链式查找决定哪些数据能被内部函数访问，就称为作用域链

9、对象

9.1 对象是什么

• 对象是一种数据类型
• 无序的数据集合

9.1 对象使用

语法：

var 对象名 = {}

组成：

var 对象名 = {
    属性名: 属性值,
    方法名: 函数
}

• 属性：信息或叫特征（名词）
• 方法：功能或叫行为（动词）

属性访问：

• 使用.或[]获得对象中的属性值

方法调用：

• 使用.调用对象中的方法

9.2 操作对象

• 增：对象名.新属性名 = 值
• 删：delete 对象名.属性名
• 改：对象.属性 = 值;对象.方法 = function() {}
• 查：对象.属性 或 对象[‘属性’];对象.方法()

遍历对象：

var obj = {
    name: '张三',
    age: 18,
    sex: '男'
}

for (var key in obj) {
    console.log(key); // 打印属性名
    console.log(obj[key]) // 打印属性值
}