node.js字符串里怎么引用自定义的变量?

今天想要查下Node的类型什么的知识,想要总结下,在Googol上看到一个文章,但是原始的链接不在了,在快照中把这篇文章拉出来,如果原作者有问题,请联系我!

该文章都是一些JS的基础,高手自动跳过!我之前没怎么写过js,这方面比较弱,所以在写node的时候也遇到了麻烦,这里给自己补充下知识!

Node.js 的基础是 JavaScript 这门 脚本语言。而大多数的脚本语言一个共同的特点就是“弱类型”。

本篇以及后篇的所有内容都是在 Linux 或者 Cygwin 下用 vim 进行编辑(若不是则请自行转变成你自己的方法),然后在命令行下进行查看结果的。

在 C/C++ 中,我们这么声明变量的:

所以,无论是什么类型的变量,在 Node.js 中都是以一个 var 来解决的。

这个循环语句基本上跟 C/C++ 一样,都是

这是一种后有型的循环语句,类似于 PHP 的 foreach。

比如我们有一个 JSON对象 如下:

这个时候我们就可以用 for...in 来循环遍历了:

我们如果在命令行中打入下面的命令:

屏幕上就会显示下面的内容了:

提示:由上可知,for...in 语句是用来遍历 JSON对象、数组、对象的键名的,而不提供键值的遍历。如果要获取键值,只能通过foo[<当前键名>]的形式来获取。这个跟 PHP 的 foreach 还是有一定区别的。

这个就不多做解释了,跟其它语言没什么大的区别,无非就是如果有变量声明的话,需要用 var 就够了。

这几个运算符也就这样,要注意的是 +。它既可以作用于字符串,也可以作用于数值运算。弱类型语言虽然说类型是弱的,数字有时候可以以字符串的形态出现,字符串有时候可以用数值的形态出现,但是在必要的时候也还是要说一下它是什么类型的,我们可以用下面的代码去看看结果:

这里的 parseInt 是 Node.js 的一个内置函数,作用是将一个字符串解析成 int 类型的变量。

上面的代码执行结果是:

注:第一个 console.log 结果是 12,由于 a 是字符串,所以 b 也被系统以字符串的姿态进行加操作,结果就是将两个字符串黏连在一起就变成了 12。而第二个 console.log 结果是 3,是因为我们将第一个 a 转变为了 int 类型,两个 int 型的变量相加即数值相加,结果当然就是 3 了。

这里有一点要解释,当这个逻辑运算符长度为 2 的时候(==, !=),只是判断外在的值是不是一样的,而不会判断类型。如

它输出的结果就是 true 。但是如果我们在中间判断的时候再加上一个等号,那么就是严格判断了,需要类型和值都一样的时候才会是 true,否则就是 false。也就是说

的时候,返回的结果就是 false 了,因为 a 是 int 型的,而 b 则是字符串。

顺带着就把条件语句讲了吧,其实这里的 if 跟别的语言没什么两样,就是几个逻辑运算符两个等号三个等号的问题。所以就不多做累述了。

这里我姑且把它当成是一个运算符而不是函数了。

这个运算符的作用是判断一个变量的类型,会返回一个字符串,即类型名,具体的执行下面的代码就知道了:

这里的执行结果就将会是:

在 JavaScript 中,有三个特殊的值,如标题所示。其中第一个大家可能都比较熟悉吧,C/C++ 里面也有,不过是大写的,其本质就是一个

而在 JavaScript 中,这三个值所代表的意义都不同。

null 是一种特殊的 object,大致的意思就是空。比如说:

大家都能看懂,就不多做解释了。但是跟 C/C++ 不同的是,这个 null 跟 0 不相等。

这个东西的意思就是说这个变量未声明。为了能够更好地区分 null,我们的样例代码如下写:

上面的代码中,我们让 a["foo"] 的值为空,即 null。而压根没有声明 a["bar"] 这个东西,它连空都不是。输出的结果大家都差不多应该猜到了:

