Javascript笔记（一）

最新推荐文章于 2024-08-02 22:18:58 发布

miaoqinian

最新推荐文章于 2024-08-02 22:18:58 发布

阅读量727

点赞数 1

本文链接：https://blog.csdn.net/miaoqinian/article/details/80501600

版权

JavaScript

JavaScript负责页面中的的行为。

它是一门运行在浏览器端的脚本语言。

一、基础部分

1、JS的编写的位置

1.可以编写到标签的指定属性中
    <button οnclick="alert('hello');">我是按钮</button>
    <a href="javascript:alert('aaa');">超链接</a>
			
2.可以编写到script标签中   
    <script type="text/javascript">
    //编写js代码
    </script>
			
3.可以将代码编写到外部的js文件中，然后通过标签将其引入 
    <script type="text/javascript" src="文件路径"></script>

2、输出语句

alert("要输出的内容");
	该语句会在浏览器窗口中弹出一个警告框
	
document.write("要输出的内容");
	该内容将会被写到body标签中，并在页面中显示
	
console.log("要输出的内容");
	该内容会被写到开发者工具的控制台中

3、基本的语法

注释
    单行注释
        //注释内容
    多行注释
        /*
	注释内容
		*/
		
JS严格区分大小写	
JS中每条语句以分号(;)结尾
JS中会自动忽略多个空格和换行，所以我们可以利用空格和换行对代码进行格式化。

4、字面量和变量

字面量
	字面量实际上就是一些固定的值，比如 1 2 3 4 true false null NaN "hello"
		字面量都是不可以改变的。
	由于字面量不是很方便使用，所以在JS中很少直接使用字面量

变量
	变量可以用来保存字面量，并且可以保存任意的字面量
	一般都是通过变量来使用字面量，而不直接使用字面量，而且也可以通过变量来对字面量进行一个描述
	声明变量
		使用var关键字来声明一个变量
		var a;
		var b;
		var c;
		
	为变量赋值
		a = 1;
		b = 2;
		c = 3;
		
	声明和赋值同时进行 
		var d = 456;
		var e = 789;

5、标识符

在JS中所有的可以自主命名的内容，都可以认为是一个标识符，
是标识符就应该遵守标识符的规范。
比如：变量名、函数名、属性名
规范：
	1.标识符中可以含有字母、数字、_、$
	2.标识符不能以数字开头
	3.标识符不能是JS中的关键字和保留字
	4.标识符一般采用驼峰命名法

二、数据类型

JS中一共分成六种数据类型：

String 字符串
Number 数值
Boolean 布尔值
Null 空值
Undefined 未定义
Object 对象

基本数据类型

1、String 字符串

JS中的字符串需要使用引号引起来双引号或单引号都行
在字符串中使用\作为转义字符
	\'  ==> '
	\"  ==> "
	\n  ==> 换行
	\t  ==> 制表符
	\\  ==> \	
	
使用typeof运算符检查字符串时，会返回"string"

length
- 获取字符串的长度
charAt()
- 根据索引获取指定的字符
charCodeAt()
- 根据索引获取指定的字符编码
String.fromCharCode()
- 根据字符编码获取字符
indexOf()
lastIndexOf()
- 从一个字符串中检索指定内容
- 需要一个字符串作为参数，这个字符串就是要检索的内容，
如果找到该内容，则会返回其第一次出现的索引，如果没有找到则返回-1。
- 可以指定一个第二个参数，来表示开始查找的位置
- indexOf()是从前向后找
- lastIndexOf()是从后向前找
slice()
- 可以从一个字符串中截取指定的内容，并将截取到内容返回，不会影响原变量
- 参数：
第一个：截取开始的位置（包括开始）
第二个：截取结束的位置（不包括结束）
- 可以省略第二个参数，如果省略则一直截取到最后
- 可以传负数，如果是负数则从后往前数
substr()	
- 和slice()基本一致，不同的是它第二个参数不是索引，而是截取的数量

