JavaScript学习总结(一) ECMAScript、BOM、DOM（核心、浏览器对象模型与文档

2024-04-11 来源：世旅网

一、JavaScript简介

JavaScript是一种解释执行的脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型，它遵循ECMAScript标准。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，主要用来给HTML增加动态功能。

几乎所有主流的语言都可以编译为JavaScript，进而能够在所有平台上的浏览器中执行，这也体现了JavaScript的强大性和在Web开发中的重要性。如Blade：一个Visual Studio扩展，可以将C#代码转换为JavaScript，Ceylon：一个可编译为JavaScript的、模块化的、静态类型JVM语言。

JavaScript是一种可以同时运行在前端与后台的语言，如Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境（类似Java或.NET）。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。

1.1、javascript组成

ECMAScript，描述了该语言的语法和基本对象，如类型、运算、流程控制、面向对象、异常等。

文档对象模型（DOM），描述处理网页内容的方法和接口。

浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。

JavaScript由对象组成，一切皆为对象。

1.2、JavaScript脚本语言特点

a)、解释型的脚本语言。JavaScript是一种解释型的脚本语言,C、C++等语言先编译后执行,而JavaScript是在程序的运行过程中逐行进行解释。

基于对象。JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。

b)、简单。JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求,是基于Java基本语句和控制的脚本语言,其设计简单紧凑。

c)、动态性。JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时,鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。

d)、跨平台性。JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用,前提上机器上的浏览器支持JavaScript脚本语言,目前JavaScript已被大多数的浏览器所支持。

二、ECMAScript（JavaScript核心与语法）

2.1、ECMAScript定义

1)、ECMAScript是一个标准（欧洲计算机制造商协会），JavaScript只是它的一个实现，其他实现包括ActionScript（Flash脚本）

2)、ECMAScript可以为不同种类的宿主环境提供核心的脚本编程能力，即ECMAScript不与具体的宿主环境相绑定，如JavaScript的宿主环境是浏览器，AS的宿主环境是Flash。、

3)、ECMAScript描述了以下内容：语法、类型、语句、关键字、保留字、运算符、对象等

2.2、数据类型

在JS中使用var关键词声明变量，变量的类型会根据其所赋值来决定（动态类型）。JS中数据类型分为原始数据类型（5种）和引用数据类型（Object类型）。

1）5种原始数据类型：Undefined、Null、Boolean、Number和String。需要注意的是JS中字符串属于原始数据类型。

2）typeof运算符：查看变量类型，对变量或值调用typeof运算符将返回下列值之一：

undefined – 如果变量是 Undefined 类型的

boolean – 如果变量是 Boolean 类型的

number – 如果变量是 Number 类型的

string – 如果变量是 String 类型的

object – 如果变量是一种引用类型或 Null 类型的

3）通过instanceof 运算符解决引用类型判断问题

4）null 被认为是对象的占位符，typeof运算符对于null值返回“object”。

5）原始数据类型和引用数据类型变量在内存中的存放如下：

memory of datatype in js

6）JS中对类型的定义：一组值的集合。如Boolean类型的值有两个：true、false。Undefined和Null 类型都只有一个值，分别是undefined和null。

Null 类型只有一个值，就是 null ； Undefined 类型也只有一个值，即 undefined 。 null 和 undefined 都可以作为字面量（literal）在 JavaScript 代码中直接使用。

null 与对象引用有关系，表示为空或不存在的对象引用。当声明一个变量却没有给它赋值的时候，它的值就是 undefined 。

undefined 的值会出现在如下情况：

从一个对象中获取某个属性，如果该对象及其 prototype 链中的对象都没有该属性的时候，该属性的值为 undefined 。

一个 function 如果没有显式的通过 return 来返回值给其调用者的话，其返回值就是 undefined 。有一个特例就是在使用new的时候。

JavaScript 中的 function 可以声明任意个形式参数，当该 function 实际被调用的时候，传入的参数的个数如果小于声明的形式参数，那么多余的形式参数的值为 undefined 。

示例：