这是一个空的数值,是一个特殊的 number。它的全称是 Not a Number。有点奇怪,大家可以理解为 不是数字形态,或者数值出错的 number 类型变量。

多在浮点型数值运算错误(如被0除)的情况下出现,甚至可以是用户自己让一个变量等于 NaN 以便返回一个错误值让大家知道这个函数运算出错了云云。

其它剩余的语句也跟已存在的其它语言差不多,比如说 break 啊、switch 啊、continue 啊等等等等。

这一节主要讲的是 JavaScript 对象,其它类型差不多一带而过吧。

Node.js 包含的基础类型差不多有如下几个:

其中前三种类型可以直接赋值, 而 array 的赋值只是一个引用赋值而已,在新变量中改变某个值的话旧变量的值也会改变 ,直接可以试试下面的代码:

也就是说 array 要是复制出一个新的数组的话,不能用直接赋值的方法,而必须“深拷贝”。

这里有必要讲一下 array 的三种创建方法。

我个人比较喜欢第三种写法,比较简洁。

这里我把 JSON对象 单独拎出来而不是把它归类为 JavaScript对象,如果觉得我有点误人子弟就可以直接跳过这一节了。

更多有关 JSON 的信息请自行百科。

有两种方式能得到 JSON对象 中的某个键名的键值,第一种是用点连接,第二种是用中括号:

注意:上面在用点的时候,后面直接跟的是JSON中的key,如果把key当成是变量去当问,只能用dog[key]试试看:现在你自己动手试试看,用 for...in 的形式遍历一遍上面的 JSON对象。别忘了用上 typeof 喵~

严格意义上来讲,Node.js 的类不能算是类,其实它只是一个函数的集合体,加一些成员变量。它的本质其实是一个函数。

不过为了通俗地讲,我们接下去以及以后都将其称为“类”,实例化的叫“对象”。

因为类有着很多 函数 的特性,或者说它的本质就是一个 函数,所以这里面我们可能一不留神就顺带着把函数基础给讲了。

声明一个类非常简单,大家不要笑:

不信?不信你可以接下去打一段代码看看:

别看它是一个函数,如果以这样的形式(new)写出来,它就是这个类的实例化。

而这个所谓的 foo() 其实就是这个 foo() 类的构造函数。

成员变量有好两种方法。

第一种就是在类的构造函数或者任何构造函数中使用 this.<变量名> 。你可以在任何时候声明一个成员变量,在外部不影响使用,反正就算在还未声明的时候使用它,也会有一个 undefined 来撑着。所以说这就是第一种方法:

注意:只有在加了 this 的时候才是调用类的成员变量,否则只是函数内的一个局部变量而已。要分清楚有没有 this 的时候变量的作用范围。

第二种方法就是在构造函数或者任何成员函数外部声明,其格式是 <类名>.prototype.<变量名>:

无论上面哪种方法都是对成员变量的声明,我们可以看看效果:

甚至你可以这么修改这个类:

然后再用上面的代码输出。

想想看为什么输出的还是 world 而不是 蛋花汤。

我们之前说过了这个 foo() 实际上是一个 构造函数。那么显然我们可以给构造函数传参数,所以就有了下面的代码:

我们看到上面有一个奇葩的判断 if(hello === undefined),这个判断有什么用呢?第一种可能,就是开发者很蛋疼地特意传进去一个 undefined 进去,这个时候它是 undefined 无可厚非。

还有一种情况。我们一开始就说了 JavaScript 是一门弱类型语言,其实不仅仅是弱类型,它的传参数也非常不严谨。你可以多传或者少传(只要保证你多传或者少传的时候可以保证程序不出错,或者逻辑不出错),原则上都是可以的。多传的参数会被自动忽略,而少传的参数会以 undefined 补足。

看看下面的代码就明白了:

请自行输出一下两个 bar 的 hello 变量,会发现一个是 world 一个是 蛋花汤。显而易见,我们的第一个 bar1 在声明的时候,被 Node.js 自动看成了:

