JavaScript学习笔记

1、初识

1.1 认识

js是一种运行在客户端的脚本语言（script是脚本的意思）
脚本语言：不需要编译，运行过程由js解释器逐行进行解释并执行

1.2 作用

表单动态验证、网页特效、服务端开发、桌面程序、APP、控制硬件-物联网、游戏开发

1.3 html/css/js的关系

html(标记语言):决定网页结构和内容（看到什么）
css(标记语言)：决定网页呈现给用户的模样（好不好看）
js(编程类语言)：实现业务逻辑和页面控制（功能）

1.4浏览器执行js简介

1.4.1 浏览器

分类：渲染引擎和js引擎

• 渲染引擎(内核)：用来解析html和css
• js引擎(js解释器)：用来读取网页中的js代码，对其处理后运行

浏览器本身并不会执行js代码，而是通过内置js引擎来执行js代码，js引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机执行

1.5组成

ECMAScript（js语法）：由ECMA国际进行标准化的一门编程语言
DOM（页面文档对象模型）：W3C组织推荐的处理可扩展标记语言的便准编程接口，通过dom提供的接口可对页面上的各种元素进行操作（大小、位置、颜色等）
BOM（浏览器对象模型）：提供了独立于内容的、可以与浏览器窗口进行互动的对象结构，通过bom可以操作浏览器窗口，如弹出框、控制浏览器跳转、获取分辨率等

1.6 js书写位置

1. 行内式JS

<input type="button" value="小机灵" onclick="alert"/>

• 可以将单行或少量JS代码写在HTML标签的事件属性中（以On开头的属性），如onclick
• 注意单双引号的使用：HTML中推荐双引号，JS中推荐单引号
• 可读性差，在HTML中编写大量JS代码时，不方便阅读
• 引号易错，引号多层嵌套匹配时，容易弄混
• 特殊情况下使用

2. 内嵌式JS

• 可以将多行JS代码写到script标签中
• 常用

3. 外部JS

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

• 利用HTML页面代码结构化，把打断JS代码独立到HTML页面之外，既美观，也方便文件级别的复用
• 引用外部JS文件的script标签中间不可以写代码
• 适合于JS代码量比较大的情况

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charest="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <!-- 2、内嵌式js -->
 <script>
 //alert('大聪明')
 </script>
 <!-- 3、外部js（文件my.js）script双标签 -->
 <script src="my.js"></script>
</head>
<body>
 <!-- 1、行内式的js(直接写到元素内部) -->
 <!-- <input type="button" value="小机灵" οnclick="alert('大聪明')"> -->
</body>
</html>

my.js内容：

alert('爱自己是一切的开始')

1.7JS注释

//单行注释(ctrl + /)
/*多行注释
(ctrl + alt + /)
快捷键可在设置-键盘快捷方式修改
初始快捷键：shift+alt+a
*/

1.8输入输出语句

方法	说明	归属
alert(msg)	浏览器弹出警示框	浏览器
console.log(msg)	浏览器控制台打印输出信息	浏览器
prompt(info)	浏览器弹出输入框，用户可以输入	浏览器

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charest="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <script>
 //输入框
 prompt('请输入你的年龄');
 //弹出警示框  用于展示输出
 alert('计算的结果是')
 //控制台输出  用于程序员测试  查看网页源代码后在console查看
 console.log('仅内部人员可见')
 </script>
</head>
<body>
</body>
</html>

2、变量

2.1 变量概述

变量：用于存放数据的容器，我们通过变量名获取数据、修改数据
变量在内存中的存储：变量是程序在内存中申请的一块用来从存放数据的空间

2.2 变量的使用

变量使用步骤：1、声明变量 2、赋值

2.2.1 声明变量

//声明变量
var age;//声明一个名称为age的变量

• var是一个JS关键字，用来声明变量，使用该关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员管
• age是程序员定义的变量名，需要通过变量名来访问内存中分配的空间

2.2.2 赋值

age=10;//将age变量赋值为10

• 变量值是程序员保存到变量空间里的值

2.2.3 变量的初始化

var age = 18; //声明变量的同时赋值为18

案例一

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charest="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <script>
 var myname = '旗木卡卡西';
 var address = '火影村';
 var age = 30;
 var email = 'kakaxi@itcast.cn';
 var gz = 2000;

 console.log(myname);
 console.log(address);
 console.log(age);
 console.log(email);
 console.log(gz);
 </script>
</head>
<body>
</body>
</html>

案例二

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charest="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <script>
 //用户输入后存储在变量中
 var myname = prompt('请输入你的名字');
 //输出
 alert('欢迎' + myname);
 </script>
</head>
<body>

</body>
</html>

2.3 变量语法扩展

更新变量

