开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 【学习笔记】JavaScript基础 -> 正文阅读

[JavaScript知识库]【学习笔记】JavaScript基础

初识JavaScript

1. 什么是JavaScript

运行在客户端的脚本语言，创始人Brendan Eich
脚本语言，不需要编译，编译是在代码执行直接编译生成中间代码文件如exe，解释器是在代码运行时进行解释并立即执行
可基于Node.js技术进行服务器端编程

2. 浏览器执行JS

浏览器分为渲染引擎和JS引擎两部分

渲染引擎： 解析HTML和CSS，俗称内核，如chrome的blink
JS引擎： 也成为JS解释器，用来读取网页中的JS代码，如chrome中的V8（号称最快的JS引擎）

3. JS的组成

ECMAScript： 规定了JS的编程语法和基础知识，是所有浏览器厂商共同遵守的一套JS语法工业标准
DOM： 文档对象模型，是W3C组织推荐的处理可扩展置标语言的标准编程接口。通过DOM可操作页面上的各种元素（大小、位置、颜色等）。
BOM： 浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可操作浏览器窗口，比如弹出框、控制浏览器跳转、分辨率等。

4. JS的三种书写方式

行内式： 直接写在元素内部

<!-- 行内式的JS直接写到元素内部 -->
<input type="button" value="点一下" onclick="alert('行内式')">

内嵌式： 写在<head>或<body>标签中

<!-- 写在`<head>`或`<body>`中的<script>标签内 -->
 <script>alert('内嵌式')</script>

外联式：

<!-- 放置与外部文件中 -->
 <script src="test.js"></script>

JS语言基础

1. 注释

单行注释

//单行注释 ctrl + /

多行注释

/*
多行行注释 shift + alt + a
*/

2. JS输入输出语句

方法	说明	归属
alert(msg)	浏览器弹出警示框	浏览器
console.log(msg)	浏览器控制台打印输出信息	浏览器
prompt(msg)	浏览器弹出输入框，用户可输入	浏览器

3. 变量

JavaScript 变量是存储数据值的容器，通过变量获取数据。 JavaScript 变量必须以唯一的名称的标识。

变量命名规范：
- 名称必须以字母开头
- 名称可包含字母、数字、下划线和美元符号
- 名称也可以$ 和 _开头，一般不这么做
- 名称对大小写敏感
- 名称不能使用保留字，如var
- 驼峰命名规范： 首单词的首字母小写，后面单词的首字母大写

4. 标识符、保留关键字

标识符

开发人员为变量、属性、函数、参数等取的名字，不能是关键字和保留字

保留关键字

在 JavaScript 中，一些标识符是保留关键字，不能用作变量名或函数名。

用星号标记的关键词是 ECMAScript 5 和 6 中的新词。

abstract	arguments	await*	boolean
break	byte	case	catch
char	class*	const	continue
debugger	default	delete	do
double	else	enum*	eval
export*	extends*	false	final
finally	float	for	function
goto	if	implements	import*
in	instanceof	int	interface
let*	long	native	new
null	package	private	protected
public	return	short	static
super*	switch	synchronized	this
throw	throws	transient	true
try	typeof	var	void
volatile	while	with	yield

5. JS数据类型

基本数据类型

Number、String、Boolean、Undefined、Null

1）数字Number

与许多其他编程语言不同，JavaScript 不会定义不同类型的数，比如整数、短的、长的、浮点的等等。JavaScript 数值始终以双精度浮点数来存储，根据国际 IEEE 754 标准。此格式用 64 位存储数值。使用isNaN()判断是否非数字，非数字返回true

值	指数	符号
52bits	11bits	1bits
0-52	52-62	63

精度：

整数（不使用指数或科学计数法）会被精确到 15 位。
小数的最大数是 17 位，但是浮点的算数并不总是 100% 精准。不能直接判断两个浮点数是否相等

/*精度*/
var a = 999999999999999;   // x 将是 999999999999999
var b = 9999999999999999;  // y 将是 10000000000000000
var c = 0.2 + 0.1;         // x 将是 0.30000000000000004，不能直接判断两个浮点数是否相等
/*特殊值*/
var d = Number.MAX_VALUE   // 最大值：1.7976931348623157e+308
var e = Number.MIN_VALUE   // 最小值：5e-32
var f = Infinity	       // 无穷大
var g = NaN 			   // 非数字

