0601-JavaScript

2006-01-01

字数统计: 5.4k字 | 阅读时长≈ 21分钟

第一章 JavaScript概述

1.1 JavaScript介绍

1995 年 2 月，Netscape 公司发布 Netscape Navigator 2 浏览器，并在这个浏览器中免费提供了一个开发工具：LiveScript。这是最初的 JavaScript 1.0 版本。

由于 JavaScript 1.0 很受欢迎，微软在 Internet Explorer 3 中也加入了脚本编程功能。将其命名为 JScript。1997 年，欧洲计算机制造商协会（ECMA）以 JavaScript 1.1 为基础制订了脚本语言标准——ECMA-262，并命名为 ECMAScript，至此ECMAScript成为JavaScript语法标准；

1.2 JavaScript发展史

发展年份	版本说明
1997 年	ECMA 发布 262 号标准文件（ECMA-262）的第一版也就是 ECMAScript 1.0 版
1998 年 6 月	ECMAScript 2.0 版发布
1999 年 12 月	ECMAScript 3.0 版发布，并成为 JavaScript 的通用标准，获得广泛支持
2007 年 10 月	ECMAScript 4.0 版草案发布，由于 4.0 版的目标过于激进，各方产生严重分歧
2008 年 7月	中止 ECMAScript 4.0 的开发，发布为 ECMAScript 3.1后来改名改名为 ECMAScript 5
2009 年 12 月	ECMAScript 5.0 版正式发布
2011 年 6 月	ECMAScript 5.1 版发布，并且成为 ISO 国际标准
2013 年 12 月	ECMAScript 6 版草案发布
2015 年 6 月	ECMAScript 6 发布正式版本，并更名为 ECMAScript 2015
从此以后	JavaScript 开始以年份命名，新版本将按照 “ECMAScript+年份” 的形式发布

1.3 JavaScript组成

核心（ECMAScript）：语言核心部分。
文档对象模型（Document Object Model，DOM）：网页文档操作标准。
浏览器对象模型（BOM）：客户端和浏览器窗口操作基础。

1.4 JavaScript特点

脚本语言：JavaScript是一种解释型的脚本语言
基于对象：JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。
简单：JavaScript语言中采用的是弱类型的变量类型，对使用的数据类型未做出严格的要求，是基于Java基本语句和控制的脚本语言，其设计简单紧凑。
动态性：JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。
跨平台性：JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用,前提上机器上的浏览器支持JavaScript脚本语言,JavaScript已被大多数的浏览器所支持。
不需要服务器的支持。所以在早期程序员比较青睐于JavaScript以减少对服务器的负担，而与此同时也带来另一个问题：安全性。
而随着服务器的强壮，虽然程序员更喜欢运行于服务端的脚本以保证安全，但JavaScript仍然以其跨平台、容易上手等优势大行其道。同时，有些特殊功能（如AJAX）必须依赖Javascript在客户端进行支持。

1.5 JavaScript书写格式

行内式：在html标签中定义JavaScript代码

1. 在事件中使用JavaScript代码
<button onclick="alter(1);">按钮</button>

2. 在超链接中定义JavaScript代码
<a href="javascript:alter(1);">超链接</a>

内嵌式：在HTML页面中嵌入JavaScript脚本：在 HTML 页面中嵌入 JavaScript 脚本需要使用 <script>标签，用户可以在<script>标签中直接编写 JavaScript 代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>第一个JavaScript程序</title>
    <script type="text/javascript">
        document.write("<h1>Hi,JavaScript!</h1>");
    </script>
</head>
<body>
</body>
</html>

引用式：在HTML页面中引入外部的JavaScript脚本文件

定义JavaScript脚本文件：xxx.js

1	document.write("<h1>Hi,JavaScript!</h1>");

在HTML页面中引入外部的xxx.js文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>第一个JavaScript程序</title>
    <script type="text/javascript" src="xxx.js"></script>
</head>
<body>
</body>
</html>

第二章 JavaScript基础

2.1 标识符/关键字/保留字