所以就有了它是 world 一说。

还有就是在这个构造函数中,我们看到了传进去的参数是 hello 而这个类中本来就有个成员变量就是 this.hello。不过我们之前说过了有 this 和没 this 的时候作用域不同,那个参数只是作用于构造函数中,而加了 this 的那个则是成员变量。用一个 this 就马上区分开来他们了,所以即使同名也没关系。

上面这段代码显而易见,我们实现了 foo 类的 setHello 函数,能通过它修改 foo.hello 的值。

但是这么写是不是有点麻烦?接下去我要讲一个 JavaScript 函数重要的特性了。

很多时候我们的某些函数只在一个地方被引用或者调用,那么我们为这个函数起一个名字就太不值了,没必要,所以我们可以临时写好这个函数,直接让引用它的人引用它,调用它的人调用它。所以函数可以省略函数名,如:

至于怎么引用或者调用呢?如果是上面的那个类需要引用的话,就是写成这样的:

这样的写法跟 成员函数 声明 是一个效果的,而且省了很多的代码量。而且实际上,基本上的类成员函数的声明都是采用这种匿名函数的方式来声明的。

至于说怎么样让匿名函数被调用呢?这通常用于传入一个只被某个函数调用的函数时这样写。

比如我们有一个函数的原型是:

比如我们有两个版本的输出函数,一个是中文输出,一个是英文输出,那么如果不用匿名函数时候是这么写的:

执行一遍这段代码,输出的结果将会是:

这样的代码如果采用匿名函数的形式则将会是:

这种形式通常使用于回调函数。回调机制算是 Node.js 或者说 JavaScript 的精髓。在以后的篇章会做介绍。

成员函数声明的匿名函数声明方式

虽然上一节讲过了,不过还是再讲一遍吧。

通常我们声明类的成员函数时候都是用匿名函数来声明的,因为反正那个函数也就是这个类的一个成员函数而已,不会在其它地方被单独引用或者调用,所以就有了下面的代码:

这样我们就使得 foo 类有了 setHello 这个函数了。

这个又是我胡扯的。所谓类的随意性即 JavaScript 中你可以在任何地方修改你的类,这跟 Ruby 有着一定的相似之处。

比如说 string ,它其实也是一个类,有着诸如 length 这样的成员变量,也有 indexOf、substr 等成员函数。但是万一我们觉得这个 string 有些地方不完善,想加自己的方法,那么可以在你想要的地方给它增加一个函数,比如:

这个函数的意思就是填充一个字符串,使其变成 sb 的化身。

你将会得到这样的结果:

你跟你的电脑说“嘘~蛋花汤在睡觉。”,你的电脑会骂你四次半傻逼。(赶快砸了它)

所谓深拷贝就是自己新建一个数组或者对象,把源数组或者对象中的基础类型变量值一个个手动拷过去,而不是只把源数组或者对象的引用拿过来。所以这就涉及到了一个递归的调用什么的。

下面是我实现的一个深拷贝函数,大家可以写一个自己的然后加入到自己的 Node.js 知识库中。

}

也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HTML+CSS创建一个漂亮的页面,但这还不够,它只是静态页面而已。我们还需使用JavaScript增加行为,为网页添加动态效果。

  1. 增强页面动态效果(如:下拉菜单、图片轮播、信息滚动等)
  2. 实现页面与用户之间的实时、动态交互(如:用户注册、登陆验证等)

为什么JavaScript非常值得我们学习?

  1. 所有主流浏览器都支持JavaScript。
  2. 目前,全世界大部分网页都使用JavaScript。
  3. 它可以让网页呈现各种动态效果。
  4. 做为一个Web开发师,如果你想提供漂亮的网页、令用户满意的上网体验,JavaScript是必不可少的工具。

(3)引用JS外部文件

可以把HTML文件和JS代码分开,并单独创建一个JavaScript文件(简称JS文件),其文件后缀通常为.js,然后将JS代码直接写在JS文件中。

