文章目录
一、JavaScript简介
1. 起源
-
JavaScript诞生于1995年,它的出现主要是用于处理网页中的前端验证。
-
所谓的前端验证,就是指检查用户输入的内容是否符合一定的规则。
-
比如:用户名的长度,密码的长度,邮箱的格式等。
2. 简史
-
JavaScript是由
网景
公司发明,起初命名为LiveScript,后来由于SUN
公司的介入更名为了JavaScript。 -
1996年微软公司在其最新的IE3浏览器中引入了自己对JavaScript的实现
JScript
。 -
于是在市面上存在两个版本的JavaScript,一个网景公司的JavaScript和微软的JScript。
-
为了确保不同的浏览器上运行的JavaScript标准一致,所以几个公司共同定制了JS的标准名命名为
ECMAScrip
。
3. 时间表
4. 实现
-
ECMAScript是一个标准,而这个标准需要由各个厂商去实现。
-
不同的浏览器厂商对该标准会有不同的实现。
-
我们已经知道ECMAScript是JavaScript标准,所以一般情况下这两个词我们认为是一个意思。
-
但是实际上JavaScript的含义却要更大一些。一个完整的JavaScript实现应该由以下三个部分构成:
ECMAScript、DOM和BOM
。
5. 特点
-
解释型语言
:就是不需要被编译为机器码在执行,而是直接执行。少了编译这一步骤,开发轻松,但运行较慢。不过解释型语言中使用了JIT技术,使得运行速度得以改善。 -
类似于 C 和 Java 的语法结构
:语法结构与C和Java很像,向for、if、while等语句和Java的基本上是一模一样的;不过JavaScript和与Java的关系也仅仅是看起来像而已
。 -
动态语言
:所谓的动态语言可以暂时理解为在语言中的一切内容都是不确定的。比如一个变量,这一时刻是个整型,下一时刻可能会变成字符串了。(动态语言相比静态语言性能上要差一些,不过由于JavaScript中应用的JIT技术,所以JS可能是运行速度最快的动态语言了) -
基于
原型
的面向对象
二、基本语法
2.1 概述
-
我们目前学习的JS全都是客户端的JS,也就是说全都是需要在浏览器中运行的,所以我们的JS代码全都需要在网页中编写。
-
我们的JS代码需要编写到<script>标签中。我们
一般
将script标签写到head中。(和style标签有点像)
属性:
type:默认值text/javascript可以不写,不写也是这个值。
src:当需要引入一个外部的js文件时,使用该属性指向文件的地址。
示例:
/*创建一个html文件;
在html文件的的head标签中创建一个script标签,并编写如下代码*/
<script type="text/javascript">
console.log("Hello World");
</script>
-
JavaScript是严格区分大小写的,也就是abc和Abc会被解析器认为是两个不同的东西。
-
JS中的注释和Java的的一致,分为两种:单行注释:
//注释内容
多行注释:/*注释内容*/
。
2.2 标识符
-
所谓标识符,就是指
变量、函数、属性
的名字,或函数的参数。
-
标识符可以是按照下列格式规则组合起来的一或多个字符:
• 第一个字符必须是一个
字母、下划线(_)或一个美元符号($)
• 其他字符可以是
字母、下划线、美元符号或数字
-
按照惯例,ECMAScript 标识符采用
驼峰命名法
。 -
但是要注意的是JavaScript中的标识符不能是
关键字和保留字符
。
驼峰命名法:
首字母小写,后面单词的首字母大写,其余小写。比如helloWorld。
2.3 字面量和变量
字面量:
都是一些不可改变的值,比如 :1 2 3 4 5 。字面量都是可以直接使用,但是我们一般都不会直接使用字面量。
变量:
变量可以用来保存字面量,而且变量的值是可以任意改变的。变量更加方便我们使用,所以在开发中都是通过变量去保存一个字面量,而很少直接使用字面量,可以通过变量对字面量进行描述 。
- 变量的声明:
//使用var关键字声明一个变量。
var a;
- 变量的赋值:
//使用=为变量赋值。
a=123;
- 声明和赋值同时进行:
var a = 123;
2.4 数据类型
数据类型指的就是字面量的类型,在JS中一共有六种数据类型。
String 字符串
Number 数值
Boolean 布尔值
Null 空值
Undefined 未定义
Object 对象
其中String Number Boolean Null Undefined属于基本数据类型,而Object属于引用数据类型。
String
- String用于表示一个字符序列,即字符串。
- 字符串需要使用 ’或“ 括起来。
- 转义字符:
- 将其他数值转换为字符串有三种方式:
toString()、String()、拼串
。
Number
- 在JS中所有的数值都是Number类型,包括
整数和浮点数(小数)
。 - JS中可以表示的数字的最大值:
Number.MAX_VALUE
:1.7976931348623157e+308
Number.MIN_VALUE 大于0的最小值
:5e-324 。 - 如果使用Number表示的数字超过了最大值,则会返回一个Infinity 表示正无穷(-Infinity 表示负无穷),使用
typeof检查
Infinity也会返回Number
。 NaN 是一个特殊的数字
,表示Not A Number。使用typeof检查
一个NaN也会返回Number
。- 在JS中整数的运算基本可以保证精确。
- 如果使用JS进行浮点运算,可能得到一个不精确的结果,所以
不要使用JS进行对精确度要求比较高的运算
。
Boolean(布尔型)
Boolean 布尔值只有两个,主要用来做逻辑判断:true表示真、false 表示假。
使用typeof检查一个布尔值
时,会返回boolean
。
示例:
<script type="text/javascript">
var bool = false;
console.log(typeof bool);
console.log(bool);
</script>
Undefined
Undefined(未定义)类型的值只有一个,就undefind
。
当声明一个变量
,但是并不给变量赋值
时,它的值就是undefined
。
使用typeof检查一个undefined
时也会返回undefined
。
示例:
<script type="text/javascript">
var a = null;
var b = undefined;
console.log(typeof b);
</script>
Null
Null(空值)类型的值只有一个,就是null
。
null这个值专门用来表示一个为空的对象。
使用typeof检查一个null值
时,会返回object
。
示例:
<script type="text/javascript">
var a = null;
console.log(typeof a);
</script>
2.5 typeof运算符
- 使用typeof操作符可以用来检查一个变量的数据类型。
- 使用方式:typeof 字面量,例如 typeof 123; typeof 变量。
- 返回结果:
typeof 数值 number
typeof 字符串 string
typeof 布尔型 boolean
typeof undefined undefined
typeof null object
2.6 强制类型转换
转换为String
强制类型转换:
指将一个数据类型强制转换为其他的数据类型; 类型转换主要指
,将其他的数据类型,转换为String Number Boolean。
方式一:
- 调用被转换数据类型的toString()方法
该方法不会影响到原变量
,它会将转换的结果返回注意
:null和undefined这两个值没有toString()方法,如果调用他们的方法,会报错
<script type="text/javascript">
var a = 123;
//调用a的toString()方法
//调用xxx的yyy()方法,就是xxx.yyy()
a = true;
a = a.toString();
console.log(typeof a);
</script>
方式二:
- 调用String()函数,并将被转换的数据作为参数传递给函数
- 使用String()函数做强制类型转换时,对于Number和Boolean实际上就是调用的toString()方法
- 但是对于null和undefined,就不会调用toString()方法,它会将 null 直接转换为 “null”
将 undefined 直接转换为 “undefined”
<script type="text/javascript">
//调用String()函数,来将a转换为字符串
var a = null;
a = String(a);
console.log(typeof a);
</script>
方式三:
因为任何的值和字符串做加法运算,都会先转换为字符串,然后再和字符串做拼串
的操作。因此只需要为任意的数据类型 + 一个 “” 即可将其转换为String。
转换为Number
将其他的数据类型转换为Number。
方式一:
- 使用
Number()函数
字符串 --> 数字
1.如果是纯数字的字符串,则直接将其转换为数字
2.如果字符串中有非数字的内容,则转换为NaN
3.如果字符串是一个空串或者是一个全是空格的字符串,则转换为0布尔 --> 数字
true 转成 1
false 转成 0null --> 数字
0undefined --> 数字
NaN
方式二:
- 这种方式
专门用来对付字符串
parseInt()
把一个字符串转换为一个整数,它可以将一个字符串中有效的整数内容取出来parseFloat()
把一个字符串转换为一个浮点数,它可以获得有效的小数- 如果对
非String使用parseInt()或parseFloat()
,它会先将其转换为String然后在操作
方式三: 因为在一元运算符的使用时,对于非Number类型的值,它会将先转换为Number,然后再运算。因此可以对一个其他的数据类型使用+,来将其转换为number。
方式四: 任何值做- * /运算时都会自动转换为Number,我们可以利用这一特点做隐式的类型转换
,可以通过为一个值 -0 *1 /1来将其转换为Number,原理和Number()函数一样,使用起来更加简单
。
转换为Boolean(布尔型)
其他的数据类型也可以通过Boolean()函数转换为布尔类型。
方式一:使用Boolean()函数
- 数字 —> 布尔
除了0和NaN,其余的都是true - 字符串 —> 布尔
除了空串,其余的都是true - null和undefined都会转换为false
- 对象也会转换为true
方式二: 如果对非布尔值进行逻辑运算非,则会将其先转换为布尔值,然后再取反。
我们想要将一个其他的数据类型转换为布尔值时,可以为一个任意数据类型取两次反,来将其转换为布尔值
,原理和Boolean()函数一样。
2.7 不同进制的数字
- 在js中,如果需要表示16进制的数字,则需要以0x开头
- 如果需要表示8进制的数字,则需要以0开头
- 如果要要表示2进制的数字,则需要以0b开头
- 但不是所有的浏览器都支持这一规则,例如"070"这种字符串,有些浏览器会当成8进制解析,有些会当成10进制解析。
解决方法:
可以在parseInt()中传递一个第二个参数,来指定数字的进制,例如 a = parseInt(a,10);
2.8 算数运算符
运算符也叫操作符,通过运算符可以对一个或多个值进行运算,并获取运算结果
比如:typeof就是运算符
,可以来获得一个值的类型,它会将该值的类型以字符串的形式返回number string boolean undefined object。
加减乘除、取模
- 当对非Number类型的值进行算数运算时,会将这些值转换为Number然后再运算
- 任何值和NaN做运算都得NaN
+
- 可以对两个值进行加法运算,并将结果返回
- 如果对两个字符串进行加法运算,则会做
拼串
,拼串会将两个字符串拼接为一个字符串,并返回 任何的值和字符串做加法运算,都会先转换为字符串,然后再和字符串做拼串的操作
- 我们可以利用3.的这一特点,来将一个任意的数据类型转换为String,我们只需要为任意的数据类型 + 一个 “” 即可将其转换为String
注:
4.是一种隐式的类型转换,由浏览器自动完成,实际上它也是调用String()函数。
-
-
可以对两个值进行减法运算,并将结果返回 -
*
可以对两个值进行乘法运算 -
/
可以对两个值进行除法运算 -
%
取模运算(取余数) -
任何值做- * /运算时都会自动转换为Number,我们可以利用这一特点做
隐式的类型转换
,可以通过为一个值 -0 *1 /1来将其转换为Number,原理和Number()函数一样,使用起来更加简单
一元运算符
一元运算符:只需要一个操作数
+ 正号
:正号不会对数字产生任何影响- 负号
:负号可以对数字进行负号的取反- 对于非Number类型的值,它会将先转换为Number,然后再运算
可以对一个其他的数据类型使用+,来将其转换为number,它的原理和Number()函数一样
自增和自减
- 自增 ++
- 通过自增可以使变量在自身的基础上增加1
- 对于一个变量自增以后,原变量的值会立即自增1
- 自增分成两种:后++(a++) 和 前++(++a)
- 无论是a++ 还是 ++a,都会立即使原变量的值自增1
- 不同的是a++ 和 ++a的值不同:
a++的值等于原变量的值(自增前的值)
;++a的值等于新值 (自增后的值)
- 自减 –
- 通过自减可以使变量在自身的基础上减1
- 自减分成两种:后–(a–) 和 前–(–a)
- 无论是a-- 还是 --a 都会立即使原变量的值自减1
- 不同的是a-- 和 --a的值不同:
a-- 是变量的原值 (自减前的值)
;--a 是变量的新值 (自减以后的值)
2.9 逻辑运算符
• 一般情况下使用逻辑运算符会返回一个布尔值。
• 逻辑运算符主要有三个:非、与、或。
• 在进行逻辑操作时如果操作数不是布尔类型则会将其转换布尔类型在进行计算。
• 非使用符号 !
表示,与使用 &&
表示,或使用 ||
表示。
非 !
- 可以用来对一个值进行非运算
- 所谓非运算就是指对一个布尔值进行取反操作,true变false,false变true
- 如果
对一个值进行两次取反,它不会变化
- 如果对非布尔值进行逻辑运算,则会将其转换为布尔值,然后再取反
- 我们想要将一个其他的数据类型转换为布尔值时,
可以为一个任意数据类型取两次反,来将其转换为布尔值
,原理和Boolean()函数一样。
与 &&
- &&可以对符号两侧的值进行与运算并返回结果
- 运算规则:两个值中只要有一个值为false就返回false;只有两个值都为true时,才会返回true
- JS中的“与”属于短路的与,
如果第一个值为false,则不会看第二个值
- 对于非布尔值进行与运算时,会先将其转换为布尔值,然后再运算,并且返回原值
如果第一个值为true,则必然返回第二个值;如果第一个值为false,则直接返回第一个值
或 ||
- || 可以对符号两侧的值进行或运算并返回结果
- 运算规则:两个值中只要有一个true,就返回true;如果两个值都为false,才返回false
- JS中的“或”属于短路的或,
如果第一个值为true,则不会检查第二个值
- 对于非布尔值进行或运算时,会先将其转换为布尔值,然后再运算,并且返回原值
如果第一个值为true,则直接返回第一个值;如果第一个值为false,则返回第二个值
2.10 赋值运算符
- 简单的赋值操作符由等于号 (
=
) 表示,其作用就是把右侧的值赋给左侧的变量。 - 如果在等于号左边添加加减乘除等运算符,就可以完成复合赋值操作。
+=、*=、-=、/=、%=
- 比如:
a+=10等价于a=a+10
、a*=5等价于a=a*5
2.11 关系运算符
- 小于(<) 、大于(>) 、小于等于(<=)和大于等于(>=)这几个关系运算符用于对两个值进行比较
- 这几个运算符都
返回一个布尔值
。用来表示两个值之间的关系是否成立。 - 任何值和NaN做任何比较都是false
- 对于
非数值进行比较
时,会将其转换为数字然后再比较 - 如果符号
两侧的值*都是*字符串
时,不会将其转换为数字进行比较,而会分别比较字符串中字符的Unicode编码
。比较字符编码时是一位一位进行比较;如果两位一样,则比较下一位。
- 如果比较
两个字符串型的数字
,可能会得到不可预期的结果。因此在比较两个字符串型的数字时,一定
要转型!
console.log("11123123123123123123" < +"5"); //true
2.12 相等运算符
== 相等
- 相等运算符用来比较两个值是否相等,如果相等会返回true,否则返回false
- 当使用
==
来比较两个值时,如果值的类型不同,则会自动进行类型转换
,将其转换为相同的类型
然后再比较 - undefined 衍生自 null,所以这两个值做相等判断时,会返回true
- NaN不和任何值相等,包括他本身
也可以通过isNaN()函数来判断一个值是否是NaN
,如果该值是NaN则返回true,否则返回false
var b = NaN;
//判断b的值是否是NaN
console.log(b == NaN);
//可以通过isNaN()函数来判断一个值是否是NaN
//console.log(isNaN(b));
不相等
- 不相等用来判断两个值是否不相等,如果不相等返回true,否则返回false
- 不相等也会对变量进行
自动的类型转换
,如果转换后相等它会返回false
=== 全等
- 用来判断两个值是否全等,它和相等类似,不同的是它
不会做自动的类型转换
如果两个值的类型不同,直接返回false
!== 不全等
- 用来判断两个值是否不全等,和不等类似,不同的是它
不会做自动的类型转换
如果两个值的类型不同,直接返回true
2.13 条件运算符
条件运算符也叫三元运算符
- 语法: 条件表达式?语句1:语句2;
- 执行的流程:
- 条件运算符在执行时,首先对条件表达式进行求值,
- 如果该值为true,则执行语句1,并返回执行结果;如果该值为false,则执行语句2,并返回执行结果
- 如果条件的表达式的求值结果是一个非布尔值,会将其转换为布尔值然后再运算
示例:
<script type="text/javascript">
var a = 300;
var b = 143;
var c = 50;
//获取a和b中的最大值
//var max = a > b ? a : b;
//获取 a b c 中的最大值
//max = max > c ? max : c;
//这种写法不推荐使用,不方便阅读
var max = a > b ? (a > c ? a :c) : (b > c ? b : c);
console.log("max = "+max);
</script>
2.14 运算符的优先级
- 和数学中一样,JS中的运算符也是具有优先级的,比如 先乘除 后加减 先与 后或
- 具体的优先级可以参考优先级的表格,在表格中越靠上的优先级越高,优先级越高的越优先计算,优先级相同的,从左往右计算。
- 优先级不需要记忆,如果
越到拿不准的,使用()来改变优先级。
示例:
<script type="text/javascript">
/*
* 如果||的优先级高,或者两个一样高,则应该返回3
* 如果与的优先级高,则应该返回1
*/
var result = 1 || 2 && 3;
console.log("result = "+result);
</script>