标识符：就是名称的专业术语。JavaScript 标识符包括变量名、函数名、参数名和属性名
- 第一个字符必须是字母、下划线（_）或美元符号（$）。
- 除了第一个字符外，其他位置可以使用 Unicode 字符。一般建议仅使用 ASCII 编码的字母，不建议使用双字节的字符。
- 不能与 JavaScript 关键字、保留字重名。
- 可以使用 Unicode 转义序列。例如，字符 a 可以使用“\u0061”表示。
关键字：是 ECMA-262 规定的 JavaScript 语言内部使用的一组名称（或称为命令）。这些名称具有特定的用途，用户不能自定义同名的标识符

break delete if this while

case do in throw with

catch else instanceof try

continue finally new typeof

debugger（ECMAScript 5 新增） for return var

default function switch void

break	delete	if	this	while
case	do	in	throw	with
catch	else	instanceof	try
continue	finally	new	typeof
debugger（ECMAScript 5 新增）	for	return	var
default	function	switch	void

保留字：是 ECMA-262 规定的 JavaScript 语言内部预备使用的一组名称（或称为命令）。这些名称目前还没有具体的用途，是为 JavaScript 升级版本预留备用的，建议用户不要使用

ECMAScript 保留字

abstract	double	goto	native	static
boolean	enum	implements	package	super
byte	export	import	private	synchronized
char	extends	int	protected	throws
class	final	interface	public	transient
const	float	long	short	volatile

ECMAScript 3 将 Java 所有关键字都列为保留字，JavaScript 预定义全局变量和函数

arguments	encodeURL	Infinity	Number	RegExp
Array	encodeURLComponent	isFinite	Object	String
Boolean	Error	isNaN	parseFloat	SyntaxError
Date	eval	JSON	parseInt	TypeError
decodeURL	EvalError	Math	RangeError	undefined
decodeURLComponent	Function	NaN	ReferenceError	URLError

2.2 数据类型

数据类型	说明
null	空值，表示非对象
undefined	未定义的值，表示未赋值的初始化值
number	数字，数学运算的值
string	字符串，表示信息流
boolean	布尔值，逻辑运算的值
object	对象，表示复合结构的数据集

基本数据类型：被定义在栈中，栈属于key：value结构的，基本数据的类型的在栈中key是变量名，value是变量的值
- null
- undefined
- number
- string
- boolean
引用数据类型：引用数据类型中是被定义在堆空间中，引用数据类型的变量名是定义在栈中的，栈中的key存储引用数据类型的名称，栈中value保存的引用数据类型的内存地址，所有被称为应用数据类型；
- object

2.3 运算符

1. 算术运算符

运算符	描述
+	加法
-	减法
*	乘法
**	幂（ES2016）
/	除法
%	系数
++	递增
–	递减

2. 赋值运算符

运算符	例子	等同于
=	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

3. 比较运算符

运算符	描述
==	等于
===	等值等型
!=	不相等
!==	不等值或不等型
>	大于
<	小于
>=	大于或等于
<=	小于或等于
?	三元运算符

4. 逻辑运算符

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

5. 类型运算符

运算符	描述
typeof	返回变量的类型。
instanceof	返回 true，如果对象是对象类型的实例

6. 位运算符

运算符	描述	例子	等同于	结果	十进制
&	与	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

7. 运算符优先级

运算符	描述
. [] ()	字段访问、数组下标、函数调用以及表达式分组
++ – - ~ ! delete new typeof void	一元运算符、返回数据类型、对象创建、未定义值
* / %	乘法、除法、取模
+ - +	加法、减法、字符串连接
<< >> >>>	移位
< <= > >= instanceof	小于、小于等于、大于、大于等于、instanceof
== != === !==	等于、不等于、严格相等、非严格相等
&	按位与
^	按位异或
\|	按位或
&&	逻辑与
\|\|	逻辑或
?:	条件
= oP=	赋值、运算赋值
,	多重求值

2.4 常量/变量/字面量

