首页 > 资讯 > 前端开发 > JavaScript >拿捏javascript对象增删改查应用及示例

275

分享到

拿捏javascript对象增删改查应用及示例

2024-04-02 19:04:59 275人浏览安东尼

摘要

目录什么是对象？为什么需要对象？创建对象的三种方式利用对象字面量创建对象利用new关键字创建对象利用构造函数创建对象new关键字的执行过程对象属性的增删改查(和py的字典类似)增删改

什么是对象？

嘿！这还用问吗？对象不就是“你的女朋友” 嘛！，或许你以为我在胡说，但事实上确实就是。
看完下面这个定义，你就知道我说的对不对了…

现实生活中：万物皆对象，对象是一个具体的事物，看得见摸得着的实物。如，一本书、一辆汽车、一个人都可以是"对象”，一个数据库、一张网页、一个与远程服务器的连接也可以是“对象”。

在 javascript 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。

对象是由属性和方法组成的。

属性：事物的特征，在对象中用属性来表示（常用名词）
方法：事物的行为，在对象中用方法来表示（常用动词）

为什么需要对象？

为什么需要“对象”？是为了化解你的孤独与寂寞嘛，拜托老兄，不要那么肤浅好嘛！

找对象其他的不说，但她一定有一个作用：她能使你更加完整！

不信你看：

