目录
5.2 switch 语句和if esle if 语句的区别
一、JavaScript认识阶段
1. JavaScript的组成
JavaScript由三部分组成:ECMAScript+DOM+BOM
ECMAScript:JavaScript语法;规定了JS的编程语法和基础核心知识,是所有浏览器厂商共同遵守的一套JS语法工业标准
(JSapi)DOM:页面文档对象模型
(JSapi)BOM:浏览器对象模型
2. JavaScript书写位置
JS中用单引号
1、行内式
直接写在HTML标签事件中
2、内嵌式
写在<script></script>标签中
3、外部式
写在js文件中,将js文件引入html文件<script src=“”></script>
3. 注释
单行注释 //
多行注释/* */
4. JavaScript输入输出语句
方法 | 说明 | 归属 |
alert(msg) | 浏览器弹出警示框 | 浏览器 |
console.log(msg) | 浏览器控制台打印输出信息 | 浏览器 |
prompt(info) | 浏览器弹出输入框,用户可以输入内容 | 浏览器 |
二、变量
1. 变量概述
1.1 变量介绍
装数据的容器成为变量,我们可以通过变量名获取数据。
1.2 变量在内存中的存储
本质:变量是在程序内存中申请的一块用来存放数据的空间。
2. 变量的使用
两步1声明变量 2赋值
1.声明变量
var age; //声明一个名称为age的变量
2.赋值
age = 10; //给age这个变量赋值10
3.变量的初始化
声明变量并赋值
3. 变量的语法拓展
1.更新变量
一个变量被重新赋值后,原有的值会被覆盖
2.同时声明多个变量
多个变量名之间用逗号隔开
var age = 24,
name = 'w',
sex = 1;
3.声明变量的特殊情况
情况 | 说明 | 结果 |
var age; console.log(age); | 只声明不赋值 | undefined |
console.log(age) | 不声明不赋值直接使用、 | 报错 |
age = 10; console.log(age) | 不声明只赋值 | 10 |
4. 变量命名规范
- 由字母、数字、下划线(_)、美元符号($)组成
- 严格区分大小写
- 不能以数字开头
- 不能是关键字、保留字 例如:var、for、while
- 变量名必须有意义
- 遵守驼峰命名法。首字母小写,后面单词的首字母大写。如myHeat
三、数据类型
1. 数据类型简介
1.1 为什么需要数据类型
不同是数据所需存储空间不同,所有定义了不同的数据类型。
1.2 变量的数据类型
在代码运行时,变量的数据类型是由JS引擎根据=右边变量值来判断,运行完毕后变量就确定了数据类型
JavaScript拥有动态类型,意味着相同的变量可用作不同的数据类型。
1.3 数据类型的分类
JS把数据类型分为两大类
- 简单数据类型(Number,String,Boolean,Undefined,Null)
- 复杂数据类型(Object)
2. 简单数据类型
2.1 简单数据类型(基本数据类型)
简单数据类型 | 说明 | 默认值 |
Number | 数字型,包含整型值和浮点型值,如21、0.21 | 0 |
Boolean | 布尔值类型 | false |
String | 字符串类型 | “” |
Undefined | var a;声明了变量a但是没有给a赋值 | undefined |
Null | var a = null;声明了变量a为空值 | null |
2.2 数字型Number
1、数字型进制
八进制:在数字前面加0;
十六进制:在数字前面加0x
2、数字型范围
JavaScript中数值的最大和最小值
Number.MAX_VALUE; //最大值 1.7976931348623157e+308
Number.MIN_VALUE; //最小值 5e-324
3、数字型三个特殊值
- Infinite,无穷大
- -Infinite,无穷小
- NaN,(Not a number),代表一个非数值
4、isNaN()
用来判断一个变量是否是非数字类型,返回ture或false
2.3 字符串类型String
1、字符串引号嵌套
JS可以用单引号嵌套双引号,或者双引号嵌套单引号(外单内双、外双内单)
2、字符串转义符
转义符都是以\开头的,常用转义符如下:
转义符 | 解释说明 |
\n | 换行符,n是newline |
\\ | 斜杠\ |
\' | ‘单引号 |
\\" | "双引号 |
\t | tab缩进 |
\b | 空格,b是blank |
3、字符串长度
通过字符串的length来获取整个字符串的长度
4、字符串拼接
- 多个字符串之间用+进行拼接,拼接方式为 字符串+任何类型=拼接之后的新字符串
- 拼接前会把与字符串相加的任何类型转化为字符串,在拼接为一个新的字符串
5、字符串拼接加强
- 字符串和变量来拼接
- 变量不能添加引号,添加后会变成字符串
- 如果变量两侧都有字符串拼接,口诀“引引加加”,在完整字符串中删掉数字''++然后再加号中输入变量
2.4 布尔型Boolean
布尔型和数字相加的时候,ture的值为1,false的值为0。
2.5 Undefined和Null
一个声明后没有赋值的变量会有一个默认值undefined(如果相加或相连时,注意结果)
- 字符串+undefined=字符串undefined
- 数字+undefined=NaN
- 布尔值+undefined=NaN
一个声明变量给null值,里面存的值为空
- 字符串+null=字符串null
- 数字+null=数字
- 布尔值+null=布尔值
3. 获取变量数据类型
3.1 获取检测变量的数据类型
typeof可用来获取检测变量的数据类型
可以验证得prompt取过来的值是字符型的
通过控制台的颜色可以分辨变量类型:黑色字符型、深蓝色数字型、蓝色布尔型、灰色是Undefined和Null
3.2 字面量
字面量是在源代码中一个固定值的表示法,通俗来说,就是字面量表示如何表达这个值
一眼看上去就知道是什么数据类型
4. 数据类型的转换
4.1 转换为字符串
方式 | 说明 | 案例 |
toString() | 转成字符串 | var num = 1; alert(num.toString()); |
String()强制转换 | 转成字符串 | var num = 1; alert(String(num)); |
加号拼接字符串 | 和字符串拼接的结果都是字符串 | var num = 1; alert(num+“”); |
4.2 转换为数字型(重点)
方式 | 说明 | 案例 |
parseInt(string)函数 | 将string类型转换成整数数值型 | parseInt('6') |
parseFloat(string)函数 | 将string类型转换成浮点数数值型 | parseInt('6.6') |
Number()强制转换函数 | 将string类型转换成数值型 | Number(6) |
js隐式转换(- * /) | 利用算术运算隐式转换为数值型 | '12' - 0 |
- 注意大小写
- 隐式转换是在运算的时候,JS自动转换了数据类型
4.3 转换为布尔型
方式 | 说明 | 案例 |
Boolean()函数 | 其他类型转换成布尔值 | Boolean('ture'); |
- 代表空、否定的值会被转换为false,如‘’、0、NaN、null、undefined
- 其余值会转换为ture
四、解释型语言和编译型语言
1. 概述
- 编译器翻译的方式有两种:一个是编译,另外一个是解释。两种方式之间的区别在于翻译的时间点不同
- 编译器是在代码执行之前进行编译,生成中间代码文件
- 解释器是在运行时进行及时解释,并立即执行(当编译器以解释方式运行的时候,也称之为解释器)
2. 标识符、关键字、保留字
1. 标识符
标识(zhi)符:就是指开发人员为变量、属性、函数、参数取的名字。
标识符不能是关键字或保留字
2. 关键字
关键字:是指JS本身已经使用了的字,不能再用它们充当变量名、方法名。
包括: break、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with等。
3. 保留字
保留字:实际上就是预留的“关键字”,同样不能使用它们当变量名或方法名。
包括: boolean、byte、char、class、const、debugger、double、enum、export、extends,fimal、float、goto、implements、import、int、interface、long、mative、package.private、protected、public、short、static、super、synchronized、throws、transient,volatile等。
注意:如果将保留字用作变量名或函数名。当浏览器实现了该保留字,该单词将被看作关键字,如此将出现关键字错误。
五、JavaScript运算符
1. 运算符
运算符(operator)也被称为操作符,是用于实现赋值、比较和执行算术运算等功能的符号。
JavaScript中常用的运算符有:
- 算术运算符
- 递增和递减运算符
- 比较运算符
- 逻辑运算符
- 赋值运算符
2. 算术运算符
2.1 算术运算符概述
概念:算术运算使用的符号
运算符 | 描述 |
+ | 加 |
- | 减 |
* | 乘 |
/ | 除 |
% | 取余数(取模) |
2.2 浮点数的精度问题
浮点数值的最高精度是17位小数,但在进行算术运算时其精确度远远不如整数。
不要直接判断两个浮点数是否相等
2.4 表达式和返回值
表达式:是由数字、运算符、变量等以能求得数值的有意义排列方法得到的组合
表达式最终都会有一个结果,结果就是返回值
3. 递增和递减运算符
3.1 概述
反复给数字变量加1或减1,递增(++)和递减(--)运算符完成
运算符放在变量前面是前置运算符,后面是后置运算符
注意:运算符必须和变量配合使用
3.2 递增运算符
1. 前置递增运算符
先自加,后返回值运算
2. 后置递增运算符(常用)
先返回原值运算,后自加
4. 比较运算符
4.1 比较运算符概述
比较运算符(关系运算符)是两个数据进行比较时所使用的运算符,比较运算后会返回一个布尔值作为结果
运算符名称 | 说明 |
< | 小于号 |
> | 大于 |
>= | 大于或等于 |
<= | 小于或等于 |
== | 判等号(会转型) |
!= | 不等号 |
=== !== | 全等,要求值和数据类型都一致 |
4.2 =小结
符号 | 作用 | 用法 |
= | 赋值 | 把右边给左边 |
== | 判断 | 判断两边值是否相等(此时有隐式转换) |
=== | 全等 | 判断两边的值和数据类型是否完全相同 |
5. 逻辑运算符
5.1 概述
逻辑运算符是用来进行布尔值运算的运算符,其返回值也是布尔值
逻辑运算符 | 说明 |
&& | “逻辑与”,简称“与”and |
|| | “逻辑或”,简称“或”or |
! | “逻辑非”,简称“非”not |
5.2 短路运算(逻辑中断)
原理:当有多个表达式(值)时,左边的表达式可以确定结果时,就不再继续运算右边的表达式的值。
1、逻辑与
- 语法:表达式1&&表达式2
- 如果表达式1的值为真,则返回表达式2
- 如果表达式1的值为假,则返回表达式1
2、逻辑或
- 语法:表达式1||表达式2
- 如果表达式1的值为真,则返回表达式1
- 如果表达式1的值为假,则返回表达式2
6. 赋值运算符
概念:用来把数据赋值给变量的运算符
赋值运算符 | 说明 |
= | 直接赋值 |
+=、-= | 加、减一个数后再赋值 |
*=、/=、%= | 乘、除、取模后再赋值 |
7. 运算符优先级
优先级 | 运算符 | 顺序 |
1 | 小括号 | () |
2 | 一元运算符 | ++ -- ! |
3 | 算术运算符 | 先* / %再+ - |
4 | 关系运算符 | > >= < <= |
5 | 相等运算符 | == != === !== |
6 | 逻辑运算符 | 先&&后|| |
7 | 赋值运算符 | = |
8 | 逗号运算符 | , |
- 一元运算符中的逻辑非优先级很高
- 逻辑与比逻辑或优先级高
六、JavaScript流程控制-分支
1. 流程控制
流程控制主要有三种结构:顺序结构、分支结构和循环结构,这三种结构代表三种代码执行的顺序。
2. 顺序流程控制
顺序结构没有特定的语法结构,程序会按照代码的先后顺序依次执行。
3. 分支流程控制if语句
3.1 分支结构
由上到下执行代码的过程中,根据不同的条件,执行不同的路径代码(执行代码多选一的过程),从而得到不同的结果。
3.2 if语句
1、语法结构
if(条件表达式){
//条件成立执行的代码语句
}
3.3 if else语句(双分支语句)
1、语法结构
if(条件表达式1){
语句1;
} else if(条件表达式2){
语句2;
} else if(条件表达式3){
语句3
} else {
//上述条件都不成立执行此处代码
}
3.4 if else if 语句(多分支语句)
1、语法结构
if(条件表达式1){
语句1;
} else if(条件表达式2){
语句2;
} else if(条件表达式3){
语句3
} else {
//上述条件都不成立执行此处代码
}
4. 三元表达式
1. 语法结构
表达式1 ? 表达式2 : 表达式3;
2.执行思路
如果表达式1为ture则返回表达式2的值;如果表达式1为false则返回表达式3的值
5.分支流程控制switch语句
5.1 语法结构
switch(表达式){
case value1:
// 表达式 等于value1 时要执行的代码
break;
case value2:
// 表达式 等于value2 时要执行的代码
break;
default:
// 表达式 不等于任何一个value 时要执行的代码
}
- 关键字switch后面的括号内可以是表达式或值,通常是一个变量
- 关键字case后跟一个选项的表达式或值,后面跟一个冒号
- switch表达式的值会与结构中case的值作比较
- 如果存在匹配全等(===),则与该case关联的代码块会被执行,并在遇到break时停止。
- 如果所有的case的值都与表达式的值不匹配则执行default里的代码
- 执行的case里面的语句时,如果没有break则继续执行下一个case里面的语句
5.2 switch 语句和if esle if 语句的区别
- switch…case语句通常处理case为比较确定的值的情况,if…else…语句更加灵活,常用于范围判断
- switch进行条件判断后直接执行到程序的条件语句,效率更高。而if…else语句有几种条件就得判断几次
- 当分支少时,if…else执行效率更高
- 当分支多时,switch执行效率更高且结构更清晰
七、JavaScript流程控制-循环
1. 循环
1. 循环目的
完成具有规律性的重复操作
2. JS中的循环
- for 循环
- while 循环
- do…while 循环
2. for 循环
一组被重复执行的语句被称之为循环体,能否继续重复执行取决于终止条件。由循环体及循环的终止条件组成的语句,被称之为循环语句
2.1 语法结构
for 循环主要用于把某些代码循环若干次
for(初始化变量; 条件表达式; 操作表达式){
//循环体
}
- 初始化变量:通常被用于初始化一个计数器,该表达式可以使用var关键字声明新的变量,这个变量帮我们记录次数
- 条件表达式:用于确定每一次循环能否被执行。如果是ture就继续循环否则退出循环
- 操作表达式:每次循环的最后都要执行的表达式。通常用于更行或递增计数器变量。
2.2 执行过程
- 初始化变量。初始化操作在整个for循环中只会执行一次。
- 执行条件表达式时,如果为ture,则执行循环体语句,否则退出循环。
- 执行操作表达式,此时第一轮结束。
- 第二轮开始直接执行条件表达式,如果为ture,则执行循环体语句,否则退出循环。
- 继续执行操作表达式,第二轮结束。
2.3 断点调试
断点调试可以帮我们观察程序的运行过程
浏览器中按 F12--> sources -->找到需要调试的文件-->在程序的某一行设置断点
Watch: 监视,通过watch可以监视变量的值的变化,非常的常用。
F11: 程序单步执行,让程序一行一行的执行,这个时候,观察watch中变量的值的变化
3. 双重for 循环
3.1 概述
循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构。
3.2 双重for 循环语法结构
for (外循环的初始; 外循环的条件; 外循环的操作表达式){
for (内循环的初始; 内循环的条件; 内循环的操作表达式){
//需要循环的代码
}
}
外层循环执行一次,内层循环要执行全部次数
4. while 循环
4.1 语法结构
while语句再条件表达式为真的前提下,执行指定的循环体代码,直到表达式不为真是结束循环。
while (条件表达式) {
//循环体代码
}
4.2 执行过程
- 先执行条件表达式,如果为true,则执行循环体代码;如果为false,则退出循环,执行后面代码
- 执行循环体代码
- 循环体代码执行完毕后,程序会继续判断执行条件表达式,若仍为true,则会继续执行循环体,直到条件为false时,循环结束
注意:
必须有推出条件否则会变成死循环
5. do while 循环
1. 语法结构
该循环会先执行一次代码块,然后对条件表达式进行判断,如果为true则会重复执行循环体,否则退出循环
do {
//循环体代码
} while (条件表达式);
2. 执行过程
- 先执行一次循环体代码
- 再执行条件表达式,如果为true,则继续执行循环体代码;如果为false,则退出循环,继续执行后面的代码
注意:先执行循环体再判断,do…while循环语句至少会执行一次循环体代码
6. continue break
6.1 continue 关键字
用于立即跳出本次循环,继续下一次循环(本次循环体中continue之后的代码就会少执行一次)
6.2 break 关键字
用于立即跳出整个循环(循环结束)
八、JavaScript 函数
1. 函数的概念
函数:就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。
2. 函数的使用
函数在使用时分为两步:声明函数和调用函数
2.1 声明函数
// 声明函数
function 函数名() {
//函数体代码
}
- function是声明函数的关键字,必须小写
- 由于函数一般是为了实现某个功能才定义的,所以通常将函数名命名为动词,比如getSum
2.2 调用函数
// 调用函数
函数名(); //通过调用函数名来执行函数体代码
- 调用的时候千万不要忘记添加小括号
- 口诀:函数不调用,自己不执行。
注意:声明函数本身并不会执行代码,只有调用时才会执行函数体代码
2.3 函数的封装
把一个或多个功能通过函数的方式封装起来,对外只提供一个简单的函数接口
3. 函数的参数
3.1 形参和实参
在声明函数时,可以在函数名称后面的小括号中添加一些参数,这些参数被称为形参,而在调用该函数时,同样也需要传递相应的参数,这些参数被称为实参
参数 | 说明 |
形参 | 形式上的参数 函数定义时传递的参数,当前并不知道是什么 |
实参 | 实际上的参数 函数调用的时候传递的参数,实参是传递给形参的 |
参数的作用:在函数内部某些值不能固定,我们可以通过参数在调用函数时传递不同的值进去。
// 带参数的函数声明
function 函数名(形参1,形参2, 形参3...) { //可以定义任意多的参数,用逗号分隔
//函数体
}
// 带参数的函数调用
函数名(实参1, 实参2, 实参3...);
3.2 函数参数传递过程
- 调用的时候实参值是传递给形参的
- 形参简单理解为:不用声明的变量
- 实参和形参的多个参数之间用逗号分隔
3.3 函数形参和实参个数不匹配问题
参数个数 | 说明 |
实参个数=形参 | 输出正确结果 |
实参个数>形参 | 只取到形参个数 |
实参个数<形参 | 多的形参定义为undefined,结果为NaN |
注意:在JavaScript中,形参默认值为undefined
4. 函数的返回值
4.1 return 语句
return实现函数将值返回给调用者
return 语句的语法格式如下:
//声明函数
function 函数名() {
……
return 需要返回的值;
}
//调用函数
函数名(); //此时调用的函数就可以得到函数体内return后面的值
- 在使用return 语句时,函数会停止执行,并返回指定的值
- 如果函数没有 return,返回的值是 undefined
4.2 return 终止函数
return 语句之后的代码不被执行
4.3 return 的返回值
return 只能返回一个值,如果用逗号隔开多个值,以最后一个为准
4.4 函数没有return 返回 undefined
函数都是有返回值的
- 如果有return 则返回return 后面的值
- 如果没有则返回undefined
4.5 break,continue,return 的区别
- break:结束当前循环体
- continue:跳出本次循环,继续执行下次循环
- return:不仅可以退出循环,还能返回return语句中的值,同时还可以结束当前函数体内的代码
5. arguments 的使用
不确定有多少个参数传递的时候,可以用arguments获取。在JS中arguments实际上是当前函数的一个内置对象。所有函数都内置了一个arguments对象,其中存储了传递的所有实参
arguments展示形式是一个伪数组,因此可以进行遍历。伪数组具有以下特色:
- 具有length属性
- 按索引方式存储数据
- 不具有数组的push,pop等方法
6. 函数的两种声明方式
6.1 自定义函数方式(命名函数)
利用函数关键字function自定义函数方式
//声明定义方式
function fn() {
//调用
}
fn();
- 因为有名字,所以也被称为命名函数
- 调用函数的代码即可以放到声明函数的前面,也可以后面
6.2 函数表达式方式(匿名函数)
写法如下:
//函数表达式写法,匿名函数后面跟分号结束
var fn = function(){};
//调用的方式,函数调用必须写到函数体下面
fn();
- 函数没有名字
- fn里储存的是一个函数
- 函数表达方式原理和声明变量方式相同
- 函数调用必须在函数体后面
九、JavaScript对象
1. 对象
1.1 概述
对象是一个具体的事物
在JavaScript中,对象是一组无序的相关属性和方法的集合,所有的事物都是对象,例如字符串、数值、数组、函数等。
对象是由属性和方法组成的
- 属性:事物的特征,在对象中用属性来表示(常用名词)
- 方法:食物的行为,在对象中用方法来表示(常用动词)
1.2 为什么需要对象
保存一个值时,可以使用变量,多个值可以使用数组。如果要保存一个人的完整信息时就需要使用对象了
2. 创建对象的三种方式
在JavaScript中,我们可以采用三种方式创建对象(object)
- 字面量
- new Object
- 构造函数
2.1 利用字面量创建对象
对象字面量:就是{}里面包含了表达这个对象的属性和方法
{}里采用键值对的形式表示
- 键:属性名
- 值:属性值
var star = {
name : 'whze',
age : 22,
sex : '男'
sayHi : function(){
alert('Hi');
}
}
对象的调用
- 属性调用:对象.属性名。.可以理解为“的”。
- 属性另一种调用方式:对象['属性名'],方括号里属性必须加引号
- 方法调用:对象.方法名(),方法名后面一定要加括号
变量、属性、函数、方法总结
- 变量:单独声明赋值,单独存在
- 属性:对象里面的变量成为属性,不需要声明,用来描述对象的特征
- 函数:单独存在,通过“函数名()”的方式调用
- 方法:对象里的函数成为方法,方法不需要声明,使用"对象.方法名()"就可以调用,方法用来描述对象的行为和功能
2.2 利用new Object 创建对象
var andy = new Object();
andy.name = 'andy';
andi.sayHi = function(){
alert('Hi');
}
2.3 利用构造函数创建对象
构造函数:一种特殊的函数,用来初始化对象 即为对象成员变量赋初始值。它总与new运算符一起使用。我们可以把对象中一些公共属性和方法抽取出来,然后封装到这个函数里面。
在JS中,使用构造函数要注意以下两点:
- 构造函数用于创建某一类对象,其首字母要大写
- 构造函数要和new一起使用才有意义
function Person(name, age, sex) { this.name = name; this.age = age; this.sex = sex; this.sayHi = function() { alert('姓名' + this.name + '年龄:' + this.age + '性别:' + this.sex); } } var bigbai = new Person('大白', 66, '男'); console.log(bigbai.name);
注意:
-
构造函数约定首字母大写
-
函数内的属性和方法前需要添加this,表示当前对象的属性和方法
-
构造函数中不需要return返回结果
-
当我需要创建对象的时候,必须用new来调用构造函数
2.4 构造函数和对象
- 构造函数,如Stars(),抽象了对象的公共部分,封装到了函数里面,他泛指某一大类(class)
- 创建对象,如new Stars(),特指某一个,通过new关键字创建对象的过程我们也称为对象实例化
3. new 关键字
new 在执行时会做四件事
- 在内存中创建一个新的空对象
- 让this指向这个新的对象
- 执行构造函数里的代码,给这个新对象添加属性和方法
- 返回这个新对象(所以构造函数里面不需要return)
4. 遍历对象属性
for…in 语句用于对数组或者对象的属性进行循环操作
for (变量 in 对象名字) {
//在此执行代码
}
语法中的变量是自定义,它需要符合命名规范,通常我们会将这个变量写成为 k 或者 key。
for (var k in obj) {
console.log(k); //k是属性名
console.log(obj[k]);//obj[k]是属性值
}
十、JavaScript 内置对象
1. 内置对象
- JavaScript 中的对象分为3种:自定义对象、内置对象、浏览器对象
- 前两种对象是JS基础内容,属于ECMAScript;第三个属于JS独有的
- 内置对象就是指JS语言自带的一些对象,这些对象供开发者使用,并提供了一些常用的或最基本而必要(属性和方法)的功能
- 内置对象最大的优点就是帮助我们快速开发
- JavaScript 提供了多个内置对象:Math、Date、Array、String等
2. 查文档
2.1 MDN
学习一个内置对象的使用,可以通过MDN/W3C 来查询
Mozilla 开发者网络(MDN)提供了有关开放网络技术(Open Web)的信息,包括HTML、CSS和万维网及HTML5 应用API
MDN:https://developer.mozilla.org/zh-CN/
2.2 如何学习对象中的方法
- 查阅该方法的功能
- 查看里面参数的意义和类型
- 查看返回值的意义和类型
- 通过 demo 进行测试
3. Math 对象
3.1 Math 概述
Math 对象不是构造函数,它具有数学常数和函数的属性和方法。跟数学相关的运算(求绝对值,取整、最大值等)可以使用 Math 中的成员。
Math.PI //圆周率
Math.floor() //向下取整
Math.ceil() //向上取整
Math.round() //四舍五入版 就近取整 注意-3.5 结果是-3
Math.abs() //绝对值
Math.max()/Math.min() //求最大或最小值
3.2 随机数方法 random()
random() 方法可以随机返回一个小数,其取值范围是[0,1)
得到一个两数之间的随机整数,包括两个数在内
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
4. 日期对象
4.1 Date 概述
- Date 对象和 Math 对象不一样,他是一个构造函数,所以我们需要实例化后才能使用
- Date 实例用来处理日期和时间
4.2 Date()方法的使用
1、获取当前时间必须实例化
var now = new Date();
console.log(now);
2、Date() 构造函数的参数
- 如果Date()不写参数,就返回当前时间
- 如果Date()里面写参数,就返回括号里面输入的时间
4.3 日期格式化
方法名 | 说明 | 代码 |
getFullYear() | 获取当年 | dObj(new的对象名).getFullYear() |
getMonth() | 获取当月(0-11) | dObj.getMonth() |
getDate() | 获取当天日期 | dObj.getDate() |
getDay() | 获取星期几(周日0到周六6) | dObj.getDay() |
getHours() | 获取当前小时 | dObj.getHours() |
getMinutes() | 获取当前分钟 | dObj.getMinutes() |
getSeconds() | 获取当前秒钟 | dObj.getSeconds() |
4.4 获取日期总的毫秒形式
Date 对象是基于1970年1月1日(世界标准时间)起的毫秒数
//实例化Date对象
var now = new Date();
//1.Date函数中的方法
console.log(now.valueof());
console.log(now.getTime());
//2.简单写可以这么做
var now = +new Date(); //+new Date()返回的就是总的毫秒数
//3.HTML5中提供的方法,有兼容性问题
var now = Date.now();
5. 数组对象
5.1 数组对象的创建
- 字面量方式
var arr = [1, 2, 3];
- new Array()
var arr = new Array(2); //2为数组长度,里面有两个空的数组元素 var arr = new Array(2,3); //里面有两个数组元素2和3
5.2 检测是否为数组
- instanceof运算符,可以判断一个对象是否属于某种类型
- Array.isArray()用于判断一个对象是否为数组,isArray()是HTML5提供的方法
5.3 添加删除数组元素的方法
方法名 | 说明 | 返回值 |
push(参数1……) | 末尾添加一个或多个元素,注意修改原数组 | 并返回新的长度 |
pop() | 删除数组最后一个元素,把数组长度减1,无参数、修改原数组 | 返回它删除的元素的指 |
unshift(参数1……) | 向数组的开头添加一个或更多元素,注意修改原数组 | 并返回新的长度 |
shift() | 删除数组的第一个元素,数组长度减1无参数、修改原数组 | 并返回第一个元素 的值 |
5.4 数组排序
方法名 | 说明 | 是否修改原数组 |
reverse() | 颠倒顺序,无参数 | 改变原数组返回新数组 |
sort() | 排序 | 改变原数组返回新数组 |
5.5 数组索引方法
方法名 | 说明 | 返回值 |
indexOf() | 数组中查找给定元素的第一个索引 | 存在返回索引号,不存在返回-1 |
lastIndexOf() | 在数组中最后一个的索引 | 存在返回索引号,不存在返回-1 |
5.6 数组转化为字符串
方法名 | 说明 | 返回值 |
toString() | 把数组转换为字符串,逗号分隔每一项 | 返回一个字符串 |
join('分隔符') | 把数组中的所有元素转换为一个字符串 | 返回一个字符串 |
5.7 课下查询
方法名 | 说明 | 返回值 |
concat() | 连接两个或多个数组,不影响原数组 | 返回一个新的数组 |
slice() | 数组截取slice(begin,end) | 返回被截取项目的新数组 |
splice() | 数组删除splice(开始下标, 删除个数) | 返回被删除项目的新数组,会影响原数组 |
6. 字符串对象
6.1 基本包装类型
JS提供了三个特殊的引用类型:String、Number和Boolean
基本包装类型就是把简单数据类型包装成为负责数据类型,这样基本数据就有了属性和方法
var str = 'andy';
console.log(str.length)
按道理基本数据类型没有属性和方法,但是上面的代码可以执行
这是因为JS把简单数据类型包装为复杂数据类型,执行过程如下
//1.生成临时变量,包装
var temp = new String('andy');
//2.赋值给声明的字符变量
str = temp;
//3.销毁临时变量
temp = null;
6.2 字符串不可变
指字符串里的值不可变,内容改变是因为重新开辟了一个新的内存空间
6.3 根据字符返回位置
字符串所有的方法操作完成都会返回一个新的字符串(因为字符串不可变)
方法名 | 说明 |
indexOf('要查找的字符', '开始的位置') | 返回指定内容在原字符串的位置,如果找不到返回-1,开始的位置是index索引号 |
lastindexOf() | 从后往前找,只招首个匹配的 |
6.4 根据位置返回字符串(重点)
方法名 | 说明 | 使用 |
charAt(index) | 返回指定位置的字符(index是索引号) | str.charAt(0) |
charCodeAt(index) | 获取指定位置处字符的ASCII码 | str.charCodeAt(0) |
str[index] | 获取指定位置处的字符 | HTML5.IE8+支持和charAt()等效 |
6.5 字符串操作方法(重点)
方法名 | 说明 |
concat(str1, str2, …) | 拼接字符串,等效于+, +更常用 |
substr(start, length) | 从start位置开始(索引号),length是取得个数 |
slice(start, end) | 从start开始,截取到end(end不取) |
substring()start, end) | 从start开始,截取到end(end不取)基本和slice相同但是不接受负值 |
6.6 replace()方法
用于在字符串中一些字符替换另一些字符
replace(被替换的字符串, 要替换的字符串);
6.7 split()方法
用于切分字符串,将字符串切分为数组。切分完毕后返回一个新的数组
var str = 'a, b, c, d';
console.log(string.split(',')); //返回的是一个数组[a, b, c, d]
6.8 课下查阅
- toUpperCase() //转换大写
- toLowerCase() //转换小写
十一、JavaScript 简单类型与复杂类型
1. 简单类型与复杂类型
简答类型又叫做基本数据类型或值类型,复杂类型又叫做引用类型
- 值类型:简单数据类型/基本数据类型。在存储时变量中存储的是值的本身,因此叫做值类型string,number,boolean,undefined,null
- 引用类型:复杂数据类型,在存储时变量中存储的仅仅是地址(引用),因此叫做引用数据类型,通过new关键字创建对象(系统对象、自定义对象)如Object、Array、Date等
2. 堆和栈
空间分配区别:
- 栈(操作系统):由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似与数据结构中的栈;简单数据类型存放到栈里
- 堆(操作系统):存储复杂类型(对象),一般由程序员分配释放,若程序员不释放,由垃圾回收机制回收;复杂数据类型存放到堆里
JS中没有堆栈的概念
3. 内存分配
简单数据类型
- 值类型(简单数据类型):string,number,boolean,undefined,null
- 值类型变量的数据直接存放在变量(栈空间)中
复杂数据类型
- 引用类型(复杂数据类型):通过new关键字创建的对象(系统对象、自定义对象)
- 引用类型变量(栈空间)里存放的是地址,真正的对象实例存放在堆空间中
4. 传参
函数里的形参也可以看作是一个变量
当我们把一个值类型变量作为参数传给函数形参时,其实是把变量在栈空间里的值复制了一份给形参,在方法内部对形参做任何修改都不会影响到外部变量。
当我们把引用类型变量传给形参时,其实是把变量在栈空间里保存的堆地址复制给了形参,形参和实参其实保存的是同一个堆地址,所以操作的是同一个对象。