字面量：在计算机科学中，字面量（literal）是用于表达源代码中一个固定值的表示法（notation
变量：计算机中数据是存储在内存中，程序员为这块内存定义的名称称为变量；变量是存储数据的盒子，盒子内的元素可以改变，但是盒子会变；
常量：有些数据可以在程序使用之前预先设定并在整个运行过程中没有变化，这称为常量

2.5 程序控制语句

1. 顺序结构

2. 分支结构

if
1
2
3
if (laber< 50) {
// 语句块
}

if-else

if (laber > 50) {
    //条件为true，执行这个代码块
} else {
    //条件为false，执行这个代码块
}

if-else if-else

var laber = 100;
if (laber >= 100) {                        //如果满足条件，不会执行下面任何分支
    alert('甲');
} else if (laber>= 90) {
    alert('乙');
} else if (laber >= 80) {
    alert('丙');
} else if (laber >= 70) {
    alert('丁');
} else if (laber >= 60) {
    alert('及格');
} else {                                //如果以上都不满足，则输出不及格
    alert('不及格');
}

switch-case

var laber = 1;
switch ( laber) {                            //用于判断box相等的多个值
    case 1 :
        alert('one');
        break;                        		//break;用于防止语句的穿透
    case 2 : 
        alert('two');
        break;
    case 3 : 
        alert('three');
        break;
    default :                            	//相当于if语句里的else，否则的意思
        alert('error');
}

3. 循环结构

for：是一种先判断，后运行的循环语句。但它具有在执行循环之前初始变量和定义循环后要执行代码的能力。

// 第一步，声明变量var laber = 1;
// 第二步，判断laber <= 5
// 第三步，alert(laber )
// 第四步，laber ++
// 第五步，从第二步再来，直到判断为false
for (var laber = 1; laber <= 5 ; laber ++) {        
    alert(laber );                                  
}

for…in：是一种精准的迭代语句，可以用来枚举对象的属性。

var laber = {                            	//创建一个对象
    'name' : 'moxiaobo',                    //键值对，左边是属性名，右边是值
    'age' : 28,
    'height' : 178
};
for (var p in laber) {                     	//列举出对象的所有属性
    alert(p);
}

while：是一种先判断，后运行的循环语句。也就是说，必须满足条件了之后，方可运行循环体。

var laber = 1;        
// 先判断，再执行
while (laber <= 5) {                        
    alert(laber);
    laber++;
}

do…while：是一种先运行，后判断的循环语句。也就是说，不管条件是否满足，至少先运行一次循环体。

var laber = 1;

// 先运行一次，再判断
do {
    alert(laber);
    laber++;
} while (laber<= 5);

4. 流程控制

return：终止当前流程的执行，无论是分支结构还是循环结构或顺序结构；

break：用于在循环中精确地控制代码的执行。break语句会立即退出循环，强制继续执行循环体后面的语句

for (var laber = 1; laber <= 10; laber++) {
    //如果laber 是5，就退出循环
    if (laber == 5) break;                        
    document.write(laber );
    document.write('<br />');
}

continue：用于在循环中精确地控制代码的执行。continue语句退出当前循环，继续后面的循环。

for (var laber = 1; laber <= 10; laber++) {
    // 如果laber 是5，就退出当前循环
    if (laber == 5) continue;                    
    document.write(laber );
    document.write('<br />');
}

throw：
- ECMA-262 规范了 7 种错误类型，具体说明如下。其中 Error 是基类，其他 6 种错误类型是子类，都继承 Error 基类。
  - Error：普通异常。主要用途是自定义错误对象。属性 name 可以读写异常类型，message 属性可以读写详细错误信息。
  - EvalError：不正确的使用 eval() 方法时抛出。
  - SyntaxError：出现语法错误时抛出。
  - RangeError：数字超出合法范围时抛出、
  - ReferenceError：读取不存在的变量时抛出。
  - TypeError：值得类型发生错误时抛出。
  - URIError：URI 编码和解码错误时抛出。
- throw：能够主动抛出异常
  1
  throw new 异常类();

5. 异常

try {} catch () {}

try{
	var age=5;
}catch(e){
    throw new Error("年龄太小啦")
}

try {} catch () {} finally {}

