JavaScript部分基础知识总结
JavaScript是什么
Java 服务器端的编程语言
JavaScript 运行在客户端(浏览器)的编程语言
JavaScript是一种运行在***客户端*** 的***脚本语言***
JavaScript的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。
JavaScript和HTML、CSS的区别
- HTML:提供网页的结构,提供网页中的内容
- CSS: 用来美化网页
- JavaScript: 可以用来控制网页内容,给网页增加动态的效果
JavaScript的组成
ECMAScript - JavaScript的核心
JavaScript的核心,描述了语言的基本语法和数据类型,ECMAScript是一套标准,定义了一种语言的标准与具体实现无关
BOM - 浏览器对象模型
一套操作浏览器功能的API
通过BOM可以操作浏览器窗口,比如:弹出框、控制浏览器跳转、获取分辨率等
DOM - 文档对象模型
一套操作页面元素的API
DOM可以把HTML看做是文档树,通过DOM提供的API可以对树上的节点进行操作
JavaScript的书写位置
- 写在行内
<input type="button" value="按钮" onclick="alert('Hello World')" />
- 写在script标签中
<head>
<script>
alert('Hello World!');
</script>
</head>
- 写在外部js文件中,在页面引入
<script src="main.js"></script>
-
注意点
引用外部js文件的script标签中不可以写JavaScript代码
变量
-
什么是变量
变量是计算机内存中存储数据的标识符,根据变量名称可以获取到内存中存储的数据
-
为什么要使用变量
使用变量可以方便的获取或者修改内存中的数据
如何使用变量
- var声明变量
var age;
- 变量的赋值
var age;
age = 18;
- 同时声明多个变量
var age, name, sex;
age = 20;
name = 'aa';
- 同时声明多个变量并赋值
var age = 20, name = 'aa';
变量在内存中的存储
var age = 888;
变量的命名规则和规范
规则 - 必须遵守的,不遵守会报错
- 由字母、数字、下划线、$符号组成,不能以数字开头
- 不能是关键字和保留字,例如:for、while。
- 区分大小写
规范 - 建议遵守的,不遵守不会报错
- 变量名必须有意义
- 遵守驼峰命名法。首字母小写,后面单词的首字母需要大写。例如:userName、userPassword
下面哪些变量名不合法
a;
1;
age18;
18age;
name;
$name;
_sex;
&sex;
theworld theWorld;
数据类型
简单数据类型
Number、String、Undefined、Null
Number类型
-
数值字面量:数值的固定值的表示法
110 1024 60.5
-
浮点数
浮点数
var n = 5e-324; // 科学计数法 5乘以10的-324次方
浮点数值的最高精度是 17 位小数,但在进行算术计算时其精确度远远不如整数
var result = 0.1 + 0.2; // 结果不是 0.3,而是:0.30000000000000004
console.log(0.07 * 100);
不要判断两个浮点数是否相等
- 数值范围
最小值:Number.MIN_VALUE,这个值为: 5e-324
最大值:Number.MAX_VALUE,这个值为: 1.7976931348623157e+308
无穷大:Infinity
无穷小:-Infinity
-
数值判断
-
NaN:not a number
NaN 与任何值都不相等,包括他本身
-
isNaN: is not a number
-
String类型
‘abc’ “abc”
-
字符串拼接使用 + 连接
console.log('hello' + ' world'); console.log('100' + '100'); console.log('11' + 11); console.log('male:' + true);
- 两边只要有一个是字符串,那么+就是字符串拼接功能
- 两边如果都是数字,那么就是算术功能。
Undefined和Null
- undefined表示一个声明了没有赋值的变量,变量只声明的时候值默认是undefined
- null表示一个空,变量的值如果想为null,必须手动设置
复杂数据类型
Object
获取变量的类型
typeof
var age = 18;
console.log(typeof age); // 'number'
数据类型转换
转换成字符串类型
-
toString()
var num = 5; console.log(num.toString());
-
String()
String()函数存在的意义:有些值没有toString(),这个时候可以使用String()
-
拼接字符串方式
num + “”,当 + 两边一个操作符是字符串类型,一个操作符是其它类型的时候,会先把其它类型转换成字符串再进行字符串拼接,返回字符串
转换成数值类型
-
Number()
Number()可以把任意值转换成数值,如果要转换的字符串中有一个不是数值的字符,返回NaN
-
parseInt()
var num1 = parseInt("12.3abc"); // 返回12,如果第一个字符是数字会解析知道遇到非数字结束 var num2 = parseInt("abc123"); // 返回NaN,如果第一个字符不是数字或者符号就返回NaN
-
parseFloat()
parseFloat()把字符串转换成浮点数 parseFloat()和parseInt非常相似,不同之处在与 parseFloat会解析第一个. 遇到第二个.或者非数字结束 如果解析的内容里只有整数,解析成整数
-
+,-0等运算
var str = '500'; console.log(+str); // 取正 console.log(-str); // 取负 console.log(str - 0);
布尔操作符(逻辑运算符)
-
&&
运算是与运算只有所有都为true,&&运算结果才是true;
逻辑与操作可以应用于任何类型的操作数,而不仅仅是布尔值,在有一个操作数不是布尔值的情况下,逻辑与操作不一定返回布尔值:
1.如果第一个操作数是对象,则返回第二个操作数
2.如果第二个操作数是对象,则只有在第一个操作数的求值结果为true的情况下才返回该对象
3.如果两个操作数都是对象,则返回第二个操作数
4.如果第一个操作数是null,则返回null
5.如果第一个操作数是NaN,则返回NaN
6.如果第一个操作数是undefined,则返回undefined
逻辑与是短路操作,即如果第一个操作数能够决定结果,那么就不会对第二个操作数求值。逻辑与操作中,当第一个操作数是false时,则无论第二个操作数是什么值,结果都是false -
||
运算是或运算只要其中有一个true,||运算结果都为true;
与逻辑与相似,如果有一个操作数不是布尔值,则结果不一定是布尔值:
1.如果第一个操作数是对象,则返回第一个操作数
2.如果第一个操作数的求值结果为false,则返回第二个操作数
3.如果两个操作数都是对象,则返回第一个操作数
4.如果两个操作数都是null,则返回null
5.如果两个操作数都是NaN,则返回NaN
6.如果两个操作数都是undefined,则返回undefined -
!
运算是非运算他是一个单目运算符,把true变成false,把false变为true;
将他的操作数转为一个布尔值,然后求其反
1.如果操作数是对象,则返回false
2.如果操作数是一个空字符串,则返回true
3.如果操作数是一个非空字符串,则返回false
4.如果操作数是0,则返回true
5.如果操作数是任意非0数值(包括Infinity),则返回false
6.如果操作数是null,则返回true
7.如果操作数是NaN,则返回true
8.如果操作数是undefined,则返回true
!!
模拟Boolean()转型函数,获得一个值对应的布尔值
乘性操作符
-
乘(*)
用于计算两个操作数的乘积
处理特殊值的规则:
1.有一个操作数是NaN===>NaN
2.Infinity * 0==>NaN
3.Infinity * 非0数值===>Infinity/-Infinity(取决于符号)
4.Infinity * Infinity===>Infinity
5.乘积超过数值的表示范围 ,返回Infinity/-Infinity(取决于符号)
6.如果有一个操作数不是数值,在后台调用Number(),然后应用上面的规则 -
除(/)
处理特殊值的规则:
1.有一个操作数是NaN===>NaN
2.0 / 0,返回NaN
3.非0数值 * 0,返回Infinity/-Infinity(取决于符号)
4.Infinity / Infinity,返回NaN
5…Infinity /任意非0数值,返回Infinity/-Infinity(取决于符号)
6.乘积超过数值的表示范围 ,返回Infinity/-Infinity(取决于符号)
7.如果有一个操作数不是数值,在后台调用Number(),然后应用上面的规则 -
求模(%)
返回余数
处理特殊值的规则:
1.被除数无穷大而除数有限大(无穷大%有限大),返回NaN
2.有限大的值 % 0,返回NaN
3.被除数有限大除数无穷大,返回被除数
4.Infinity % Infinity,返回NaN
5.0%任意数,返回0
6.如果有一个操作数不是数值,在后台调用Number(),然后应用上面的规则
加性操作符
- 加法(+)
如果两个操作数都是数值,执行常规的加法计算,然后根据规则返回结果
.如果有一个操作数是NaN,则返回NaN
.有一个操作数是字符串:①如果两个操作数都是字符串,则第二个操作数与第一个操作数拼接起来;②如果只有一个操作数是字符串,则将另一个操作数转换为字符串,饭后拼接起来
.如果有一个操作数是对象、数值、或布尔值,则调用他们的toString()方法取得对应的字符串值,在应用前面的规则
.对于null、undefined,调用String()获得字符串值 - 减法(-)
规则:
.如果有一个操作数是NaN,则返回NaN
.有一个操作数是字符串、布尔值、null或undefined:先在后台调用Number()函数将其转换为数值,然后根据前面的规则执行
.如果有一个操作数是对象,则调用valueOf()取得该对象的数值,如果得到NaN,则减法结果为NaN;如果没有valueOf(),则调用toString()方法取得对应的字符串值,并将其转换为数值。
关系操作符
小于(<)、大于(>)、小于等于(<=)、大于等于(>=)
相等运算符
实际上,JavaScript允许对任意数据类型作比较,但特别要注意相等于算符。JavaScript在设计时,有两种比较运算符:
第一种是==
,它会自动转换类型再比较。!=
:不相等
第二种是===
,他不会自动转换类型,如果两个表达式(包括他们的数据类型)相等,则结果为true。!==
:不全等
注意: NaN与其他的值都不想等,包括他自己,唯一能判断NaN的方法是通过isNaN()
语句
- if语句
语法结构
if (/* 条件表达式 */) {
// 执行语句
}
if (/* 条件表达式 */){
// 成立执行语句
} else {
// 否则执行语句
}
if (/* 条件1 */){
// 成立执行语句
} else if (/* 条件2 */){
// 成立执行语句
} else if (/* 条件3 */){
// 成立执行语句
} else {
// 最后默认执行语句
}
- do-while语句
do…while循环和while循环非常像,二者经常可以相互替代,但是do…while的特点是不管条件成不成立,都会执行一次。
基础语法:
do {
// 循环体;
} while (循环条件);
- while语句
基本语法:
// 当循环条件为true时,执行循环体,
// 当循环条件为false时,结束循环。
while (循环条件) {
//循环体
}
- for语句
while和do…while一般用来解决无法确认次数的循环。for循环一般在循环次数确定的时候比较方便
for循环语法:
// for循环的表达式之间用的是;号分隔的,千万不要写成,
for (初始化表达式1; 判断表达式2; 自增表达式3) {
// 循环体4
}
执行顺序:1243 ---- 243 -----243(直到循环条件变成false)
1. 初始化表达式
2. 判断表达式
3. 自增表达式
4. 循环体
- for-in语句:
迭代语句,用来枚举对象的属性
在使用for-in循环之前,先检测该对象的值是否是null、undefined,对象若为null、undefined,不执行for-in循环体
语法:
for(property in expression) statement
- label语句
可以在代码中添加标签,以便将来使用
语法:
label:statement
这个示例中定义的start标签可以在将来由break、continue语句引用。加标签的语句一般都要与for循环语句配合使用
- break、continue
break:立即跳出整个循环,即循环结束,开始执行循环后面的内容(直接跳到大括号) continue:立即跳出当前循环,继续下一次循环(跳到i++的地方) - with语句
将代码的作用域设置到一个特定的对象中。
语法:
with (expression) statement;
严格模式下不允许使用with语句,将视为语法错误
- switch语句
语法格式:
switch (expression) {
case 常量1:
语句;
break;
case 常量2:
语句;
break;
case 常量3:
语句;
break;
case 常量...:
语句;
break;
}
break可以省略,如果省略,代码会继续执行下一个case
switch 语句在比较值时使用的是全等操作符, 因此不会发生类型转换
数组
通过数组字面量创建数组
// 创建一个空数组
var arr1 = [];
// 创建一个包含2个字符串的数组
var arr3 = ['a', 'c'];
// 可以通过数组的length属性获取数组的长度
console.log(arr3.length);
// 可以设置length属性改变数组中元素的个数
arr3.length = 0;
console.log(arr3.length);
通过构造函数的方式定义一个数组
var arr1=new Array();//构造函数的方式---空数组
var arr2=new Array(5);//构造函数的方式定义了一个数组,数组中有5个元素,数组长度是5,每个数据是undefined
var arr3=new Array(10,20,1000,40,50,60);
console.log(arr3);
数组的赋值(新增元素)
// 格式:数组名[下标/索引] = 值;
// 如果下标有对应的值,会把原来的值覆盖,如果下标不存在,会给数组新增一个元素。
var arr = ["red", "green", "blue"];
// 把red替换成了yellow
arr[0] = "yellow";
// 给数组新增加了一个pink的值
arr[3] = "pink";
函数
函数的定义
- 函数声明
function 函数名(){
// 函数体
}
- 函数表达式
var f1 = function() {
// 函数体
console.log("hello word");
}
console.log(f1);//f1函数的代码
console.log(f1());//hello word
console.log(typeof f1);//function函数也是一种类型
如果是函数表达式,那么此时前面的变量中存储的就是一个函数,而这个变量就相当于是一个函数,就可以直接加小括号调用了
函数的调用
- 调用函数的语法:
函数名();//直接调用
-
特点:
函数体只有在调用的时候才会执行,调用需要()进行调用。
可以调用多次(重复使用)函数的参数
函数的返回值
返回值语法:
//声明一个带返回值的函数
function 函数名(形参1, 形参2, 形参...){
//函数体
return 返回值;
}
//可以通过变量来接收这个返回值
var 变量 = 函数名(实参1, 实参2, 实参3);
函数的调用结果就是返回值,因此我们可以直接对函数调用结果进行操作。
函数使用return语句后,这个函数会在执行完 return 语句之后停止并立即退出,也就是说return后面的所有其他代码都不会再执行。
注:推荐的做法是要么让函数始终都返回一个值,要么永远都不要返回值
函数里面可以调用其他的函数
函数参数
函数作为参数使用
如果一个函数作为参数,那么我们说这个参数(函数)可以叫回调函数
function sayHi(fn) {
console.log("hi");
fn();//fn此时应该是一个函数
}
function Say() {
console.log("hello");
}
sayHi(Say);
形参和实参
- 形式参数:在声明一个函数的时候,为了函数的功能更加灵活,有些值是固定不了的,对于这些固定不了的值。我们可以给函数设置参数。这个参数没有具体的值,仅仅起到一个占位置的作用,我们通常称之为形式参数,也叫形参。
- 实际参数:如果函数在声明时,设置了形参,那么在函数调用的时候就需要传入对应的参数,我们把传入的参数叫做实际参数,也叫实参。
arguments的使用
JavaScript中,arguments对象是比较特别的一个对象,实际上是当前函数的一个内置属性。也就是说所有函数都内置了一个arguments对象,arguments对象中存储了传递的所有的实参。arguments是一个伪数组,因此及可以进行遍历
匿名函数
匿名函数:没有名字的函数
匿名函数如何使用:
将匿名函数赋值给一个变量,这样就可以通过变量进行调用
匿名函数自调用
关于自执行函数(匿名函数自调用)的作用:防止全局变量污染。
- 函数作为参数
因为函数也是一种类型,可以把函数作为两一个函数的参数,在两一个函数中调用
- 函数做为返回值
作用域
作用域:变量可以起作用的范围
全局变量和局部变量
-
全局变量
在任何地方都可以访问到的变量就是全局变量,对应全局作用域
-
局部变量
只在固定的代码片段内可访问到的变量,最常见的例如函数内部。对应局部作用域(函数作用域)
不使用var声明的变量是全局变量,不推荐使用。
变量退出作用域之后会销毁,全局变量关闭网页或浏览器才会销毁
全局变量:声明的变量是使用var声明的,那么这个变量就是全局变量,全局变量可以在页面的任何位置使用
除了函数以外,其他的任何位置定义的变量都是全局变量
局部变量:在函数内部定义的变量,是局部变量,外面不能使用
全局变量,如果页面不关闭,那么就不会释放,就会占空间,消耗内存
隐式全局变量:声明的变量没有var,就叫隐式全局变量
全局变量是不能被删除的,隐式全局变量是可以被删除的
块级作用域
任何一对花括号({和})中的语句集都属于一个块,在这之中定义的所有变量在代码块外都是不可见的,我们称之为块级作用域。
在es5之前没有块级作用域的的概念,只有函数作用域,现阶段可以认为JavaScript没有块级作用域
作用域链
将这样的所有的作用域列出来,可以有一个结构: 函数内指向函数外的链式结构。就称作作用域链。
就近原则,由里向外找,先找到的num的值就是num的值。
预解析
JavaScript代码的执行是由浏览器中的JavaScript解析器来执行的。JavaScript解析器执行JavaScript代码的时候,分为两个过程:预解析过程和代码执行过程
预解析过程:
- 把变量的声明提升到当前作用域的最前面,只会提升声明,不会提升赋值。
- 把函数的声明提升到当前作用域的最前面,只会提升声明,不会提升调用。
- 先提升var,在提升function
JavaScript的执行过程
// 如果变量和函数同名的话,函数优先
console.log(a);//a函数代码
function a() {
console.log('aaaaa');
}
var a = 1;
console.log(a);//1
变量提升
-
变量提升
定义变量的时候,变量的声明会被提升到作用域的最上面,变量的赋值不会提升。
-
函数提升
JavaScript解析器首先会把当前作用域的函数声明提前到整个作用域的最前面
内置对象及常用方法
string 字符串
String | 对字符串的支持 |
---|---|
String.charAt( ) | 返回字符串中的第n个字符 |
String.charCodeAt( ) | 返回字符串中的第n个字符的代码 |
String.concat( ) | 连接字符串 |
String.fromCharCode( ) | 从字符编码创建—个字符串 |
String.indexOf( ) | 检索字符串 |
String.lastIndexOf( ) | 从后向前检索一个字符串 |
String.length | 字符串的长度 |
String.localeCompare( ) | 用本地特定的顺序来比较两个字符串 |
数组方法(Array)
-
constructor 所建立对象的函数参考
-
prototype 能够为对象加入的属性和方法
-
index 对于由正则表达式匹配创建的数组,字符串中匹配项的从零开始的索引
-
input 对于由正则表达式匹配创建的数组,反映正则表达式与之匹配的原始字符串
-
length 获取数组元素的个数,即最大下标加1
-
concat(array1,arrayn)将两个或两个以上的数组值连接起来,合并后返回结果
-
join(string) 将数组中元素合并为字符串,string为分隔符.如省略参数则直接合并,不再分隔
-
pop() 移除数组中的最后一个元素并返回该元素
-
push(value) 在数组的末尾加上一个或多个元素,并且返回新的数组长度值
-
reverse() 颠倒数组中元素的顺序,反向排列
-
shift() 移除数组中的第一个元素并返回该元素
-
slice(start, deleteCount, [item1[, item2[,…[,itemN]]]]) 返从一个数组中移除一个或多个元素,如果必要,在所移除元素的位置上插入新元素,返回所移除的元素
-
sort(compare Function) 在未指定排序号的情况下,按照元素的字母顺序排列,如果不是字符串类型则转换成字符串再排序,返回排序后的数组
-
splice() 为数组删除并添加新的元素
-
toSource() 显示对象的源代码
-
toString() 将数组所有元素返回一个字符串,其间用逗号分隔
-
unshift(value)为数组的开始部分加上一个或多个元素,并且返回该数组的新长度
-
valueOf() 返回数组对象的原始值
-
valueOf() 返回数组对象的原始值
Array | 对数组的内部支持 |
---|---|
Array.concat( ) | 连接数组 |
Array.join( ) | 将数组元素连接起来以构建一个字符串 |
Array.length | 数组的大小 |
Array.pop( ) | 删除并返回数组的最后一个元素 |
Array.push( ) | 给数组添加元素 |
Array.reverse( ) | 颠倒数组中元素的顺序 |
Array.shift( ) | 将元素移出数组 |
Array.slice( ) | 返回数组的一部分 |
Array.sort( ) | 对数组元素进行排序 |
Array.splice( ) | 插入、删除或替换数组的元素 |
Array.toLocaleString( ) | 把数组转换成局部字符串 |
Array.toString( ) | 将数组转换成一个字符串 |
Array.unshift( ) | 在数组头部插入一个元素 |
时间对象 Data
时间对象是JavaScript的内置对象,使用前必须先声明
基本语法
var curr=new Data();
注意这里的关键字new的用法,Data()的首字母必须大写
Date对象提供了以下3类方法:
Date | 操作日期和时间的对象 |
---|---|
Date.getDate( ) | 返回一个月中的某一天 |
Date.getDay( ) | 返回一周中的某一天 |
Date.getFullYear( ) | 返回Date对象的年份字段 |
Date.getHours( ) | 返回Date对象的小时字段 |
Date.getMilliseconds( ) | 返回Date对象的毫秒字段 |
Date.getMinutes( ) | 返回Date对象的分钟字段 |
Date.getMonth( ) | 返回Date对象的月份字段 |
Date.getSeconds( ) | 返回Date对象的秒字段 |
Date.getTime( ) | 返回Date对象的毫秒表示 |
Date.getTimezoneOffset( ) | 判断与GMT的时间差 |
Date.getUTCDate( ) | 返回该天是一个月的哪一天(世界时) |
Date.getUTCDay( ) | 返回该天是星期几(世界时) |
Date.getUTCFullYear( ) | 返回年份(世界时) |
显示当前时间
var now = new Date()
var year = now.getFullYear()
var month = now.getMonth()
var date = now.getDate()
ar hours = now.getHours()
var min = now.getMinutes()
var sec = now.getSeconds()
var wee = now.getUTCDay()
document.write(year+'-'+(month+1)+'-'+date+' '+hours+':'+min+':'+sec+' '+'星期'+wee)
Math对象
Math对象的作用是执行常见的算术任务。
Math属性中最常用的属性就是PI了,我们一般用Math.PI来调用它。在控制台中输出它的值为3.1415926,也就是圆周率.Math对象的常用的属性主要就是PI了,其他的用的比较少.
Math | 算术函数和常量 |
---|---|
Math.abs( ) | 计算绝对值 |
Math.acos( ) | 计算反余弦值 |
Math.asin( ) | 计算反正弦值 |
Math.atan( ) | 计算反正切值 |
Math.atan2( ) | 计算从x轴到一个点之间的角度 |
Math.ceil( ) | 对一个数上舍入 |
Math.cos( ) | 计算余弦值 |
Math.E | 算术常量e |
Math.exp( ) | 计算ex |
Math.floor( ) | 对一个数下舍入 |
Math.LN10 | 算术常loge10 |
Math.LN2 | 算术常量loge2 |
Math.log( ) | 计算一个数的自然对数 |
Math.max( ) | 返回最大的参数 |
Math.min( ) | 返回最小的参数 |