定义：一个变量被重新赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准

同时声明多个变量

只需要写一个var，多个变量名之间用英文逗号分隔开

声明变量的特殊情况

情况	说明	结果
var age;console.log(age);	只声明，不赋值	undefined（未定义）
console.log(age);	不声明，不赋值，直接使用	报错
age=10;console.log(age);	不声明，只赋值	10（输出正常但会变为全局变量）

2.4 变量命名规范

• 由字母（A-Za-z）、数字、下划线、美元符号组成
• 严格区分大小写
• 不能以数字开头
• 不能是关键字
• 变量名必须有意义
• 遵守驼峰命名法，首字母小写，后面单词的首字母大写

3、数据类型

3.1数据类型简介

数据类型：数据的类别型号，不同数据所需占用的存储空间不同
作用：便于把数据分成所需内存大小不同的数据，充分利用存储空间

3.2变量的数据类型

变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中
js是一种弱类型或者说动态语言，即不用提前声明变量的类型
js的变量数据类型是只有程序在运行时，根据等号右边的值来确定的
js拥有动态类型，即相同的变量可以用作不同的类型

<script>
     var num;//不确定数据类型
     var num=10;//num为数字型
     //js的变量数据类型是只有程序在运行时，根据等号右边的值来确定的
     //js是动态语言，变量的数据类型是可以变化的
     var x=10;//x是数字型
     x='pink';//x是字符串型
</script>

交互编程

三个基本要素

1. 用户输入
2. 程序内部处理
3. 输出结果

程序实现过程

1. 弹出输入框，让用户输入（用户输入）
2. 将用户输入的值用变量保存起来，做相应处理（程序内部处理）
3. 用alert将处理结果输出（输出结果）

分类

• 简单数据类型
• 复杂数据类型

简单数据类型

简单数据类型	说明	默认值
Number	数字型，包含整数值和浮点型值，如21、0.21	0
Boolean	布尔值类型，如true、false，等价于1和0	false
string	字符串类型，如“张三”	“”
undefined	var a；声明了变量a但是没有给值，此时a=undefined	undefined
Null	var a=null;声明了变量a为空值	null

数字型Number

既可以用来保存整数值，也可以保存小数

数字型进制

• 八进制：在数字前加0
• 十六进制：在数字前加0x

数字型范围

1. 最大值：Number.MAX_VALUE：1.7976931348623157e+308
2. 最小值：Number.MIN_VALUE：5e-324

数字型三个特殊值

• infinity：无穷大，大于任何数值
• -infinity：无穷小，小于任何数值
• NaN：Not a number，代表一个非数值

isNaN
作用：判断非数字，若为数字，返回false，否则返回true

字符串型String

字符串型：引号中的任意文本
语法：双引号或单引号

字符串引号嵌套
可使用单引号嵌套双引号，或用双引号嵌套单引号（外双内单，外单内双）

字符串转义符

字符串长度
字符串是由若干字符组成的，这些字符的数量就是字符串长度，通过字符串的length属性可以获取整个字符串的长度

字符串拼接（数值相加，字符相连）

• 多个字符串之间可以使用+进行拼接，其拼接方式为字符串+任何类型=拼接后的新字符串
• 拼接前会把与字符串相加的任何类型转成字符串。再拼接一个新的字符串
• 要输出变量时，变量不能写在字符串里，要采用与字符串相连的方式

布尔型 Boolean

取值：true（真），false（假）
注意：true 参与运算当1看，false 参与运算当0看

Undefined 和Null

Undefined：一个声明后没有被赋值的变量的默认值（注意相连或相加后的结果）
Null：一个声明变量给null值，里面存的值为空

3.3获取变量数据类型

函数名：Typeof
使用：typeof 变量名

字面量

字面量是在源代码中一个固定值的表示法，即字面量表示如何表达这个值

• 数字字面量：8，9，10
• 字符串字面量：‘小机灵’
• 布尔字面量：true，false

3.4变量类型转换

常用转换

• 转换成字符串类型
• 转换为数字
• 转换为布尔型

转换成字符串类型

方式	说明	案例
tostring（）	转成字符串	var num=1;alert(num.tostring())；
String（）强制转换	转成字符串	var num=1;alert(String(变量))；
加号拼接字符串	和字符串拼接的结果都是字符串	var num=1;alert(num+‘字符串’)；

注意：

• toString()和String()使用方法不同
• 常用第三种隐式转换

转换成数字型

方法	说明	案例
parseInt(string)函数	将string类型转成整数数值	parseInt(‘78’)
parseFloat(string)函数	将string类型转成浮点数数值型	parseFloat(‘78.21’)
number()强制转换函数	将string类型转换为数值型	Number(‘12’)
js隐式转换(- / 星号)	利用算数运算隐式转换为数值型	‘12’-0

