JavaScript

最新推荐文章于 2024-05-03 23:30:14 发布

成长路上都是孤独的

最新推荐文章于 2024-05-03 23:30:14 发布

阅读量54

点赞数

分类专栏：前端积累文章标签： javascript

本文链接：https://blog.csdn.net/L20150514/article/details/119797235

版权

前端积累专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1. JavaScript的组成

ECMAScript：JavaScript的语法标准
- ECMA是一个组织，即欧洲计算机制造商协会
- ECMAScript是ECMA制定的脚本语言标椎，规定了一种脚本语言实现包含的基本内容
- JavaScript是脚本语言的一种，所以JavaScript也必须遵守ECMAScript标准，包含ECMAScript标准中规定的基本内容
DOM：JavaScript操作网页的元素API
BOM：JavaScript操作浏览器的部分功能API

2. JavaScript和HTML、CSS的关系

HTML：是用来制作网页，简单来说就是编写网页结构
CSS：美化网页（样式）
JavaScript：实现页面与客户之间互动的桥梁，让网页具有丰富的生命力

3. JavaScript语法规范

三种书写格式：行内式、页内式、外链式

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>JavaScript三种书写格式</title>
</head>

<body>
	<!-- 行内式 -->
	<button onclick="alert('行内式')">行内式</button>

</body>

<!-- 页内式 -->
<script type="text/javascript">
	alert("页内式")
</script>

<!-- 外链式 -->
<script type="text/javascript" src="js/01_外链式.js"></script>

</html>

4. JavaScript输出方式

alert()

<script type="text/javascript">
	alert("页内式")
</script>

console.log()、console.warn()、console.error()

<script type="text/javascript">
	console.log("输出内容");
	console.warn("警告输出");
	console.error("错误输出");
</script>

prompt()在网页弹出输入框，一般用于接收用户输入的信息

<script type="text/javascript">
	prompt("请输入内容")
</script>

confirm()用于显示一个带有指定消息和确认及取消按钮的对话框。

<script type="text/javascript">
	confirm('内容')
</script>

5. 变量、关键字、标识符

5.1 常量

<script type="text/javascript">
	// 数值常量
	console.log(3+5);
	console.log(3.3+5.5);

	// 字符串常量
	console.log('a'+'b');

	// 布尔常量
	console.log(true);
	console.log(false);

	// 特殊字符
	console.log('\n');
	console.log('\t');
	console.log('\r');
</script>

5.2 变量

存储数据值的容器。

	<script type="text/javascript">
		// var 定义变量
		var name,age,sex;
		name = '张三';
		age = 20;
		sex = '男';
	</script>

5.3 标识符

所有 JavaScript 变量必须以唯一的名称的标识。
名称可包含字母、数字、下划线和美元符号
名称以字母、 $ 和 _ 开头
名称对大小写敏感
不能将保留字（比如 JavaScript 的关键词）作为变量名称

6. 数据类型

6.1 JavaScript 数据类型

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。
引用数据类型：对象(Object)、数组(Array)、函数(Function)。

注：Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。

JavaScript 拥有动态数据类型，这意味着相同变量可用作不同类型；

<script type="text/javascript">
	var x;//undefined
	var x = 5;//数字
	var x = "abc";//字符串
</script>

6.2 JavaScript 数组

<script type="text/javascript">
	// 创建数组的三种方法
	var arr = new Array()
	arr[0] = 1;

	var arr1 = new Array(1,2)

	var arr2 = [1,2]

	console.log(arr,arr1,arr2);
</script>

6.3 JavaScript 对象

<script type="text/javascript">
	// 对象
	var obj = {
	    name: '张三',
	    id: 67
	}
	console.log(obj.name);
	console.log(obj['name']);
</script>

6.4 Null 和 Undefined

<script type="text/javascript">
	var str1 = null;
	var str2 = undefined;

	console.log(str1 == str2); // true
	console.log(str1 === str2); // false
</script>

7 类型转换

