温习Javascript基础语法之词法结构


Posted in Javascript onMay 31, 2016

前面的话

javascript是一门简单的语言,也是一门复杂的语言。说它简单,是因为学会使用它只需片刻功夫;而说它复杂,是因为要真正掌握它则需要数年时间。实际上,前端工程师很大程度上就是指javascript工程师。前端入门容易精通难,说的是前端,更指的是javascript。本文是javascript基础语法的第一篇——词法结构

与java关系

关于javascript有这样一个说法,java和javascript的关系是雷锋和雷锋塔的关系。那到底有没有关系呢

javascript最开始的名字是LiveScript,后来选择javascript作为其正式名称的原因,大概是想让它听起来有系出名门的感觉。除了语法看起来和java类似之外,javascript和java是完全不同的两种编程语言

程序设计语言分为解释型和编译型两大类。java或C++等语言需要一个编译器。编译器是一种程序,能够把用java等高级语言编写出来的源代码翻译为直接在计算机上执行的文件。解释型程序设计语言不需要编译器——它们仅需要解释器,浏览器中的javascript解释器将直接读入源代码并执行

java在理论上几乎可以部署在任何环境,但javascript却倾向于只应用在web浏览器。而且,在JavaScript语言中,函数是一种独立的数据类型,采用基于原型对象(prototype)的继承链,JavaScript语法要比Java自由得多

基本上,JavaScript这个名字的原意是“很像Java的脚本语言”

定义

javascript是一门动态的、弱类型的解释型编程语言,非常适合面向对象和函数式的编程风格。javascript的语法源自java,它的一等函数来自scheme,它的基于原型的继承来自self

javascript用来增强页面动态效果,实现页面与用户之间的实时、动态交互

javascript由三部分组成:ECMAScript、DOM和BOM

[1]ECMAScript由ECMA-262定义,提供核心语言功能(ECMA是欧洲计算机制造商协会)

[2]DOM(Document Object Model)文档对象模型,提供访问和操作网页内容的方法和接口

[3]BOM(Browser Object Model)浏览器对象模型,提供与浏览器交互的方法和接口

温习Javascript基础语法之词法结构

大小写敏感

关于javascript这门语言,再怎么强调都不为过的特性是大小写敏感。javascript中的关键字、变量、函数名和所有的标识符都必须采取一致的大小写形式。

//'online'、'Online'、'OnLine'、'ONLINE'是四个不同的变量名

[注意]HTML并不区分大小写

保留字(ReservedWord)

和其他任何编程语言一样,javascript保留了一些标识符为自己所用。这些保留字不能用做普通的标识符。由于好多参考书的误导,貌似保留字和关键字是分开的,其实并不是,关键字只是保留字的一部分。保留字包括关键字、未来保留字、空字面量和布尔值字面量

保留字 ReservedWord ::

Keyword
FutureReservedWord
NullLiteral
BooleanLiteral

关键字

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

未来保留字

下列词被用作建议扩展关键字,因此保留,以便未来可能采用这些扩展

class enum extends super
const export import

ECMAScript3版本

以上是ECMAScript5的保留字,但在ECMAScript3版本中的保留字并不一样,若希望代码能在基于ECMAScript3实现的解释器上运行的话,应该避免使用以下保留字作为标识符

abstract boolean byte char class constdouble enum export extends final float
goto implements import int interfacelong native package private protected
public short static super synchronized throw transient volatile

预定义变量和函数

此外,javascript预定义了很多全局变量和函数,应该避免把它们的名字用做标识符名

arguments Array Boolean Date decodeURI decodeURIComponent encodeURIencodeURIComponent Error eval EvalError Function Infinity isFinite
isNaN JSON Math NaN Number Object parseFloat parseInt RangeError
ReferenceError RegExp String SyntaxError TypeError undefined URIError

注释(Comment)