保存一个值时，可以使用变量，保存多个值（一组值）时，可以使用数组(对比python中的列表）。如果要保存一个人的完整信息呢？

例如，将“张三”的个人的信息保存在数组中的方式为：

var arr= [‘张三’，‘男’,168,154];

这样确实存储了数据，但你是不是感觉他还不太完整！你知道168,154分别是什么吗？这时候对象的作用就体现出来了。

js 中的对象用{ }表示（对比Python中的字典），表达结构更清晰，更强大。

var obj = {
          name:'张三',
          sex:'男',
          height:168,
          weight:154,
          fun:function(){
              console.log("我是张三！");
          }
      }

里面的属性或者方法我们采取键值对的形式键属性名：值属性值
多个属性或者方法中间用逗号隔开的。
方法冒号后面跟的是一个匿名函数。

创建对象的三种方式

利用对象字面量创建对象

**对象字面量：**就是花括号{}，里面包含了表达这个具体事务（对象）的属性和方法。

	var obj_1 = {}; //创建了一个空的对象

利用 new 关键字创建对象

  var obj_2 = new Object(); //创建了一个空的对象

利用构造函数创建对象

为什么需要构造函数呢？

 var zhang = {
          name:'张三',
          sex:'男',
          height:168,
          weight:154,
          fun:function(){
              console.log("我是张三！");
          }
      }
      console.log(zhang);

      var li = {
          name:'李四',
          sex:'男',
          height:176,
          weight:154,
          fun:function(){
              console.log("我是李四！");
          }
      }
      console.log(li);

可以看到，我们用前面两种创建方法对象，如果需要多一点且属性和方法大都相同的对象时，这样一个一个创建就显得十分麻烦。

因此，我们可以利用函数的方法，重复这些相同的代码，我们把这个函数就叫做构造函数。

构造函数：是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与 new 运算符一起使用。我们可以把对象中一些公共的属性和方法油取出来，然封装到这个函数里面。

通俗的说：构造函数就是把我们对象里面的一些相同的属性和方法抽象出来封装到函数里面。

//构造函数的语法格式
function 构造函数名（）{<!--{C}%3C!%2D%2D%20%2D%2D%3E-->
      this.属性 = 值；
      this.方法 = function () { }
}
new 构造函数名 ();

function Star(name,age,sex){
        this.name = name;
        this.age = age;
        this.sex = sex;
    }
    var hg = new Star('胡歌',35,'男');  //调用函数返回的是一个对象
    console.log(hg);
    var ldh = new Star('刘德华',50,'男');

在这里插入图片描述

这样创建对象就方便多了。

注：

1．构造函数名字首字母要大写。
2．我们构造函数不需要 return 就可以返回结果。
3．我们调用构造函数必须使用new 。
4．我们只要 new Star (）调用函数就创建一个对象。

new关键字的执行过程

new 在执行时会做四件事情：

1．在内存中创建一个新的空对象。
2．让 this 指向这个新的对象。
3．执行构造函数里面的代码，给这个新对象添加属性和方法。
4．返回这个新对象（所以构造函数里面不需要 return )。

对象属性的增删改查(和py的字典类似)

增

var obj_1 = {}  //创建了一个空的对象
      //添加属性及值
      obj_1.name = 'aniu'; 
      obj_1.sex = '男';
      console.log(obj_1);

在这里插入图片描述

删

用关键字delete

var zhang = {
          name:'张三',
          sex:'男',
          height:168,
          weight:154,
          fun:function(){
              console.log("我是张三！");
          }
      }
      delete zhang.weight;  // 删除对象的体重
      console.log(zhang);

在这里插入图片描述

改

直接对属性赋新值就可以

 var li = {
          name:'李四',
          sex:'男',
          height:176,
          weight:154,
          fun:function(){
              console.log("我是李四！");
          }
      }
      li.sex = '女'; // 修改对象的性别
      console.log(li);

在这里插入图片描述

查

属性：

console.log(li.name); //法一
console.log(li[‘sex’]); //法二

调用方法:

li.fun()

var li = {
          name:'李四',
          sex:'男',
          height:176,
          weight:154,
          fun:function(){
              console.log("我是李四！");
          }
      }
      console.log(li.name); //法一
      console.log(li['sex']); //法二
      li.fun();  //调用方法
    function Star(name,age,sex){
        this.name = name;
        this.age = age;
        this.sex = sex;
        this.work = function(work){
            console.log(work);
        }
    }
    var hg = new Star('胡歌',35,'男');  //调用函数返回的是一个对象
    hg.work("仙剑"); //调用方法

在这里插入图片描述

总之，这些crud操作和python中的字典十分的相似，很容易上手。

遍历对象

var li = {
          name:'李四',
          sex:'男',
          height:176,
          weight:154,
      }
      console.log(li.name);
      console.log(li.sex);
      console.log(li.height);
      console.log(li.weight);

像这样输出对象的属性值很麻烦，因此可以用遍历。

for … in 语句用于对数组或者对象的属性进行循环操作

var li = {
          name:'李四',
          sex:'男',
          height:176,
          weight:154,
      }
      for (var k in li){
          console.log(k); //k 变量 输出得到的是属性名
          console.log(li[k]);  // obj[k] 输出得到的是属性值
      }

在这里插入图片描述

结语

对我而言，学过py, 5分钟就掌握了，你学废了吗？

以上就是javascript对象的应用示例拿捏的详细内容，更多关于javascript对象应用的资料请关注编程网其它相关文章！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 拿捏javascript对象增删改查应用及示例

本文链接: https://www.lsjlt.com/news/142462.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

拿捏javascript对象增删改查应用及示例

目录什么是对象？为什么需要对象？创建对象的三种方式利用对象字面量创建对象利用new关键字创建对象利用构造函数创建对象new关键字的执行过程对象属性的增删改查(和py的字典类似)增删改...

99+

2024-04-02
javascript对象的增删改查怎么实现

小编给大家分享一下javascript对象的增删改查怎么实现，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！什么是对象？嘿！这还用问吗？对象不就是“你的女朋友” 嘛！，或许你以为我在胡说，但事实上确实就是。看完下面这个定义，...

99+

2023-06-29
JavaScript 防篡改对象的用法示例

目录javascript防篡改对象1、不可扩展对象2、密封的对象3、冻结的对象javascript防篡改对象这个东西吧，用到的很少，个人感觉用处不大，但是，可以作为装逼的利器，哈...

99+

2024-04-02
JS操作对象数组实现增删改查实例代码

1.介绍最近帮朋友弄一个简单的针对json数组的增删改成页面，正好涉及到了js去操作对象数组实现增删改查功能。我估计很多朋友应该也会遇到这类操作，所以记录一下以便分享。 2.数据...

99+

2024-04-02
ElementUI嵌套页面及关联增删查改实现示例

目录前言一、ElementUI如何在原有页面添加另外一个页面并实现关联增删查改？二、实现步骤前言本文大概内容：例如：随着ElementUI前后端交互的技术的更新，用户的的体验越来越...

99+

2024-04-02
使用JavaScript 怎么对MongoDB进行增删查改操作

本篇文章给大家分享的是有关使用JavaScript 怎么对MongoDB进行增删查改操作，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。Inse...

99+

2024-04-02
JavaScript对象特性与实践应用的示例分析

小编给大家分享一下JavaScript对象特性与实践应用的示例分析，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！JavaScript 的简单数据类型是数字、字符串、布尔值（true/fal...

99+

2024-04-02
使用springboot整合mybatis-plus实现数据库的增删查改示例

1、准备数据库中的表及表中的数据 ; ; ; ; ; ; CREATE DATABASE `mp` ; USE `mp`; DROP TABLE IF ...

99+

2024-04-02
Mybatis Plus使用条件构造器增删改查功能的示例分析

这篇文章主要介绍Mybatis Plus使用条件构造器增删改查功能的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！java后端层级结构Controller 接口层接口层比较好理解，它是面向web网络的接口，使...

99+

2023-06-15
JS基于设计模式中单例模式实现封装对数据增删改查功能的示例分析

这篇文章给大家分享的是有关JS基于设计模式中单例模式实现封装对数据增删改查功能的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。单例模式单例模式的核心结构中只包含一个被称为...

99+

2024-04-02