狭义的对象（object）和数组（array）

一、狭义的对象（object）

1、概述

键名和键值
- 对象的所有键名都是字符串（ES6 又引入了 Symbol 值也可以作为键名）。
- 对象的每一个键名又称为“属性”（property），它的“键值”可以是任何数据类型。如果一个属性的值为函数，通常把这个属性称为“方法”，它可以像函数那样调用。
- 如果属性的值还是一个对象，就形成了链式引用。
- 属性可以动态创建，不必在对象声明时就指定。
对象的引用
- 如果不同的变量名指向同一个对象，那么它们都是这个对象的引用，也就是说指向同一个内存地址。修改其中一个变量，会影响到其他所有变量。

var o1 = {};
var o2 = o1;

o1.a = 1;
o2.a // 1

o2.b = 2;
o1.b // 2

- 此时，如果取消某一个变量对于原对象的引用，不会影响到另一个变量。

var o1 = {};
var o2 = o1;

o1 = 1;
o2 // {}

判断是语句还是表达式
- 总结就是：放在小括号中的是表达式，否则是语句（代码块）。

{ foo: 123 } // 代码块

{ console.log(123) } // 123 代码块

({ foo: 123 }) // 正确 表达式
({ console.log(123) }) // 报错 表达式

2、属性操作

属性读取

// 请注意，如果使用方括号运算符，键名必须放在引号里面，否则会被当作变量处理。

var foo = 'bar';

var obj = {
  foo: 1,
  bar: 2
};

obj.foo  // 1
obj[foo]  // 2

属性查看

// 查看一个对象本身的所有属性，可以使用Object.keys方法。

var obj = {
  key1: 1,
  key2: 2
};

Object.keys(obj);
// ['key1', 'key2']

属性删除：delete命令

// delete命令用于删除对象的属性，删除成功后返回true。

var obj = { p: 1 };
Object.keys(obj) // ["p"]

delete obj.p // true
obj.p // undefined
Object.keys(obj) // []

属性是否存在：in运算符
- in运算符用于检查对象是否包含某个属性（注意，检查的是键名，不是键值），如果包含就返回true，否则返回false。它的左边是一个字符串，表示属性名，右边是一个对象。
- in运算符的一个问题是，它不能识别哪些属性是对象自身的，哪些属性是继承的。就像上面代码中，对象obj本身并没有toString属性，但是in运算符会返回true，因为这个属性是继承的。
- 这时，可以使用对象的hasOwnProperty方法判断一下，是否为对象自身的属性。

var obj = { p: 1 };
'p' in obj // true
'toString' in obj // true

var obj = {};
if ('toString' in obj) {
  console.log(obj.hasOwnProperty('toString')) // false
}

属性遍历：for...in循环
- for...in循环用来遍历一个对象的全部属性。
- 它遍历的是对象所有可遍历（enumerable）的属性，会跳过不可遍历的属性。它不仅遍历对象自身的属性，还遍历继承的属性。
- 一般情况下，都是只想遍历对象自身的属性，所以使用for...in的时候，应该结合使用hasOwnProperty方法，在循环内部判断一下，某个属性是否为对象自身的属性。

var obj = {a: 1, b: 2, c: 3};

for (var i in obj) {
  console.log('键名：', i);
  console.log('键值：', obj[i]);
}
// 键名： a
// 键值： 1
// 键名： b
// 键值： 2
// 键名： c
// 键值： 3

var person = { name: '老张' };

for (var key in person) {
  if (person.hasOwnProperty(key)) {
    console.log(key);
  }
}
// name

二、数组（object）

1、定义

任何类型的数据，都可以放入数组，包括狭义的对象、数组和函数

2、数组的本质

本质上，数组属于一种特殊的对象。typeof运算符会返回数组的类型是object。
数组的特殊性体现在，它的键名是按次序排列的一组整数（0，1，2...）。
由于数组成员的键名是固定的（默认总是0、1、2...），因此数组不用为每个元素指定键名，而对象的每个成员都必须指定键名。

3、length属性

length属性是可写的。如果人为设置一个小于当前成员个数的值，该数组的成员数量会自动减少到length设置的值。
清空数组的一个有效方法，就是将length属性设为0。
如果人为设置length大于当前元素个数，则数组的成员数量会增加到这个值，新增的位置都是空位。
值得注意的是，由于数组本质上是一种对象，所以可以为数组添加属性，但是这不影响length属性的值。

var a = [];

a['p'] = 'abc';
a.length // 0

a[2.1] = 'abc';
a.length // 0
// 上面代码将数组的键分别设为字符串和小数，结果都不影响length属性。因为，length属性的值就是等于最大的数字键加1，而这个数组没有整数键，所以length属性保持为0。

4、in运算符

检查某个键名是否存在的运算符in，适用于对象，也适用于数组。
如果数组的某个位置是空位，in运算符返回false。

5、for...in 循环和数组的遍历

for...in循环不仅可以遍历对象，也可以遍历数组。
for...in不仅会遍历数组所有的数字键，还会遍历非数字键。

6、数组的空位

使用delete命令删除一个数组成员，会形成空位，并且不会影响length属性。

var a = [1, 2, 3];
delete a[1];

a[1] // undefined
a.length // 3

数组的某个位置是空位，与某个位置是undefined，是不一样的。如果是空位，使用数组的forEach方法、for...in结构、以及Object.keys方法进行遍历，空位都会被跳过。
如果某个位置是undefined，遍历的时候就不会被跳过。

7、类似数组的对象

如果一个对象的所有键名都是正整数或零，并且有length属性，那么这个对象就很像数组，语法上称为“类似数组的对象”（array-like object）。
数组的slice方法可以将“类似数组的对象”变成真正的数组。
```
var arr = Array.prototype.slice.call(arrayLike);
```
除了转为真正的数组，“类似数组的对象”还有一个办法可以使用数组的方法，就是通过call()把数组的方法放到对象上面；

// forEach 方法
function logArgs() {
  Array.prototype.forEach.call(arguments, function (elem, i) {
    console.log(i + '. ' + elem);
  });
}
// 注意，这种方法比直接使用数组原生的forEach要慢，所以最好还是先将“类似数组的对象”转为真正的数组，然后再直接调用数组的forEach方法。
var arr = Array.prototype.slice.call('abc');
arr.forEach(function (chr) {
  console.log(chr);
});
// a
// b
// c

posted @ 2021-07-07 21:17 祖心阅读(897) 评论(0) 收藏举报

刷新页面返回顶部

祖心

狭义的对象（object）和数组（array）

公告