7.1 数字转换为字符串

String()、toString()可以将数字转换为字符串。
可用于任何类型的数字，字母，变量，表达式。

<script type="text/javascript">
	console.log(String([1, 2])); // 1,2
	console.log(String(1 + 2)); // 3
	console.log(typeof(String([1, 2]))); // string


	console.log((1).toString());	// 1
	console.log((1 + 2).toString());	// 3
	console.log([1, 2].toString());	// 1,2
</script>

注意：null 和 undefined 没有 toString() 方法，强行调用会报错。

7.2 字符串转数字

Number() 字符串转数字
如果是纯数字字符串，会直接将其转换为数字
如果不是纯数字，则会转化为NaN
null、空串转化为 0

<script type="text/javascript">
	console.log(Number('123'));	//123
	console.log(Number('123a'));	// NaN
	console.log(Number('\t'));	// 0
	console.log(Number(""));	// 0
	console.log(Number(null));	// 0
	console.log(Number(NaN));	// NaN
	console.log(Number(undefined));	// NaN
	console.log(Number(true));	// 1
	console.log(Number(false));	// 0
</script>

7.3 解析字符串返回整数

parseInt(string, radix) 函数可解析一个字符串，并返回一个整数。
- 当参数 radix 的值为 0，或没有设置该参数时，parseInt() 会根据 string 来判断数字的基数。
  - 如果 string 以 “0x” 开头，parseInt() 会把 string 的其余部分解析为十六进制的整数。
  - 如果 string 以 0 开头，那么 ECMAScript v3 允许 parseInt() 的一个实现把其后的字符解析为八进制或十六进制的数字。
  - 如果 string 以 1 ~ 9 的数字开头，parseInt() 将把它解析为十进制的整数。
parseFloat(string) 函数可解析一个字符串，并返回一个浮点数。

8 运算符

8.1 优先级

优先级	运算符	说明	结合性
1	[]、.、()	字段访问、数组索引、函数调用和表达式分组	从左向右
2	++ – -~!delete new typeof void	一元运算符、返回数据类型、对象创建、未定义的值	从右向左
3	*、/、%	相乘、相除、求余数	从左向右
4	+、-	相加、相减、字符串串联	从左向右
5	<<、>>、>>>	左位移、右位移、无符号右移	从左向右
6	<、<=、>、>=、instanceof	小于、小于或等于、大于、大于或等于、是否为特定类的实例	从左向右
7	==、!=、===、!==	相等、不相等、全等，不全等	从左向右
8	&	按位“与”	从左向右
9	^	按位“异或”	从左向右
10	\|	按位“或”	从左向右
11	&&	短路与（逻辑“与”）	从左向右
12	\|\|	短路或（逻辑“或”）	从左向右
13	?:	条件运算符	从右向左
14	=、+=、-=、*=、/=、%=、&=、	=、^=、<、<=、>、>=、>>=	混合赋值运算符
15	,	多个计算	按优先级计算，然后从右向左

9 流程控制

9.1 基本概念

默认情况下，程序的运行流程是这样的：运行程序后，系统会按照书写从上往下的顺序执行程序中的每一行代码，但是这样并不能满足我们所有的开发需求。
实际开发中，我们需要根据不同的条件执行不同的代码或者重复执行某一段代码。
为了方便我们控制程序的流程，JavaScript 提供 3 种流程结构，不同的流程结构可以实现不同的运行流程。这 3 种流程结构分别是顺序、选择、循环三种基本控制结构构造。

9.2 流程控制语句

<script type="text/javascript">
	if (条件 1) {
		条件 1 为 true 时执行的代码块
	} else if (条件 2) {
		条件 1 为 false 而条件 2 为 true 时执行的代码块
	} else {
		条件 1 和条件 2 同时为 false 时执行的代码块
	}
</script>

switch

<script type="text/javascript">
	switch(表达式) {
		case n:
		代码块
		break;
		case n:
		代码块
		break;
		default:
		默认代码块
	} 
