JavaScript是客户端和服务器端脚本语言,可以插入到HTML页面中,并且是目前较热门的Web开发语言。同时,JavaScript也是面向对象编程语言。
类似的基本题目还包括:JavaScript都有哪些类型?JavaScript是谁发明的?...
Java是一门十分完整、成熟的编程语言。相比之下,JavaScript 是一个可以被引入HTML页面的编程语言。这两种语言并不完全相互依赖,而是针对不同的意图而设计的。Java是一种面向对象编程(OOPS)或结构化编程语言,类似的如C ++或C,而JavaScript是客户端脚本语言,它被称为非结构化编程。
JavaScript更快。JavaScript是一种客户端语言,因此它不需要Web服务器的协助来执行。另一方面,ASP是服务器端语言,因此总是比JavaScript慢。值得注意的是,Javascript现在也可用于服务器端语言(nodejs)。
负无穷大是JavaScript中的一个数字,可以通过将负数除以零来得到。
在字符串语句中可以通过在第一行末尾使用反斜杠“”来完成。
例:document.write("This is a program")
如果不是在字符串语句中更改为新行,那么javaScript会忽略行中的断点。
例:var x=1, y=2, z=x+y
上面的代码是完美的,但并不建议这样做,因为阻碍了调试。
未声明的变量是程序中不存在且未声明的变量。如果程序尝试读取未声明变量的值,则会遇到运行时错误。
未定义的变量是在程序中声明但尚未给出任何值的变量。如果程序尝试读取未定义变量的值,则返回未定义的值。
全局变量是整个代码长度可用的变量,也就是说这些变量没有任何作用域。var关键字用于声明局部变量或对象。如果省略var关键字,则声明一个全局变量。
例:// Declare a global globalVariable=“Test”
使用全局变量所面临的问题是本地和全局变量名称的冲突。此外,很难调试和测试依赖于 全局变量的代码。
定时器用于在设定的时间执行一段代码,或者在给定的时间间隔内重复该代码。这通过使用函数setTimeout,setInterval和clearInterval来完成。
setTimeout(function,delay)函数用于启动在所述延迟之后调用特定功能的定时器。
setInterval(function,delay)函数用于在提到的延迟中重复执行给定的功能,只有在取消时才停止。
clearInterval(id)函数指示定时器停止。
定时器在一个线程内运行,因此事件可能需要排队等待执行。
“ViewState”特定于会话中的页面。
“SessionState”特定于可在Web应用程序中的所有页面上访问的用户特定数据。
===被称为严格等式运算符,当两个操作数具有相同的值而没有任何类型转换时,该运算符返回true。
for、while、do-while loops
parseInt() 函数解析一个字符串参数,并返回一个指定基数的整数。parseInt()将要转换的字符串作为其第一个参数,第二个参数是给定字符串的基础。为了将4F(基数16)转换为整数,所使用的代码是:parseInt("4F", 16)
“==”仅检查值相等,而“===”是一个更严格的等式判定,如果两个变量的值或类型不同,则返回false。
由于3和2是整数,它们将直接相加。由于7是一个字符串,它将会被直接连接,所以结果将是57。
为了检测客户端机器上的操作系统,应使用avigator.appVersion 字符串(属性)。
NULL用于表示无值或无对象。它意味着没有对象或空字符串,没有有效的布尔值,没有 数值和数组对象。
delete操作符用于删除程序中的所有变量或对象,但不能删除使用 VAR关键字声明的变量。
Alert、Confirm and Prompt
Void(0)用于防止页面刷新,并在调用时传递参数“zero”。 Void(0)用于调用另一种方法而不刷新页面。
必须插入以下代码才能达到预期效果:
使用特殊字符(如单引号,双引号,撇号和&符号)时,将使用转义字符(反斜杠)。在字符前放置反斜杠,使其显示。
例:
Cookie是用来存储计算机中的小型测试文件,当用户访问网站以存储他们需要的信息时,它将被创建。
pop()方法与shift()方法类似,但不同之处在于Shift方法在数组的开头工作。此外,pop()方法将最后一个元素从给定的数组中取出并返回。然后改变被调用的数组。
例:
var cloths=[“Shirt”, “Pant”, “TShirt”];
cloths.pop();
//Now cloth becomes Shirt,Pant
如果在JavaScript中使用innerHTML,缺点是:
1)内容随处可见;
2)不能像“追加到innerHTML”一样使用;
3)即使你使用+=like“innerHTML=innerHTML +'html'”旧 的内容仍然会被html替换;
4)整个innerHTML内容被重新解析并构建成元素,因此它的速度要慢得多;
5)innerHTML不提供验证,因此我们可能会在文档中插入有效的和破坏性的HTML并将其中断。
break语句从当前循环中退出。
continue语句继续下一个循环语句。
Primitive
Reference types
原始类型是数字和布尔数据类型。引用类型是更复杂的类型,如字符串和日期。
通用对象可以创建为:
var I=new object();
"Typeof"是一个运算符,用于返回变量类型的字符串描述。
try... Catch-finally用于处理JavaScript中的异常。
有三种类型的错误:
Load time errors:该错误发生于加载网页时,例如出现语法错误等状况,称为加载时间 错误,并且会动态生成错误。
Run time errors:由于在HTML 语言中滥用命令而导致的错误。
Logical Errors:这是由于在具有不同操作的函数上执行了错误逻辑而发生的错误。
push方法用于将一个或多个元素添加或附加到数组的末尾。使用这种方法,可以通过传递多个参数来附加多个元素。
Unshift方法就像在数组开头工作的push方法。该方法用于将一个或多个元素添加到数组的开头。
属性按以下方式分配给对象:
obj["class"]=12或obj.class=12
在载入页面的所有信息之前,不运行onload函数。这导致在执行任何代码之前会出现延迟。
onDocumentReady在加载DOM之后加载代码。这允许早期的代码操纵。
Closure是与函数返回时保留在内存中的函数相关的本地声明变量。
可以以给定的方式将值附加到数组:
arr[arr.length]=value
for-in循环用于循环对象的属性。
for-in循环的语法是:
在每次循环中,来自对象的一个属性与变量名相关联,循环继续,直到对象的所有属性都 被耗尽。
被声明为没有任何命名标识符的函数被称为匿名函数。一般来说,匿名函数在声明后无法访问。
匿名函数声明:
函数.call()和.apply()在使用上非常相似,只是有一点区别。当程序员知道函数参数的编号时,使用.call(),因为它们必须在调用语句中被提及为参数。另一方面,当不知道数字时使用.apply(),函数.apply()期望参数为数组。.call()和.apply()之间的基本区别在于将参数传递给函数。它们的用法可以通过给定的例子进行说明。
JavaScript允许DOM元素嵌套在一起。在这种情况下,如果单击子级的处理程序,父级的处理程序也将执行同样的工作。
“And”运算符(&&),'Or'运算符(||)和'Not'运算符(!)可以在JavaScript中使用。
*运算符没有括号。
web-garden和web-farm都是网络托管系统。唯一的区别是web-garden是在单个服务器中包含许多处理器的设置,而web-farm是使用多个服务器的较大设置。
将属性分配给对象的方式与赋值给变量值相同。例如,表单对象的操作值以下列方式分配为“submit”:Document.form.action=“submit”
可以通过使用JavaScript扩展(从JavaScript编辑器运行),打开文件的示例来完成:
fh=fopen(getScriptPath(), 0)
DOM代表文档对象模型,并且负责文档中各种对象的相互交互。DOM是开发网页所必需的,其中包括诸如段落,链接等对象。可以操作这些对象以包括添加或删除等操作,DOM还需要向网页添加额外的功能。除此之外,API的使用比其他更有优势。
事件是由用户生成活动(例如单击链接或填写表单)导致的操作。需要一个事件处理程序来管理所有这些事件的正确执行。事件处理程序是对象的额外属性。此属性包括事件的名称以及事件发生时采取的操作。
默认情况下,在页面加载期间,HTML代码的解析将暂停,直到脚本停止执行。这意味着,如果服务器速度较慢或者脚本特别沉重,则会导致网页延迟。在使用Deferred时,脚本会延迟执行直到HTML解析器运行。这减少了网页加载时间,并且它们的显示速度更快。
JavaScript中的不同功能组件是:
First-class函数:JavaScript中的函数被用作第一类对象。这通常意味着这些函数可以作为参数传递给其他函数,作为其他函数的值返回,分配给变量,也可以存储在数据结构中。
嵌套函数:在其他函数中定义的函数称为嵌套函数。
该方法在数组启动时起作用,与push()不同。它将所需数量的元素添加到数组的顶部。
例如:
输出如下所示:[“joseph”,“Jane”, “charlie”, “john”]
EncodeURl()用于将URL转换为十六进制编码。而DecodeURI()用于将编码的URL转换回正常。
innerHTML内容每次刷新,因此很慢。在innerHTML中没有验证的余地,因此,更容易在文档中插入错误代码,从而使网页不稳定。
在<script>标签之后的代码中添加“<! - ”,不带引号。
在<script>标签之前添加“// - >”代码中没有引号。
旧浏览器现在将JavaScript代码视为一个长的HTML注释。而支持JavaScript的浏览器则将“<! - ”和“// - >”作为一行注释。
Object、number、function、boolean、underfind
强制(parseInt,parseFloat,number)
隐式(==–===)
前者是切割成数组的形式,后者是将数组转换成字符串。
普通添加事件的方法不支持添加多个事件,最下面的事件会覆盖上面的,而事件绑定(addEventListener)方式添加事件可以添加多个。
1)执行顺序不一样
2)参数不一样
3)事件加不加on
4)this指向问题
Var ev=ev || window.event; document.documentElement.clientWidth || document.body.clientWidth;
Var target=ev.srcElement||ev.target
一个在url后面,一个放在虚拟载体里面
有大小限制
安全问题
应用不同:一个是论坛等只需要请求的,一个是类似修改密码的
Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)
使用eval parse,鉴于安全性考虑使用parse更靠谱。
让利用事件冒泡的原理,让自己的所触发的事件,让他的父元素代替执行!
例子可见此链接:http://www.webasily.com/?p=78
闭包就是能够读取其他函数内部变量的函数。
此链接可查看:http://blog.csdn.net/gaoshanw...
canceBubble、return、false
obj.appendChidl()
obj.innersetBefore
obj.replaceChild
obj.removeChild
动态创建script标签,回调函数
Ajax是页面无刷新请求数据操作
本地对象为array obj regexp等可以new实例化
内置对象为gload Math等不可以实例化的
宿主对象为浏览器自带的document,window等
Document.onload是在结构和样式加载完才执行js; Document.ready原生种没有这个方法,jquery中有 $().ready(function)
前者会自动转换类型,后者不会。
一段脚本只能读取来自于同一来源的窗口和文档的属性,这里的同一来源指的是主机名、协议和端口号的组合。
载说明:原创不易,未经授权,谢绝任何形式的转载
层叠样式表(CSS)是一种强大的样式表语言,可以帮助前端开发人员为简单的网页添加样式。然而,在使用这种样式表语言时,开发人员可能会犯一些错误。这些错误会妨碍开发人员编写高效的代码。本文探讨了一些常见的错误,并为每个错误提供了解决方案。
以下是我们开发人员经常犯的九个最常见的错误;你也犯过其中一些吗?
!important 是 CSS 中的一个关键字,它可以帮助我们将属性值设置为比其他样式选项更重要。例如,如果您将 !important 声明应用于元素样式,那么该样式将覆盖该属性类别的所有其他样式。以下是语法:
selector {
property: value !important;
}
例如,如果您有一个标题元素 - h1 ,就像这样:
<h1 class="css-mistake">CSS Mistakes</h1>
然后您应用以下样式规则:
h1 {
color: red;
}
.css-mistake {
color: green;
}
默认情况下,标题文本的颜色将为“绿色”,因为类选择器具有比元素(标签)选择器更高的CSS特异性选择器。但是使用 !important ,您可以覆盖该样式CSS规则(从而使元素(标签)选择器覆盖类选择器)。通过这种方式,标题文本的颜色将为红色,优先于类选择器设置的绿色。
h1 {
color: red !important;
}
过度使用 !important 会导致特异性战争-一种状态,其中样式开始互相覆盖,无法按照样式表的作者定义的方式工作。下一节将通过列举适当使用 !important 的实例来提供解决此问题的方法。
什么时候应该使用?
就像本节标题所说的那样——“过度使用 !important ”,我们在使用这个关键词时必须小心谨慎。只有在迫切需要时才应该节制地使用 !important 。以下是一些使用它的情况:
在进行样式设计时,使用正确的长度单位对于创建响应式设计至关重要。CSS有两类长度单位:绝对单位和相对单位。许多CSS属性,如“宽度”、“高度”、“字体大小”等,都使用单位来表示其值。下面的代码片段给出了单位的使用示例:
selector {
font-size: 14px;
}
在上面的代码片段中,我们声明了“font-size”CSS属性,然后给它赋了一个14px的值。
什么是绝对单位?
这些是长度单位,无论渲染媒体如何,都具有固定的值,与设备的屏幕尺寸无关。这些单位非常适合在不同屏幕尺寸上保持元素的相同大小。你可能已经使用过一些标准的绝对单位,如像素 - px, 点 - pt, 英寸 - in, 毫米 - mm, 厘米 - cm, 和派卡 - pc. 绝对单位为我们提供了准确、固定和精确的样式值,但它们不会根据屏幕尺寸进行缩放。绝对单位不适用于实现响应式设计。因此,将它们限制在不需要根据浏览器尺寸或设备屏幕尺寸进行调整的元素上。另一方面,相对单位如其名称所示,是相对于另一个属性(大多数情况下是父元素)的。这些单位具有灵活性,可以根据视口动态增长,适应响应式设计,与绝对单位不同。一些相对单位的例子是百分比(%)- rem, em, 等等。
如何使用相对单位及其解释
了解每个相关单位的重要性,使您具备有效使用它们的知识。以下是一些相关单位及其解释:
% - 这个单位完全依赖于父元素。因此,它是相对于父元素的。例如,如果你将一个元素的宽度设置为80%,它将是父元素宽度的80%。请注意,在以下属性的值中使用百分比:宽度、高度、边距和内边距。
em - 这与父元素的字体大小相关。例如,如果您将元素的字体大小设置为4em,则它将是父元素字体大小的四倍。在处理排版(文本)时使用 em - 这使文本按比例缩放。
rem - 这是相对于根元素的字体大小。通常使用 rem 来实现整个布局的一致样式。
vh - 相对于视口高度的1%。
vw - 相对于视口宽度的1%。
内联样式是一种通过 style 属性将直接样式传递给HTML元素的样式系统。虽然存在这种样式系统,但重要的是要理解它的使用不支持应用程序构建的最佳实践,因为它会创建不可重用的代码。只有在测试或美化简单的HTML文件时才使用内联样式。以下是一些避免使用这种样式系统的原因:
最佳实践
为了克服内联样式的缺点,您必须使用内部样式表(位于 <style> 标签内的样式)或外部样式表来保持您的代码健康和有组织。
不同的浏览器具有各种默认样式,这些样式不同,导致元素的外观不一致。这就是为什么我们必须定义一些样式,以便在其他浏览器上为网页样式提供一致的起点。这些样式被称为“CSS重置”。CSS重置是一种CSS样式,用于删除浏览器默认样式的规则。如果您熟悉CSS,并且在使用过程中有时会注意到某些特定属性的默认样式,如 margin. ,CSS重置可以帮助我们将样式基础调整到一致的水平。以下是使用这些重置的原因:
如何创建自己的CSS重置
这里是要遵循的简单步骤:
* {
margin: 0;
padding: 0;
border: 0;
}
上面的代码是一个基本的CSS重置,它针对边距、内边距和边框属性,将每个属性的值设为0。这个过程被称为“标准化过程”,它可以消除浏览器默认的间距和边框。这里有一些在线的CSS重置:
CSS中的单行代码是CSS代码的速记样式。它可以使代码更加清晰和有结构。掌握这些速记技巧将有助于您编写更简洁的代码(将多行代码压缩为单行)。例如,当您想要在所有边缘(上,下,左,右)处对元素边距进行样式设置时,您不需要明确地指定所有属性(如 margin-top, margin-right, margin-bottom, 和 margin-left, ),您可以直接使用边距属性的速记方式。下面的代码解释了这一点:
/* Don't do this */
margin-top: 10px;
margin-bottom: 10px;
margin-right: 15px;
margin-left: 15px;
/* Instead, use Margin Shorthand */
margin: 10px 20px 10px 20px;
/* Margin Shorthand can even be more simplified */
margin: 10px 20px;
这些简短的话语带来了许多优点:
CSS选择器可以在外部或内部样式表中定位HTML元素。CSS中有许多选择器方法,包括标签(元素)、类、ID和伪元素。知道何时使用选择器以及何时不使用选择器非常重要。此外,您还必须了解CSS选择器的工作原理。
如何避免使用过于复杂的选择器
如果你在你的样式表中遇到了像下面这样的代码片段,那就意味着你正在使用过于复杂的选择器。
#container > .box > content .section .title p > span .italic {
color: blue;
font-weight: bold;
}
以下是避免过于复杂选择器的技巧:
浏览器兼容性很重要,因为你不希望样式在一个浏览器上良好运行,在另一个浏览器上则运行不正常。忽略浏览器兼容性可能会导致用户在不同浏览器上的体验不一致。这是因为不同的浏览器有其自己的CSS样式渲染方式。但是,你可以通过考虑浏览器兼容性并确保你的样式与不同浏览器兼容来实现样式一致性。实现浏览器兼容性代码的一种方法是实施以下操作:
使用供应商前缀:某些CSS属性需要您使用前缀来渲染,无论使用哪种浏览器。需要这些前缀的浏览器包括Internet Explorer,Mozilla Firefox和Safari。这些前缀被称为供应商前缀,因为它们是特定类型的浏览器独有的。前缀的示例: -webkit-, -moz-, 和 -ms-. 。
/* webkit-prefixed version - used by browsers that use the WebKit layout engine, such as Chrome and Safari- */
-webkit-border-radius: 8px;
/* ms-prefixed version -used by browsers that use the Microsoft layout engine, such as Internet Explorer. */
-ms-border-radius: 10px;
/* standard version */
border-radius: 8px;
声明字体回退:在为“font-family”等属性分配值时,您必须添加回退字体。如果自定义字体不可用,回退字体将是实施的选项之一。
利用Can I Use网站检查CSS属性在各种浏览器中的兼容性。(https://caniuse.com/)
Hex码是颜色的十六进制表示。它是一个由“#”符号前缀的6位代码,后跟三对十六进制数字,其中第一对表示红色值,第二对表示绿色值,最后一对表示蓝色值。语法:
使用直接的颜色关键词有一些限制:
颜色名称在不同的浏览器中是不一致的。例如,如果你将颜色属性设置为绿色,不同的浏览器对其解释的方式也会有所不同。因此,不同浏览器之间的渲染是不一致的。
颜色名称受到限制,因为您无法调整它们的色调、阴影等。
颜色名称的选择有限。由于使用颜色名称的限制,我们需要选择使用十六进制代码,这些代码没有这些限制。以下是十六进制代码比颜色关键字更合适的原因:
寻找十六进制代码的高效方法
以下是获取十六进制代码的几种方法:
使用0px替代0:毫无疑问,这可能不会对样式表产生影响,但为了最佳实践,请确保使用0而不是0px。
selector {
/*Don't do this*/
padding: 10px 12px 15px 0px;
/*Do this*/
padding: 10px 12px 15px 0;
}
设置高的z-index值:给 z-index 分配高值是非常不必要和过度的。迟早,这将在你的样式表中造成问题,特别是当 z-index. 有多个实现时。
selector {
/*Don't do this*/
z-index: 50;
/*Do this*/
z-index: 2; /*Let the value be minimal*/
}
本文深入探讨了常见的CSS错误,并为每个错误提供了深入的解决方案。通过阅读本指南,毫无疑问您已经了解了一些常见的CSS错误,并且从此以后,您将知道如何解决它们,因为我们还要研究每个错误的解决方案。
由于文章内容篇幅有限,今天的内容就分享到这里,文章结尾,我想提醒您,文章的创作不易,如果您喜欢我的分享,请别忘了点赞和转发,让更多有需要的人看到。同时,如果您想获取更多前端技术的知识,欢迎关注我,您的支持将是我分享最大的动力。我会持续输出更多内容,敬请期待。
avaScript 因为互联网而生,紧随着浏览器的出现而问世。
今天我们一起来学习一个新的系列教程,【JavaScript 标准参考教程】,今天开始它的第一篇章,【基本语法篇】
1、语句
JavaScript 程序的执行单位为行(line),也就是一行一行地执行。一般情况下,每一行就是一个语句。
语句(statement)是为了完成某种任务而进行的操作,比如下面就是一行赋值语句。
var a=1 + 3;
这条语句先用var命令,声明了变量a,然后将1 + 3的运算结果赋值给变量a。
1 + 3叫做表达式(expression),指一个为了得到返回值的计算式。语句和表达式的区别在于,前者主要为了进行某种操作,一般情况下不需要返回值;后者则是为了得到返回值,一定会返回一个值。凡是 JavaScript 语言中预期为值的地方,都可以使用表达式。比如,赋值语句的等号右边,预期是一个值,因此可以放置各种表达式。
语句以分号结尾,一个分号就表示一个语句结束。多个语句可以写在一行内。
var a=1 + 3 ; var b='abc';
分号前面可以没有任何内容,JavaScript引擎将其视为空语句。
;;;
上面的代码就表示3个空语句。
表达式不需要分号结尾。一旦在表达式后面添加分号,则 JavaScript 引擎就将表达式视为语句,这样会产生一些没有任何意义的语句。
1 + 3;'abc';
上面两行语句只是单纯地产生一个值,并没有任何实际的意义。
2、变量
2.1、概念
变量是对“值”的具名引用。变量就是为“值”起名,然后引用这个名字,就等同于引用这个值。变量的名字就是变量名。
var a=1;
上面的代码先声明变量a,然后在变量a与数值1之间建立引用关系,称为将数值1“赋值”给变量a。以后,引用变量名a就会得到数值1。最前面的var,是变量声明命令。它表示通知解释引擎,要创建一个变量a。
注意,JavaScript 的变量名区分大小写,A和a是两个不同的变量。
变量的声明和赋值,是分开的两个步骤,上面的代码将它们合在了一起,实际的步骤是下面这样。
var a; a=1;
如果只是声明变量而没有赋值,则该变量的值是undefined。undefined是一个 JavaScript 关键字,表示“无定义”。
var a; a // undefined
如果变量赋值的时候,忘了写var命令,这条语句也是有效的。
var a=1; // 基本等同 a=1;
但是,不写var的做法,不利于表达意图,而且容易不知不觉地创建全局变量,所以建议总是使用var命令声明变量。
如果一个变量没有声明就直接使用,JavaScript 会报错,告诉你变量未定义。
x// ReferenceError: x is not defined
上面代码直接使用变量x,系统就报错,告诉你变量x没有声明。
可以在同一条var命令中声明多个变量。
var a, b;
JavaScript 是一种动态类型语言,也就是说,变量的类型没有限制,变量可以随时更改类型。
var a=1; a='hello';
上面代码中,变量a起先被赋值为一个数值,后来又被重新赋值为一个字符串。第二次赋值的时候,因为变量a已经存在,所以不需要使用var命令。
如果使用var重新声明一个已经存在的变量,是无效的。
var x=1; var x; x // 1
上面代码中,变量x声明了两次,第二次声明是无效的。
但是,如果第二次声明的时候还进行了赋值,则会覆盖掉前面的值。
var x=1; var x=2; // 等同于 var x=1; var x; x=2;
2.2、变量提升
JavaScript 引擎的工作方式是,先解析代码,获取所有被声明的变量,然后再一行一行地运行。这造成的结果,就是所有的变量的声明语句,都会被提升到代码的头部,这就叫做变量提升(hoisting)。
console.log(a); var a=1;
上面代码首先使用console.log方法,在控制台(console)显示变量a的值。这时变量a还没有声明和赋值,所以这是一种错误的做法,但是实际上不会报错。因为存在变量提升,真正运行的是下面的代码。
var a; console.log(a); a=1;
最后的结果是显示undefined,表示变量a已声明,但还未赋值。
3、标识符
标识符(identifier)指的是用来识别各种值的合法名称。最常见的标识符就是变量名,以及后面要提到的函数名。JavaScript 语言的标识符对大小写敏感,所以a和A是两个不同的标识符。
标识符有一套命名规则,不符合规则的就是非法标识符。JavaScript 引擎遇到非法标识符,就会报错。
简单说,标识符命名规则如下。
?第一个字符,可以是任意 Unicode 字母(包括英文字母和其他语言的字母),以及美元符号($)和下划线(_)。
?第二个字符及后面的字符,除了 Unicode 字母、美元符号和下划线,还可以用数字0-9。
下面这些都是合法的标识符。
arg0 _tmp $elem π
下面这些则是不合法的标识符。
1a // 第一个字符不能是数字 23 // 同上 *** // 标识符不能包含星号 a+b // 标识符不能包含加号 -d // 标识符不能包含减号或连词线
中文是合法的标识符,可以用作变量名。
var 临时变量=1;
JavaScript有一些保留字,不能用作标识符:arguments、break、case、catch、class、const、continue、debugger、default、delete、do、else、enum、eval、export、extends、false、finally、for、function、if、implements、import、in、instanceof、interface、let、new、null、package、private、protected、public、return、static、super、switch、this、throw、true、try、typeof、var、void、while、with、yield。
4、注释
源码中被 JavaScript 引擎忽略的部分就叫做注释,它的作用是对代码进行解释。Javascript 提供两种注释的写法:一种是单行注释,用//起头;另一种是多行注释,放在/*和*/之间。
// 这是单行注释/* 这是 多行 注释 */
此外,由于历史上 JavaScript 可以兼容 HTML 代码的注释,所以<!--和-->也被视为合法的单行注释。
x=1; <!-- x=2; --> x=3;
上面代码中,只有x=1会执行,其他的部分都被注释掉了。
需要注意的是,-->只有在行首,才会被当成单行注释,否则会当作正常的运算。
function countdown(n){ while (n --> 0) console.log(n);}countdown(3 // 2 // 1 // 0
上面代码中,n --> 0实际上会当作n-- > 0,因此输出2、1、0。
5、区块
JavaScript 使用大括号,将多个相关的语句组合在一起,称为“区块”(block)。
对于var命令来说,JavaScript 的区块不构成单独的作用域(scope)。
{ var a=1; }a // 1
上面代码在区块内部,使用var命令声明并赋值了变量a,然后在区块外部,变量a依然有效,区块对于var命令不构成单独的作用域,与不使用区块的情况没有任何区别。在 JavaScript 语言中,单独使用区块并不常见,区块往往用来构成其他更复杂的语法结构,比如for、if、while、function等。
6、条件语句
JavaScript 提供if结构和switch结构,完成条件判断,即只有满足预设的条件,才会执行相应的语句。
6.1、if 结构
if结构先判断一个表达式的布尔值,然后根据布尔值的真伪,执行不同的语句。所谓布尔值,指的是 JavaScript 的两个特殊值,true表示真,false表示伪。
if (布尔值) 语句; // 或者 if (布尔值) 语句;
上面是if结构的基本形式。需要注意的是,“布尔值”往往由一个条件表达式产生的,必须放在圆括号中,表示对表达式求值。如果表达式的求值结果为true,就执行紧跟在后面的语句;如果结果为false,则跳过紧跟在后面的语句。
if (m===3) m=m + 1;
上面代码表示,只有在m等于3时,才会将其值加上1。
这种写法要求条件表达式后面只能有一个语句。如果想执行多个语句,必须在if的条件判断之后,加上大括号,表示代码块(多个语句合并成一个语句)。
if (m===3) { m +=1; }
建议总是在if语句中使用大括号,因为这样方便插入语句。
注意,if后面的表达式之中,不要混淆赋值表达式(=)、严格相等运算符(===)和相等运算符(==)。尤其是赋值表达式不具有比较作用。
var x=1; var y=2; if (x=y) { console.log(x); } // "2"
上面代码的原意是,当x等于y的时候,才执行相关语句。但是,不小心将严格相等运算符写成赋值表达式,结果变成了将y赋值给变量x,再判断变量x的值(等于2)的布尔值(结果为true)。
这种错误可以正常生成一个布尔值,因而不会报错。为了避免这种情况,有些开发者习惯将常量写在运算符的左边,这样的话,一旦不小心将相等运算符写成赋值运算符,就会报错,因为常量不能被赋值。
if (x=2) { // 不报错 if (2=x) { // 报错
至于为什么优先采用“严格相等运算符”(===),而不是“相等运算符”(==),请参考《运算符》章节。
6.2、if…else 结构
if代码块后面,还可以跟一个else代码块,表示不满足条件时,所要执行的代码。
if (m===3) { // 满足条件时,执行的语句 } else { // 不满足条件时,执行的语句 }
上面代码判断变量m是否等于3,如果等于就执行if代码块,否则执行else代码块。
对同一个变量进行多次判断时,多个if...else语句可以连写在一起。
if (m===0) { // ...} else if (m===1) { // ...} else if (m===2) { // ...} else { // ...}
else代码块总是与离自己最近的那个if语句配对。
var m=1; var n=2; if (m !==1) if (n===2) console.log('hello'); else console.log('world');
上面代码不会有任何输出,else代码块不会得到执行,因为它跟着的是最近的那个if语句,相当于下面这样。
if (m !==1) { if (n===2) { console.log('hello'); } else { console.log('world'); }}
如果想让else代码块跟随最上面的那个if语句,就要改变大括号的位置。
if (m !==1) { if (n===2) { console.log('hello'); }} else { console.log('world');} // world
6.3、switch结构
多个if...else连在一起使用的时候,可以转为使用更方便的switch结构。
switch (fruit) { case "banana": // ... break; case "apple": // ... break; default: // ...}
上面代码根据变量fruit的值,选择执行相应的case。如果所有case都不符合,则执行最后的default部分。需要注意的是,每个case代码块内部的break语句不能少,否则会接下去执行下一个case代码块,而不是跳出switch结构。
var x=1;switch (x) { case 1: console.log('x 等于1'); case 2: console.log('x 等于2'); default: console.log('x 等于其他值');} // x等于1 // x等于2 // x等于其他值
上面代码中,case代码块之中没有break语句,导致不会跳出switch结构,而会一直执行下去。正确的写法是像下面这样。
switch (x) { case 1: console.log('x 等于1'); break; case 2: console.log('x 等于2'); break; default: console.log('x 等于其他值');}
switch语句部分和case语句部分,都可以使用表达式。
switch(1 + 3) { case 2 + 2: f(); break; default: neverHappens();}
上面代码的default部分,是永远不会执行到的。
需要注意的是,switch语句后面的表达式,与case语句后面的表示式比较运行结果时,采用的是严格相等运算符(===),而不是相等运算符(==),这意味着比较时不会发生类型转换。
var x=1;switch (x) { case true: console.log('x 发生类型转换'); default: console.log('x 没有发生类型转换');} // x 没有发生类型转换
上面代码中,由于变量x没有发生类型转换,所以不会执行case true的情况。这表明,switch语句内部采用的是“严格相等运算符”,详细解释请参考《运算符》一节。
6.4、三元运算符 ?:
JavaScript还有一个三元运算符(即该运算符需要三个运算子)?:,也可以用于逻辑判断。
(条件) ? 表达式1 : 表达式2
上面代码中,如果“条件”为true,则返回“表达式1”的值,否则返回“表达式2”的值。
var even=(n % 2===0) ? true : false;
上面代码中,如果n可以被2整除,则even等于true,否则等于false。它等同于下面的形式。
var even;if (n % 2===0) { even=true; } else { even=false; }
这个三元运算符可以被视为if...else...的简写形式,因此可以用于多种场合。
var myVar;console.log( myVar ? 'myVar has a value' : 'myVar do not has a value' ) // myVar do not has a value
上面代码利用三元运算符,输出相应的提示。
var msg='数字' + n + '是' + (n % 2===0 ? '偶数' : '奇数');
上面代码利用三元运算符,在字符串之中插入不同的值。
7、循环语句
循环语句用于重复执行某个操作,它有多种形式。
7.1、while 循环
While语句包括一个循环条件和一段代码块,只要条件为真,就不断循环执行代码块。
while (条件) 语句;// 或者 while (条件) 语句;
while语句的循环条件是一个表达式,必须放在圆括号中。代码块部分,如果只有一条语句,可以省略大括号,否则就必须加上大括号。
while (条件) { 语句; }
下面是while语句的一个例子。
var i=0;while (i < 100) { console.log('i 当前为:' + i); i=i + 1; }
上面的代码将循环100次,直到i等于100为止。
下面的例子是一个无限循环,因为循环条件总是为真。
while (true) { console.log('Hello, world'); }
7.2、for 循环
for语句是循环命令的另一种形式,可以指定循环的起点、终点和终止条件。它的格式如下。
for (初始化表达式; 条件; 递增表达式) 语句 // 或者 for (初始化表达式; 条件; 递增表达式) { 语句 }
for语句后面的括号里面,有三个表达式。
?初始化表达式(initialize):确定循环变量的初始值,只在循环开始时执行一次。
?条件表达式(test):每轮循环开始时,都要执行这个条件表达式,只有值为真,才继续进行循环。
?递增表达式(increment):每轮循环的最后一个操作,通常用来递增循环变量。
下面是一个例子。
var x=3;for (var i=0; i < x; i++) { console.log(i); } // 0 // 1 // 2
上面代码中,初始化表达式是var i=0,即初始化一个变量i;测试表达式是i < x,即只要i小于x,就会执行循环;递增表达式是i++,即每次循环结束后,i增大1。
所有for循环,都可以改写成while循环。上面的例子改为while循环,代码如下。
var x=3; var i=0; while (i < x) { console.log(i); i++; }
for语句的三个部分(initialize、test、increment),可以省略任何一个,也可以全部省略。
for ( ; ; ){ console.log('Hello World'); }
上面代码省略了for语句表达式的三个部分,结果就导致了一个无限循环。
7.3、do…while 循环
do...while循环与while循环类似,唯一的区别就是先运行一次循环体,然后判断循环条件。
do 语句while (条件); // 或者 do { 语句 } while (条件);
不管条件是否为真,do...while循环至少运行一次,这是这种结构最大的特点。另外,while语句后面的分号注意不要省略。
下面是一个例子。
var x=3;] var i=0; do { console.log(i); i++; } while(i < x);
7.4、break 语句和 continue 语句
break语句和continue语句都具有跳转作用,可以让代码不按既有的顺序执行。
break语句用于跳出代码块或循环。
var i=0; while(i < 100) { console.log('i 当前为:' + i); i++; if (i===10) break;}
上面代码只会执行10次循环,一旦i等于10,就会跳出循环。
for循环也可以使用break语句跳出循环。
for (var i=0; i < 5; i++) { console.log(i); if (i===3) break; } // 0 // 1 // 2 // 3
上面代码执行到i等于3,就会跳出循环。
continue语句用于立即终止本轮循环,返回循环结构的头部,开始下一轮循环。
var i=0; while (i < 100){ i++; if (i % 2===0) continue; console.log('i 当前为:' + i); }
上面代码只有在i为奇数时,才会输出i的值。如果i为偶数,则直接进入下一轮循环。
如果存在多重循环,不带参数的break语句和continue语句都只针对最内层循环。
7.5、标签(label)
JavaScript 语言允许,语句的前面有标签(label),相当于定位符,用于跳转到程序的任意位置,标签的格式如下。
label: 语句
标签可以是任意的标识符,但不能是保留字,语句部分可以是任意语句。
标签通常与break语句和continue语句配合使用,跳出特定的循环。
top: for (var i=0; i < 3; i++){ for (var j=0; j < 3; j++){ if (i===1 && j===1) break top; console.log('i=' + i + ', j=' + j); } } // i=0, j=0 // i=0, j=1 // i=0, j=2 // i=1, j=0
上面代码为一个双重循环区块,break命令后面加上了top标签(注意,top不用加引号),满足条件时,直接跳出双层循环。如果break语句后面不使用标签,则只能跳出内层循环,进入下一次的外层循环。
continue语句也可以与标签配合使用。
top: for (var i=0; i < 3; i++){ for (var j=0; j < 3; j++){ if (i===1 && j===1) continue top; console.log('i=' + i + ', j=' + j); } } // i=0, j=0 // i=0, j=1 // i=0, j=2 // i=1, j=0 // i=2, j=0 // i=2, j=1 // i=2, j=2
上面代码中,continue命令后面有一个标签名,满足条件时,会跳过当前循环,直接进入下一轮外层循环。如果continue语句后面不使用标签,则只能进入下一轮的内层循环。
*请认真填写需求信息,我们会在24小时内与您取得联系。