Javascript学习笔记一：ECMAScript

Javascript基础概述与语法详解

最新推荐文章于 2025-12-08 09:18:56 发布

原创最新推荐文章于 2025-12-08 09:18:56 发布 · 283 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html5

前端开发学习笔记专栏收录该内容

22 篇文章

订阅专栏

本文围绕Javascript展开，介绍其概念、功能、发展历史等，阐述了浏览器执行JS的原理及JS的组成。详细讲解了ECMAScript基础语法，包括与HTML结合方式、数据类型、变量、运算符等，还介绍了Function、Array等基本对象的创建、属性和方法。

1 Javascript概述

1.1 概念

客户端脚本语言。

运行在客户端浏览器中，每个浏览器都有Javascript的解析引擎
脚本语言：不需要编译，直接就可以被浏览器解析执行

1.2 功能

可以增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户体验。

JavaScript的作用

表单动态校验（密码强度检测）（ JS 产生最初的目的）
网页特效
服务端开发(Node.js)
桌面程序(Electron)
App(Cordova)
控制硬件-物联网(Ruff)
游戏开发(cocos2d-js)

HTML/CSS/JS 的关系

在这里插入图片描述

1.3 发展历史

1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为： C-- ，后来更名为：ScriptEase
1995年，Netscape(网景)公司，开发了一门客户端脚本语言：LiveScript。后来，请来SUN公司的专家，修改LiveScript，命名为JavaScript
1996年，微软抄袭JavaScript开发出JScript语言
1997年，ECMA(欧洲计算机制造商协会)，制定出客户端脚本语言的标准：ECMAScript，就是统一了所有客户端脚本语言的编码方式。

JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)

1.4 浏览器执行 JS 简介

浏览器分成两部分：渲染引擎和 JS 引擎。

渲染引擎：用来解析HTML与CSS，俗称内核。比如 chrome 浏览器的 blink，老版本的 webkit。
JS引擎：也称为JS解释器。用来读取网页中的JavaScript代码，对其处理后运行，比如 chrome浏览器的 V8

1.5 JS 的组成

ECMAScript
ECMAScript 是由ECMA 国际（原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为 JavaScript或 JScript，但实际上后两者是 ECMAScript 语言的实现和扩展。
ECMAScript：规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。

更多参看MDN: MDN手册
DOM——文档对象模型
文档对象模型（DocumentObject Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）
BOM——浏览器对象模型
浏览器对象模型(Browser Object Model，简称BOM) 是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

2 ECMAScript基础语法

ECMAScript：客户端脚本语言的标准。

2.1 与html结合方式

内部JS
- 定义<script>，标签体内容就是js代码
外部JS
- 定义<script>，通过src属性引入外部的js文件
注意
- <script>可以定义在html页面的任何地方。但是定义的位置会影响执行顺序。
- <script>可以定义多个。

2.2 注释

单行注释：//注释内容
多行注释：/*注释内容*/

2.3 数据类型

2.3.1 基本数据类型

number：数字类型
- 整数
- 小数
- NaN（Not A Number）一个不是数字的数字类型
string：字符串。“abc”，“a”，‘ab’
boolean：true和false
null：一个对象为空的占位符
undefined：未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined

2.3.2 引用数据类型

object：对象

2.4 变量

变量：一段存储数据的内存空间

Java语言是强类型语言，而Javascript是弱类型语言。
- 强类型：在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定类型的数据
- 弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据。
语法格式

var 变量名 = 初始化值;

typeof运算符：获取变量的类型。

注意：typeof(null)运算后得到的是object

2.5 运算符

2.5.1 一元运算符

只有一个运算数的运算符

++、--：自增、自减
- ++、-- 在前，先自增（自减），再运算
- ++、-- 在后，先运算，再自增（自减）
+、-：正负号

注意：在JS中，如果运算数不是运算符所要求的类型，那么js引擎会自动的将运算数进行类型转换

其它类型转number

string转number：按照字面值转换。如果字面值不是数字，则转为NaN（不是数字的数字）
boolean转number：true转为1，false转为0

2.5.2 算术运算符

+、-、*、/、%

2.5.3 赋值运算符

=、+=、-=、*=、/=、%=、…

2.5.4 比较运算符

>、<、>=、<=、==、===(全等于)

比较方式

类型相同：直接比较

字符串：按照字典序比较。按位逐一比较，直到得出大小为止。

类型不同：先进行类型转换，在比较

===：全等于。在比较之前，先判断类型，如果类型不一样，则直接返回false。

2.5.4 逻辑运算符

&&、||、!

其它类型转boolean

number：0或NaN为假，其他为真
string：除了空字符串("")，其他都是true
null、undefined：都是false
对象：所有对象都为true

2.5.5 三元运算符

语法格式：条件表达式? 值1: 值2

判断表达式的值，如果是true则取值1，如果是false则取值2；

示例代码

var a = 3;
var b = 4;
var c = a > b ? 1:0; //c的值为0

2.6 流程控制语句

if...else...
switch
- 在java中，switch语句可以接受的数据类型： byte、int、short、char、枚举(1.5)、String(1.7)
- 在JS中,switch语句可以接受任意的原始数据类型
while
do...while
for

2.7 JS特殊语法

