JavaScript对象的使用及存储方式的剖析

简介: JavaScript对象的使用及存储方式的剖析

对象的使用


遍历对象的属性


通过for…in语法可以遍历一个对象


var obj = {};
for (var i = 0; i < 10; i++) {
  obj[i] = i * 2;
}
for(var key in obj) {
  console.log(key + "==" + obj[key]);
}


删除对象的属性


function fun() { 
  this.name = 'mm';
}
var obj = new fun(); 
console.log(obj.name); // mm 
delete obj.name;
console.log(obj.name); // undefined


简单类型和复杂类型的区别


基本类型又叫做值类型,复杂类型又叫做引用类型


值类型:简单数据类型,基本数据类型,在存储时,变量中存储的是值本身,因此叫做值类型。


引用类型:复杂数据类型,在存储是,变量中存储的仅仅是地址(引用),因此叫做引用数据类型。


  • 堆和栈


堆栈空间分配区别:


  1. 栈(操作系统):由操作系统自动分配释放 ,存放函数的参数值,局部变量的值等。其操作方式类似于数据结构中的栈;


  1. 堆(操作系统): 存储复杂类型(对象),一般由程序员分配释放, 若程序员不释放,由垃圾回收机制回收,分配方式倒是类似于链表。


  • 注意:JavaScript中没有堆和栈的概念,此处我们用堆和栈来讲解,只是便于理解

基本类型在内存中的存储



复杂类型在内存中的存储



基本类型作为函数的参数



复杂类型作为函数的参数



// 下面代码输出的结果
function Person(name,age,salary) {
  this.name = name;
  this.age = age;
  this.salary = salary;
}
function f1(person) {
  person.name = "ls";
  person = new Person("aa",18,10);
}
var p = new Person("zs",18,1000);
console.log(p.name);
f1(p);
console.log(p.name);


案例1:图解对象的应用与消亡



<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>$永远的24k纯帅$</title>
  <script>
    function Person(name,age,salary)
    {
      this.name=name;
      this.age=age;
      this.salary=salary;
    }
    function  f1(person) {
      person.name="娃哈哈";
      person=new Person("李美丽","12","5000");
    }
    var p=new Person("油篓口","16","6000");
    console.log("名字是:"+p.name);
    f1 (p);
    console.log("名字是:"+p.name)
  </script>
</head>
<body>
</body>
</html>


案例2:判断输出的是什么


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>$永远的24k纯帅$</title>
  <script>
        var num1 = 10;
        var num2 = num1;
        num1 = 20;
        console.log(num1);//20
        console.log(num2);//10
        var num = 50;
        function f1(num) {
          num = 60;
          console.log(num);//60
        }
        f1(num);
        console.log(num);//50
      var num1 = 55;
      var num2 = 66;
      function f1(num, num1) {
        num = 100;
        num1 = 100;
        num2 = 100;
        console.log(num);//100
        console.log(num1);//100
        console.log(num2);//100
      }
      f1(num1, num2);
    console.log(num1);//55
    console.log(num2);//100
    console.log(num);// 报错
  </script>
</head>
<body>
</body>
</html>
相关文章
|
JavaScript 前端开发
如何在 JavaScript 中使用 __proto__ 实现对象的继承?
使用`__proto__`实现对象继承时需要注意原型链的完整性和属性方法的正确继承,避免出现意外的行为和错误。同时,在现代JavaScript中,也可以使用`class`和`extends`关键字来实现更简洁和直观的继承语法,但理解基于`__proto__`的继承方式对于深入理解JavaScript的面向对象编程和原型链机制仍然具有重要意义。
|
Web App开发 JavaScript 前端开发
如何确保 Math 对象的方法在不同的 JavaScript 环境中具有一致的精度?
【10月更文挑战第29天】通过遵循标准和最佳实践、采用固定精度计算、进行全面的测试与验证、避免隐式类型转换以及持续关注和更新等方法,可以在很大程度上确保Math对象的方法在不同的JavaScript环境中具有一致的精度,从而提高代码的可靠性和可移植性。
|
8月前
|
编解码 JavaScript 前端开发
【Java进阶】详解JavaScript的BOM(浏览器对象模型)
总的来说,BOM提供了一种方式来与浏览器进行交互。通过BOM,你可以操作窗口、获取URL、操作历史、访问HTML文档、获取浏览器信息和屏幕信息等。虽然BOM并没有正式的标准,但大多数现代浏览器都实现了相似的功能,因此,你可以放心地在你的JavaScript代码中使用BOM。
268 23
|
JSON 前端开发 JavaScript
JavaScript中对象的数据拷贝
本文介绍了JavaScript中对象数据拷贝的问题及解决方案。作者首先解释了对象赋值时地址共享导致的值同步变化现象,随后提供了五种解决方法:手动复制、`Object.assign`、扩展运算符、`JSON.stringify`与`JSON.parse`组合以及自定义深拷贝函数。每种方法都有其适用场景和局限性,文章最后鼓励读者关注作者以获取更多前端知识分享。
217 1
JavaScript中对象的数据拷贝
|
存储 JavaScript 前端开发
JavaScript中的数据类型以及存储上的差别
通过本文的介绍,希望您能够深入理解JavaScript中的数据类型及其存储差别,并在实际编程中灵活运用这些知识,以提高代码的性能和稳定性。
300 3
|
JavaScript 前端开发 图形学
JavaScript 中 Math 对象常用方法
【10月更文挑战第29天】JavaScript中的Math对象提供了丰富多样的数学方法,涵盖了基本数学运算、幂运算、开方、随机数生成、极值获取以及三角函数等多个方面,为各种数学相关的计算和处理提供了强大的支持,是JavaScript编程中不可或缺的一部分。
|
存储 JavaScript 前端开发
JavaScript 对象的概念
JavaScript 对象的概念
136 4
|
存储 JavaScript 前端开发
js中函数、方法、对象的区别
js中函数、方法、对象的区别
287 2
|
缓存 JavaScript 前端开发
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
197 1
|
JavaScript 前端开发 大数据
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
232 0