Array【数组】和Object【对象】的特性比较

Array【数组】和Object【对象】的特性比较
数组是JavaScript提供的一个内部对象,它是一个标准的集合,我们可以添加(push)、删除(shift)里面元素,我们还可以通过for循环遍历里面的元素。

那么除了数组我们在JavaScript里还可以有别的集合吗?

由于JavaScript的语言特性,我们可以向通用对象动态添加和删除属性。

所以Object也可以看成是JS的一种特殊的集合。

下面比较一下Array和Object的特性:



Array:

新建:var ary = new Array(); 或 var ary = [];

增加:ary.push(value);

删除:delete ary[n];

遍历:for ( var i=0 ; i < ary.length ; ++i ) ary[i];



Object:

新建:var obj = new Object(); 或 var obj = {};

增加:obj[key] = value; (key为string)

删除:delete obj[key];

遍历:for ( var key in obj ) obj[key];



从上面的比较可以看出Object完全可以作为一个集合来使用。

如果我们要在Array中检索出一个指定的值,我们需要遍历整个数组:

var keyword = “keyword”;
for ( var i=0 ; i < ary.length ; i++ ) {
  if ( ary[i] == keyword ) {
   // todo
  }
}

而我们在Object中检索一个指定的key的条目,只需要是要使用:

var key = “key”;
var value = obj[key];
// todo

Object的这个特性可以用来高效的检索Unique的字符串集合,遍历Array的时间复杂度是O(n),而遍历Object的时间复杂度是O(1)。

虽然对于10000次集合的for检索代价也就几十ms,可是如果是1000*1000次检索或更多,使用Object的优势一下就体现出来了。

对于集合的遍历效率(从高到低): var value = obj[key]; > for ( ; ; ) > for ( in ) 效率最差的就是for( in )了,如果集合过大,尽量不要使用for ( in )遍历。



posted @ 2013-08-24 13:15 前端攻城师-CZF 阅读(6) 评论(0) 编辑
JS数组操作
shift():删除原数组第一项,并返回删除元素的值;如果数组为空则返回undefined

var a = [1,2,3,4,5];
var b = a.shift();
//结果 a:[2,3,4,5] b:1

unshift():将参数添加到原数组开头,并返回数组的长度

var a = [1,2,3,4,5];
var b = a.unshift(-2,-1);
//结果 a:[-2,-1,1,2,3,4,5] b:7

//注:在IE6.0下测试返回值总为undefined,FF2.0下测试返回值为7,所以这个方法的返回值不可靠,需要用返回值时可用splice代替本方法来使用。

pop():删除原数组最后一项,并返回删除元素的值;如果数组为空则返回undefined

var a = [1,2,3,4,5];
var b = a.pop();
//结果:a:[1,2,3,4] b:5

push():将参数添加到原数组末尾,并返回数组的长度

var a = [1,2,3,4,5];
var b = a.push(6,7);
//结果 a:[1,2,3,4,5,6,7] b:7

concat():返回一个新数组,是将参数添加到原数组中构成的

var a = [1,2,3,4,5];
var b = a.concat(6,7);
//结果 a:[1,2,3,4,5] b:[1,2,3,4,5,6,7]

splice(start,deleteCount,val1,val2,...):从start位置开始删除deleteCount个元素,并从该位置起插入val1,val2,...

var a = [1,2,3,4,5];
var b = a.splice(2,2,7,8,9);
//结果 a:[1,2,7,8,9,5] b:[3,4]

var b = a.splice(0,1);
//结果同shift

a.splice(0,0,-2,-1); var b = a.length;
//结果同unshift

var b = a.splice(a.length-1,1);
//结果同pop

a.splice(a.length,0,6,7); var b = a.length;
//结果同push

reverse():将数组反序

var a = [1,2,3,4,5];
var b = a.reverse();
//结果 a:[5,4,3,2,1] b:[5,4,3,2,1]