进制的前缀
二进制八进制十六进制
0b 0 0x

2）字符串String

JavaScript 字符串是引号中的零个或多个字符。可以使用''或""，推荐使用''，因为HTML标签内的属性使用""。

字符串长度
内建属性length可返回字符串的长度
```
var str = "ABCDEFG";
var strLength = str.length;
```
特殊字符——转义
转义符含义
\n 换行
\ \
’ ’
" "
\b 退格
\r 回车
\t 水平制表符，tab 缩进
\v 垂直制表符
\f 换页
’ ’

字符串拼接

使用+对字符串进行拼接
字符串和字符串的拼接
字符串和其他类型的拼接

var x = "123" + "456";	// x = "123456"
var y = "123" + 456;	// y = "123456"
var z = "123" + true;	// z = "123true"

2）布尔类型Boolean

布尔类型有两个值：true和false

var x = true + 1;	// x = 2
var y = false + 1;	// y = 1

3）Undefined 和Null

一个变量申明后未被赋值默认值为undefined，声明变量可以给undefined和null值

var x = undefined + "123"	// x = "undefined123"
var y = undefined + 123     // x = NaN
var z = null + "123"	    // z = "null123"
var r = null + 123	        // r = 123

5）typeof

typeof方法返回数据类型，返回结构有以下几种

string
number
boolean
undefined
function
object

typeof "Bill"              		// 返回 "string"
typeof 3.14                		// 返回 "number"
typeof true                		// 返回 "boolean"
typeof false               		// 返回 "boolean"
typeof x                   		// 返回 "undefined" (假如 x 没有值)
typeof {name:'Bill', age:62} 	// 返回 "object"
typeof [1,2,3,4]             	// 返回 "object" (数组即对象)
typeof null                  	// 返回 "object"
typeof function myFunc(){}   	// 返回 "function"

4）数据类型的转换

转换为字符串
转换方式说明
变量.toString() 转换为字符串
String() 强制转换为字符串
+ 通过拼接转换为字符串，隐式转换
- 变量.toString()和String()的区别：
  - 变量.toString()不能转Undefined和null，可以转换进制数据传参2、8、10、16即可
  - String()可以将null和undefined转换为字符串，但不能转换进制字符串

转换为数字型

转换方式	说明
parseInt(string)	将string类转换为整数数值型
parseFloat(string)	将string类转换为浮点数数值型
Number()	强制转换为数值型
- * /	通过算式运算转换，隐式转换

区别：

/*parseInt()*/
var num1=parseInt("num123");    //NaN
var num2=parseInt("");          //NaN
var num3=parseInt("123.45")     //123
var num4=parseInt("101010",2)   //42
var num5=parseInt("123num")     //123
var num6=parseInt("0xff")       //255
/*parseFloat(string)*/
var num1=parseFloat("1234blue");    //1234
var num2=parseFloat("0xA");         //0
var num3=parseFloat("0908.5");      //908.5
var num4=parseFloat("3.125e7");     //31250000
var num5=parseFloat("123.45.67")    //123.45
var num6=parseFloat("")             //NaN
var num7=parseFloat("num123")       //NaN
/*Number()*/
var num1=Number("Hello World");  //NaN
var num2=Number("");             //0
var num3=Number("000011");       //11
var num4=Number(true);           //1
var num5=Number("num123")       //NaN
/*隐式转换*/
var num1 = '12' - 0				// 12
var num2 = '123' - '190'		// 3
var num2 = '123' * '1'			// 123

转换为布尔型
使用Boolean()进行转换
false true
‘’、0、NaN、null、undefined 其他所有值

复杂数据类型

object类型，在后面重点讲到

6. JS运算符

算术运算符

运算符	描述
+	加法
-	减法
*	乘法
/	除法
%	取模（余数）
++	递加
–	递减

num++和++num的区别
- 与其他语言一样，++num先自加再返回值，num++先返回值再自加
```
var num1=10
var num2=10
var add = num1++ + ++num2 
console.log(add)	// 21
```

比较运算符

假设给的x=5，则有

运算符	描述	比较	返回
==	等于	x == 8	false
		x == 5	true
		x == “5”	true
