JavaScript的基础知识(复习巩固笔记)

适合零基础、小白的学习笔记，JavaScript快速入门 及 基本语法 复习巩固你的知识，温故而知新。

一、初识JavaScript

1.js简介

💌JavaScript (简称“JS”) ：一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

js组成部分	描述
ECMAScript	该语言的语法和基本对象
文档对象模型（DOM）	处理网页内容的方法和接口
浏览器对象模型（BOM）	与浏览器进行交互的方法和接口

🔸基本特点:

• 是一种解释性脚本语言（代码不进行预编译）。
• 主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。
• 可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。
• 跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。
• 面向对象，是软件开发中的一种重要的编程思想，其优点非常多。

🔹对于制作一个网页而言，HTML、CSS和JavaScript分别代表了结构、样式和行为，结构是网页的骨架，样式是网页的外观，行为是网页的交互逻辑，如表所示。

语言	作用	说明
HTML	结构	从语意的角度，描述页面结构
CSS	样式	从审美的角度，美化页面
JavaScript	行为	从交互的角度，提升用户体验

2.引入方式

(1)嵌入式：就是使用<script>标签包裹JavaScript代码，直接编写到HTML文件中，具体示例如下。

第一种						第二种
<script>					<script type="text/javascript">
	JavaScript语句;				JavaScript语句;
</script>					</script>

上述示例演示了两种书写方式，其中<script>标签的type属性用于告知浏览器脚本的类型，由于HTML5中该属性的默认值为“text/javascript”，因此在编写时可以省略type属性。
(2)外链式：是指将JavaScript代码保存到一个单独的文件中，通常使用“js”作为文件的扩展名，然后使用<script>标签的src属性引入文件，具体示例如下。

		HTML文件									
......									    	
  <script src="js/test.js"></script>		 
......	

	js/test.js文件
	 ......		
	   alert('Hello');	
	 ......				      

外链式可以利用浏览器缓存提高速度，有利于分布式部署，在实际开发中，推荐大家使用外链式。

(3)行内式：是将JavaScript代码作为HTML标签的属性使用。例如，在单击“test”按钮时，弹出一个警告框提示“Hello”，触发按钮的单击事件，具体如下。

<a href="javascript:alert('Hello');">test</a>
<input type="button" onclick="alert('Hello');" value="test">

3.常用输出语句

①alert():用于弹出一个警告框，确保用户可以看到某些信息。经常用于测试程序。
②console.log():用于在浏览器的控制台中输出内容，可用来进行代码调试。
③document.write():用于在HTML文档页面中输出内容。
④prompt():弹出一个输入框，给用户提供输入信息位置。

二、数据类型

在JavaScript中，变量是存储信息的容器，变量存在两种类型的值，即原始值和引用值。

• 原始值： 存储在栈(Stack)中的简单数据段，也就是说，它们的值直接存储在变量访问的位置。
• 引用值： 存储在堆(Heap)中的对象，也就是说，存储在变量处的值是一个指针(Point)，指向存储对象的内存处。
  

(1)布尔型(Boolean) 是JavaScript中较常用的数据类型之一，通常用于逻辑判断。它只有true和false两个值(即两个Boolean字面量)，表示事物的“真”和“假”。具体示例如下。

var bFound = true; //为变量bFound赋一个布尔类型的值true
var bLost = false; //为变量bLost赋一个布尔类型的值false

需要注意的是，JavaScript中严格遵循大小写，因此true和false值只有全部为小写时才表示布尔型。

(2)未定义型(Undefined) 只有一个特殊的undefined值，当声明的变量未初始化时，变量的默认值为undefined。在下面的案例中，代码声明变量oTemp，没有初始值，该变量将被赋予值undefined，即Undefined类型的字面量。
需要注意的是，null和undefined与空字符串('') 和 0 都不相等。

var oTemp;

(3)空型(Null) 也只有一个特殊的null值，即它的字面量，用于表示一个不存在的或无效的对象或地址。值undefined实际上是从值null派生来的，因此JavaScript将它们定义为相等的，但含义不同，在下面的案例会输出“true”。

alert(null == undefined); //输出“true”

