万字长文带你走进 JavaScript 的世界

2020-09-28 11:14:32 浏览数 (1)

1.1 概述

1.1.1 JavaScript

   JavaScript 是一种具有函数优先的轻量级，解释型或即时编译型的高级编程语言。虽然它是作为开发 Web 页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式(如函数式编程)风格。    ♞ 1992年，Nombase 公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为 ： C-- ，后来更名为：ScriptEase    ♞ 1995年，Netscape(网景) 公司，开发了一门客户端脚本语言：LiveScript。后来，请来 SUN 公司的专家，修改 LiveScript，命名为 JavaScript    ♞ 1996年，微软抄袭 JavaScript 开发出 JScript 语言    ♞ 1997年，ECMA(欧洲计算机制造商协会)，制定出客户端脚本语言的标准：ECMAScript，统一了所有客户端脚本语言的编码方式。

1.1.2 JavaScript 与 ECMAScript

   1996 年 11 月，JavaScript 的创造者 Netscape 公司，决定将 JavaScript 提交给标准化组织 ECMA，希望这种语言能够成为国际标准。次年，ECMA 发布 262 号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript，这个版本就是 1.0 版。    该标准从一开始就是针对 JavaScript 语言制定的，但是之所以不叫 JavaScript，有两个原因。一是商标，Java 是 Sun 公司的商标，根据授权协议，只有 Netscape 公司可以合法地使用 JavaScript 这个名字，且 JavaScript 本身也已经被 Netscape 公司注册为商标。二是想体现这门语言的制定者是 ECMA，不是 Netscape，这样有利于保证这门语言的开放性和中立性。    因此，ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现(另外的 ECMAScript 方言还有 JScript 和 ActionScript)。日常场合，这两个词是可以互换的。

1.1.3 JavaScript 嵌入页面的方式

行间事件(主要用于事件)

代码语言：javascript复制
<input type="button" name="" onclick="alert('ok！');" />

页面 script 标签嵌入

代码语言：javascript复制
<script type="text/javascript">        
    alert('ok！');
</script>

外部引入

代码语言：javascript复制
<script type="text/javascript" src="js/myjs.js"></script>

1.2 语法

1.2.1 基本语法规范

   JavaScript 是一种弱类型语言，JavaScript 的变量类型由它的值来决定。 定义变量需要用关键字 var 。JavaScript 中有 5 种基本数据类型：    ♞ number：数字类型，NaN(不是数字的数字)    ♞ string：字符串类型    ♞ boolean：布尔类型 true 或 false    ♞ undefined：undefined 类型，变量声明未初始化，它的值就是 undefined    ♞ null：null 类型，表示空对象，如果定义的变量将来准备保存对象，可以将变量初始化为 null,在页面上获取不到对象，返回的值就是 null JavaScript 中还有有 1 种复合类型：object，可以使用 typeof( ) 方法来获取数据的类型。

代码语言：javascript复制
// number
var num = 123;
console.log("num 的数据类型是："   typeof(num));

// string
var str = "你好";
console.log("str 的数据类型是："   typeof(str));

// boolean
var b = true;
console.log("b 的数据类型是："   typeof(b));

// undefined
var test;
console.log("test 的数据类型是："   typeof(test));

/*
	obj ---> object
		name ---> string
		age  ---> number
*/
var obj = {name: "张三", age: 24};
console.log("obj 的数据类型是："   typeof(obj));

/*
	null 类型得到是 object，这是一个古老的 bug 并未解决
	造成这样的结果的原因是，不同的对象在底层都表示为二进制
	在 JavaScript 中二进制前三位都为 0 的话会被判断为 object 类型
	null 的二进制表示是全 0，自然前三位也是 0，所以执行 typeof 时会返回 object。
*/
var bug = null;
console.log("bug 的数据类型是："   typeof(bug));

1.2.2 运算符

一元运算符

代码语言：javascript复制
/*
	一元运算符：只有一个运算数的运算符，  ，-- ，  (加号)、 -(减号)
		  (--) 在前，先自增(自减)，再运算
		  (--) 在后，先运算，再自增(自减)
	在 JS 中，如果运算数不是运算符所要求的类型，那么 JS 引擎会自动的将运算数进行类型转换
    其他类型转 number：
       string 转 number：按照字面值转换。如果字面值不是数字，则转为 NaN（不是数字的数字）
       boolean 转 number：true 转为 1，false 转为 0
*/
var num = 3;
var a =    num ;
document.write("num = "   num   "<br>");
document.write("a = "   a   "<br>");
document.write("<hr>");

var b =   "123abc";
document.write(typeof (b)   "<br>");
document.write(b   1   "<br>");
document.write("<hr>");

var flag =   true;
var f2 =   false;
document.write(typeof (flag)   "<br>");
document.write(flag   "<br>");
document.write(f2   "<br>");

算数运算符

、 - 、*、 / 、 % 用法基本与 Java 一致，但是夭注意，script 中 / 可能有小数。

代码语言：javascript复制
var a = 3;
var b = 4;