try{
	var age=5;
}catch(e){//e是异常的封装对象
	document.write("出错："+e.message);
}finally{
	document.write("总会执行的finally块");
}

第三章对象

4.1 对象概述

对象介绍
- JavaScript的数据类型中除了基本数据类型（number，boolean，string，undefined，null），其他都是属于引用数据类型（object）；基本数据类型特点：基本数据类型的值存在栈,值与值之间独立存在，修改一个值不会影响其他变量；引用数据类型：对象保存在堆内存中，每创建一个新的对象就会在堆内存开辟一个新的空间，变量保存的是内存地址；
- 对象的数据类型Object：是JavaScript中所有对象的基类
- JavaScript对象也是一种符合数据类型：可以聚合很多值，通过名字可以访问这些值。JavaScript对象也可以看做属性的无序集合：每个属性都是一个键值对，属性名是字符串；JavaScript对象还可以从一个称为原型的对象继承属性：对象的方法通常是继承的属性；
对象的分类
- 内置对象：是EcmaScript内置的JavaScript对象
- 宿主对象：是由JavaScript代码运行环境提供的对象
- 自定义对象：通过自定义构造函数创建的对象
对象的相关概念
- 类型
- 实例
- 属性
- 方法
- 原型

4.2 对象的基本操作

创建对象
- 方式一：使用Object的构造方法创建对象，通过对创建的对象的属性扩展完成对象的自定义
  1
  var obj = new Object()
- 方式二：使用对象字面量创建对象，{} - 一对花括号称为对象字面量
  1
  2
  3
  4
  // 使用对象字面量创建空对象
  var obj = {}
  // 使用对象字面量创建对象并设置属性
  var obj = {属性名:属性值}
- 方式三：使用构造函数创建对象，通过构造函数创建的对象是同一类型的对象，在面向对象对象的概念中，创建同一种类型的对象的构造函数称为类，由类new出来的对象称为改类的实例对象
  1
  2
  3
  4
  function Person(){
  this.name = null;
  }
  var person = new Person();

对象属性：对象是属性名没有强制约束标识符规范，属性名如果是包含特殊字符需要使用方括号将属性名字符串包裹，并且读取该属性时候也需要使用方括号；对象的属性值可以是任意数据类；
1
2
3
4
5
var obj = {}
// 为特殊属性赋值
obj["123"] = 属性值
// 获取对象中特殊属性的属性值
var value = obj["123"]
对象属性的赋值和修改

删除对象属性：关键字delete

var obj = {}
obj.name = 属性值
// 删除对象中的属性
delete obj.name

判断属性是否存在：in运算符
遍历属性：for-in语句

4.2 this

this指向的是一个对象：这个对象被称为函数执行的上下文对象，根据调用者的不同，this会指向当前调用对象的应用；

4.3 对象原型

构造函数的执行流程
- 调用函数构造器在堆空间创建出一个对象
- 将新建的对象的引用赋值给this关键字
- 顺序执行函数体中的代码，初始化对象相关属性（每次构造函数都会在函数内部完成全部的构建）
- 将new出的对象作为返回值返回
原型的详解：prototype
- 每创建一个函数对象，解析器都会为这个函数添加一个prototype对象被称为原型对象
- 如果函数是普通函数，prototype也是函数本身；
- 如果使用函数构造器，创建的实例对象也有prototype属性并指向和构造器同一个prototype
- 给prototype对象扩展属性，则该类创建的实例对象都会包含这些属性
- 访问对象属性，如果实例对象没有则会在原型对象中查找，原型对象没有则会去父类的原型对象中查找，知道Object的对象中
属性判断（只判断当前对象不包括原型对象中的属性）
1
实例对象.hasOwnProperty();

第四章函数

4.1 函数概念

函数是由事件驱动的或者当它被调用时执行的可重复使用的具有特定功能的代码块；JavaScript函数是属于Function类型的一种对象；
函数是分类：①普通函数②构造函数③匿名函数

4.2 函数定义

普通函数：定义函数关键字function
- Function对象，函数体是一段字符串格式的JavaScript脚本
  1
  let 函数名 = new Function("函数体");