substring()
- 和slice()基本一致，不同的是它不能接受负值作为参数，如果设置一个负值，则会自动修正为0，
substring()中如果第二个参数小于第一个，自动调整位置
toLowerCase() 
- 将字符串转换为小写并返回
toUpperCase() 
- 将字符串转换为大写并返回
split()
- 可以根据指定内容将一个字符串拆分为一个数组
- 参数：
- 需要一个字符串作为参数，将会根据字符串去拆分数组
可以接收一个正则表达式，此时会根据正则表达式去拆分数组

match() 
- 可以将字符串中和正则表达式匹配的内容提取出来
- 参数：
- 正则表达式，可以根据该正则表达式将字符串中符合要求的内容提取出来
并且封装到一个数组中返回

replace()  
- 可以将字符串中指定内容替换为新的内容
- 参数：
- 第一个：被替换的内容，可以是一个正则表达式
- 第二个：替换的新内容

search() 
- 可以根据正则表达式去字符串中查找指定的内容
- 参数：
正则表达式，将会根据该表达式查询内容，
并且将第一个匹配到的内容的索引返回，如果没有匹配到任何内容，则返回-1。

2、Number 数值

JS中所有的整数和浮点数都是Number类型
特殊的数字
	Infinity 正无穷
	-Infinity 负无穷
	NaN 非法数字（Not A Number）
其他进制的数字的表示：
	0b 开头表示二进制，但是不是所有的浏览器都支持
	0 开头表示八进制
	0x 开头表示十六进制
	
使用typeof检查一个Number类型的数据时，会返回"number"
	（包括NaN 和 Infinity）

3、Boolean 布尔值

布尔值主要用来进行逻辑判断，布尔值只有两个
true 逻辑的真
false 逻辑的假
使用typeof检查一个布尔值时，会返回"boolean"

4、Null 空值

空值专门用来表示为空的对象，Null类型的值只有一个:
null
使用typeof检查一个Null类型的值时会返回"object".

5、Undefined 未定义

如果声明一个变量但是没有为变量赋值此时变量的值就是undefined
该类型的值只有一个 undefined
使用typeof检查一个Undefined类型的值时，会返回"undefined"

引用数据类型

Object 对象（下面的第6大点重点说明）

基本数据类型和引用数据类型的比较：

基本数据类型
    String Number Boolean Null Undefined
引用数据类型
    Object
基本数据类型的数据，变量是直接保存的它的值。
    变量与变量之间是互相独立的，修改一个变量不会影响其他的变量。
引用数据类型的数据，变量是保存的对象的引用（内存地址）。
    如果多个变量指向的是同一个对象，此时修改一个变量的属性，会影响其他的变量。
比较两个变量时，对于基本数据类型，比较的就是值，
    对于引用数据类型比较的是地址，地址相同才相同

三、类型转换

类型转换就是指将其他的数据类型，转换为String Number 或 Boolean

1、转换为String

方式一（强制类型转换）：
	调用被转换数据的toString()方法
	例子：
		var a = 123;
		a = a.toString();
	注意：这个方法不适用于null和undefined
		由于这两个类型的数据中没有方法，所以调用toString()时会报错
		
方式二（强制类型转换）：
	调用String()函数
	例子：
		var a = 123;
		a = String(a);
	原理：对于Number Boolean String都会调用他们的toString()方法来将其转换为字符串，
		对于null值，直接转换为字符串"null"。对于undefined直接转换为字符串"undefined"
		
方式三（隐式的类型转换）:
	为任意的数据类型 +""
	例子：
		var a = true;
		a = a + "";
	原理：和String()函数一样

2、转换为Number

方式一（强制类型转换）：
    调用Number()函数
    例子：
	var s = "123";
	s = Number(s);
    转换的情况：
	1.字符串 --> 数字
	    如果字符串是一个合法的数字，则直接转换为对应的数字
	    如果字符串是一个非法的数字，则转换为NaN
	    如果是一个空串或纯空格的字符串，则转换为0
	2.布尔值 --> 数字
	    true转换为1
	    false转换为0
	3.空值 --> 数字
	    null转换为0
	4.未定义 --> 数字
	    undefined 转换为NaN
			