document.write("3   4 = "   a   b   "<br>");
document.write("3 - 4 = "   (a - b)   "<br>");
document.write("3 * 4 = "   a * b   "<br>");
document.write("3 / 4 = "   a / b   "<br>");
document.write("3 % 4 = "   a % b   "<br>");

比较运算符

> 、 < 、 ==(会先进行类型转换，再比较) 、===(全等于)

代码语言：javascript复制
/*
	类型相同：直接比较
		字符串：按照字典顺序比较。按位逐一比较，直到得出大小为止。
	类型不同：先进行类型转换，再比较
		===：全等于。在比较之前，先判断类型，如果类型不一样，则直接返回 false
*/


document.write("3 > 4 ? "   (3 > 4)   "<br>");
document.write("abc < acd ? "   ("abc" < "acd")   "<br>");
document.write("'123' == 123 ? "   ("123" == 123)   "<br>");
document.write("'123' === 123 ? "   ("123" === 123)   "<br>");

逻辑运算符

1.3 基本对象

1.3.1 方法

  JavaScript 函数通过 function 关键词进行定义，其后是函数名和括号 ()。函数名可包含字母、数字、下划线和美元符号(规则与变量名相同)。圆括号可包括由逗号分隔的参数

语法

代码语言：javascript复制
function name(参数 1, 参数 2, 参数 3) {
    要执行的代码
}

注意

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

1.3.2 Array

  Array 对象用于在单个的变量中存储多个值。类似于ArrayList<Object>

☞ 创建 Array 对象

语法

代码语言：javascript复制
new Array();
new Array(size);
new Array(element0, element1, ..., elementn);

参数

 ① 参数 size 是期望的数组元素个数。返回的数组，length 字段将被设为 size 的值。  ② 参数 element …, elementn 是参数列表。当使用这些参数来调用构造函数 Array( ) 时，新创建的数组的元素就会被初始化为这些值。它的 length 字段也会被设置为参数的个数。

返回值

 ① 返回新创建并被初始化了的数组。  ② 如果调用构造函数 Array() 时没有使用参数，那么返回的数组为空，length 字段为 0。  ③ 当调用构造函数时只传递给它一个数字参数，该构造函数将返回具有指定个数、元素为 undefined 的数组。  ④ 当其他参数调用 Array() 时，该构造函数将用参数指定的值初始化数组。  ⑤ 当把构造函数作为函数调用，不使用 new 运算符时，它的行为与使用 new 运算符调用它时的行为完全一样。

☞ Array 对象属性

属性

描述

constructor

返回对创建此对象的数组函数的引用

length

设置或返回数组中元素的数目

prototype

使您有能力向对象添加属性和方法

☞ Array 对象方法

方法

描述

concat( )

连接两个或更多的数组，并返回结果

join()

把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔

pop()

删除并返回数组的最后一个元素

push()

向数组的末尾添加一个或更多元素，并返回新的长度

reverse()

颠倒数组中元素的顺序

shift( )

删除并返回数组的第一个元素

slice( )

从某个已有的数组返回选定的元素

sort( )

对数组的元素进行排序

splice( )

删除元素，并向数组添加新元素

toSource( )

返回该对象的源代码

toString( )

把数组转换为字符串，并返回结果

toLocaleString( )

把数组转换为本地数组，并返回结果

unshift( )

向数组的开头添加一个或更多元素，并返回新的长度

valueOf( )

返回数组对象的原始值

1.3.3 Date

  Date 对象用于处理日期和时间，Date 对象会自动把当前日期和时间保存为其初始值。

☞ 创建 Date 对象

代码语言：javascript复制
var myDate = new Date()

☞ Date 对象的属性

属性

描述

constructor

返回对创建此对象的 Date 函数的引用

prototype

使您有能力向对象添加属性和方法

☞ Date 对象的方法

属性

描述

getDate()

从 Date 对象返回一个月中的某一天 (1 ~ 31)

getDay()

从 Date 对象返回一周中的某一天 (0 ~ 6)

getMonth()

从 Date 对象返回月份 (0 ~ 11)

getFullYear()

从 Date 对象以四位数字返回年份

getYear()

请使用 getFullYear() 方法代替

getHours()

返回 Date 对象的小时 (0 ~ 23)

getMinutes()

返回 Date 对象的分钟 (0 ~ 59)

getSeconds()

返回 Date 对象的秒数 (0 ~ 59)

getMilliseconds()

返回 Date 对象的毫秒(0 ~ 999)

getTime()

返回 1970 年 1 月 1 日至今的毫秒数。

getTimezoneOffset()

返回本地时间与格林威治标准时间 (GMT) 的分钟差。

parse()

返回1970年1月1日午夜到指定日期（字符串）的毫秒数。

toString()

把 Date 对象转换为字符串

toTimeString()

把 Date 对象的时间部分转换为字符串

toDateString()

把 Date 对象的日期部分转换为字符串

1.3.4 Math

  Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()，像 Math.sin() 这样的函数只是函数，不是某个对象的方法。无需创建它，通过把 Math 作为对象使用就可以调用其所有属性和方法。