</script>

while循环

<script type="text/javascript">
	while (条件)
	{
		需要执行的代码
	}
</script>

dowhile循环

<script type="text/javascript">
	do {
		执行代码
	} while (条件);
</script>

for循环

<script type="text/javascript">
	for (语句 1; 语句 2; 语句 3)
	{
		被执行的代码块
	}
</script>

10. 数组

数组对象的作用是：使用单独的变量名来存储一系列的值。

10.1 创建数组

<script type="text/javascript">
	// 使用 Array 构造函数
	var arr1 = new Array(); // 创建一个空数组
	console.log(arr1);

	var arr2 = new Array(20); //创建一个长度为20的数组
	console.log(arr2);

	var arr3 = new Array(1, 2, 3, 4, 5); // 创建并初始化数组
	console.log(arr3);


	// 使用数组字面量
	var arr4 = [];  // 创建一个空数组
	console.log(arr4);

	var arr5 = [6,7,8,9];  // 创建并初始化数组
	console.log(arr5);
</script>

10.2 常用操作

<script type="text/javascript">
	var arr = [1,2,3,4];

	console.log(arr.length);  // 获取数组长度
	arr.length = 10;  // 定义数组长度
	console.log(arr.length);

	console.log(arr[1]); // 获取数组里面的元素
</script>

10.3 常用方法

join()
- join() 方法用于把数组中的所有元素放入一个字符串。通过指定的分隔符(默认逗号)进行分隔。
- 语法：arrayObject.join(separator)
- ```
<script type="text/javascript">
	var arr = ['a','b','c'];
	console.log(arr.join('*')); // a*b*c
</script>
```

push() 和 pop()

push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
语法：arrayObject.push(newelement1,newelement2,....,newelementX)

<script type="text/javascript">
	var arr = [1,2,3];

	console.log(arr); // (3) [1, 2, 3]
	console.log(arr.push('a')); // 4
	console.log(arr); //(4) [1, 2, 3, 'a']
</script>

pop() 方法用于删除并返回数组的最后一个元素。
语法：arrayObject.pop()
如果数组为空，则 pop() 不改变数组，并返回 undefined 值。

<script type="text/javascript">
	var arr = ['c'];

	console.log(arr);  //['c']
	console.log(arr.pop()); // c
	console.log(arr);  //[]
	console.log(arr.pop()); // undefined
</script>

shift() 和 unshift()

shift() 方法用于把数组的第一个元素从其中删除，并返回被删除元素的值。
语法：arrayObject.shift()
如果数组为空，shift() 方法不进行任何操作，返回 undefined 值。

<script type="text/javascript">
	console.log('---------shift--------');
	var arr = ['a','b']; 

	console.log(arr);  //(2) ['a', 'b']
	console.log(arr.shift()); // a

	arr = []
	console.log(arr.shift()); // undefined
</script>

unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。
语法：arrayObject.unshift(newelement1,newelement2,....,newelementX)

<script type="text/javascript">
	console.log('---------unshift--------');
	var arr = [1,2,3];

	console.log(arr); // (3) [1, 2, 3]
	console.log(arr.unshift('a'));  // 4
	console.log(arr); // (4) ['a', 1, 2, 3]
	console.log(arr.unshift('c','d'));  // 6
	console.log(arr);  //(6) ['c', 'd', 'a', 1, 2, 3]
</script>

sort()

sort() 方法用于对数组的元素进行排序。
语法：arrayObject.sort(sortby)

<script type="text/javascript">
	console.log('---------sort--------');
	var arr = ['10','1','123','5'];

	function sortNum(a,b) {
		return a-b;
	}

	console.log(arr.sort(sortNum)); // (4) ['1', '5', '10', '123']
</script>

reverse()

reverse() 方法用于颠倒数组中元素的顺序。
语法：arrayObject.reverse()

