js对象的读取速度实例详解

关于“js对象的读取速度实例详解”，我会给出完整的攻略，以下是具体的内容：

1. 什么是js对象

JS对象是指在JS中可以通过{}或者new Object()定义出的对象，它是一个无序属性的集合，每个属性都是由属性名和属性值所组成。其中，属性名可以是字符串或者Symbol类型，属性值可以是任何JS数据类型。

2. js对象的读取速度

在JS编程中，对象的读取速度经常是一个值得关注的问题，在对象成员访问的时候如何进行快速读取变得非常重要，通常有一下几种方法：

• 直接使用对象属性
• 使用数组的下标
• 使用变量保存对象属性
• 使用对象属性的值作为属性名来访问对象中的属性

下面通过两个示例来查看这些读取对象的方法的效果，以及他们的优缺点。

3. 示例1

var arr = [];
for (let i = 0; i < 10000; i++) {
  arr.push({
    name: '小龙' + i,
    age: i + 18
  });
}

console.time('1.直接使用对象属性');
for (let i = 0; i < arr.length; i++) {
  let name = arr[i].name;
  let age = arr[i].age;
}
console.timeEnd('1.直接使用对象属性');

console.time('2.使用数组的下标');
for (let i = 0; i < arr.length; i++) {
  let name = arr[i]['name'];
  let age = arr[i]['age'];
}
console.timeEnd('2.使用数组的下标');

console.time('3.使用变量保存对象属性');
for (let i = 0; i < arr.length; i++) {
  let obj = arr[i];
  let name = obj.name;
  let age = obj.age;
}
console.timeEnd('3.使用变量保存对象属性');

console.time('4.使用对象属性的值作为属性名来访问对象中的属性');
for (let i = 0; i < arr.length; i++) {
  let name = arr[i]['name'];
  let age = arr[i]['age'];
}
console.timeEnd('4.使用对象属性的值作为属性名来访问对象中的属性');

在这个示例中，我们生成了一个非常大的数组（10000个对象），然后分别测试了4种不同的读取对象属性的方法，并记录了每种方法的耗时。

示例结果如下：

1.直接使用对象属性: 1.014ms
2.使用数组的下标: 1.035ms
3.使用变量保存对象属性: 0.58ms
4.使用对象属性的值作为属性名来访问对象中的属性: 0.659ms

通过这个例子，我们可以看出，方法3（使用变量保存对象属性）和方法4（使用对象属性的值作为属性名来访问对象中的属性）是最快的方法，而方法1（直接使用对象属性）和方法2（使用数组的下标）的速度则相对较慢。原因也很简单，在读取属性的时候，JS引擎需要执行大量的寻址计算，这时候将对象的引用保存到变量中可以减少计算消耗，并且使用属性值作为属性名直接访问对象属性可以最大限度的提高读取速度。

4. 示例2

接下来我们再来看一个使用对象属性的值作为属性名来访问对象中的属性的示例：

console.time('1.直接访问');
let obj = {
  name: '小龙',
  age: 24,
  weight: 70,
  high: 180
}
for (let i = 0; i < 1000; i++) {
  let name = obj.name;
  let age = obj.age;
  let weight = obj.weight;
  let high = obj.high;
}
console.timeEnd('1.直接访问');

console.time('2.使用变量访问');
let obj2 = {
  name: '小龙',
  age: 24,
  weight: 70,
  high: 180
}
for (let i = 0; i < 1000; i++) {
  let o = obj2;
  let name = o.name;
  let age = o.age;
  let weight = o.weight;
  let high = o.high;
}
console.timeEnd('2.使用变量访问');

console.time('3.使用属性值作为属性名访问');
let obj3 = {
  name: '小龙',
  age: 24,
  weight: 70,
  high: 180
}
for (let i = 0; i < 1000; i++) {
  let name = obj3['name'];
  let age = obj3['age'];
  let weight = obj3['weight'];
  let high = obj3['high'];
}
console.timeEnd('3.使用属性值作为属性名访问');

这个示例中，我们测试了三种不同的访问对象属性的方法，计算每种方法循环1000次时的总耗时

示例结果如下：

1.直接访问: 0.023ms
2.使用变量访问: 0.023ms
3.使用属性值作为属性名访问: 0.088ms

通过这个例子我们可以看出，直接访问对象属性和使用变量访问对象属性的速度几乎相同，并且比使用属性值作为属性名访问对象属性要快得多。这是因为属性值作为属性名来访问对象属性会使用额外的寻址计算，增加了额外的计算消耗，因此速度比直接访问和使用变量访问慢。