不是所有语句都需要javascript解释器去解释并执行。有时需要在脚本中写一些仅供自己参考或提醒自己的信息,并希望javascript解释器能直接忽略掉这些信息,这类信息就是注释

 注释能有效帮助了解代码流程,在代码中它们扮演生活中便条的角色,可以帮助我们弄清楚脚本到底干了什么

[注意]注释一定要精确地描述代码,没有用的注释比没有注释还要糟糕

    有多种方式可以在javascript脚本中插入注释,包括单行注释、多行注释和HTML风格的注释

【1】单行注释以两个斜杠开头

//单行注释

【2】多行注释又叫块级注释,以一个斜杠和一个星号/*开头,以一个星号和一个斜杠*/结尾

/*
这是一个多行注释
*/

[注意]块级注释/**/中的那些字符也可能出现在正则表达式字面量里,所以块级注释对于被注释的代码块来说是不安全的
/*
var rm_a = /a*/.match(s);
*/

【3】HTML风格的注释仅仅适用于单行注释,其实javascript解释器对<!--的处理和对//的处理是一样的

<!-- 这是javascript中的注释

如果在HTML文档中,还需要以-->来结束注释

<!-- 这是HTML中的注释 -->

但javascript不要求这么做,它会把-->视为注释内容的一部分

[注意]HTML允许上面这样的注释跨越多行,但这种注释的每行都必须在开头加上"<!--"来作为标志

<!-- 我是注释1
<!-- 我是注释2
<!-- 我是注释3

因为javascript解释器在处理这种风格的注释时与HTML做法不同,为避免发生混淆,最好不要在Javascript脚本中使用

HTML风格的注释

空白(WhiteSpace)

空白通常没有意义,有时候必须要用它来分隔字符序列,否则它们就会被合并成一个符号

var that = this;

var和that之间的空白是不能移除的,但其他的空白可以移除

javascript会忽略程序中标识(token)之间的空格。多数情况下,javascript同样会忽略换行符。由于可以在代码中随意使用空格和换行,因此可以采用整齐、一致的缩进来形成统一的编码风格,从而提高代码的可读性

//通过增加空白字符,提高代码可读性
for(var i = 1; i < 10; i++){
//
}

javascript将如下这些识别为空白字符WhiteSpace

\u0009 水平制表符 <TAB>
\u000B 垂直制表符 <VT>
\u000C 换页符 <FF>
\u0020 空格符 <SP>
\u00A0 非中断空格符 <NBSP>
\uFEFF 字符序标记

javascript将如下字符识别为行终止符LineTerminator

\u000A 换行符 <LF>
\u000D 回车符 <CR>
\u2028 行分隔符 <LS>
\u2029 段落分割符 <PS>

可选的分号

javascript使用分号;将语句分隔开,这对增强代码的可读性和整洁性是非常重要的。但javascript并不是在所有换行处都填补分号,只有在缺少了分号就无法正确解析代码时,javascript才会填补分号

var a
a
=
3
console.log(a)

javascript将其解析为:

var a;
a = 3;
console.log(a);

这种语句的分隔规则会导致一些意想不到的情形

var y = x + f
(a+b).toString

javascript将其解析为:

var y = x + f(a+b).toString

因此,为了能让上述代码解析成两条不同的语句,必须手动填写行尾的显式分号

两个例外

如果当前语句和下一行语句无法合并解析,javascript会在第一行后填补分号,这是通用规则,但有两个例外

【1】第一个例外是涉及return、break、continue、throw语句的场景中。如果这四个关键字后紧跟着换行,javascript会在换行处填补分号

return
true;

javascript将其解析为:

return;true;

而代码的本意是:

return true;

【2】第二个例外是在涉及++和--运算符时,如果将其用作后缀表达式,它和表达式应该同一行。否则,行尾将填补分号,同时++或--将作为下一行代码的前缀操作符并与之一起解析

x
++
y

javascript将其解析为:

x;++y;

而代码的本意是:

x++;y;