JS文件不能直接运行,需嵌入到HTML文件中执行,我们需在HTML中添加如下代码,就可将JS文件嵌入HTML文件中。

(4)JS在页面中的位置

我们可以将JavaScript代码放在html文件中任何位置,但是我们一般放在网页的head或者body部分。

    最常用的方式是在页面中head部分放置<script>元素,浏览器解析head部分就会执行这个代码,然后才解析页面的其余部分。 JavaScript代码在网页读取到该语句的时候就会执行。

注意: javascript作为一种脚本语言可以放在html页面中任何位置,但是浏览器解释html时是按先后顺序的,所以前面的script就先被执行。比如进行页面显示初始化的js必须放在head里面,因为初始化都要求提前进行(如给页面body设置css等);而如果是通过事件调用执行的function那么对位置没什么要求的。

JavaScript语句是发给浏览器的命令。这些命令的作用是告诉浏览器要做的事情。

一行的结束就被认定为语句的结束,通常在结尾加上一个分号";"来表示语句的结束。

  1. “;”分号要在英文状态下输入,同样,JS中的代码和符号都要在英文状态下输入。
  2. 虽然分号“;”也可以不写,但我们要养成编程的好习惯,记得在语句末尾写上分号。

从字面上看,变量是可变的量;从编程角度讲,变量是用于存储某种/某些数值的存储器。我们可以把变量看做一个盒子,为了区分盒子,可以用BOX1,BOX2等名称代表不同盒子,BOX1就是盒子的名字(也就是变量的名字)。


定义变量使用关键字var,语法如下:
var就相当于找盒子的动作,在JavaScript中是关键字(即保留字),这个关键字的作用是声明变量,并为"变量"准备位置(即内存)。

变量名可以任意取名,但要遵循命名规则:

注意:运行结果考虑浏览器兼容问题。