<!DOCTYPE html>
<html>

 <head>
 <meta charset="UTF-8">
 <title></title>
 </head>

 <body>
 <script>
 //js对象
 var user = {
 name: "张学友",
 address: "中国香港"
 };
 console.log(user.age); //访问对象中的属性，未定义
 
 var i;
 console.log(i); //变量未赋值
 
 function f(n1){
 console.log(n1);
 }
 var result=f(); //参数未赋值
 
 console.log(result); //当函数没有返回值时为undefined
 
 </script>
 </body>

</html>

结果：

关于 null 和 undefined 有一些有趣的特性：

如果对值为 null 的变量使用 typeof 操作符的话，得到的结果是 object ；

而对 undefined 的值使用 typeof，得到的结果是 undefined 。

如 typeof null === "object" //true; typeof undefined === "undefined" //true null == undefined //true，但是 null !== undefined //true

示例：

<!DOCTYPE html>
<html>

 <head>
 <meta charset="UTF-8">
 <title></title>
 </head>

 <body>
 <script>
 //js对象
 var user = {
 name: "张学友",
 address: "中国香港"
 };
 console.log(typeof(user));
 console.log(typeof(null));
 console.log(typeof(undefined));
 console.log(user.name);
 console.log(user.age);
 
 if(user.age){
 console.log(user.age);
 }else{
 console.log("没有age属性");
 }
 //为false的情况
 var i;
 console.log(!!"");
 console.log(!!0);
 console.log(!!+0);
 console.log(!!-0);
 console.log(!!NaN);
 console.log(!!null);
 console.log(!!undefined);
 console.log(typeof(i));
 console.log(!!i);
 console.log(false);
 //是否不为数字,is Not a Number
 console.log(isNaN("Five"));
 console.log(isNaN("5"));
 </script>
 </body>

</html>

结果：

7)、 boolean类型的特殊性

8)、== 与 ===

JavaScript 中有两个判断值是否相等的操作符，== 与 === 。两者相比，== 会做一定的类型转换；而 === 不做类型转换，所接受的相等条件更加严格。

===比较时会比较类型

当然与之对应的就是!=与!==

尽量使用===而不要使用==

console.log("5"==5); //true
console.log("5"===5); //false
console.log("5"!=5); //false
console.log("5"!==5); //true

2.3、局部变量和全局变量

在函数中声明的变量只能在函数中使用，当你退出函数时，变量就会被释放，这种变量被称为局部变量。因为每个局部变量只在各自的函数中有效，所以你可以在不同的函数中使用名称相同的变量。

如果在函数之外声明变量，那么页面中所有的函数都可以使用它。在全局变量被声明后，它们就开始生效了。在网页被关闭后，变量才会失效。

注意：JS语言中，在代码块中声明的变量属于全局变量。

JavaScript是一种对数据类型变量要求不太严格的语言，所以不必声明每一个变量的类型，变量声明尽管不是必须的，但在使用变量之前先进行声明是一种好的习惯。可以使用 var 语句来进行变量声明。如：var men = true; // men 中存储的值为 Boolean 类型。

变量命名

JavaScript 是一种区分大小写的语言，因此将一个变量命名为best和将其命名为Best是不一样的。
另外，变量名称的长度是任意的，但必须遵循以下规则：

1.第一个字符必须是一个字母（大小写均可）、或一个下划线(_)或一个美元符 ($)。

2.后续的字符可以是字母、数字、下划线或美元符。

3.变量名称不能是保留字。

可以不使用var定义变量，但这样定义的变量是全局变量。

示例：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 </head>
 <body>
 <script>
 function a(){
 var n1=1;
 n2=2; //声明n2时未使用var，所以n2是全局变量，尽量避免
 console.log(n1+","+n2);
 }
 a();
 console.log(n2);
 console.log(window.n2);
 console.log(window.n1);
 console.log(n1);
 </script>
 </body>

</html>

结果：

2.4、数组（Array）

①js中，数组元素类型可以不一致。

②js中，数组长度可以动态改变。

③接着上述代码，typeof arr 和 arr instanceof Array 分别输出object和true。

