JavaScript基础系列(一)

JavaScript是基于事件和对象驱动的,依赖于浏览器本身,与操作系统无关。

一 、JavaScirpt变量

1.1 定义变量
定义变量时,统一用“var 变量名”表示,例如:var str;甚至可以省略var这个字
1.2 JavaScript变量的类型如何决定
JavaScript中变量的数据类型是由JS引擎决定的

1 var name="我是初学者";//name是string类型
2 var age=24;//age是number类型
3 var flag=true;//flag是boolean类型
4 var email;//email只是声明,没有赋值,因此代表的类型是"undefined",也就是无法确定
5 name=10;//name自动变成了number类型

1.3 使用typeof关键字查看变量代码代表的具体数据类型
typeof有一个参数,即要检查的变量或者值。例如:

1 var sTemp = "test string";
2 alert (typeof sTemp);    //输出 "string"
3 alert (typeof 86);    //输出 "number"

对变量或者值调用typeof运算符将返回下列值之一:

  • undefined 如果变量是Undefined类型
  • boolean 如果变量是Boolean类型
  • number 如果变量是number类型
  • string 如果变量是string类型
  • null 如果变量是一种引用类型或者Null类型
    测试代码
<script type="text/javascript">
    var name="战士";//name是string类型
    alert("name是"+typeof name+"类型");
    var age=24;//age是number类型
    alert("age是"+typeof age+"类型");
    var flag=true;//flag是boolean类型
    alert("flag的类型是:"+typeof flag);
    name=10;//name自动变成了number类型
    alert("name变量重新赋值后,name的数据类型变成了:"+typeof name);

    var email;//email只是声明,没有赋值,因此代表的类型是"undefined",也就是无法确定
    alert("email的类型是:"+typeof email );
    var a=null;
/*
为什么 typeof 运算符对于 null 值会返回 "Object"。
这实际上是 JavaScript 最初实现中的一个错误,然后被 ECMAScript 沿用了。现在,null 被认为是对象的占位符,从而解释了这一矛盾,但从技术上来说,它仍然是原始值。
*/
    alert("a是"+typeof a +"类型");
  </script>
二、JavaScript数据类型

JavaScript数据类型

JavaScript包含两种不同的数据类型,基本数据类型和引用数据类型。基本类型指的是简单的数据,引用类型指由多个值构成的对象。当我们把值赋值给一个变量时,解析器首先要做的是确认这个值是基本类型还是引用类型。
2.1 基本数据类型
2.1.1 __数值类型(Number)和布尔类型(Boolean)
看下面的代码:

<script type="text/javascript">
    var a = 10;
    var b = a;
        b = 20;
    alert("a="+a);//打印a=10
    
    var b1 = true;
    var b2 = b1;
        b2 = false;
    alert("b1="+b1);//打印b1=true
 </script>

从运行结果可以看出,b的值是a值的一份拷贝,虽然,两个变量的值是相等,但是两个变量保存两不同的基本数据类型值。b只是保存了a复制的一个副本。所以,当b的值改变成20时,a的值依然是10。两个Boolean变量b1和b2同样是基本数据类型,同样保存两个不同的基本数据据类型值,b2保存1复制的一个副本。所以,当b2的值改变成false时,b1的值依然是true
下图演示了这种基本数据类型的赋值过程:

基本数据类型赋值方式

2.1.2 字符串类型(String)
JavaScript中的字符串String是一个特殊的基本数据类型,在很多语言中,String是以对象的形式表示的,但在JavaScript里,String是当作一种基本数据类型,是通值传递的方式来操作。但它是一个比较特殊的基本类型。
看下例子

1  <script type="text/javascript">
2     var strA = "这是字符串";
3     var strB = strA;
4         strA = "这是另外一个字符串";
5         alert("strB="+strB);//打印这是字符串
6  </script>

从运行结果可以看到,仿佛strA通过值传递的方式复制了一份给了strB。当strA改变的时候,strB并没有改变,似乎我们已经可以下结论,String就是个基本数据类型。

可是,因为String是可以任意长度的,通过值传递,一个一个的复制字节显示效率依然很低,看起来String也可以当作引用类型。
看下面例子

1 var a = "myobject";
2 a.name = "myname";//为字符串a动态添加name属性
3 alert("a.name="+a.name); //访问a的name属性,结果显示:a.name=undefined