方式二（强制类型转换）：
    调用parseInt()或parseFloat()
    这两个函数专门用来将一个字符串转换为数字的
    parseInt()
    可以将一个字符串中的有效的整数位提取出来，并转换为Number
	例子：
	var a = "123.456px";
	a = parseInt(a); //123
	如果需要可以在parseInt()中指定一个第二个参数，来指定进制	
			
    parseFloat()
    可以将一个字符串中的有效的小数位提取出来，并转换为Number
        例子：
	var a = "123.456px";
	a = parseFloat(a); //123.456
			
方式三（隐式的类型转换）：
    使用一元的+来进行隐式的类型转换
	例子：
	    var a = "123";
	    a = +a;
		
	原理：和Number()函数一样

3、转换为布尔值

方式一（强制类型转换）：
	使用Boolean()函数
	例子：
		var s = "false";
		s = Boolean(s); //true
	转换的情况
		字符串 --> 布尔
			- 除了空串其余全是true
			
		数值 --> 布尔
			- 除了0和NaN其余的全是true
			
		null、undefined ---> 布尔
			- 都是false
			
		对象 ---> 布尔
			- 都是true

方式二（隐式类型转换）：	
	为任意的数据类型做两次非运算，即可将其转换为布尔值
	例子：	
		var a = "hello";
		a = !!a; //true

包装类

在JS中为我们提供了三个包装类：
String() Boolean() Number()
通过这三个包装类可以创建基本数据类型的对象
例子：
    var num = new Number(2);
    var str = new String("hello");
    var bool = new Boolean(true);
但是在实际应用中千万不要这么干。

当我们去操作一个基本数据类型的属性和方法时，
解析器会临时将其转换为对应的包装类，然后再去操作属性和方法，
操作完成以后再将这个临时对象进行销毁。

四、运算符

运算符也称为操作符,通过运算符可以对一个或多个值进行运算或操作.

1、typeof运算符

用来检查一个变量的数据类型
语法：typeof 变量
它会返回一个用于描述类型的字符串作为结果

2、算数运算符

+	对两个值进行加法运算并返回结果
-  	对两个值进行减法运算并返回结果
*	对两个值进行乘法运算并返回结果
/	对两个值进行除法运算并返回结果
%	对两个值进行取余运算并返回结果

注意：

除了加法以外，对非Number类型的值进行运算时，都会先转换为Number然后在做运算。
而做加法运算时，如果是两个字符串进行相加，则会做拼串操作，将两个字符连接为一个字符串。
任何值和字符串做加法，都会先转换为字符串，然后再拼串

3、一元运算符

一元运算符只需要一个操作数

1）、一元的+

就是正号，不会对值产生任何影响，但是可以将一个非数字转换为数字
例子：
	var a = true;
	a = +a;

2）、一元的-

就是负号，可以对一个数字进行符号位取反
例子：
	var a = 10;
	a = -a;

3）、自增++

自增可以使变量在原值的基础上自增1
自增使用 ++
自增可以使用 前++（++a）后++(a++)
无论是++a 还是 a++都会立即使原变量自增1
不同的是++a和a++的值是不同的，
	++a的值是变量的新值（自增后的值）
	a++的值是变量的原值（自增前的值）

4）、自减--

自减可以使变量在原值的基础上自减1
自减使用 --
自减可以使用 前--（--a）后--(a--)
无论是--a 还是 a--都会立即使原变量自减1
不同的是--a和a--的值是不同的，
	--a的值是变量的新值（自减后的值）
	a--的值是变量的原值（自减前的值）

4、逻辑运算符

!-->非

非运算可以对一个布尔值进行取反，true变false false边true
当对非布尔值使用!时，会先将其转换为布尔值然后再取反
我们可以利用!来将其他的数据类型转换为布尔值

&&-->与