<script type="text/javascript">
	console.log('---------reverse--------');
	var arr = ['10','1','123','5'];

	console.log(arr); // (4) ['10', '1', '123', '5']
	console.log(arr.reverse()); //(4) ['5', '123', '1', '10']
	console.log(arr); //(4) ['5', '123', '1', '10']
</script>

concat()

concat() 方法用于连接两个或多个数组。
语法：arrayObject.concat(arrayX,arrayX,......,arrayX)

<script type="text/javascript">
	console.log('---------concat--------');
	var arr1 = [1,2,3];
	var arr2 = ['a','b','c'];

	console.log(arr1.concat(arr2)); //(6) [1, 2, 3, 'a', 'b', 'c']
	console.log(arr1); //(3) [1, 2, 3]
	console.log(arr2); //(3) ['a', 'b', 'c']
</script>

slice()

slice() 方法可从已有的数组中返回选定的元素。
语法：arrayObject.slice(start,end)

<script type="text/javascript">
	console.log('---------slice--------');
	var arr = ['a','b','c'];

	console.log(arr.slice(1)); // (2) ['b', 'c']
	console.log(arr.slice(1,2)); // ['b']
	console.log(arr.slice(-1)); // ['c']
</script>

indexOf()和 lastIndexOf()

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。
语法：stringObject.indexOf(searchvalue,fromindex)

<script type="text/javascript">
	console.log('---------indexOf--------');
	var arr = ['a','c','b','a','c'];

	// indexOf
	console.log(arr.indexOf('a')); // 0
	console.log(arr.indexOf('a',2)); // 3
	console.log(arr.indexOf('f')); // -1


	// lastIndexOf
	console.log(arr.lastIndexOf('a')); // 3
	console.log(arr.lastIndexOf('a',2)); // 0
	console.log(arr.lastIndexOf('f')); // -1
</script>

forEach()
- forEach() 方法对数组的每个元素执行一次提供的函数。
- 语法：array.forEach(function(currentValue, index, arr), thisValue)
- thisValue：可选。传递给函数的值一般用 “this” 值。
  如果这个参数为空， “undefined” 会传递给 “this” 值
- ```
<script type="text/javascript">
	console.log('---------forEach--------');
	var arr = ['a','b','c'];

	arr.forEach(function(value,index,array){
		console.log('value:',value,'index:',index,'array:',array);
	}) 
	console.log(arr);
</script>
```
map()
- map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
- 语法：array.map(function(currentValue,index,arr), thisValue)
- thisValue：可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。
  如果省略了 thisValue，或者传入 null、undefined，那么回调函数的 this 为全局对象。
- ```
<script type="text/javascript">
	console.log('---------map--------');
	var arr = [1,2,3];

	arr.map(function(value,index,array){
		console.log('value:',value,'index:',index,'array:',array);
	})
	console.log(arr);
</script>
```
filter()
- filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
- 语法：array.filter(function(currentValue,index,arr), thisValue)
- 可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。
  如果省略了 thisValue ，“this” 的值为 “undefined”
- ```
<script type="text/javascript">
	console.log('---------filter--------');
	var arr = [5,10,9];

	var arr1 = arr.filter(function(value,index,array) {
		console.log('value:',value,'index:',index,'array:',array);
		return value > 6;
	});
	
	console.log(arr);
	console.log(arr1);
</script>
```
every()
- every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。
- every() 方法使用指定函数检测数组中的所有元素：
  - 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
  - 如果所有元素都满足条件，则返回 true。
- 语法：array.every(function(currentValue,index,arr), thisValue)
- thisValue：可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。
  如果省略了 thisValue ，“this” 的值为 “undefined”
- ```
<script type="text/javascript">
	console.log('---------every--------');
	var arr = [15,7,12];

	var flag = arr.every(function(value,index,array){
		return value > 8;
	})
	console.log(flag);
</script>		
```
some()
- some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。
- some() 方法会依次执行数组的每个元素：
  - 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
  - 如果没有满足条件的元素，则返回false。
