文章目录
JS来源
JavaScript是一种具有函数优先的轻量级,解释型或即时编译型的编程语言(简称"JS")。他的发明者名为:布兰登-艾克(JS之父,英文全称"Brendan Eich")
JavaScript诞生于1995年,他的出现主要用于处理网页中的前端验证(指检查用户输入的内容是否符合一定的规则)
JavaScript由 ECMAScript(标准)、 DOM(文档对象模型)、 BOM(浏览器对象模型)三个部分组成
JS的特点:
解释型语言
类似于C与JAVA的语法结构
动态语言
基于原型的面向对象
JS的编写位置:
1.JS代码可以写到script标签中,虽然可以写在标签的属性中,但是他们属于结构与行为耦合,不方便维护,不推荐使用
2.可以将js代码编写到标签的onclick、onmousedown、onkeydown等属性中
<botton onclick="alert('讨厌!点我干嘛')">点我一下</botton>
3.可以将js代码写在超链接中的herf属性中,这样当点击超链接时,会执行js代码
<a href="javascript:alert('让你点就点')">你也点我一下</a>
4.可以将js代码编写到外部文件中(推荐),然后通过script标签引入,写到外部文件中可以在不同的页面中同时引用,也可以利用到浏览器的缓存机制
<script type="text/javascript" src="js/script.js"></script>
JS语法
注释
/*
js注释
*/
//单行注释
多行注释:注释中的内容不会被执行,但是可以在源代码中查看
要养成良好的编写注释的习惯,也可以通过注释来对代码进行一些简单的调试
JS代码书写规范要求
1.js中严格区分大小写
2.js中每一条语句以分号(;)结尾,如果不写分号,浏览器会自动添加,但是会消耗一些系统资源;而且有的时候,浏览器会加错分号,所以在开发中分号必须写
3.js会忽略多个空格和换行,所以我们可以利用空格和换行来对代码进行格式化
字面量和变量
字面量:都是一些不可改变的值,比如:1 2 3 4 5
字面量都是可以直接使用的,但是我们一般都不会直接使用字面量。
变量:可以用来保存字面量,而且变量的值是可以任意改变的
变量更加方便我们使用,所以在开发中都是通过变量去保存一个字面量,而且很少直接使用字面量。
声明变量:在js中使用var关键字来声明一个变量
var a:变量默认值为undefined
a=123:给变量赋值
var b=123:声明与赋值同时进行
标识符
在js中所有可以由我们自主命名的都可以称为标识符
例如:变量名、函数名、属性名都属于标识符
命名一个标识符需要遵守如下规则:
1.标识符中可以含有字母、数字、_、$
2.标识符不能以数字开头
3.标识符不能是ES中的关键字或保留字
4.标识符一般都采用驼峰命名法(首字母小写,每个单词的开头字母大写,其余字母小写)
数据类型
数据类型指的是字面量的类型,在js中一共有六种数据类型
String 字符串
Number 数值
Boolean 布尔值
Null 空值
Undefined 未定义
Object 对象
前五属于基本数据类型
object属于引用数据类型
String字符串
在js中字符串需要使用引号引起来,使用双引号(“”)或(‘’)都可以。
- 引号不能嵌套,双引号不能放双引号,单引号不能放单引号,双引号可以放单引号
在字符串中我们可以使用\作为转义字符,当表示一些特殊符号时可以使用\进行转义
\ “表示”
\ ‘表示’
\ n表示换行
\ t表示制表符
\ \ 表示\
JavaScript以String内建类来表示字符串,String类里包含了一系列方法操作字符串:
String():类似于面向对象语言的构造器,使用该方法可以构造一个字符串
charAt():获取字符串特定索引处的字符
charCodeAt():返回字符串中特定索引处的字符所对应的Unicode值
toUpperCase():返回字符串的长度,JavaScript中文字符算一个字符
toLowerCase():将字符串的所有字母转换为大写字母
fromCharCode():静态方法,直接通过String类调用该方法,将一系列Unicode值转换为字符串
indexOf():返回字符串中特定字符串第一次出现的位置
lastIndexOf():返回字符串中特定字符串最后一次出现的位置
substring():返回字符串的某个子字符串
slice():返回字符串的某个子字符串,功能比substring更强大支持负数参数
match():使用正则表达式搜索目标子字符串
search():使用正则表达式是谁目标子字符串
concat():用于将多个字符串拼接成为一个字符串
split():将某个字符串分割成为多个字符串,可以指定分割符号
replace():将字符串中某个子串以特定字符串替代
Number类型
在js中所有的数值都是Number类型,包括整数和浮点数(小数)
可以使用一个运算符typeof来检查一个变量的类型
语法:typeof 变量
检查字符串时会返回string,检查数值时会返回number
js中可以表示的数字的最大值:Number.MAX_VALUE
1.7976931348623157e+308
如果使用Number表示的数字超过了最大值,则会返回一个infinity
infinity表示正无穷,-infinity表示负无穷 使用typeof检查infinity也会返回number
NaN是一个特殊的数字,表示not a number。使用typeof检查NaN也会返回一个number
js中可以表示数字的最小值:Number.MIN_VALUE 大于0的最小值
5e-324
在js中整数的运算基本可以保证精确。如果使用js进行浮点数运算,可能得到一个不精确的结果。所以千万不要使用js进行对精确度比较高的运算
Boolean 布尔值
布尔值只有两个,主要用来做逻辑判断
true 表示真
false 表示假
使用typeof检查一个布尔值,会返回一个boolean
Null值
Null类型的值就只有一个,就是Null。null这个值专门用来表示一个为空的对象
使用typeof检查一个null值,会返回一个Null
undefined值
Undefined类型的值只有一个,就是undefined
当声明一个变量,但是不给变量赋值时,他的值就是undefined
使用typeof检查一个undefined,会返回一个undefined
复合类型
复合类型是由多个基本数据类型(也可以包括复合类型)组成的数据体,JavaScript中的复合类型大致有如下3种:
Object:对象
Array:数组
Function:函数
对象Object
对象是一系列命名变量、函数的集合。其中命名变量的类型既可以是基本数据类型,也可以是复合类型。对象中的命名变量称为属性,而对象中的函数称为方法。
对象访问属性和函数的方法都是使用“.”(点)实现。JavaScript是基于对象的脚本语言,它提供了大量的内置对象供用户使用,JavaScript提供了如下常用的内置类。
Array:数组类
Date:日期类
Error:错误类
Function:函数类
Math:数学类,该对象包含相当多的执行数学运算的方法
Number:数值类
Object:对象类
String:字符串类
数组
数组是一系列的变量,于其他强类型语言不同的是,JavaScript中数组元素的类型可以不同。定义应该数组由如下3种方法:
var a = [3, 5, 20]; // 定义的时候初始化数组
var b = []; // 创建一个空数组
var c = new Array(); // 创建一个空数组
JavaScript数组有如下3个特征:
1)JavaScript的数组长度可变,数组长度总等于所有元素索引最大值+1
2)同一个数组中的元素类型可以互不相同
3)访问数组元素时不会产生数组越界,访问并未赋值的数组元素时,该元素的值为undefined。
函数
函数可以包含一段可执行的代码,也可以接收调用者传入参数,正如弱类型语言一样,JavaScript的函数声明中,参数列表不需要数据类型声明,函数的返回值也不需要数据类型声明,函数定义的语法格式如下:
function functionName(param1, param2,...) {
}
强制类型转换
类型转换主要指,将其他的数据类型转换为String Number Boolean
强制类型转换指将一个数据类型强制转换为其他的数据类型。
将其他数据类型转换为String
方式一:
调用被转换数据类型的toString()的方法(调用xxx的yyy()方法,就是xxx.yyy())该方法不会影响到原变量,它会将转换的结果返回
但是注意:null和undefined这两个值没有toString方法,如果调用会报错
方式二:
调用String()函数,并将被转换的数据作为参数传递给函数
使用String()函数做强制类型转换时:
1.对于Number和Boolean实际上就是调用的toString()方法
2.但是对于Null和Undefined,就不会调用toString()方法
3.它会将null直接转换为"null"
4.将undefined转换为"undefined"
将其他数据类型转换为Number
方式一:
使用Number()函数
字符串–>数字
如果是纯数字的字符串,则直接将其转换为数字
如果字符串中含有非数字的内容,则转换为NaN
如果字符串是一个空串或者一个全是空格的字符串,则转换为0
布尔–>数字
true转为1
false转为0
null–>数字 0
undefined -->数字 NaN
转换方式二:
这种方式专门用来对付字符串
parseInt() 把一个字符串转换为一个整数
parseFloat()把一个字符串转换为一个浮点数
parseInt()可将一个字符串中的有效的整数内容取出来然后转换为Number
注意:
1.parseFloat()作用和parseInt()类似,不同的是他可以获取有效的小数
2.如果对非String使用parseInt()或 parseFloat()它会将其转换为String,然后再操作
将其他数据类型转换为Boolean
使用Boolean()函数
数字–>布尔
除了0和NaN,其余都是true
字符串–>布尔
除了空串,其余都是true
null和undefined都会转换为false
对象也会转换为true
另外,在js中如果需要表示16进制的数字,需要以0x开头
如果需要表示8进制的数字,则需要以0开头
运算
当对非Number类型的值进行运算时,会将这些值转换为Number,任何值和NaN做运算都得NaN
算术运算符
+
可以对两个值进行加运算,并将结果返回。如果对两个字符串进行加法运算,则会拼串,两个字符串会拼接成一个新的字符串
任何值和字符串做加法运算,都会先转化为字符串,然后拼串,我们只需要为任意的数据类型+一个""即可以将任意数据类型转换为String。这是一种隐式的类型转换,由浏览器自动完成,实际上也是调用了String()函数
-
可以对两个值进行减运算,并将结果返回
*
可以对两个值进行乘运算,并将结果返回
/
可以对两个值进行除运算,并将结果返回
任何值做- * /运算时都会自动转换为Number,我们可以利用这一特点做隐式的类型转换
可以通过为一个值-0、*1、/1来将其转换为Number,原理和Number()函数一样,使用起来更加简单
%
可以对两个值进行取模运算,并将结果返回
赋值运算符
=
可以将符号右侧的值赋值给符号左侧的变量
+=
a=a+5 等价于 a+=5
-=
a=a-5 等价于 a-=5
=
a=a5 等价于 a*=5
/=
a=a/5 等价于 a/=5
%=
a=a%5 等价于 a&=5
自增与自减
自增 ++
通过自增可以使变量在自身的基础上加1对于一个变量自增以后,原变量的值会立即自增1
自增分成两种:后++和前++。无论是前++还是后++都会立即使原变量的值自增1,不同的是a++和++a的值不同
a++的值等于原变量的值(自增前的值)
++a的值等于原变量新值(自增后的值)
自减 –
通过自减可以使变量在自身的基础上减1,对于一个变量自减以后,原变量的值会立即自减1
自减分成两种:后–和前–,无论是前–还是后–都会立即使原变量的值自减1不同的是a–和–a的值不同
a–的值等于原变量的值(自减前的值)
–a的值等于原变量新值(自减后的值)
关系运算符
大小关系比较
通过关系运算符可以比较两个值之间的大小关系,如果关系成立它会返回true,如果关系不成立则会返回false
> 大于号
判断符号左侧的值是否大于右侧的值
>= 大于等于号
判断符号左侧的值是否大于或等于右侧的值
< 小于号
判断符号左侧的值是否小于右侧的值
<= 小于等于号
判断符号左侧的值是否小于或等于右侧的值
非数值的情况
对于非数值进行比较时,会将其转换为数值然后再比较。符号两侧的值都是字符串,不会将其转换为数字进行比较,而会分别比较字符串中字符的Unicode编码
比较字符编码时是一位一位进行比较的。如果比较的两个即非字符串类型也不是数字类型,转换为数值或字符串后进行比较。所以在比较两个字符串类型的数字时,一定一定要转型
任何值和NaN做任何比较都是false
等值关系检测
相等比较
使用= =来做相等运算:
当使用= =来比较两个值时,如果值的类型不同,则会进行类型转换,将其转换为相同的类型,然后再比较。如果不相等会返回true,否则会返回false
使用!=来做不想等运算
不相等用来比较两个运算符是否不相等。用法与==相同
相同比较
全等===
用来判断两个值是否全等,它和相等类似,不同的是他不会做自动类型转换,如果两个值的类型不同,直接返回false
不全等!= =
用来判断两个值是否不全等,它和相等类似,不同的是他不会做自动类型转换,如果两个值的类型不同,直接返回true
undefined 衍生自null,所以这两个值做相等判断时,会返回true
NaN不和任何值相等,包括他本身
可以通过isNaN()函数来判断一个值是否为NaN。如果该值是NaN则返回true,否则返回false
对象运算符
in 判断左侧运算数是否为右侧运算数的成员
instanceof 判断对象实例是否属于某个类或构造函数
new 根据构造函数构建一个新的对象,并初始化该对象
delete 删除指定对象的属性,数组元素或变量
.及[] 存取对象和数组元素
() 函数调用,改变运算运算符优先级等
逻辑运算符
JS中为我们提供了三种逻辑运算符
!非可以用来对一个值进行非运算
非运算就是指对一个布尔值进行取反操作,true变false,false变true
如果对一个值两次取反,它不会发生变化;如果对非布尔值进行运算,则会将其转换为布尔值,然后再取反。所以我们可以利用该特点,来将一个其他的数据类型转换为布尔值
可以为一个任意数据类型取两次反,来将其转换为布尔值。原理和Boolean()函数一样
&& 与可以对符合两侧的值进行与运算并返回结果
运算规则
两个值只要一个值为false则返回false,只有两个值都为true才返回true
js中的与为短路操作,如果第一个值为false,则不会看第二个值
|| 或可以对符合两侧的值进行或运算并返回结果
运算规则
两个值只要一个值为true则返回true,只有两个值都为false才返回false
js中的或为短路或,如果第一个值为true,则不会看第二个值
非布尔值的与或运算
&& || 非布尔值的情况
对于非布尔值进行与或运算时,会先将其转换为布尔值,然后再运算,并且返回原值
&&与运算:如果第一个值为true,则返回第二个值;如果第一个值为false,则返回第一个值
||或运算:如果第一个值为true,则返回第一个值;如果第一个值为false,则返回第二个值
其他运算符
三元运算符:(关系表达式)?表达式1:表达式2
如果关系表达式为true,则执行表达式1,fasle执行表达式2
?:条件运算符,简洁的if else
typeof: 类型判定运算符
,:逗号,在一行语句中执行多个不同的操作
void:舍弃运算符的值,返回undefined作为表达式的值
运算符的优先级
流程语句
if/if else/if else if选择语句
if语句
语法一:
if(条件表达式){ }
if语句在执行时,会先对条件表达式进行求值判断,如果条件表达式的值为true,则执行if后的语句;如果条件表达式的值为false,则不会执行if后的语句。if语句只能控制紧随其后的那个语句如果希望if语句可以控制多条语句,可以将这些语句统一放到代码块中。代码块中的**{}并非必要的**,但在开发中尽量加上
语法二:
if(条件表达式){ 语句 }
else{ 语句 }
当执行该语句时,会先对if后的条件表达式进行求值判断。如果条件表达式的值为true,则执行if后的语句;如果条件表达式的值为false,则执行else后的语句
语法三:
if(条件表达式){ 语句 }
else if(条件表达式){ 语句 }
else if(条件表达式){ 语句 }
…
else{ 语句 }
当该语句执行时,会从上到下依次对条件表达式进行求值判断:如果条件表达式的值为true,则执行当前的语句;如果条件表达式的值为false,则继续向下判断;如果所有条件都不满足,则执行else语句。该语句中,只会有一个代码块被执行,一旦代码快被执行,则直接结束语句
特性:
1.结构复杂,可嵌套
2.可测试多个条件表达式
3.表达式的值具有线性特征
4.表达式的值是动态的
5.适用于任意类型的数据
6.可处理复杂的逻辑关系
switch语句
switch语句语法:
switch(条件表达式){
case 标签1:
代码段1…
break;
case 标签2:
代码段2…
break;
…
default:
代码段n…
break;
}
执行流程;
1.计算表达式的值,并与各标签相比较
2.若找到与之匹配的标签,则执行其后的代码段
3.若没有找到与之匹配的标签则直接执行default之后的代码段
格式:
1.case标签为常量,可以是字符串或数字
2.每个标签均以冒号:结束
3.虽然break与default为可选项,但是为了逻辑清晰最好不要省略
4.case标签的值必须和条件表达式的值完全匹配
特性:
1.结构简洁,专为多重选择设计
2.仅可测试一条条件表达式
3.表达式的值具有离散性
4.表达式的值是固定的,不会动态变化的
5.仅能应用整数,枚举,字符串等类型数据
6.仅能处理多个枚举型逻辑关系
switch语句和if语句的功能实际上是重复的,使用switch可以实现if功能,同样使用if也可以实现switch的功能,所以我们使用时,可以根据自己的习惯选择
循环语句
for循环
for循环的语法:
for(循环变量=初始值;循环条件;递增/递减计数器){
循环代码段…
}
for循环的执行流程:
1.用循环变量初始值与循环条件相比较,确定返回值
2.如果返回值为true则执行循环体
3.执行完一次后进行递增/递减运算
4.将运算结果与循环条件相比较
5.如果返回值为true则继续执行循环体;如果返回值为false则退出循环体
时机:重复一个动作到一定次数时
for循环中的三个部分都可以省略,也可以写在外部。如果在for循环中不写任何表达式,只写两个;此时循环是一个死循环会一直执行下去,慎用
for-in循环
for-in语法:
for(声明变量 in 对象){
代码段
}
作用:枚举对象属性
注意事项:循环输出的属性顺序不可预知,对象的值不能是nul或undefined
while循环
while循环语法:
while(条件表达式){
语句…
}
while语句在执行时:
1.判断条件表达式的值
2.当值为true时循环执行代码段
3.当值为false时退出循环体
特性:先检查条件,再执行循环,条件不满足则循环一次也不执行
时机:一个动作被重复执行到满足某个条件时
将条件表达式写死为true的循环称为死循环,该循环不会停止,除非浏览器关闭,死循环在开发中慎用,可以用break来终止循环
do…while循环
do…while循环语法:
do{
语句…
}while(条件表达式)
执行流程;
1.先执行循环体内代码段再进行判断
2.如果表达式的值为true,则重复执行代码段
3.如果表达式的值为false,则退出循环体
特性:先执行循环体,再进行条件判断。循环体内代码至少执行一次
时机:希望一个动作至少被执行一次时
实际上这两个语句功能类似,不同的是while是先判断后执行,而do…while会先执行后判断
do…while可以保证循环体至少执行一次,而while不能
跳转语句
return:终止函数体的运行,并返回一个值
break:终止整个循环,不再进行判断
continue:结束本次循环,接着去判断是否执行下次循环
continue和break区别
break关键字可以用来退出switch或循环语句,break关键字,会立即终止离他最近的循环
可以为循环语句创建一个label,来标识当前的循环
label:循环语句
使用break语句时,可以在 break后跟着一个label,这样break将会结束指定的循环,而不是最近的
continue关键字可以用来跳过当次循环,同样continue也是默认只会对离他最近的循环起作用
不能在if语句中使用break和continue语句
异常处理语句
throw:主动抛出异常
try:指明需要处理的代码段
catch:捕获异常
finally:后期处理