引用数据类型也叫对象 object ,
引用数据类型的数据格式有 json ,数组,函数,DOM的元素对象等等
alert不能弹出object所以内容,所以调试object数据类型的时候一般使用console.log()进行调试。
一、数组
数组也叫 list,可以把他想象成一个序号是从0开始的列表清单,每个序号对应一个值,值可以是任意数据类型;
数组对象有个默认的特有属性length,代表数组所存储的数据个数,length属性的计数会自动添加。数组的下标不是一定是顺号。length的值跟最大下标没有关系,只跟数据数量有关系。
1 <body>
2 <div id="wrap"></div>
3 <script>
4 var a = [
5 1,
6 2,
7 "haha",
8 function (){
9 alert(1);
10 },
11 [1,"xixi",5],
12 {"name":"bibi","age":18}
13 ];
14 console.log(a);
15 </script>
16 </body>
console.log(a)的结果。
读取数组的某个特定的值需要通过他的下标(序号索引)去查找调用,格式如下:
1 console.log(a[0]); //1
2 console.log(a[1]); //2
3 console.log(a[2]); //haha
4 console.log(a[4][1]); //xixi
5 console.log(a[5].name); //bibi
二、json对象
一、JSON :javascript对象表示法(Javascript Object Notation) 是一种轻量级的数据交换格式。
JSON 语法是 JavaScript 对象表示语法的子集。是存储和交换文本信息的语法,类似于XML,python的词典,
前端为后端传输数据的常用格式,因为每个后端语言都支持这种格式,所以json一般都是用来给后端传输数据。
数组和json的区别,数组的数据以下标查找,所以当需要去更详细描述每条数据代表的意思的时候,数组没办法去表示,而json可以。
数组通常用来存储一组类型相同的数据,以下标读取数据:a[0] 的数据是老郭 ,
json以键,每组数据是一组键值对,json对象名.键读取,比如 b.name 的数据是老郭。
json都键只在前端调用的时候可以加引号也可以不加引号,当json的数据是要传给后端的时候,就要给键值对都加上引号。
json的键 只能是基础数据类型的数据,而值可以是任何数据类型。而且值可以是某一个变量。但是键(属性)不可以。
已经创建的json和数组添加新值的时候直接用点操作和下标操作就可以了,如果已经存在值了,会被新值覆盖。
1 <body>
2 <div id="wrap"></div>
3 <script>
4 var num = 18 ;
5 var a = [
6 "老郭",
7 18,
8 180,
9 "男"
10 ];
11 var b = {
12 "name":"老郭",
13 "age":num, //键age 的值是变量 num的值。
14 "height":"180cm",
15 "sex":"男"
16 }
17 </script>
18 </body>
注意:几乎所有对象的 . 操作都可以用中括号来代替,中括号里的键一定要加引号,但是我们一般不这么用,一般都是直接 . 操作就可以了。
但是数组的中括号下标读取不能使用.操作替代。
1 console.log(b.name === b["name"]); // ture
2 var k = "name"; //b["name"]的方式读取的时候,括号里的"name"可以当成一个独立的字符串。
3 console.log(b[k]); //老郭
4 console.log(x.k) ; //报错 x.k是读取x对象下的k属性,这里因为没有k属性所以报错,x.k的k不能读取全局变量k的值。
5 //console.log(a[0] === a.0); //报错
另外对象定义的时候,属性名(key),也不能直接引用变量:但是属性的值可以用变量代替,比如a:a; json的属性a的值就会被赋予变量a的值="test";
比如:
1 var a = "test",
2 json={
3 "name":"jj",
4 a:"haha" //这里写的a,就是json这个对象下的属性a,并不能读到变量a,当定义对象的属性的时候,就是对象的属性,跟其他的变量无关。对象的属性其实也是这个对象的域内的变量;
5 }
三、内置对象-document(html文档)
document是DOM写好的,以html_document为模型的供JS调用的对象。
对象的属性不是每条都是可见、可读、可写的,内置对象document里面就有很多不可读、不可见、不可写的属性。
1 cosnole.dir(document);
四、节点对象-通过获取节点对象的api获取。
每个html文件的布局和元素都不一样,所以JS不能预先知道会有什么样的节点对象而预先创建,DOM里面会提供一个节点对象的公共类,
根据html的文档元素的具体内容,在获取的时候,会去继承节点对象的公共类的基础上,根据具体内容去完善。
1 console.dir(document.getElementById("wrap"));
五、function函数。
为什么需要函数:在某些的特定的事件触发,或者某个特定条件下,需要去执行很大一段代码,需要统一的去管理这些代码,所以就产生了函数这个数据类型。
函数的定义:
function对象的2种定义方式;
第一种 function hh 是一个完整的定义函数,}作为结束符,可以不用加分号。
第二种定义方式 主表达式是 var hh = .......... ,是一个变量赋值的表达式,所以 } 只能作为function函数体的结束符,无法作为 var hh = ....的结束符,所以后面要加分号;。
1 funciton hh () {
2 alert(1);
3 } //不用加分号。
4
5 var hh = function (){
6 alert(1);
7 }; //需要加分号。
函数的执行:
函数的this指向只有函数执行的时候才确定,即执行函数的主体是哪个对象,this就指向谁。
1 <body>
2 <div id="wrap"></div>
3 <script>
4 var xx = function () {
5 alert(1);
6 alert(this); //函数的this指向只有函数执行的时候才确定
7 };
8 var oWrap = document.getElementById ("wrap");
9 xx(); // 自执行的时候this指向window,严格模式下指向undefined
10 document.onclick = xx ; ///事件触发执行函数XX时 ,this指向 object HTMLDocument
11 oWrap.onclick =xx; //事件触发执行函数XX时,this指向oWrap(object HTMLDivElement)
12 </script>
13 </body>
事件函数的理解:
事件在代码定义阶段注册,有点类似 变量的定义。 但是事件函数不会像 变量定义完就执行这样去自己执行,需要触发事件,注册的事件后面的函数体才会执行。
document.onlick 这个事件触发的时候,这个函数 就会执行,你也可以理解为 document.onlick 是一个属性,当这个属性的事件,即文档点击的时候,这个属性的函数执行document.onclick();
1 document.onclick = function () {
2 alert (1);
3 }
注意:
匿名函数不能单独直接出现的代码里面。要么给函数定义一个函数名,要么赋值给某个变量或者属性,直接写会提示报错。
1 function(){ //会报错。
2 alert (1);
3 }
可以通过console.dir(对象名) 查看对象属性,
1 var a = {
2 "name":"guo",
3 "age":18
4 }
5 var b = function (){
6 alert(1);
7 }
8 console.dir(a);
9 console.dir(b);