- 语法：array.some(function(currentValue,index,arr),thisValue)
- thisValue：可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。
  如果省略了 thisValue ，“this” 的值为 “undefined”
- ```
<script type="text/javascript">
	console.log('---------some--------');
	var arr = [15,7,12];

	var flag = arr.some(function(value,index,array){
		return value > 8;
	})
	console.log(flag);
</script>
```
reduce() 和 reduceRight()
- reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
- reduceRight() 方法的功能和 reduce() 功能是一样的，不同的是 reduceRight() 从数组的末尾向前将数组中的数组项做累加。
- 语法：array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
- initialValue：可选。传递给函数的初始值
- ```
<script type="text/javascript">
	console.log('---------reduce--------');
	

	var arr = [1,2,3,4];
	var sum = arr.reduce(function(total, value){
		return total + value
	})
	console.log(sum);
</script>
```

11. 函数

11.1 基本使用

基本定义
- 函数就是完成特定功能的一段代码
- 函数就是可以重复执行的代码块
语法：function name(参数 1, 参数 2, 参数 3) { 要执行的代码 }

<script type="text/javascript">
	function myFun(a,b){
		return a*b;
	}

	var c = myFun(3,5);
	console.log(c); // 15
</script>

函数直接申明和表达式申明的区别

11.2 arguments对象

<script type="text/javascript">
	console.log('----------arguments-------------');

	!function(){
		console.log(arguments);
	}(1,2,3);
</script>

在这里插入图片描述

11.3 return

return 语句会终止函数的执行并返回函数的值。

<script type="text/javascript">
	console.log('----------return-------------');

	function myFun(){
		return 10;
	}
	var a = myFun();
	console.log(a); // 10
</script>

11.4 匿名函数

匿名函数：没有名字的函数。
作用：

用在绑定事件的时候

<script type="text/javascript">
	document.onclick = function(){
		alert(1)
	}
</script>

定时器

<script type="text/javascript">
	setInterval(function(){
		console.log(1);
	},1000)
</script>

自调用函数

<script type="text/javascript">
	(function(a){
		alert(a)
	})(10);
</script>

11.5 回调函数

回调函数就是一个通过函数调用函数。
如果你把函数的指针作为参数传递给另一个函数，当这个指针被用来调用其所指向的函数时，我们就说这个是回调函数。
一般用于递归

<script type="text/javascript">
	// 求 n 个数的累加
	function fn(n){
		if(n === 0) return 0;
		if(n === 1) return 1;

		return n + fn(n-1)
	}

	console.log(fn(100))  // 5050
</script>

12. 变量的作用域

12.1 全局变量

定义在 script 或者不属于某个函数的变量
全局作用域中声明的变量和函数会作为window对象的属性和方法保存

<script type="text/javascript">
	var a = 10;
	function aFn(){}
	console.log(window);
</script>

12.2 局部变量(函数作用域)

函数作用域中可以访问到全局作用域的变量,在函数外无法访问到函数作用域内的变量

<script type="text/javascript">
	var a = 10;

	function fu(){
		var b = 20;
		console.log(a); // 10
		console.log(b); // 20
	}

	fu()
	console.log(a); // 10
	console.log(b); // b is not defined
</script>

在函数作用域中访问变量、函数时,会先在自身作用域中寻找,若没有找到,则会到函数的上一级作用域中寻找,一直到全局作用域

在函数作用域中,不使用变量关键字声明的变量,在赋值时会往上一级作用域寻找已经声明的同名变量,直到全局作用域时还没找到,则会成为window的属性

<script type="text/javascript">
	function fn(){
		a = 10;
		var b = 20;

		console.log(a); // 10
		console.log(b); // 20
	}
	fn()
	console.log(a); // 10
	console.log(b); // b is not defined
</script>

13. 对象

对象
- 对象也是变量。但是对象包含很多值。
- 值以名称:值的方式来书写（名称和值由冒号分隔）。
- 对象也可以有方法。
- 方法是在对象上执行的动作。
- 方法以函数定义被存储在属性中。