虽然分号不是必须的,但最好不要省略它,因为加上分号可以避免很多错误,代码行结尾处没有分号会导致压缩错误。加上分号也会在某些情况下增进代码的性能,因为这样解析器就不必再花时间推测应该在哪里插入分号了

Javascript 相关文章推荐
判断控件是否已加载完成的代码
Feb 24 Javascript
浅析Javascript使用include/require
Nov 13 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
Nov 29 Javascript
js实现正方形颜色从下往上升的效果
Aug 04 Javascript
javascript insertAfter()定义与用法示例
Jul 25 Javascript
bootstrap table小案例
Oct 21 Javascript
简单实现jQuery多选框功能
Jan 09 Javascript
JavaScript实现类似淘宝的购物车效果
Mar 16 Javascript
Vue路由切换时的左滑和右滑效果示例
May 29 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
node.js 如何监视文件变化
Sep 01 Javascript
vue基于Echarts的拖拽数据可视化功能实现
Dec 04 Vue.js
jQuery文字横向滚动效果的实现代码
May 31 #Javascript
Javascript实现跑马灯效果的简单实例
May 31 #Javascript
javascript实现简易计算器的代码
May 31 #Javascript
javascript实现任务栏消息提示的简单实例
May 31 #Javascript
SWFUpload多文件上传及文件个数限制的方法
May 31 #Javascript
js弹出框、对话框、提示框、弹窗实现方法总结(推荐)
May 31 #Javascript
javascript事件模型介绍
May 31 #Javascript
You might like
探讨Hessian在PHP中的使用分析
2013/06/13 PHP
Web程序工作原理详解
2014/12/25 PHP
php从memcache读取数据再批量写入mysql的方法
2014/12/29 PHP
php文档工具PHP Documentor安装与使用方法
2016/01/25 PHP
thinkPHP中session()方法用法详解
2016/12/08 PHP
Yii2中datetime类的使用
2016/12/17 PHP
使用phpQuery获取数组的实例
2017/03/13 PHP
Jquery作者John Resig自己封装的javascript 常用函数
2009/11/09 Javascript
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
2012/08/22 Javascript
3种js实现string的substring方法
2015/11/09 Javascript
Javascript 实现微信分享(QQ、朋友圈、分享给朋友)
2016/10/21 Javascript
微信小程序 天气预报开发实例代码源码
2017/01/20 Javascript
js实现数组和对象的深浅拷贝
2017/09/30 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
2019/02/28 jQuery
详解vue-cli3多环境打包配置
2019/03/28 Javascript
vue中keep-alive内置组件缓存的实例代码
2020/04/16 Javascript
JavaScript鼠标悬停事件用法解析
2020/05/15 Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
2020/08/26 Javascript
[01:02:05]LGD vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[01:02:26]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第二场 1月18日
2021/03/11 DOTA
深度剖析使用python抓取网页正文的源码
2014/06/11 Python
Python时间模块datetime、time、calendar的使用方法
2016/01/13 Python
使用apidocJs快速生成在线文档的实例讲解
2018/02/07 Python
python3.6中@property装饰器的使用方法示例
2019/08/17 Python
python实现通过flask和前端进行数据收发
2019/08/22 Python
Pytorch 使用CNN图像分类的实现
2020/06/16 Python
解决selenium+Headless Chrome实现不弹出浏览器自动化登录的问题
2021/01/09 Python
wordpress添加Html5的表单验证required方法小结
2020/08/18 HTML / CSS
香港彩色隐形眼镜在线商店:Stunninglens(全球免费送货)
2019/05/10 全球购物
Java中实现多态的机制是什么?
2014/12/07 面试题
电大毕业自我鉴定
2014/02/03 职场文书
公司的门卫岗位职责
2014/09/09 职场文书
党建工作汇报材料
2014/12/24 职场文书
2015年度物业公司工作总结
2015/04/27 职场文书
Nginx同一个域名配置多个项目的实现方法
2021/03/31 Servers
Windows10安装Apache2.4的方法步骤
2022/06/25 Servers