- 声明式函数：使用var关键字定义的函数，函是声明会提前，函数的定义根据函数为的位置顺序执行
  1
  2
  3
  let 函数名 = function([形参列表]){
  // 函数体
  }
- 函数表达式：函数的定义在索引的代码之前被创建
  1
  2
  3
  function 函数名([形参列表]){
  // 函数体
  }
构造函数：使用new关键字调用的函数称为构造函数；构造函数是一种特殊的函数，约定构造函数的函数名使用首字母大写
- 定义构造函数：构造函数和普通函数相同，如果不用new关键字，其本身就是一个函数
  1
  2
  3
  function 首字母大写(){
  // 函数体
  }
- 构造函数的使用
  1
  let 构造实例 = new 构造函数名();
匿名函数：没有名称的函数称为匿名函数，匿名函数没有名称所有无法手动调用，必须在编译器加载JavaScript脚本时候执行一次，加载完成便不会再执行
- 匿名函数的定义：定义普通函数一样，匿名函数不给指定函数名称
  1
  2
  3
  function(){
  // 函数体
  }
- 由于匿名函数不符合JavaScript语法规范，JavaScript执行器会不识别这段代码，需要使用括号标注这段代码是一个整体
  1
  2
  3
  (function(){
  // 函数体
  })
- 匿名函数只是声明如果不调用是不会执行的，所以匿名函数在声明后必须调用，否则这段代码会是无效代码，匿名函数的调用也称为自调用函数；
  1
  2
  3
  (function([形参列表]){
  // 函数体
  })([实参列表])

4.3 函数调用

函数调用：使用函数名并传递实际参数，参数要用圆括号之内，不能省略，如果省略则属于函数对象引用
1
函数名([实际参数]);

4.4 函数参数

形式参数：是在定义函数时候设置的参数，形式参数作为函数体的一部分，但是参数值的实际值由函数调用的实际参数决定；
实际参数：调用函数时候传递的参数称为实际参数，
- 实际参数可以是任意数据类型；
- 实际参数根据参数位置对应着形式参数，多余的实际参数不会被处理，多余的形式参数值是undefined；
- 实际参数是基本数据类型：是将数据的值传递给形式参数；
- 实际参数是引用数据类型：是将数据的地址引用传递给实际参数；

4.5 函数返回值

关键字return：return语句将终止当前函数并返回当前函数的值；return后面可以跟一个value，可以是javascript中的任何数据类型，数字，字符串，对象等，也可是再返回一个函数

4.6 全局作用域和局部作用域

全局作用域：定义在<script>标签内的变量并且在function的函数体以外的变量都属于全局作用域，全局作用域的变量属于window对象的属性
局部作用域：定义在function的函数体内部的变量作用范围再函数内有效，属于局部作用域；

4.7 闭包

第五章内置对象

5.1 全局属性

属性名称	属性说明
Infinity
NaN
undefined
globalThis

5.2 全局函数

函数名称	使用说明
eval()
uneval()
isFinite()
isNaN()
decodeURI()
decodeURIComponent()
encodeURI()
encodeURIComponent()

5.3 数字对象

数字对象	说明
Number
BigInt
Math

5.4 日期对象

Date

5.5 字符串

字符串对象	说明
String
RegExp

5.6 可索引的集合对象

集合对象	说明
Array
Int8Array
Uint8Array
Uint8ClampedArray
Int16Array
Uint16Array
Int32Array
Uint32Array
Float32Array
Float64Array
BigInt64Array
BigUint64Array

5.7 使用键的集合对象

键集合对象	说明
Map
Set
WeakMap
WeakSet

5.8 结构化对象

结构化对象	说明
ArrayBuffer
SharedArrayBuffer
Atomics
DataView
JSON

5.9 控制抽象对象

控制对象	说明
Promise
Generator
GeneratorFunction
AsyncFunction

5.10 反射

反射	说明
Reflect
Proxy

打赏

版权声明： 本博客所有文章除特别声明外，均采用 Apache License 2.0 许可协议。转载请注明出处！