&&可以对符号两侧的值进行与运算
只有两端的值都为true时，才会返回true。只要有一个false就会返回false。
与是一个短路的与，如果第一个值是false，则不再检查第二个值
对于非布尔值，它会将其转换为布尔值然后做运算，并返回原值
规则：
	1.如果第一个值为false，则返回第一个值
	2.如果第一个值为true，则返回第二个值

||-->或

||可以对符号两侧的值进行或运算
只有两端都是false时，才会返回false。只要有一个true，就会返回true。
或是一个短路的或，如果第一个值是true，则不再检查第二个值
对于非布尔值，它会将其转换为布尔值然后做运算，并返回原值
规则：	
	1.如果第一个值为true，则返回第一个值
	2.如果第一个值为false，则返回第二个值

5、赋值运算符

= 
	- 可以将符号右侧的值赋值给左侧变量
	
+=
	- a += 5 相当于 a = a+5
	- var str = "hello";  str += "world";
	
-=
	- a -= 5  相当于 a = a-5
	
*=
	- a *= 5 相当于 a = a*5
	
/=
	- a /= 5 相当于 a = a/5	

%=
	- a %= 5 相当于 a = a%5

6、关系运算符

关系运算符用来比较两个值之间的大小关系的
	>
	>=
	<
	<=
关系运算符的规则和数学中一致，用来比较两个值之间的关系，
如果关系成立则返回true，关系不成立则返回false。
如果比较的两个值是非数值，会将其转换为Number然后再比较。
如果比较的两个值都是字符串，此时会比较字符串的Unicode编码，而不会转换为Number。

7、相等运算符

==
    相等，判断左右两个值是否相等，如果相等返回true，如果不等返回false
    相等会自动对两个值进行类型转换，如果对不同的类型进行比较，会将其转换为相同的类型然后再比较，
		转换后相等它也会返回true
!=
    不等，判断左右两个值是否不等，如果不等则返回true，如果相等则返回false
    不等也会做自动的类型转换。
	
===
    全等，判断左右两个值是否全等，它和相等类似，只不过它不会进行自动的类型转换，
    如果两个值的类型不同，则直接返回false
		
!==
    不全等，和不等类似，但是它不会进行自动的类型转换，如果两个值的类型不同，它会直接返回true
	
特殊的值：
    null和undefined
	由于undefined衍生自null，所以null == undefined 会返回true。
	但是 null === undefined 会返回false。
			
    NaN
	NaN不与任何值相等，报告它自身 NaN == NaN //false
		
    判断一个值是否是NaN
	使用isNaN()函数

8、三元运算符

?:
语法：条件表达式?语句1:语句2;
执行流程：
先对条件表达式求值判断，
    如果判断结果为true，则执行语句1，并返回执行结果
    如果判断结果为false，则执行语句2，并返回执行结果
			
优先级：
和数学中一样，JS中的运算符也是具有优先级的，
    比如 先乘除 后加减 先与，后或
具体的优先级可以参考优先级的表格，在表格中越靠上的优先级越高，
    优先级越高的越优先计算，优先级相同的，从左往右计算。
优先级不需要记忆，如果越到拿不准的，使用()来改变优先级。

五、流程控制语句

程序都是自上向下的顺序执行的，
通过流程控制语句可以改变程序执行的顺序，或者反复的执行某一段的程序。

分类：
1.条件判断语句
2.条件分支语句
3.循环语句

1、条件判断语句

条件判断语句也称为if语句

语法一：
    if(条件表达式){
	语句...
	}
	
    执行流程：
	if语句执行时，会先对条件表达式进行求值判断，
	    如果值为true，则执行if后的语句
	    如果值为false，则不执行

语法二：
    if(条件表达式){
	语句...
    }else{
	语句...
    }
	
    执行流程：
	if...else语句执行时，会对条件表达式进行求值判断，
	    如果值为true，则执行if后的语句
	    如果值为false，则执行else后的语句
	
