万字长文带你走进 JavaScript 的世界
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 嵌入页面的方式
行间事件(主要用于事件)
<input type="button" name="" onclick="alert('ok!');" />
页面 script 标签嵌入
<script type="text/javascript"> alert('ok!');
</script>
外部引入
<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( ) 方法来获取数据的类型。
// 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 ---> objectname ---> stringage ---> 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 运算符
一元运算符
/*一元运算符:只有一个运算数的运算符,++,-- , +(加号)、 -(减号)++(--) 在前,先自增(自减),再运算++(--) 在后,先运算,再自增(自减)在 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 中 /
可能有小数。
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>");
比较运算符
>
、 <
、 ==
(会先进行类型转换,再比较) 、===
(全等于)
/*类型相同:直接比较字符串:按照字典顺序比较。按位逐一比较,直到得出大小为止。类型不同:先进行类型转换,再比较===:全等于。在比较之前,先判断类型,如果类型不一样,则直接返回 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 关键词进行定义,其后是函数名和括号 ()。函数名可包含字母、数字、下划线和美元符号(规则与变量名相同)。圆括号可包括由逗号分隔的参数
语法
function name(参数 1, 参数 2, 参数 3) {要执行的代码
}
注意
① 方法定义是,形参的类型不用写,返回值类型也不写。
② 方法是一个对象,如果定义名称相同的方法,会覆盖
③ 在 JS 中,方法的调用只与方法的名称有关,和参数列表无关
④ 在方法声明中有一个隐藏的内置对象(arguments 数组),封装所有的实际参数
1.3.2 Array
Array 对象用于在单个的变量中存储多个值。类似于ArrayList<Object>
☞ 创建 Array 对象
语法
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 对象
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 对象
语法
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 | 匹配非单词边界 |
\0 | 查找 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() 编码的字符串进行解码 |
关注公众号一起学习 Java 开发,跟大家分享我的学习成长过程
万字长文带你走进 JavaScript 的世界相关推荐
- 【密码学】一万字带您走进密码学的世界(下)
引文 密码学是研究编制密码和破译密码的技术科学.研究密码变化的客观规律,应用于编制密码以保守通信秘密的,称为编码学:应用于破译密码以获取通信情报的,称为破译学,总称密码学. 在<一万字带您走进密 ...
- 【密码学】一万字带您走进密码学的世界(上)
引文 密码学是研究编制密码和破译密码的技术科学.研究密码变化的客观规律,应用于编制密码以保守通信秘密的,称为编码学:应用于破译密码以获取通信情报的,称为破译学,总称密码学. 为了使读者对密码学有一个整 ...
- 万字长文带你 搞定 linux BT 宝塔面板 之外网上快速搭建苹果CMS电影网站
文章目录 万字长文带你搞定宝塔面板 一.本地搭建宝塔面板及安装ecshop 1.1前言 1.2面板特色功能 1.3安装环境说明 1.4安装BT面板 1.5常用管理命令 1.6 BT面板一键安装LAMP ...
- 带你走进rsync的世界
导读 Rsync(remote synchronize)是一个远程数据同步工具,可通过LAN/WAN快速同步多台主机间的文件,也可以使用 Rsync 同步本地硬盘中的不同目录.rsync共有3种使用方 ...
- 万字长文带你一览ICLR2020最新Transformers进展(上)
原文链接:http://gsarti.com/post/iclr2020-transformers/ 作者:Gabriele Sarti 编译:朴素人工智能 Transformer体系结构最初是在At ...
- 冷链冷库|果蔬保鲜储藏冷链冷库 海格里斯带你走进果蔬冷库世界
冷链行业涵盖冷冻加工,冷藏贮藏,冷链运输和冷链销售全过程.冷链行业的主要设施包括冷库或低温物流中心.生鲜食品加工中心(包括中央厨房).冷藏运输车.超市陈列柜等.而冷链行业景气度的提升则会带动冷库,冷藏 ...
- 一步一图,带你走进 Netty 的世界!
作者 | SessionBest 来源 | https://cnblogs.com/sessionbest/p/9000727.html 点击领取DD带来的高端机械键盘.AirPods.天猫卡等专属福 ...
- 微服务入门篇(二),万字长文带你实操作SpringCloudAlibaba微服务组件
目录 SpringCloudAlibaba介绍 简介 为什么要学SpringCloudAlibaba 从Spring Cloud netflix 到 Spring Cloud Alibaba 功能组件 ...
- 全网首发,一篇文章带你走进pycharm的世界----别再问我pycharm的安装和环境配置了!!!万字只为君一笑,赶紧收藏起来吧
欢迎来到我的世界:Pycharm
最新文章
- 复习计算机网络基础 day3---什么是计算机网络:
- MCSE2003学习之六
- 霍金 | 哥德尔和物理学的终结
- 前端各阶段资源,学得完算我输
- 配置方法_CISCO防火墙端口映射配置方法
- python2.7开发环境搭建_windows python2.7 django 开发环境搭建
- linux判断是否能上网_如何判断飘窗是否能砸掉?砸掉飘窗可以怎么利用?
- 【matlab】GPU 显卡版本与计算能力(compute capability)兼容性问题
- pycharm hotkey
- 动手画混淆矩阵(Confusion Matrix)(含代码)
- java给txt文件写入内容_java代码 如何向TXT文件写入内容?
- 采用蒙特卡罗方法求解π值
- Pycharm关闭错误提示,关闭“This inspection detects shadowing names defined in outer scopes.”等
- 稀疏数组(二维数组)
- Excel服务器数据库修改,用excel做服务器数据库
- Real-Time Rendering——Chapter 8 Light and Color光和颜色
- 第17章- 5~8 钣金实体书架与刚体平台接触分析、材料弹塑性分析(网格控制、刚体接触设置,刚体只能作为接触的目标面、爆炸显示、载荷步设置、残余应力)
- 5595系列反射内存交换机
- 新技术发展带来的文艺创作正在或即将营造出的“可能世界”
- 概率密度直方图(可看作PDF的在步长较大时的近似)与累积分布直方图(可看作CDF的在步长较大时的近似)
热门文章
- Java、JSP等数码产品在线销售系统
- 用python实现正弦信号sin((pi/2)*t)、sin(pi*t)、 sin((3pi/2)*t)
- 读腾讯财报,聊聊腾讯的收入及盈利能力
- BCB6 中调用ADOCONNECTION的数据连接属性
- 【学习笔记/PLL】锁相环PLL线性模型理论分析
- java项目引入ear包_在Eclipse for EAR Project中添加外部jar文件 - java
- DSPE-NH2 二硬脂酰基磷脂酰乙醇胺-氨基 DSPE-PEG5K-NH2
- FusionCharts Suite XT
- supesite 模板相关文档记录
- 游戏开发第一阶段笔记(5):C语言 多级指针与指针数组