sort(orderfunction):按指定的参数对数组进行排序

var a = [1,2,3,4,5];
var b = a.sort();
//结果 a:[1,2,3,4,5] b:[1,2,3,4,5]

slice(start,end):返回从原数组中指定开始下标到结束下标之间的项组成的新数组

var a = [1,2,3,4,5];
var b = a.slice(2,5);
//结果 a:[1,2,3,4,5] b:[3,4,5]

join(separator):将数组的元素组起一个字符串,以separator为分隔符,省略的话则用默认用逗号为分隔符

var a = [1,2,3,4,5];
var b = a.join("|");
//结果 a:[1,2,3,4,5] b:"1|2|3|4|5"
<think>我们讨论的是“数组对象对象数组”这两个概念。根据引用内容,我们可以这样理解: 1. **数组对象**:在JavaScript中,数组本身也是一种特殊的对象(关联数组)。引用[1]明确指出:“在Javascript语言中,关联数组就是对象对象就是关联数组。” 因此,数组对象可以理解为数组类型对象,即数组。 2. **对象数组**:指数组中的每个元素都是对象数组。引用[4]中给出了一个JSON数组的例子,实际上就是对象数组: ```javascript packJson = [ {"name":"zhang", "password":"123"}, {"name":"li", "password":"456"} ]; ``` ### 区别总结: - **数组对象**:强调数组本身是一个对象(因为JS中数组对象的一种)。 - **对象数组**:强调数组的内容由多个对象组成。 ### 操作示例: #### 1. 数组对象(即普通数组)的操作: ```javascript // 创建数组 const arr = [1, 2, 3]; // 添加元素(注意:虽然数组对象,可以添加属性,但这不是常规操作) arr.foo = 'bar'; // 但这样添加的属性不会影响数组长度(引用[1]的例子) // 常用数组方法 arr.push(4); // 末尾添加元素 arr.pop(); // 移除末尾元素 arr.map(x => x * 2); // 映射新数组 ``` #### 2. 对象数组的操作: ```javascript // 创建对象数组 const users = [ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' } ]; // 添加对象 users.push({ id: 3, name: 'Charlie' }); // 查找对象 const user = users.find(u => u.id === 2); // 返回 {id:2, name:'Bob'} // 修改对象 users[0].name = 'Alicia'; // 删除对象(按索引) users.splice(1, 1); // 删除索引为1的对象(Bob) // 遍历 users.forEach(user => console.log(user.name)); ``` ### JSON相关操作(引用[2][3][4]): - **JSON字符串 &harr; JSON对象(或对象数组)**: ```javascript // 对象数组转JSON字符串 const jsonStr = JSON.stringify(users); console.log(jsonStr); // '[{"id":1,"name":"Alice"},{"id":2,"name":"Bob"}]' // JSON字符串转对象数组 const parsedArray = JSON.parse(jsonStr); console.log(parsedArray[0].name); // 'Alice' ``` ### 注意事项: - 数组对象数组)可以使用数组方法(如`push`, `pop`, `map`等),也可以像对象一样添加属性(但不推荐,且不会影响数组长度)。 - 对象数组数组,因此可以使用数组的所有方法,但每个元素是对象,所以可以操作对象的属性。 - JSON数组本质上就是对象数组的字符串表示形式。 ### 常见问题解答: **Q: 如何判断一个变量是数组还是普通对象?** A: 使用`Array.isArray()`方法: ```javascript const arr = []; const obj = {}; console.log(Array.isArray(arr)); // true console.log(Array.isArray(obj)); // false ``` **Q: 对象数组如何按对象属性排序?** A: 使用`sort()`方法: ```javascript users.sort((a, b) => a.name.localeCompare(b.name)); // 按name排序 ``` **Q: 如何从对象数组中提取所有对象的某个属性?** A: 使用`map()`: ```javascript const names = users.map(user => user.name); // 得到所有名字的数组 ``` §§相关问题§§ 1. 如何合并两个对象数组? 2. 如何深度克隆一个对象数组? 3. 如何过滤对象数组中满足条件的对象? 4. JSON字符串JS对象的区别是什么?</think>### 数组对象 vs 对象数组:核心区别与操作指南 #### 本质区别 1. **数组对象 (Array Object)** - JavaScript 中的**数组本身就是一种特殊对象**(引用[1]) - 键名是自动生成的数字索引(0,1,2...) - 拥有数组特有的方法属性(如 `length`, `push()`) ```javascript const arr = [1, 2, 3]; console.log(typeof arr); // "object" console.log(arr.length); // 3 ``` 2. **对象数组 (Array of Objects)** - **元素为对象的常规数组** - 每个元素是独立的对象,拥有自己的键值对 ```javascript const users = [ {id: 1, name: "Alice"}, {id: 2, name: "Bob"} ]; ``` #### 关键差异对比 | 特性 | 数组对象 | 对象数组 | |--------------|--------------------------|------------------------------| | **本质** | 数组本身是对象 | 数组元素是对象 | | **键名类型** | 自动数字索引 | 自定义字符串键名(在元素内) | | **长度属性** | 有 `length` 属性 | 有 `length` 属性 | | **JSON表示** | 方括号包裹 `[1,2,3]` | 方括号包裹对象 `[{...}]` | | **典型操作** | `push()`, `pop()`, `map` | 对象属性访问 + 数组方法 | --- ### 常用操作示例 #### 1. 数组对象操作 ```javascript // 创建数组对象 const arr = ["a", "b", "c"]; // 添加元素(两种方式) arr.push("d"); // 末尾添加 arr[arr.length] = "e"; // 等效操作 // 遍历 arr.forEach((item, index) => { console.log(`索引 ${index}: ${item}`); }); // 转为类数组对象(显式键名) const arrObj = {...arr}; /* 结果: { 0: "a", 1: "b", 2: "c", 3: "d", 4: "e" } */ ``` #### 2. 对象数组操作 ```javascript // 创建对象数组 const users = [ {id: 1, name: "Alice", age: 25}, {id: 2, name: "Bob", age: 30} ]; // 添加新对象 users.push({id: 3, name: "Charlie", age: 28}); // 查找对象 const user = users.find(u => u.id === 2); console.log(user.name); // "Bob" // 修改对象属性 users[0].age = 26; // 提取所有属性值 const names = users.map(u => u.name); console.log(names); // ["Alice", "Bob", "Charlie"] ``` #### 3. JSON 转换(引用[3][4]) ```javascript // 对象数组 &rarr; JSON字符串 const jsonStr = JSON.stringify(users); /* 结果: '[{"id":1,"name":"Alice","age":26},{"id":2,"name":"Bob","age":30}]' */ // JSON字符串 &rarr; 对象数组 const parsedArray = JSON.parse(jsonStr); console.log(parsedArray[0].name); // "Alice" ``` --- ### 易混淆场景解析 1. **混合类型数组** ```javascript const mixed = [ "text", {key: "value"}, 123 ]; ``` - `mixed[0]` 是字符串(基本类型) - `mixed[1]` 是对象 - 此时数组同时包含基本类型对象类型元素 2. **类数组对象** ```javascript const arrayLike = { 0: "a", 1: "b", length: 2 }; // 转为真实数组 const realArray = Array.from(arrayLike); ``` --- ### 最佳实践建议 1. **数组对象使用场景**: - 存储同质化数据(如数字列表) - 需要利用数组原生方法(`filter/map/reduce`) 2. **对象数组使用场景**: - 处理结构化数据(如用户列表) - 需要按属性查询/筛选数据 - 与后端 API 交互(JSON 格式) 3. **类型检查技巧**: ```javascript // 检查是否为数组 Array.isArray(arr); // true // 检查数组元素是否为对象 users.every(item => typeof item === "object"); // true ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值