console.log(typeof(names)); //object
console.log(names instanceof Array); //true
console.log("" instanceof String); //false 不是对象类型
console.log(true instanceof Boolean); //false

数组对象与方法

Array 对数组的内部支持
Array.concat( ) 连接数组
Array.join( ) 将数组元素连接起来以构建一个字符串
Array.length 数组的大小
Array.pop( ) 删除并返回数组的最后一个元素
Array.push( ) 给数组添加元素
Array.reverse( ) 颠倒数组中元素的顺序
Array.shift( ) 将元素移出数组
Array.slice( ) 返回数组的一部分
Array.sort( ) 对数组元素进行排序
Array.splice( ) 插入、删除或替换数组的元素
Array.toLocaleString( ) 把数组转换成局部字符串
Array.toString( ) 将数组转换成一个字符串
Array.unshift( ) 在数组头部插入一个元素

2.4.1、创建

var arrayObj = new Array();
var arrayObj = new Array([size]);
var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]);

示例：

var array11 = new Array(); //空数组
var array12 = new Array(5); //指定长度，可越界
var array13 = new Array("a","b","c",1,2,3,true,false); //定义并赋值
var array14=[]; //空数组，语法糖
var array15=[1,2,3,"x","y"]; //定义并赋值

2.4.2、访问与修改

var testGetArrValue=arrayObj[1];

arrayObj[1]= "值";

array12[8]="hello array12"; //赋值或修改
console.log(array12[8]); //取值
//遍历
for (var i = 0; i < array13.length; i++) {
 console.log("arrayl3["+i+"]="+array13[i]);
}
//枚举
for(var i in array15){ 
 console.log(i+"="+array15[i]); //此处的i是下标
}

结果：

2.4.3、添加元素

将一个或多个新元素添加到数组未尾，并返回数组新长度

arrayObj. push([item1 [item2 [. . . [itemN ]]]]);

将一个或多个新元素添加到数组开始，数组中的元素自动后移，返回数组新长度

arrayObj.unshift([item1 [item2 [. . . [itemN ]]]]);

将一个或多个新元素插入到数组的指定位置，插入位置的元素自动后移，返回被删除元素数组，deleteCount要删除的元素个数

arrayObj.splice(insertPos,deleteCount,[item1[, item2[, . . . [,itemN]]]])

示例代码：

//4.3、添加元素
 var array31=[5,8];
 //添加到末尾
 array31.push(9);
 var len=array31.push(10,11);
 console.log("长度为："+len+"——"+array31);
 //添加到开始
 array31.unshift(4);
 var len=array31.unshift(1,2,3);
 console.log("长度为："+len+"——"+array31);
 //添加到中间
 var len=array31.splice(5,1,6,7); //从第5位开始插入，删除第5位后的1个元素，返回被删除元素
 console.log("被删除："+len+"——"+array31);

运行结果：

2.4.4、删除

移除最后一个元素并返回该元素值

arrayObj.pop();

移除最前一个元素并返回该元素值，数组中元素自动前移

arrayObj.shift();

删除从指定位置deletePos开始的指定数量deleteCount的元素，数组形式返回所移除的元素

arrayObj.splice(deletePos,deleteCount);

示例：

//4.4、删除
 var array41=[1,2,3,4,5,6,7,8];
 console.log("array41："+array41);
 //删除最后一个元素，并返回
 var e=array41.pop();
 console.log("被删除："+e+"——"+array41);
 //删除首部元素，并返回
 var e=array41.shift();
 console.log("被删除："+e+"——"+array41);
 //删除指定位置与个数
 var e=array41.splice(1,4); //从索引1开始删除4个
 console.log("被删除："+e+"——"+array41);

结果：

2.4.5、截取和合并

以数组的形式返回数组的一部分，注意不包括 end 对应的元素，如果省略 end 将复制 start 之后的所有元素

arrayObj.slice(start, [end]);

将多个数组（也可以是字符串，或者是数组和字符串的混合）连接为一个数组，返回连接好的新的数组

arrayObj.concat([item1[, item2[, . . . [,itemN]]]]);