(4)字符串(String) 是由Unicode字符、数字等组成的字符序列，这个字符序列我们一般将其称为字符串，它是JavaScript用来表示文本的数据类型。程序中的字符型数据包含在单引号(")或双引号("")中，具体示例如下。

var slogan = 'knowledge';		//单引号，存放一个单词
var str = "the sky is blue.";	//双引号，存放一个句子
var color = '"red" blue';		//单引号中包含双引号
var food = "'pizza'bread";		//双引号中包含单引号
var num = '',total = "";		//定义空字符串

JavaScript常用的需要转义的特殊字符如表所示（转义字符“\”）。

特殊字符	含义	特殊字符	含义
\’	单引号	\"	双引号
\n	回车换行	\v	跳格(Tab、水平)
\t	Tab符号	\r	换行
\f	换页	\\	反斜杠
\b	退格	\0	Null字节
\xhh	由两位16进制数字hh表示的ISO-8859-1字符。如“\x61”表示“a”	\uhhhh	由四位16进制数字hhhh表示的Unicode字符。如“\u597d”表示“好”

(5)数值型(Number) 是最基本的数据类型。与其他程序语言不同的是，JavaScript中的数值型并不区分整数和浮点数，所有数字都是数值型。具体示例如下。

var oct = 032;		 //八进制表示的26
var dec = 26;		 //十进制26
var hex = 0x1a;		 //十六进制表示的26
var fnum1 = 7.26;	 //标准格式
var fnum2 = -6.24;	 //标准格式
var fnum3 = 3.14E6;	 //科学计数法格式3.14*10⁶
var fnum4 = 8.96E-3; //科学计数法格式8.96*10¯³

🔴特殊的 NaN：表示非数(Not a Number)。
🔹NaN与任何值都不相等，包括NaN本身。
🔸函数isNaN():任何不能被转换为数值的值都会导致这个函数返回true。

alert(NaN == NaN);	 //输出“false”
alert(isNaN("blue")); //输出“true”
alert(isNaN("666"));  //输出“false”

1.类型判断

在javascript中，对一个变量的类型进行判断主要有两种方式。

• 🔹typeof操作符：用于获取一个变量或者表达式的类型。

var sTemp = "test string";
alert(typeof sTemp); //输出“string”
alert(typeof 86);    //输出“number”

提示：typeof运算符对null值会返回“Object”而不是“null”，这实际上是javascript最初实践中的一个错误。

• 🔸istanceof操作符：用于判断一个引用类型(值类型不能用)属于哪种类型，下面实例判断a是否为数组类型的变量。

var a = new Array();
if(a instanceof Array){
	document.write("a是一个数组类型");
}else{
	document.write("a不是一个数组类型");
}

2.类型转换

在JavaScript中，如果一个变量的类型不是想要的，那么可以通过类型转换实现目的，类型转换常用的有以下5种。

• Boolean(变量)：转布尔型。
• String(变量)：转字符串。
• Number(变量)：转数字型。
• parseFloat(变量)：转浮点型。
• parseInt(变量)：转整数型。

Boolean()函数会将任何非空字符串和非零的数值转换为true，将空字符串、0、NaN、undefined和null转换为false。

String()函数和toString()方法进行转字符型，它们的区别是前者可以将任意类型转换为字符串；而后者除了null和undefined没有toString()方法外，其他数据类型都可以完成字符的转换。

🔵值得一提的是，转数值型的函数在使用时有一定的区别，具体如表所示。

待转数据	Number()	parseInt()	parseFloat()
纯数字字符串	转成对应的数字	转成对应的数字	转成对应的数字
空字符串	0	NaN	NaN
数字开头字符串	NaN	转成开头的数字	转成开头的数字
非数字开头字符串	NaN	NaN	NaN
null	0	NaN	NaN
undefined	NaN	NaN	NaN
false	0	NaN	NaN
true	1	NaN	NaN

三、运算符

1.赋值、算数运算符

(1)赋值运算符： 用于将运算符右边的值赋给左边的变量。其中，“=”是最基本的赋值运算符，而非数学意义上相等的关系。常用的赋值运算符及示例如表所示。

运算符	运算	示例	结果
=	赋值	a=3,b=2;	a=3;b=2;
+=	加并赋值	a=3,b=2;a+=b;	a=5;b=2;
-=	减并赋值	a=3,b=2;a-=b;	a=1;b=2;
*=	乘并赋值	a=3,b=2;a*=b;	a=6;b=2;
/=	除并赋值	a=3,b=2;a/=b;	a=1.5;b=2;
%=	模并赋值	a=3,b=2;a%=b;	a=1;b=2;
+=	连接并赋值	a=‘abc’;a+=‘def’;	a=‘abcdef’;
**=	幂运算并赋值(ES7新特性)	a=2;a**=5;	a=32;

(2)算数运算符： 用于对数值类型的变量及常量进行算数运算。与数学中的加(+)减(–)乘(*)除(/)类似，也是最简单和最常用的运算符号，此外还有，常用的运算符及使用示例如表所示。

运算符	运算	示例	结果
%	取余	5%7	5
**	幂运算(ES7新特性)	3**4	81
++	自增(前置)	a=2,b=++a;	a=3;b=3;
++	自增(后置)	a=2,b=a++	a=3;b=2;
- -	自减(前置)	a=2,b=- -a;	a=1;b=1;
- -	自减(后置)	a=2,b=a- -;	a=1;b=2;

在进行取模运算时，运算结果的正负取决于被模数(%左边的数)的符号，与模数(%右边的数)的符号无关。例如，(-8)%7= -1，而8%(-7)=1。

在开发中尽量避免利用小数进行运算，有时可能因JavaScript的精度导致结果的偏差。例如，1.66+1.77，我们理想中的值应该是3.43，但是JavaScript的计算结果却是3.4299999999999997。此时，可以将1.66和1.77分别乘以100，相加后再除以100，即可得到3.43。

2.比较、逻辑运算符

(1)比较运算符： 用于对两个数值或变量进行比较，其结果是一个布尔值，即true和false。
🔹不同类型的数据进行比较时，首先会自动将其转换成相同类型的数据再进行比较，例如，字符串"123"与123，会将字符串"123"转换成数值型，再与123进行比较。

运算符	运算	示例(x=5)	结果
==	等于	x==4	false
!=	不等于	x!=4	true
===	全等	x===5	true
!==	不全等	x!==‘5’	true
>	大于	x>5	false
>=	大于或等于	x>=5	true
<	小于	x<5	false
<=	小于或等于	x<=5	true

🔸运算符“==”和“!=”与运算符“===”和“!==”在进行比较时，前两个运算符只比较数据的值是否相等，而后两个运算符不仅要比较值是否相等，还要比较数据的类型是否相等。

(2)逻辑运算符： 常用于布尔型的数据进行操作，当操作数都是布尔值时，返回值也是布尔值；当操作数不是布尔值时，运算符“&&”和“||”的返回值就是一个特定的操作数的值。具体如表所示。

运算符	运算	示例	结果
&&	与	a&&b	a和b都为true，结果为true，否则为false
||	或	a||b	a和b中至少有一个为true，则结果为true，否则为false
!	非	!a	若a为false，结果为true，否则相反

3.三元运算符

在JavaScript中，常用的一元运算符的符号有++(自增)和- -(自减)；常用的二元运算符的符号有+=、-=、*=、/=。
三元运算符：是一种需要三个操作数的的运算符，运算的结果根据给定条件决定。具体语法如下所示。
条件表达式 ？表达式1 ：表达式2
如果条件表达式的值为true，则返回表达式1的执行结果；如果为false，则返回表达式2的执行结果。具体示例如下。

var age = prompt('请输入需要判断的年龄:');
var status = age >= 18 ? '已成年' : '未成年';
console.log(status);

4.运算符优先级

当多个运算符并列于一个表达式中时，运算符之间具有优先级顺序。运算优先级的规律如下：
算数运算符>比较运算符>逻辑运算符>赋值运算符
接下来通过表列出JavaScript中运算符的优先级，表中运算符的优先级由上至下递减，表右部的第一个接表左部的最后一个。

结合方向	运算符	结合方向	运算符
无	（）	左	== != === !==
左	. [] new(有参数，无结合性)	左	&
右	new(无参数)	左	^
无	++(后置) - -(后置)	左	|
右	! ~ -(负数) +(正数) ++(前置) - -(前置) typeof void delete	左	&&
右	**	左	||
左	* / %	右	？:
左	+ –	右	= += -= *= /= %= < <= >>= >>>= &= ^= |=
左	<< >> >>>	左	,
左	< <= > >= in insstanceof

表中，在同一单元格的运算符具有相同的优先级，左结合方向表示同级运算符的执行顺序为从左向右，右结合方向则表示执行顺序为从右向左。

四、流程控制

JavaScript中有三大流程控制语句，分别为顺序结构、选择结构和循环结构。前面编写过的自上而下执行代码的顺序就是顺序结构。

1.选择结构

2.循环结构

3.跳转语句

下一篇 >>> js数组操作及常见方法