☞ Math 对象的方法

方法

描述

abs(x)

返回数的绝对值

acos(x)

返回数的反余弦值

asin(x)

返回数的反正弦值

atan(x)

以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值

atan2(y,x)

返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）

cos(x)

返回数的余弦

exp(x)

返回 e 的指数

floor(x)

对数进行下舍入

log(x)

返回数的自然对数（底为e）

max(x,y)

返回 x 和 y 中的最高值

min(x,y)

返回 x 和 y 中的最低值

pow(x,y)

返回 x 的 y 次幂

random()

返回 0 ~ 1 之间的随机数

round(x)

把数四舍五入为最接近的整数

sin(x)

返回数的正弦

sqrt(x)

返回数的平方根

tan(x)

返回角的正切

toSource()

返回该对象的源代码

valueOf()

返回 Math 对象的原始值

1.3.5 RegExp

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

☞ 创建 RegExpe 对象 语法

代码语言：javascript复制
new RegExp(pattern, attributes);

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

返回值  ① 一个新的 RegExp 对象，具有指定的模式和标志。如果参数 pattern 是正则表达式而不是字符串，那么 RegExp() 构造函数将用与指定的 RegExp 相同的模式和标志创建一个新的 RegExp 对象。  ② 如果不用 new 运算符，而将 RegExp() 作为函数调用，那么它的行为与用 new 运算符调用时一样，只是当 pattern 是正则表达式时，它只返回 pattern，而不再创建一个新的 RegExp 对象。

☞ 正则

修饰符

修饰符

描述

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)

查找任何指定的选项

元字符

元字符

描述

.

查找单个字符，除了换行和行结束符

w

查找单词字符

W

查找非单词字符

d

查找数字

D

查找非数字字符

s

查找空白字符

S

查找非空白字符

b

匹配单词边界

B

匹配非单词边界

查找 NUL 字符

n

查找换行符

f

查找换页符

r

查找回车符

t

查找制表符

v

查找垂直制表符

xxx

查找以八进制数 xxx 规定的字符

xdd

查找以十六进制数 dd 规定的字符

uxxxx

查找以十六进制数 xxxx 规定的 Unicode 字符

量词

量词

描述

n

匹配任何包含至少一个 n 的字符串

n*

匹配任何包含零个或多个 n 的字符串

n?

匹配任何包含零个或一个 n 的字符串

n{X}

匹配包含 X 个 n 的序列的字符串

n{X,Y}

匹配包含 X 至 Y 个 n 的序列的字符串

n{X,}

匹配包含至少 X 个 n 的序列的字符串

n$

匹配任何结尾为 n 的字符串

^n

匹配任何开头为 n 的字符串

?=n

匹配任何其后紧接指定字符串 n 的字符串

?!n

匹配任何其后没有紧接指定字符串 n 的字符串

☞ RegExp 对象的方法

方法

描述

compile

编译正则表达式

exec

检索字符串中指定的值。返回找到的值，并确定其位置

test

检索字符串中指定的值。返回 true 或 false

1.3.6 Global

  全局对象是预定义的对象，作为 JavaScript 的全局函数和全局属性的占位符。通过使用全局对象，可以访问所有其他所有预定义的对象、函数和属性。全局对象不是任何对象的属性，所以它没有名称。   在顶层 JavaScript 代码中，可以用关键字 this 引用全局对象。但通常不必用这种方式引用全局对象，因为全局对象是作用域链的头，这意味着所有非限定性的变量和函数名都会作为该对象的属性来查询。例如，当 JavaScript 代码引用 parseInt() 函数时，它引用的是全局对象的 parseInt 属性。全局对象是作用域链的头，还意味着在顶层 JavaScript 代码中声明的所有变量都将成为全局对象的属性。   全局对象只是一个对象，而不是类。既没有构造函数，也无法实例化一个新的全局对象。在 JavaScript 代码嵌入一个特殊环境中时，全局对象通常具有环境特定的属性。实际上，ECMAScript 标准没有规定全局对象的类型，JavaScript 的实现或嵌入的 JavaScript 都可以把任意类型的对象作为全局对象，只要该对象定义了这里列出的基本属性和函数。

☞ 全局方法

方法

描述

decodeURI()

解码某个编码的 URI

decodeURIComponent()

解码一个编码的 URI 组件

encodeURI()

把字符串编码为 URI

encodeURIComponent()

把字符串编码为 URI 组件

escape()

对字符串进行编码

eval()

计算 JavaScript 字符串，并把它作为脚本代码来执行

getClass()

返回一个 JavaObject 的 JavaClass

isFinite()

检查某个值是否为有穷大的数

isNaN()

检查某个值是否是数字

Number()

把对象的值转换为数字

parseFloat()

解析一个字符串并返回一个浮点数

parseInt()

解析一个字符串并返回一个整数

String()

把对象的值转换为字符串

unescape()

对由 escape() 编码的字符串进行解码

javascript regex ecmascript 正则表达式 编程算法

0 人点赞