示例：

//4.5、截取和合并
 var array51=[1,2,3,4,5,6];
 var array52=[7,8,9,0,"a","b","c"];
 //截取，切片
 var array53=array51.slice(2); //从第3个元素开始截取到最后
 console.log("被截取："+array53+"——"+array51);
 var array54=array51.slice(1,4); //从第3个元素开始截取到索引号为3的元素
 console.log("被截取："+array54+"——"+array51);
 //合并
 var array55=array51.concat(array52,["d","e"],"f","g");
 console.log("合并后："+array55);

结果：

2.4.6、拷贝

返回数组的拷贝数组，注意是一个新的数组，不是指向

arrayObj.slice(0);

返回数组的拷贝数组，注意是一个新的数组，不是指向

arrayObj.concat();

因为数组是引用数据类型，直接赋值并没有达到真正实现拷贝，地址引用，我们需要的是深拷贝。

2.4.7、排序

反转元素（最前的排到最后、最后的排到最前），返回数组地址

arrayObj.reverse();

对数组元素排序，返回数组地址

arrayObj.sort();

arrayObj.sort(function(obj1,obj2){});

示例：

var array71=[4,5,6,1,2,3];
 array71.sort();
 console.log("排序后："+array71);
 var array72=[{name:"tom",age:19},{name:"jack",age:20},{name:"lucy",age:18}];
 array72.sort(function(user1,user2){
 return user1.age<user2.age;
 });
 console.log("排序后：");
 for(var i in array72) console.log(array72[i].name+"，"+array72[i].age);

结果：

2.4.8、合并成字符

返回字符串，这个字符串将数组的每一个元素值连接在一起，中间用 separator 隔开。

arrayObj.join(separator);

示例代码：

//4.8、合并成字符与将字符拆分成数组
 var array81=[1,3,5,7,9];
 var ids=array81.join(",");
 console.log(ids);
 
 //拆分成数组
 var text="hello nodejs and angular";
 var array82=text.split(" ");
 console.log(array82);

运行结果：

所有代码：

<!DOCTYPE html>
<html>

 <head>
 <meta charset="UTF-8">
 <title>数组操作</title>
 </head>

 <body>
 <script type="text/javascript">
 //4.1、创建
 var array11 = new Array(); //空数组
 var array12 = new Array(5); //指定长度，可越界
 var array13 = new Array("a","b","c",1,2,3,true,false); //定义并赋值
 var array14=[]; //空数组，语法糖
 var array15=[1,2,3,"x","y"]; //定义并赋值
 
 //4.2、访问与修改
 array12[8]="hello array12"; //赋值或修改
 console.log(array12[8]); //取值
 //遍历
 for (var i = 0; i < array13.length; i++) {
 //console.log("arrayl3["+i+"]="+array13[i]);
 }
 //枚举
 for(var i in array15){ 
 //console.log(i+"="+array15[i]); //此处的i是下标
 }
 
 //4.3、添加元素
 var array31=[5,8];
 //添加到末尾
 array31.push(9);
 var len=array31.push(10,11);
 console.log("长度为："+len+"——"+array31);
 //添加到开始
 array31.unshift(4);
 var len=array31.unshift(1,2,3);
 console.log("长度为："+len+"——"+array31);
 //添加到中间
 var len=array31.splice(5,1,6,7); //从第5位开始插入，删除第5位后的1个元素，返回被删除元素
 console.log("被删除："+len+"——"+array31);
 
 //4.4、删除
 var array41=[1,2,3,4,5,6,7,8];
 console.log("array41："+array41);
 //删除最后一个元素，并返回
 var e=array41.pop();
 console.log("被删除："+e+"——"+array41);
 //删除首部元素，并返回
 var e=array41.shift();
 console.log("被删除："+e+"——"+array41);
 //删除指定位置与个数
 var e=array41.splice(1,4); //从索引1开始删除4个
 console.log("被删除："+e+"——"+array41);
 
 //4.5、截取和合并
 var array51=[1,2,3,4,5,6];
 var array52=[7,8,9,0,"a","b","c"];
 //截取，切片
 var array53=array51.slice(2); //从第3个元素开始截取到最后
 console.log("被截取："+array53+"——"+array51);
 var array54=array51.slice(1,4); //从第3个元素开始截取到索引号为3的元素
 console.log("被截取："+array54+"——"+array51);
 //合并
 var array55=array51.concat(array52,["d","e"],"f","g");
 console.log("合并后："+array55);
 
 //4.7、排序
 var array71=[4,5,6,1,2,3];
 array71.sort();
 console.log("排序后："+array71);
 var array72=[{name:"tom",age:19},{name:"jack",age:20},{name:"lucy",age:18}];
 array72.sort(function(user1,user2){
 return user1.age<user2.age;
 });
 console.log("排序后：");
 for(var i in array72) console.log(array72[i].name+"，"+array72[i].age);
 
 //4.8、合并成字符与将字符拆分成数组
 var array81=[1,3,5,7,9];
 var ids=array81.join(",");
 console.log(ids);
 
 //拆分成数组
 var text="hello nodejs and angular";
 var array82=text.split(" ");
 console.log(array82);
 
 </script>
 </body>