语句以;结尾，如果一行只有一条语句则 ;可以省略，但不建议省略。
变量的定义使用var关键字，也可以不使用
- 使用var定义：定义的变量是局部变量
- 不使用：定义的变量是全局变量

2.8 九九乘法表

示例代码

<!DOCTYPE html>
	<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <title>99乘法表</title>
	    <style>
	        td{
	            border: 1px solid;
	        }
	
	    </style>	
	    <script>	
	        document.write("<table  align='center'>");	
	        //1.完成基本的for循环嵌套，展示乘法表
	        for (var i = 1; i <= 9 ; i++) {
	            document.write("<tr>");
	            for (var j = 1; j <=i ; j++) {
	                document.write("<td>");	
	                //输出  1 * 1 = 1
	                document.write(i + " * " + j + " = " + ( i*j) +"&nbsp;&nbsp;&nbsp;");	
	                document.write("</td>");
	            }
	            /*//输出换行
	            document.write("<br>");*/	
	            document.write("</tr>");
	        }	
	        //2.完成表格嵌套
	        document.write("</table>");
	
	    </script>
	</head>
	<body>	
	</body>
</html>

3 基本对象

3.1 Function

Function：函数（方法）对象

3.1.1 创建

//方式1，了解即可
var fun = new Function(形式参数列表,方法体);  

//方式2，常用方式
function 方法名称(形式参数列表){
	方法体
}

//方式3
 var 方法名 = function(形式参数列表){
	方法体
}

3.1.2 属性

length: 代表形式参数的个数

3.1.3 特点

方法定义时，形参的类型不用写，返回值类型也不写。
方法是一个对象，如果定义名称相同的方法，会覆盖。
在JS中，方法的调用只与方法的名称有关，和参数列表无关。
方法声明中有一个隐藏的内置对象（数组），arguments，封装所有的实际参数。

3.1.4 调用

方法名称(实际参数列表);

3.2 Array

Array：数组对象

3.2.1 创建

var arr = new Array(元素列表);
var arr = new Array(默认长度);
var arr = [元素列表]; //常用方式

3.2.2 常用方法

方法	说明
join(分隔符)	将数组中的元素按照指定的分隔符拼接为字符串
push(数据)	向数组的末尾添加一个或更多数据元素，并返回新的长度。

3.2.2 属性

length: 代表数组的长度

3.2.3 特点

JS中，数组元素的类型可变的。
JS中，数组长度可变的。

3.3 Date

Date：日期对象

3.3.1 创建

var date = new Date();

3.3.2 常用方法

方法	说明
toLocaleString()	返回当前date对象对应的时间本地字符串格式
getTime()	获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差。

3.4 Math

Math：数学对象

Array：数组对象

3.4.1 创建

Math对象不用创建，直接使用。

Math.方法名();

3.4.2 常用方法

方法	说明
random()	返回[0,1) 之间的随机数。含0不含1
ceil(x)	对x进行上舍入
floor(x)	对x进行下舍入
round(x)	把x进行四舍五入为最接近的整数

3.4.2 属性

PI: 表示圆周率

3.5 RegExp

RegExp：正则表达式对象

3.5.1 正则表达式

正则表达式定义字符串的组成规则。

单个字符:[]，如： [a] [ab] [a-zA-Z0-9_]
特殊符号代表特殊含义的单个字符:
- \d：单个数字字符 [0-9]
- \w：单个单词字符[a-zA-Z0-9_]
量词符号：
- ?：表示出现0次或1次
- *：表示出现0次或多次
- +：出现1次或多次
- {m,n}：表示 $m\le 数量 \le n$
  - m如果缺省，例如{,n}，表示最多n次
  - n如果缺省，例如{m,} ，表示最少m次
- 开始结束符号
  - ^：开始
  - $：结束

3.5.2 正则对象

创建：

//方式1
var reg = new RegExp("正则表达式");
//方式2，常用方式
var reg = /正则表达式/;

方法

方法	说明
test(字符串)	验证指定的字符串是否符合正则定义的规范

示例代码

var s1 = "yogeek1_cn";
var s2 = "yogeek1.cn";
var reg1 = /^\w{5,10}$/; //长度5-10、只包含数字、字母和下划线的字符串
//var reg2 = new RegExp("^\\w{5,10}$"); //规则与reg1相同
document.write(reg1.test(s1) + "<br>"); //true
document.write(reg1.test(s2) + "<br>");//false

3.6 Global

Global：全局对象。这个Global中封装的方法不需要对象就可以直接调用。

方法名();

3.6.1 方法

方法	说明
encodeURI(url)	将指定url编码并返回结果
decodeURI(str)	将指定的str解码
encodeURIComponent(url)	将指定url编码并返回结果，编码的字符更多
decodeURIComponent(str)	将指定的str解码
parseInt(str)	将字符串转为数字
isNaN(v)	判断一个值是否是NaN
eval(str)	将字符串作为脚本代码来执行

注意

parseInt(str)：逐一判断每一个字符是否是数字，直到不是数字为止，将前边数字部分转为number。如果无法转换返回NaN。

var s1 = "123abc";
var s2 = "abc123";
document.write(parseInt(s1) + "<br>"); //123
document.write(parseInt(s2) + "<br>"); //NaN

NaN六亲不认，连自己都不认。NaN参与的==比较全部为false，要判断是否为NaN，只能用isNaN(v)。