(6)关闭窗口('); //将新打的窗口对象,存储在变量mywin中

  1. 属性节点:元素属性,如<a>标签的链接属性href=""

以DOM节点层次图中ul为例,它的父级节点body,它的子节点3个li,它的兄弟结点h2、P。

学过HTML/CSS样式,都知道,网页由标签将信息组织起来,而标签的id属性值是唯一的,就像是每人有一个身份证号一样,只要通过身份证号就可以找到相对应的人。那么在网页中,我们通过id先找到标签,然后进行操作。看看下面代码:

注:获取的元素是一个对象,如想对元素进行操作,我们要通过它的属性或方法。


  1. 注意:该表只是一小部分CSS样式属性,其它样式也可以通过该方法设置和修改。
    改变<p> 元素的样式,将颜色改为红色,字号改为20,背景颜色改为蓝:
//定义"取消设置"的函数
  1. 因为文档中的 name 属性可能不唯一,所有 getElementsByName() 方法返回的是元素的数组,而不是一个元素
  2. 和数组类似也有length属性,可以和访问数组一样的方法来访问,从0开始。



返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。

  1. Tagname是标签的名称,如p、a、img等标签名。
  2. 和数组类似也有length属性,可以和访问数组一样的方法来访问,所以从0开始。

以人来举例说明,人有能标识身份的身份证,有姓名,有类别(大人、小孩、老人)等。

  1. ID 是一个人的身份证号码,是唯一的。所以通过getElementById获取的是指定的一个人。
  2. Name 是他的名字,可以重复。所以通过getElementsByName获取名字相同的人集合。

通过下面的例子(6个name="hobby"的复选项,两个按钮)来区分三种方法的不同:

在文档对象模型 (DOM) 中,每个节点都是一个对象。DOM 节点有三个重要的属性 :

  1. name:要想查询的元素节点的属性名字

看看下面的代码,获取h1标签的属性值:



setAttribute() 方法增加一个指定名称和值的新属性,或者把一个现有的属性设定为指定的值。
1.把指定的属性设置为指定的值。如果不存在具有指定名称的属性,该方法将创建一个新属性。

访问选定元素节点下的所有子节点的列表,返回的值可以看作是一个数组,他具有length属性。
注意:如果选定的节点没有子节点,则该属性返回不包含节点的 NodeList。

我们来看看下面的代码:


UL子节点个数:3 节点类型:1
UL子节点个数:7 节点类型:3
  1. 节点之间的空白符,在firefox、chrome、opera、safari浏览器是文本节点,所以IE是3,其它浏览器是7,如下图所示:

访问子节点的第一和最后项:

注意: 我们知道Internet Explorer 会忽略节点之间生成的空白文本节点,而其它浏览器不会。我们可以通过检测节点类型,过滤子节点。

    注意:父节点只能有一个。
    看看下面的例子,获取 P 节点的父节点,代码如下:

注意: 浏览器兼容问题,chrome、firefox等浏览器标签之间的空白也算是一个文本节点。

  1. nextSibling 属性可返回某个节点之后紧跟的节点(处于同一树层级中)。
    说明:如果无此节点,则该属性返回 null。

注意: 两个属性获取的是节点。Internet Explorer 会忽略节点间生成的空白文本节点(例如,换行符号),而其它浏览器不会忽略。
判断节点nodeType是否为1, 如是为元素节点,跳过。

  1. 在指定节点的最后一个子节点列表之后添加一个新的子节点。
    参数: newnode:指定追加的节点。
    我们来看看,div标签内创建一个新的 P 标签,代码如下:

removeChild() 方法从子节点列表中删除某个节点。如删除成功,此方法可返回被删除的节点,如失败,则返回 NULL。
参数: node :必需,指定需要删除的节点。


注意: 把删除的子节点赋值给 x,这个子节点不在DOM树中,但是还存在内存中,可通过 x 操作。
如果要完全删除对象,给 x 赋 null 值,代码如下:

1.当 oldnode 被替换时,所有与之相关的属性内容都将被移除。

效果:在HTML文档中,创建一个按钮。
我们也可以使用setAttribute来设置属性,代码如下:

效果:在HTML文档中,创建一个文本框,使用setAttribute设置属性值。 当点击这个文本框时,会弹出对话框“This is a text!”。

创建一个<div>元素并向其中添加一条消息,代码如下:




(1)浏览器窗口可视区域大小

获得浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)的方法:

offsetHeight和offsetWidth,获取网页内容高度和宽度(包括滚动条等边线,会随窗口的显示大小改变)。

(4)网页卷去的距离与偏移量

我们先来看看下面的图:

  1. scrollLeft:设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离 ,即左边灰色的内容。
  2. scrollTop:设置或获取位于对象最顶端与窗口中可见内容的最顶端之间的距离 ,即上边灰色的内容。
  3. offsetLeft:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 。
  4. offsetTop:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置 。
  • 第1章 认识JS JavaScript能做什么?1.增强页面动态效果(如:下拉菜单、图片轮播、信息滚动等)2.实现...

  • 上海这地方,给死者烧纸好像就地烧,画个黄色大圈圈,我走路都不好走进去,怕误入

  • 上世纪七十年代中期,我出生在胶东半岛的一个小村落里,那是一个夹在两个乡镇之间位置有点尴尬的村子,百来户人家,都互相...

  • 上图 手机拍摄,拍不出眼见的效果!!景美,就不多夸了,像我这样又喜欢人文又有大自然缺乏症的人,来这地方对了!! ...

  • 感恩大自然的恩赐,谢谢。 感恩导师的教悔,谢谢。 感恩孩子的陪伴,谢谢。 感恩父母的养育,谢谢。 感恩钱宝宝如氧气...

  • 文/邓荣 今天坐在沙发上,灵魂传递给我一句话: “你想我了,没告诉我”。 心灵提醒我,用这句话跟着我的心灵感应用心...

}

我要回帖

更多关于 js字符串拼接变量 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信