</html>

2.5、正则表达式RegExp

RegExp 对象表示正则表达式，它是对字符串执行模式匹配的强大工具。

RegExp对象：该对象代表正则表达式，用于字符串匹配

① 两种RegExp对象创建方式：

方式一，new 一个RegExp对象：var regExp = new RegExp(“[a-zA-Z0-9]{3,8}”);

方式二，通过字面量赋值：var regExp = /^[a-zA-Z0-9]{3,8}$/;

② 正则表达式的具体写法使用时查询文档。

③ 常用方法：test(string)，返回true或false。

直接量语法

/pattern/attributes

创建 RegExp 对象的语法：

new RegExp(pattern, attributes);

参数

参数 pattern 是一个字符串，指定了正则表达式的模式或其他正则表达式。

参数 attributes 是一个可选的字符串，包含属性 "g"、"i" 和 "m"，分别用于指定全局匹配、区分大小写的匹配和多行匹配。ECMAScript 标准化之前，不支持 m 属性。如果 pattern 是正则表达式，而不是字符串，则必须省略该参数。

返回值

一个新的 RegExp 对象，具有指定的模式和标志。如果参数 pattern 是正则表达式而不是字符串，那么 RegExp() 构造函数将用与指定的 RegExp 相同的模式和标志创建一个新的 RegExp 对象。

如果不用 new 运算符，而将 RegExp() 作为函数调用，那么它的行为与用 new 运算符调用时一样，只是当 pattern 是正则表达式时，它只返回 pattern，而不再创建一个新的 RegExp 对象。

抛出

SyntaxError - 如果 pattern 不是合法的正则表达式，或 attributes 含有 "g"、"i" 和 "m" 之外的字符，抛出该异常。

TypeError - 如果 pattern 是 RegExp 对象，但没有省略 attributes 参数，抛出该异常。

修饰符

修饰符	描述
i	执行对大小写不敏感的匹配。
g	执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m	执行多行匹配。

方括号

方括号用于查找某个范围内的字符：

表达式	描述
[abc]	查找方括号之间的任何字符。
[^abc]	查找任何不在方括号之间的字符。
[0-9]	查找任何从 0 至 9 的数字。
[a-z]	查找任何从小写 a 到小写 z 的字符。
[A-Z]	查找任何从大写 A 到大写 Z 的字符。
[A-z]	查找任何从大写 A 到小写 z 的字符。
[adgk]	查找给定集合内的任何字符。
[^adgk]	查找给定集合外的任何字符。
(red\|blue\|green)	查找任何指定的选项。

元字符

元字符（Metacharacter）是拥有特殊含义的字符：

元字符	描述
.	查找单个字符，除了换行和行结束符。
w	查找单词字符。
W	查找非单词字符。
d	查找数字。
D	查找非数字字符。
s	查找空白字符。
S	查找非空白字符。
	匹配单词边界。
B	匹配非单词边界。

全部栏目