`
hongtoushizi
  • 浏览: 378908 次
  • 性别: Icon_minigender_1
  • 来自: 天津
社区版块
存档分类
最新评论

JS数组”(array)和“对象”(object)

    博客分类:
  • js
js 
阅读更多

转载: http://lgr310-163-com.iteye.com/blog/745861

JS数组”(array)和“对象”(object) 


        比如有一个数组a=[1,2,3,4],还有一个对象a={0:1,1:2,2:3,3:4},然后你运行alert(a[1]),两种情况下的运行结果是相同的!这就是说,数据集合既可以用数组表示,也可以用对象表示,那么我到底该用哪一种呢? 

        数组表示有序数据的集合,而对象表示无序数据的集合。如果数据的顺序很重要,就用数组,否则就用对象。 

        当然,数组和对象的另一个区别是,数组中的数据没有“名称”(name),对象中的数据有“名称”(name)。但是问题是,很多编程语言中,都有一种叫做“关联数组”(associative array)的东西。这种数组中的数据是有名称的。 

比如在javascript中,可以这样定义一个对象: 

             var a={"城市":"北京","面积":16800,"人口":1600}; 

但是,也可以定义成一个关联数组: 

Java代码  收藏代码
  1. a["城市"]="北京";  
  2.   
  3. a["面积"]=16800;  
  4.   
  5.  a["人口"]=1600;  



          在Javascript语言中,关联数组就是对象,对象就是关联数组。这一点与php语言完全不同,在php中,关联数组也是数组。 

比如运行下面这段javascript: 

  

Java代码  收藏代码
  1. var a=[1,2,3,4];  
  2.   
  3.    a['foo']='Hello World';  
  4.   
  5.    alert(a.length);  



最后的结果是4,也就是说,数组a的元素个数是4个。 

但是,运行同样内容的php代码就不一样了: 

 

Java代码  收藏代码
  1. $a=array(1,2,3,4);  
  2.   
  3.   $a["foo"]="Hello world";  
  4.   
  5.   echo count($a);  



最后的结果是5,也就是说,数组a的元素个数是5个。 

遍历方法: 
一: 

Java代码  收藏代码
  1. var news = { id:'101', title:'这是标题', content:'这里是内容'}  
  2.       for(var n in news){  
  3.           document.write(n+'---'+news[n]+'<br>')  
  4.       }  


二: 

Java代码  收藏代码
  1. var news = {  
  2. 0:{id:'101', title:'这是标题111', content:'这里是内容111'},  
  3. 1:{id:'101', title:'这是标题222', content:'这里是内容222'},  
  4. 2:{id:'101', title:'这是标题333', content:'这里是内容333'}  
  5. }  
  6.       for(var n in news){  
  7.           document.write(n+'---'+news[n].title+'<br>')  
  8.       }  
  9. /////调用值的方法 news.id 或 news['id']  



字符转成对象 

Java代码  收藏代码
  1. s   =   '{"address":"","email":"123@123.com","name":"test5","id":"6"};';    
  2.   eval('o='+s);    
  3.   alert(o.name);    
  4. 或:  
  5. data=eval('(' +s+ ')');  



------------------------------------------------------------- 

 对象是一种复合数据类型. 
  创建对象最简单的方法是你的javascript代码中包含对象直接量,也可以通过运算符new创建。 

Java代码  收藏代码
  1. var empty = {}; // An object with no properties  
  2. var point = { x:0, y:0 };  
  3. var circle = { x:point.x, y:point.y+1, radius:2 };  
  4. var homer = {  
  5.     "name""Homer Simpson",  
  6.     "age"34,  
  7.     "married"true,  
  8.     "occupation""plant operator",  
  9.     'email': homer@example.com  
  10. };  
  11. var a = new Array(); // Create an empty array  
  12. var d = new Date(); // Create an object representing the current date and time  
  13. var r = new RegExp("javascript""i"); // Create a pattern-matching object  


  创建对象后,我们可以通过"."运算符,在对象中创建新属性、引用已有属性、设置属性值等。 
  

Java代码  收藏代码
  1. var book = new Object();     //创建对象  
  2.   book.title="JavaScript: The Definitive Guide";  
  3.   book.chapter1=new Object();   //作为对象属性的,嵌套对象  
  4.   book.chapter1.title = "Introduction to JavaScript";  
  5.   book.chapter1.pages = 11;  
  6.   book.chapter2 = { title: "Lexical Structure", pages: 6 };  
  7.               alert("Outline: " + book.title + "\n\t" +  
  8.     "Chapter 1 " + book.chapter1.title + "\n\t" +  
  9.     "Chapter 2 " + book.chapter2.title);                  
  10.  从对象中读取一些属性.  


在上例中,需注意,可以通过把一个值赋给对象的一个新属性来创建它. 
  在JavaScript语句中提到过用for/in语句可以遍历对象的属性和方法。 
  用in运算符检查属性是否存在.如: 
if ("x" in o) o.x = 1;//如果存在就设置其属性值为1. 
如果这样写:o.x=undefined //属性x是存在的,但是没有值.我常常会这样写:if (o.x !== undefined) o.x = 1; 
另外,!= =常代替!=.!= =和= = = 区别在于undefined和null,不用区分时可以省略,如:if (o.doSomething) o.doSomething(); 
  删除属性:delete book.chapter2; 
  作为关联数组的对象:object.property 和object["property"]是等价的. 
  通用对象的属性和方法 
   constructor属性:var d = new Date();d.constructor == Date; // true 
   由于构造函数定义了一个对象的类,所以属性constructor在有助于确定给定对象的类型.如,可以使用如下代码来确定一个未知对象的类型:if ((typeof o == "object") && (o.constructor == Date)),也可以用instanceof运算符:if ((typeof o == "object") && (o instanceof Date)) 
  toString()方法:返回一个字符串,该字符串代表了调用它的对象的类型或值.当javascript需要将一个对象转换成字符串时就调用这个对象的toString()方法.例如当用"+"连接一个字符和一个对象时,或者把一个对象传递给alert()或document.write()方法时,就会调用toString(). 
  默认的toString()方法提供的信息并不多.例如下面的代码只能得到字符串"[object Object]":var s = { x:1, y:1 }.toString();所以许多类都定义了自己的toString()方法,例如,当一个数组被转换成一个字符串时,就得到一个数组元素列表,其中每个元素都被转换成了字符串,当一个函数被转换成字符串时,就会获得该函数的源代码.第九章将详细讲述. 
  toLocaleString()方法:返回该对象局部化的字符串表示.Oject类定义的默认toLocaleString()方法自身不做任何局部化,返回的结果与toString() 方法返回的完全相同,但是Object 类的子类则可能定义自己的toLocaleString()方法. 
  valueOf()方法:与toString()相似,当javascript需要将一个对象转换成字符串之外的原始类型(通常是数字)时,就需要调用它. 
  hasOwnProperty方法:如果对象局部定义一个非继承的属性,属性名是由一个字符串实际参数指定的,那么该方法将返回true,否则,它将返回false.如: 

Java代码  收藏代码
  1. var o = {};  
  2. o.hasOwnProperty("undef");     // false: 没有定义该属性  
  3. o.hasOwnProperty("toString"); // false: toString是一个继承属性  
  4. Math.hasOwnProperty("cos");    // true: Math对象有cos属性  


  propertyIsEnumerable()方法:如果对象定义了一个属性,属性名是由一个字符串实际参数指定的,而且该属性可以用for/in循环枚举出来,那么该方法返回true,否则,返回false.例如: 

Java代码  收藏代码
  1. var o = { x:1 };  
  2. o.propertyIsEnumerable("x");        // true: property exists and is enumerable  
  3. o.propertyIsEnumerable("y");        // false: property doesn't exist  
  4. o.propertyIsEnumerable("valueOf"); // false: property is inherited  


  isPrototypeOf()方法:如果调用对象是实际参数指定的对象的原型对象,该方法返回true,否则返回false.该方法的用途和对象的constructor属性相似.例如: 

Java代码  收藏代码
  1. var o = {}  
  2. Object.prototype.isPrototypeOf(o);        // true: o.constructor == Object  
  3. Object.isPrototypeOf(o);                  // false  
  4. o.isPrototypeOf(Object.prototype);        // false  
  5. Function.prototype.isPrototypeOf(Object); // true: Object.constructor==Function  


  数组方法: 
     join():可以把一个数组的所有元素都转换成字符串,然后再把它们连接起来,你可以指定一个可选字符串来分隔结果字符串中的元素.如果没有指定分隔字符串,那么可以使用逗号分隔元素. 
  reverse():将颠倒数组元素的顺序并返回颠倒后的数组.它在原数组上执行这一操作,也就是说,它并不 创建一个重排了元素的新数组,而是在已经存在的数组中对数组元素进行重排. 
  sort():是在原数组上对数组元素进行排序,返回排序后的数组.如果调用sort()时不传递给它参数,那么它将按照字母顺序对数组元素进行排序(如果必要的话,可以暂时将元素转成字符串以执行比较操作) 
  concat():能创建并返回一个数组.这个数组包含了调用concat()的原始数组的元素,其后跟随的是concat()的参数.如果其中有些参数是数组,那么它就将被展开,其元素将被添加到返回的数组中.但是要注意,concat()并不能递归地展开一个元素为数组. 
  slice():返回的是指定数组是一个片段. 
  splice():插入或删除数组元素的通用方法.它在原数组上修改数组. 
  push()和pop():使我们可以像使用栈那样来使用数组.方法push()可以将一个或多个新元素附加到数组的尾部.然后返回数组的新长度.方法pop()恰恰相反. 
  unshift()和shift():与push()和pop() 非常相似,只不过它们是在数组的头部进行元素的插入和删除,而不是在尾部进行元素的插入和删除. 
  toString()和toLocaleString():注意,在输出的结果中,数组值的周围没有方括号或者其他定界符. 
  数组附加:indexof()和lastIndexof(),forEach(),map(),filter() 

/////////////////// 

对象实例: 

Java代码  收藏代码
  1. <script>  
  2. var news ={  
  3.  1:{id:101,title:'这是标题1',content:'这里是内容1'},  
  4.  2:{id:102,title:'这是标题2',content:'这里是内容2'},  
  5.  3:{id:103,title:'这是标题3',content:'这里是内容3'},  
  6.  4:{id:104,title:'这是标题4',content:'这里是内容4'},  
  7.  jingdian:{101:'AAA',102:'BBB',103:'CCC',104:'DDD'}  
  8. }  
  9. var jingdian ={  
  10.  101:{1101:'天',1102:'地',1103:'东'},  
  11.  102:{2101:'天2',2102:'地2',2103:'东2'},  
  12.  103:{3101:'天3',3102:'地3',3103:'东3'}  
  13. }  
  14.   
  15. for (var n in news){  
  16.  if(n!='jingdian'){  
  17.   document.write(n+"--"+news[n].id+"--"+news[n].title+'----'+news[n].content+'======'+get_jingdian(news[n].id)+'=========<br>');  
  18.  }  
  19. }  
  20. document.write('<hr>');  
  21. document.write(news[1]['title']+'--');  
  22. document.write(news[1].title);  
  23. document.write('<hr>');  
  24.   
  25. for (var J in news['jingdian']){  
  26.  document.write(news['jingdian'][J]+'<br>');  
  27.    
  28. }  
  29. document.write('<hr>');  
  30.   
  31. function get_jingdian(id){  
  32.  //document.write(id);  
  33.  //alert('id:'+id);  
  34.  var str='';  
  35.  for (var j in jingdian){  
  36.   if(j==id){  
  37.    //alert(j+'----'+id);  
  38.    for (j2 in jingdian[id]){  
  39.     str+='<a href='+j2+'>'+jingdian[id][j2]+'('+j2+')</a> ';  
  40.    }  
  41.   }  
  42.  }  
  43.   
  44.   
  45. return str;  
  46. }  
  47.   
  48.   
  49. </script>  
分享到:
评论

相关推荐

    JavaScript实现Array(数组)和Map

    JavaScript数组可以包含任意类型的值,包括数字、字符串、对象等。此外,JavaScript提供了一系列内置方法来操作数组,如push()用于在数组末尾添加元素,pop()用于移除末尾元素,slice()用于提取数组的一部分,concat...

    js获取对象,数组所有属性键值(key)和对应值(value)的方法示例

    在JavaScript编程中,获取对象和数组的属性键值(key)和对应值(value)是一项基本操作。本文将详细介绍如何实现这一功能,并提供相应的代码示例。 首先,我们需要理解JavaScript中的对象和数组。对象是一种键值对...

    Javascript数组Array基础介绍_.docx

    Javascript 数组 Array 基础介绍 在 JavaScript 中,数组是一种特殊的对象,它们拥有独特的特性。在介绍数组之前,我们需要了解什么是数组。数组是一种类数组的对象,它们拥有对象的特性。当属性名是小而连续的整数...

    javascript中数组、对象

    同时,许多工具如`lodash`和`underscore.js`提供了丰富的实用函数,如`_.forEach`、`_.map`、`_.find`等,用于简化数组和对象的操作。 **四、数组操作整理** 文档"Javascript数组操作整理.doc"可能包含了对数组...

    JavaScript 实现Array(数组)和Map

    JavaScript数组提供了丰富的内置方法,如push、pop、shift、unshift、slice、splice、concat、indexOf、join等,这些方法极大地提高了我们处理数组的效率。在`array.js`文件中,可能会包含对这些方法的自定义实现...

    JavaScript【数组和对象(1)】

    数组和对象是JavaScript中的基本数据结构,它们用于存储和处理数据。本篇将详细阐述JavaScript中的数组和对象。 一、数组 数组是有序的数据集合,可以存储任意类型的值,包括数字、字符串、对象等。在JavaScript中...

    javascript 对象数组根据对象object key的值排序

    在JavaScript中,对对象数组进行排序是一项常见的任务。在给定的标题和描述中,我们看到作者分享了一个实现根据对象属性值对数组排序的方法。这个方法适用于数组中的每个元素都是一个对象,且需要根据对象的某个键...

    从C ++创建JavaScript数组和其他对象

    本主题探讨的是如何从C++代码中创建JavaScript数组和其他对象,并将这些对象传递给JavaScript环境。这个过程通常涉及到诸如Windows API、ATL(Active Template Library)、WTIL(Windows Template Library)以及COM...

    详解vue 数组和对象渲染问题

    在Vue.js中,数组和对象的渲染问题是开发者经常会遇到的挑战。Vue的响应式系统依赖于数据劫持来实现视图与数据的双向绑定。当数组或对象的属性发生变化时,视图通常会自动更新以反映这些变化。然而,由于JavaScript...

    详谈js中数组(array)和对象(object)的区别

    •object 类型: ◦ 创建方式: /*new 操作符后面Object构造函数*/ var person = new Object(); person.name = "lpove";...◦ 比如有一个数组a=[1,2,3,4],还有一个对象a={0:1,1:2,2:3,3:4},然后你运行a

    JavaScript 对象与数组参考大全

    以及与其相关的属性方法,以及事件处理程序,还注明了该对象或数组的父对象用户同样可能需要参考Online Companion中的超级文本Object Hierarchy页面(http://www.netscapepress.com/support/javascript/10-9.htm),以便...

    js数组的深拷贝

    在JavaScript中,数组的深拷贝是一个常见的需求,它涉及到数据结构的复制,尤其是在处理复杂对象和嵌套数据时。深拷贝与浅拷贝不同,浅拷贝只是复制引用,而深拷贝会创建一个新的对象,包含原始数组的所有元素,并...

    Javascript数组Array基础介绍

    本文只是对JavaScript数组Array的基础介绍,后续的内容会更深入地探讨数组的各种方法和高级特性,帮助开发者更好地理解和运用这一强大的工具。在JavaScript的世界里,不断学习和探索,你会发现更多的魅力。

    JS实现的Object数组去重功能示例【数组成员为Object对象】

    本文将深入探讨如何实现一个JS函数来去除成员为Object对象的数组中的重复项。 首先,我们来看标题提到的核心函数`distinct_arr_element`。这个函数接受一个数组作为参数,其目的是在数组中移除所有重复的Object对象...

    把数组和自定义对象转换成字符串.pdf

    为了实现这个功能,我们可以使用一个名为`objectsArraysStrings.js`的脚本库,它包含了一系列的转换函数,如`object2String()`和`array2String()`。 `object2String()`函数用于将自定义对象转换为字符串。它遍历...

    ES6基础之数组和对象的拓展实例详解

    ES6(ECMAScript 2015)是...ES6在数组和对象方面的拓展,极大地方便了JavaScript开发者在实际开发中的需求,提高了代码的可读性和编写效率。通过学习和运用这些新特性,可以更加高效地编写现代JavaScript代码。

    JavaScript数组对象JSON学习笔记

    ### JavaScript 数组对象 JSON 学习笔记 #### 一、JavaScript 数组操作 在 JavaScript 中,数组是一种常用的数据结构,用于存储多个值。本部分主要介绍如何创建数组、访问数组元素以及对数组进行各种操作。 #####...

    element vue Array数组和Map对象的添加与删除操作

    首先,我们需要了解Vue中数组和对象的响应式更新原则。在Vue中,直接设置数组的索引或者改变对象的属性是无法触发视图更新的,因为Vue无法检测到这些操作。为了解决这个问题,Vue提供了一个全局方法Vue.set,可以...

    JavaScript视频教程-5.数组和对象(1)

    本教程将深入讲解JavaScript中的数组和对象,这是编写高效、可维护代码的基础。 数组在JavaScript中是有序的数据集合,可以存储任意类型的值,包括数字、字符串、对象甚至函数。数组的索引是从0开始的,这意味着一...

Global site tag (gtag.js) - Google Analytics