13.1 字面量对象

-	```html
	<script type="text/javascript">
		var dog = {
			// 属性
			name: "旺财",
			age:10,
	
			// 方法
			eat: function(){
				console.log('吃');
			},
		}
		dog.eat(); // 吃
		console.log(dog.name); // 旺财
	</script>
	```

13.2 JSON

JSON和对象字面量的区别
- JSON的属性必须用双引号引起来，对象字面量可以省略
- JSON本质是一种数据交互格式，JSON有两种结构，对象和数组，两种结构相互结合从而形成复杂的数据结构。

遍历

  <script type="text/javascript">
  	var dog = {
  		// 属性
  		name: "旺财",
  		age:10,
  
  		// 方法
  		eat: function(){
  			console.log('吃');
  		},
  	}
  
  	for(key in dog){
  		console.log(key);
  	}
  </script>

13.3 构造函数产生对象

new Object()
new 后面调用函数，我们称为构造函数
Object() 我们把它视为一个构造函数，构造函数的本质就是一个函数，只不过构造函数的目的是为了创建对象，为新对象进行初始化（设置对象的属性）

<script type="text/javascript">
	// 构造函数
	function Dog(option) {
	    // 属性
	    this.name = option.name;
	    this.age = option.age;

	    // 方法
	    this.eat = function(someThing) {
	        console.log(this.name + "在吃" + someThing);
	    }
	}

	var d = new Dog({name:"旺财", age:1})
	console.log(d);
	d.eat("骨头");
</script>

13.4 prototype

prototype 属性使您有能力向对象添加属性和方法。
语法：object.prototype.name=value

<script type="text/javascript">
	function obj(name) {
	    this.name = name;
	}

	var o = new obj("张三");

	obj.prototype.age = null;
	obj.prototype.eat = function(someThing){
		console.log(this.name + "吃" + someThing);
	}
	o.age = 10
	console.log(o);
	o.eat("水果");
</script>

13.5 constructor

constructor 属性返回对创建此对象的数组函数的引用。

<script type="text/javascript">
	var test=new Array();

	console.log(test.constructor);

	function obj(name){
		this.name = name;
	}
	var o = new obj("张三");
	console.log(o.constructor);
</script>

<script type="text/javascript">
	function Dog(option) {
	    this._init(option);
	}

	Dog.prototype = {
	    // 属性
	    _init: function(option) {
	        this.name = option.name;
	    },

	    // 方法
	    eat: function(someThing) {
	        console.log(this.name + "吃" + someThing);
	    }
	}


	var d = new Dog({name:"张三"})
	console.log(d);
	d.eat("饭");
</script>

在这里插入图片描述

14. 数据类型和内存分析

14.1 堆和栈

栈区（stack）—— 由编译器自动分配释放，存放函数的参数值，局部变量的值等。
堆区（heap）—— 一般由程序员分配释放，若开发者不释放，程序结束时可能有 OS 回收。

14.2 JavaScript 中的数据类型

简单(基本)属于类型
- Number、String、Boolean、Undefined、Null
- 直接存储值
复杂(引用)数据类型
- Object、Array、Date
- 存储引用

15. 内置对象

什么是内置对象：js本身已经帮我们写好的对象
我们创建出来以后直接直接使用就可以，不需要定义
常见的内置对象：Date、Array、Math、RegExp、Error、String…

成长路上都是孤独的

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript

1. JavaScript的组成ECMAScript：JavaScript的语法标准ECMA是一个组织，即欧洲计算机制造商协会ECMAScript是ECMA制定的脚本语言标椎，规定了一种脚本语言实现包含的基本内容JavaScript是脚本语言的一种，所以JavaScript也必须遵守ECMAScript标准，包含ECMAScript标准中规定的基本内容DOM：JavaScript操作网页的元素APIBOM：JavaScript操作浏览器的部分功能API2. JavaScript和HT
复制链接

扫一扫

专栏目录