运行结果显示,String无法当作一个对象来处理。这也证明了一点:基本类型虽然也可以添加属性,也不会报错,经测试添加完之后却是无法访问的。实际上,javascript里的String是不可以改变的,javascript也没有提供任何一个改变字符串的方法和语法。
看下面的例子

1 var b = "myobject";
2 b = b.substring(3,5);
3 alert("b="+b); // b=bj

这样做,没并有改变String字符串"myobject",只b引用了另一个字符串"bj","myobject"被回收了。

所以可以这样讲,String实际上并不符合上面两种数据类型分类。它是具有两方面属性介于两都之间的一种特殊类型。
2.1.3 NullUndefined
Null类型只有一个专用值null值 undefined 实际上是从值 null 派生来的,因此 ECMAScript 把它们定义为相等的

1   <script type="text/javascript">
2       alert("null == undefined的结果是:"+(null == undefined));  //输出 "true"
3   </script>

尽管这两个值相等,但它们的含义不同。undefined 是声明了变量但未对其初始化时赋予该变量的值,null 则用于表示尚未存在的对象(typeof 运算符对于 null 值会返回 "Object"。)。如果函数或方法要返回的是对象,那么找不到该对象时,返回的通常是 null。
Undefined 类型只有一个值,即undefined。当声明的变量未初始化时,该变量的默认值是undefined
可以用以下代码测试

1  <script type="text/javascript">
2     var oTemp;
3     alert("oTemp == undefined的结果是:"+(oTemp == undefined));//输出 "true"
4     alert("typeof oTemp的结果是:"+typeof oTemp); //输出 "undefined"
5   </script>

可以用 typeof 运算符显示该变量所代表的的数据类型是undefined类型;
当函数无明确返回值时,返回的也是值 "undefined"。
2.2 引用类型
Javascript引用数据类型是保存在堆内存中的对象,JavaScript不允许直接访问堆内存空间中的位置和操作堆内存空间,只能通过操作对象在栈内存中的引用地址。所以引用类型的数据,在栈内存中保存的实际上是对象在堆内存中的引用地址。通过这个引用地址可以快速查找到保存在堆内存中的对象。
看下面的例子:

1 <script type="text/javascript">
2     var obj1 = new Object();
3     var obj2 = obj1;
4     obj2.name = "战士";
5     alert(obj1.name); // 战士
6 </script>

由上面例子,我们声明了一个引用数据类型变量obj1,并把它赋值给了另外一个引用数据类型变量obj2。当我们obj2添加了一个name属性并赋值" 孤傲苍狼"。obj1同样拥有了和obj2一样的name属性。说明这两个引用数据类型变量指向同一个对象。obj1赋值给obj2,实际只是把这个对象在栈内存的引用地址复制了一份给了obj2,但它们本质上共同指向了堆内存中的同一个对象。
下面我们演示引用数据类型的赋值过程:

引用数据类型赋值方式

自然,给obj2添加name属性,实际上是给堆内存中的对象添加了name属性,obj2和obj1在栈内存中保存的只是堆内存对象的引用地址,虽然也是拷贝了一份,但指向的对象却是同一个。故而改变obj2引起了obj1的改变。

一般而言,基本数据类型是由固定数目的字节组成,这些字节可以在解析器的较底层进行操作,比如NumberBoolean;而引用数据类型,可以包含任意数目的属性和元素,因此它们无法像基本数据类型那样很容易的操作。由于,引用数据类型的值是会发生变化的, 所以通过跟基本数据类型一样的值传递方式,也就没什么意义了,因为会牵涉到大量的内存的复制和比较,效率太低。所以引用数据类型是通过引用传递方式,实际传递的只是对象的一个地址。比如ArrayFunction,因为它们都是特殊的对象所以它们都是引用类型。另外,引用类型是可以添加属性,基本类型虽然也可以添加属性,也不会报错,经测试添加完之后却是无法访问的。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 196,302评论 5 462
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,563评论 2 373
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 143,433评论 0 325
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,628评论 1 267
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,467评论 5 358
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,354评论 1 273
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,777评论 3 387
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,419评论 0 255
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,725评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,768评论 2 314
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,543评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,387评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,794评论 3 300
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,032评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,305评论 1 252
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,741评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,946评论 2 336