注意：

• parseInt(string)会向下取整且去掉数字单位（以数字开头的）
• 注意parseInt和parseFloat中的字母大写
• 隐式转换是在进行运算时，js自动转换了数据类型

转换为布尔型

方式	说明	案例
Boolean()函数	其他类型转换册灰姑娘布尔值	Boolean(“true”);

注意：

• 代表空、否定的值会被转换成false,其他值都会被转换成true

标识符、关键字、保留字

标识符： 开发人员为变量、属性、哈数、参数取得名字，不能是关键字或保留字
关键字： 值JS本身已经使用了的字，不能再用来充当变量名或方法名
保留字： 预留的关键字，不能再用来充当变量名或方法名

4、运算符

运算符： 也叫操作符，是用于实现赋值、比较和执行运算等功能的符号

4.1算术运算符

算术运算符

算术运算使用的符号，用于执行两个变量或值得算术运算

注意：

• 尽量避免浮点数直接参与运算
• 注意优先级：先乘除，后加减，有小括号先算小括号

浮点数的精度问题：浮点数的最高精度是17位小数，但在进行算术计算时，其精确度远不如整数

表达式和返回值

表达式：由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合

注意：

• 表达式最终都会由一个结果，返回给我们，即返回值

4.2递增(++)和递减(–)运算符

递增和递减既可以放在变量前面（前置递增/递减运算符），也可以放在变量后面（后置递增/递减运算符）
递增和递减运算符必须和变量配合使用

前置递增运算符

• ++num 前置递增：num = num + 1的简单写法
• 先加一，后返回值

后置递增运算符

• num++ 后置递增：num = num + 1的简单写法，单独使用时，同++num
• 先返回原值，再加一

小结

• 前置递增和后置递增运算符可以简化代码编写
• 单独使用时，前置与后置运行结果相同
• 与其他代码连用时，运行结果不同，前置：先己后人，后置：先人后己
• 开发中常用后置，且代码单独占一行

4.3比较运算符

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

4.4逻辑运算符

逻辑运算符：用来进行布尔值运算的运算符，其返回值也是布尔型，常用于多个条件的判断

注意：

• 逻辑与，一假则假
• 逻辑或，一真则真

短路运算（逻辑中断）

短路运算原理：当有多个表达式（值）时，左边的表达式值可以确定结果时，就不再继续运算右边的表达式的值
逻辑与短路运算：

• 语法：表达式1&&表达式2
• 如果第一个表达式的值为真，则返回表达式2
• 如果第一个表达式的值为假，则返回表达式1

逻辑或短路运算：

• 语法：表达式1||表达式2
• 如果第一个表达式的值为真，则返回表达式1
• 如果第一个表达式的值为假，则返回表达式2

4.5赋值运算符

赋值运算符：用于把数据赋值给变量的运算符

赋值运算符	说明	案例
=	直接赋值	var str=‘小机灵’
+=	加、减一个数后赋值	var age = 10;age += 5//15
×=，/=、%=	乘、除、取模后再赋值	var age = 2;age×=5;//10

4.6 运算符优先级

5、流程控制—分支

5.1 流程控制

流程控制：控制代码按照什么结构顺序来执行
结构分类：顺序结构、分支结构、循环结构

5.2 顺序流程控制

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

5.3 分支流程控制if语句

分支结构

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

if语句

语法结构：if(条件表达式){执行语句}
执行思路：如果条件表达式为真，则执行大括号中的执行语句，否则不执行

if/else双分支语句

语法结构：if(条件表达式){执行语句1}else{执行语句2}
执行思路：如果条件表达式为真，则执行执行语句1，否则执行执行语句2

if else if多分支语句

多分支语句：利用多个条件来选择不同的语句执行，得到不同的结果，多选一的过程
语法结构：if(条件表达式1){执行语句1}else if (条件表达式2){执行语句2}····else{条件表达式n}
执行思路：满足条件表达式几则执行语句几，若都不满足则执行最后的else语句
注意：

• 最后只能有一个语句执行
• else if里面的条件理论上是可以多个的

5.4 三元表达式

三元表达式：有三元运算符组成的式子称为三元表达式，也能做一些简单的条件选择
语法结构：条件表达式 ？表达式1 ： 表达式2
执行思路：如果条件表达式为真，则返回表达式1的值，否则返回表达式2的值

5.5 多分支语句switch语句

switch语句：用于基于不同的条件执行不同的代码，当要针对变量设置一系列的特定值的选项时，可使用switch
语法结构：switch(表达式){case value1: 执行语句1；break； case value2: 执行语句2；break；···default：最后执行的语句n；}
执行思路：根据表达式结果，表达式结果等于value几就执行表达式几，若没有value值与之相等，则执行default里的语句
注意：