===	值相等并且类型相等	x === 5	true
		x === “5”	false
!=	不相等	x != 8	true
!==	值不相等或类型不相等	x !== 5	false
		x !== “5”	true
		x !== 8	true
>	大于	x > 8	false
<	小于	x < 8	true
>=	大于或等于	x >= 8	false
<=	小于或等于	x <= 8	true
? :	三元运算符	y = (x < 8) ? “小于8”:“大于8”;	小于8

==和===的区别
- ==默认会转换数据类型后比较
- ===需要数据类型也一致

逻辑运算符

运算符	描述
&&	逻辑与
\|\|	逻辑或
!	逻辑非

短路运算（逻辑中断）
逻辑与运算符&&和逻辑或运算符||都是从左到右结合的，在计算机包含&&或||的表达式时，一旦能确定整个表达式的值，求解立即停止
把最有可能的结果写在左边能提高运行效率
即使后面有非逻辑运算符还是会立即短路返回值

console.log(0 && 1 + 2 && 456 * 789) //直接返回0

赋值运算符

算符	例子	等同于
=	x = y	x = y
+=	x += y	x = x + y
-=	x -= y	x = x - y
*=	x *= y	x = x * y
/=	x /= y	x = x / y
%=	x %= y	x = x % y
<<=	x <<= y	x = x << y
>>=	x >>= y	x = x >> y
>>>=	x >>>= y	x = x >>> y
&=	x &= y	x = x & y
^=	x ^= y	x = x ^ y
\|=	x \|= y	x = x \| y
**=	x **= y	x = x ** y ，跨浏览器表现不稳定，不使用

位运算符

位运算中的任何数值运算数都会被转换为 32 位数

运算符	描述	例子	等同于	结果	十进制
&	与	5 & 1	0101 & 0001	0001	1
\|	或	5 \| 1	0101 \| 0001	0101	5
~	非	~ 5	~0101	1010	10
^	异或	5 ^ 1	0101 ^ 0001	0100	4
<<	零填充左位移	5 << 1	0101 << 1	1010	10
>>	有符号右位移	5 >> 1	0101 >> 1	0010	2
>>>	零填充右位移	5 >>> 1	0101 >>> 1	0010	2

运算符的优先级

权重越高优先级越靠前
括号>一元运算符>算术运算符>比较运算符>逻辑运算符>赋值运算符

权重	运算符	描述	实例
20	( )	表达式分组	(3 + 4)
19	.	成员	person.name
19	[]	成员	person[“name”]
19	()	函数调用	myFunction()
19	new	创建	new Date()
17	++	后缀递增	i++
17	–	后缀递减	i–
16	++	前缀递增	++i
16	–	前缀递减	–i
16	!	逻辑否	!(x==y)
16	typeof	类型	typeof x
15	**	求幂 (ES7)	10 ** 2
14	*	乘	10 * 5
14	/	除	10 / 5
14	%	模数除法	10 % 5
13	+	加	10 + 5
13	-	减	10 - 5
12	<<	左位移	x << 2
12	>>	右位移	x >> 2
12	>>>	右位移（无符号）	x >>> 2
11	<	小于	x < y
11	<=	小于或等于	x <= y
11	>	大于	x > y
11	>=	大于或等于	x >= y
11	in	对象中的属性	“PI” in Math
11	instanceof	对象的实例	instanceof Array
10	==	相等	x == y
10	===	严格相等	x === y
10	!=	不相等	x != y
10	!==	严格不相等	x !== y
9	&	按位与	x & y
8	^	按位 XOR	x ^ y
7	\|	按位或	x \| y
6	&&	逻辑与	x && y
5	\|\|	逻辑否	x \|\| y
4	? :	条件	? “Yes” : “No”
3	=	赋值	x = y
3	+=	赋值	x += y
3	-=	赋值	x -= y
3	*=	赋值	x *= y
3	%=	赋值	x %= y
3	<<=	赋值	x <<= y
3	>>=	赋值	x >>= y
3	>>>=	赋值	x >>>= y
3	&=	赋值	x &= y
3	^=	赋值	x ^= y
3	\|=	赋值	x \|= y
2	yield	暂停函数	yield x
1	,	逗号	7 , 8