语法三：
    if(条件表达式){
	语句...
    }else if(条件表达式){
	语句...
    }else if(条件表达式){
	语句...
    }else if(条件表达式){
	语句...
    }else{
	语句...
    }
	
    执行流程
	if...else if...else语句执行时，会自上至下依次对条件表达式进行求值判断，
	    如果判断结果为true，则执行当前if后的语句，执行完成后语句结束。
	    如果判断结果为false，则继续向下判断，直到找到为true的为止。
	    如果所有的条件表达式都是false，则执行else后的语句

2、条件分支语句

switch语句
语法:
    switch(条件表达式){
	case 表达式:
		语句...
		break;
	case 表达式:
		语句...
		break;
	case 表达式:
		语句...
		break;
	default:
		语句...
		break;
	}
	
执行流程：
    switch...case...语句在执行时，会依次将case后的表达式的值和switch后的表达式的值进行全等比较，
	如果比较结果为false，则继续向下比较。如果比较结果为true，则从当前case处开始向下执行代码。
	如果所有的case判断结果都为false，则从default处开始执行代码。

3、循环语句

通过循环语句可以反复执行某些语句多次

while循环

语法：
    while(条件表达式){
	语句...
	}
	
执行流程：
    while语句在执行时，会先对条件表达式进行求值判断，
	如果判断结果为false，则终止循环
	如果判断结果为true，则执行循环体
	循环体执行完毕，继续对条件表达式进行求值判断，依此类推

do...while循环

语法:
    do{
	语句...
    }while(条件表达式)
	
执行流程
    do...while在执行时，会先执行do后的循环体，然后在对条件表达式进行判断，
	如果判断判断结果为false，则终止循环。
	如果判断结果为true，则继续执行循环体，依此类推
		
和while的区别：
    while：先判断后执行
    do...while: 先执行后判断
    do...while可以确保循环体至少执行一次。

for循环

语法：
    for(①初始化表达式 ; ②条件表达式 ; ④更新表达式){
	    ③语句...
	}
执行流程：
    首先执行①初始化表达式，初始化一个变量，
    然后对②条件表达式进行求值判断，如果为false则终止循环
    如果判断结果为true，则执行③循环体
    循环体执行完毕，执行④更新表达式，对变量进行更新。
    更新表达式执行完毕重复②

死循环

while(true){

}

for(;;){

}

break、continue和return

break
    退出循环
continue
    跳过当次循环
return
    退出函数

六、对象（Object）

对象是JS中的引用数据类型。
对象是一种复合数据类型，在对象中可以保存多个不同数据类型的属性。
使用typeof检查一个对象时，会返回object。

1、创建对象

方式一：
    var obj = new Object();
方式二：
    var obj = {};

2、向对象中添加属性

语法：
    对象.属性名 = 属性值;
    对象["属性名"] = 属性值;
		
    对象的属性名没有任何要求，不需要遵守标识符的规范，
    但是在开发中，尽量按照标识符的要求去写。
    属性值也可以任意的数据类型。

3、读取对象中的属性

语法：
    对象.属性名
    对象["属性名"]
如果读取一个对象中没有的属性，它不会报错，而是返回一个undefined

4、删除对象中的属性

语法：
    delete 对象.属性名
    delete 对象["属性名"]

5、使用in检查对象中是否含有指定属性

语法："属性名" in 对象
	如果在对象中含有该属性，则返回true
	如果没有则返回false

6、使用对象字面量，在创建对象时直接向对象中添加属性

语法：
    var obj = {
		属性名:属性值,
		属性名:属性值,
		属性名:属性值,
		属性名:属性值
			}

七、函数（Function）

函数也是一个对象，也具有普通对象的功能。
函数中可以封装一些代码，在需要的时候可以去调用函数来执行这些代码。
使用typeof检查一个函数时会返回function。

1、创建函数

函数声明:
	function 函数名([形参1,形参2...形参N]){
		语句...
	}

函数表达式:
	var 函数名 = function([形参1,形参2...形参N]){
		语句...
	};

2、调用函数

语法：函数对象([实参1,实参2...实参N]);
    fun() sum() alert() Number() parseInt()
当我们调用函数时，函数中封装的代码会按照编写的顺序执行

3、形参和实参