• 开发中表达式常使用变量
• 表达式值和value匹配时需要全等，即值和数据类型都一致
• break不写的话会在遇到符合的值后继续执行下一个case，不论值是否匹配，直到遇到break或default为止

5.6 switch和if else if的区别

一般情况下，两个语句可以互相替换
区别：

• switch语句用于处理case为比较确定值的情况，if else if语句更加灵活，常用于范围判断
• switch语句进行条件判断后直接执行到程序的条件语句，效率更高；if else if语句有几种条件就得判断几次
• 分支较少时，if else if语句效率更高，分支较多时，switch的执行效率更高，而且结构更清晰

6、流程控制—循环

6.1 循环

目的：重复执行某些代码
js中提供的循环语句：for循环、while循环、do··while循环
循环体：被重复执行的代码块
终止条件：判断能否继续重复执行的语句

6.2 for循环

语法结构：for(初始化变量；条件表达式；操作表达式){循环体}
变量：

• 初始化变量：用var声明的一个普通变量，通常作为计数器使用
• 条件表达式：用于决定循环是否继续执行，即终止条件
• 操作表达式：每次循环最后执行的代码，用于计数器变量更新（递增或递减）

执行思路：

1. 执行计数器变量 var i=1；初始化变量 在for中只执行依次
2. 条件表达式，判断是否满足条件，如果满足条件，则执行循环，否则退出循环
3. 最后执行操作表达式，递增或递减
4. 继续重复执行条件表达式与操作表达式，直到退出循环

for循环执行相同代码

<script>
    for(var i = 1;i <= 100;i++){
        console.log('Hello');
     }
</script>

for循环执行不同的代码

方法：利用计数器每次循环的时候值的不同

for(var i = 1;i <= 100;i++){
   console.log('这个人今年' + i +'岁了');
}

for循环重复某些相同操作

方法：利用计数器每次循环的时候值的不同

var sum = 0;
for(var i = 1;i <=100;i++){
    sum = sum + i;
}
console.log(sum);

6.3 双重for循环

循环嵌套：在一个循环语句中再定义一个循环语句的语法结构
语法结构：for(外层的初始化变量；外层的条件表达式；外层的操作表达式){for(里层的初始化变量；里层的条件表达式；里层的操作表达式){执行语句}}
注意：

1. 可以把内层循环看成外层循环的语句
2. 外层循环执行一次，内层循环执行全部

6.4 while循环

语法结构：while(条件表达式){循环体}
执行思路：当条件表达式结果为true，则执行循环体，否则退出循环
注意：

1. 循环体中应该也有计数器，需要初始化变量
2. 循环体中应该有用于计数器更新的操作表达式，防止死循环

6.5 do while循环

语法结构：do{循环体}while(条件表达式)
执行思路：与while不同点，do while会先执行一遍循环体，再判断条件，如果条件表达式结果为真，则继续执行循环体，否则退出循环
注意：

1. do while至少会执行一次循环体

6.6 continue break循环

continue关键字：用于立即跳出本次循环，继续下一次循环（本次循环体中continue后的代码会少执行一次）
break：用于立即跳出整个循环

7、命名规范及语法格式

标识符命名规范：

• 变量、函数的命名必须要有意义
• 变量的名称一般用名词
• 函数的名称一般用动词

操作符规范：

• 左右两侧加空格（除++、–外）

单行注释规范：

• 单行注释前加个空格

其他规范：

• if和for的空格前后加空格

8、数组

8.1 数组的概念

数组：值一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素，数组可以讲一组数据存储在单个变量名下

8.1 创建数组

数组的初始化：声明数组并赋值
数组的字面量：[]
创建数组的两种方式：

• 利用new创建数组

 var arr = new Array();

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

 var arr = [];

注意：

• 数组里面的数据用空格隔开
• 数组里面的数据叫做数据元素

数组元素的类型：数组中可以存放任意类型的数据，如字符串，数字，布尔值等

8.3 获取数组中的元素

数组的索引

索引（下标）：用来访问数组元素的序号（数组下标从0开始）
作用：通过下标来访问，设置，修改对应的数组元素，获取形式：数组名[索引]

8.4 遍历数组

方法：利用循环，通过计数器增加索引值，从而一次输出数组的每一个元素
数组长度：数组名.length
利用数组长度可以动态监测数组元素的个数

8.5 数组中新增元素

通过修改数组长度扩容

1. 通过修改length长度来实现数组的扩容
2. length属性是可读写的

通过修改数组索引新增数组元素

1. 通过修改数组索引的方式追加数组元素
2. 不能直接给数组名赋值，否则数组内的元素都没有了

8.6 数组案例