形参：形式参数
    定义函数时，可以在()中定义一个或多个形参，形参之间使用,隔开
	定义形参就相当于在函数内声明了对应的变量但是并不赋值，
	形参会在调用时才赋值。
		
实参：实际参数
    调用函数时，可以在()传递实参，传递的实参会赋值给对应的形参,
	调用函数时JS解析器不会检查实参的类型和个数，可以传递任意数据类型的值。
	如果实参的数量大于形参，多余实参将不会赋值，
	如果实参的数量小于形参，则没有对应实参的形参将会赋值undefined。

4、返回值

返回值，就是函数执行的结果。

使用return 来设置函数的返回值。
语法：return 值;
    该值就会成为函数的返回值，可以通过一个变量来接收返回值
return后边的代码都不会执行，一旦执行到return语句时，函数将会立刻退出。
return后可以跟任意类型的值，可以是基本数据类型，也可以是一个对象。
如果return后不跟值，或者是不写return则函数默认返回undefined。

5、方法（method）

可以将一个函数设置为一个对象的属性，
当一个对象的属性是一个函数时，我们称这个函数是该对象的方法。
对象.方法名();
函数名();

6、call()和apply()

这两个方法都是函数对象的方法需要通过函数对象来调用，
通过两个方法可以直接调用函数，并且可以通过第一个实参来指定函数中this。
不同的是call是直接传递函数的实参而apply需要将实参封装到一个数组中传递。

7、this

this是函数的上下文对象，根据函数的调用方式不同会执行不同的对象：

1.以函数的形式调用时，this是window
2.以方法的形式调用时，this是调用方法的对象
3.以构造函数的形式调用时，this是新建的那个对象
4.使用call和apply调用时，this是指定的那个对象
5.在全局作用域中this代表window

8、arguments

arguments和this类似，都是函数中的隐含的参数
arguments是一个类数组元素，它用来封装函数执行过程中的实参
    所以即使不定义形参，也可以通过arguments来使用实参
arguments中有一个属性callee表示当前执行的函数对象

八、作用域

作用域简单来说就是一个变量的作用范围。
在JS中作用域分成两种：

1.全局作用域

1 直接在script标签中编写的代码都运行在全局作用域中
2 全局作用域在打开页面时创建，在页面关闭时销毁。
3 全局作用域中有一个全局对象window，window对象由浏览器提供，
4 可以在页面中直接使用，它代表的是整个的浏览器的窗口。
5 在全局作用域中创建的变量都会作为window对象的属性保存
6 在全局作用域中创建的函数都会作为window对象的方法保存
7 在全局作用域中创建的变量和函数可以在页面的任意位置访问。
8 在函数作用域中也可以访问到全局作用域的变量。
9 尽量不要在全局中创建变量

2.函数作用域

1 函数作用域是函数执行时创建的作用域，每次调用函数都会创建一个新的函数作用域。
2 函数作用域在函数执行时创建，在函数执行结束时销毁。
3 在函数作用域中创建的变量，不能在全局中访问。
4 当在函数作用域中使用一个变量时，它会先在自身作用域中寻找，
    如果找到了则直接使用，如果没有找到则到上一级作用域中寻找，
    如果找到了则使用，找不到则继续向上找，直到找到为止。如果都没有就报错。

变量的声明提前

1、在全局作用域中，使用var关键字声明的变量会在所有的代码执行之前被声明，但是不会赋值。
    所以我们可以在变量声明前使用变量。但是不使用var关键字声明的变量不会被声明提前。
2、在函数作用域中，也具有该特性，使用var关键字声明的变量会在函数所有的代码执行前被声明，
    如果没有使用var关键字声明变量，则变量会变成全局变量

函数的声明提前

1、在全局作用域中，使用函数声明创建的函数（function fun(){}）,会在所有的代码执行之前被创建，
    也就是我们可以在函数声明前去调用函数，但是使用函数表达式(var fun = function(){})创建的函数没有该特性
2、在函数作用域中，使用函数声明创建的函数，会在所有的函数中的代码执行之前就被创建好了。