zoukankan      html  css  js  c++  java
  • web前端项目中遇到的一些问题总结(08.23更新)

    个人网站 https://iiter.cn 程序员导航站 开业啦,欢迎各位观众姥爷赏脸参观,如有意见或建议希望能够不吝赐教!

    写一些最近工作中Vue项目中遇到的问题。

    巴啦啦小魔仙,污卡拉,全身变,小本本,出来吧!

    会不定期更新,所以建议收藏。

    1.获取一个对象的键(key)

    在某种特定需求下(未知的Object类型数据),我们想拿到这个未知对象中第一个元素的键(也就是newData)。代码如下

    var obj = {
            newData: {
                name: "二狗",
                value: 250
            }
        }

    Object.keys()方法,接受一个object类型的参数,返回的是一个数组,数组内容是当前对象所有的键(key)

    因此这个时候我们使用Object.keys(obj)[0]即可获取到上面代码中未知对象中的第一个元素的键(也就是newData),我们console打印一下,安排!

    打印结果:

    2.判断一个元素是否属于当前对象(是否在此对象中)

    我们曾接触过如何判断一个元素是否属于当前数组,其中for循环、forEach、some、map等各种优秀的数组的方法都可轻松解决我们的需求。可当目标换成对象之后,我们该怎么判断这个元素是否属于当前对象呢?依旧用之前的代码,如下

    这个时候,我们想判断已知newData是否属于obj

    /*后台接收到的值   假装看不见*/
    var obj = {
      newData: {
        name: "二狗",
        value: 250
      }
    };
    /*后台接收到的值   假装看不见*/
    
    
    
    /*已知的元素*/
    var newData = {
      name: "二狗",
      value: 250
    };
    

    key in Object用来判断一个元素是否属于当前对象。key为键值对的键,字符串类型,Object为对象类型。返回一个布尔值。例如"newData" in obj,返回true。

     打印结果:


    3.对一个数组对象中的某个属性进行排序,返回一个新的数组对象

    如下图,我们想对当前obj数组对象中的age属性进行从小到大的排序,返回一个新的数组对象。

    var obj = [
      {
        name: "四狗",
        age: 10
      },
      {
        name: "大狗",
        age: 30
      },
      {
        name: "三狗",
        age: 15
      },
      {
        name: "二狗",
        age: 18
      }
    ];
    

     sort() 方法用于对数组的元素进行排序。

    我们都知道,利用sort方法可以用来对数组中的元素进行排序,引用的是当前数组,返回的是一个新数组。在这里,我们就可以使用一个sort排序函数来实现我们想要的功能。代码如下:

    obj.sort(function(a,b){
      return a.age - b.age
    })

    打印结果:

     

    扩展:数据如下,提出这样一个需求,obj数组对象按height属性从小到大排序,如果height相同,则按age从小到大排序

    var obj = [{
          name: "四狗",
          age: 10,
          height: 80
        },
        {
          name: "大狗",
          age: 30,
          height: 160
        },
        {
          name: "三狗",
          age: 15,
          height: 80
        },
        {
          name: "二狗",
          age: 18,
          height: 100
        }
      ]

    依旧使用我们的sort函数扩展 ,代码如下:

    obj.sort(function (a, b) {
        if (a.height !== b.height) {
          return a.height - b.height;
        } else {
          return a.age - b.age;
        }
      })

    打印结果:

    4.深拷贝和浅拷贝

    浅拷贝只复制指向某个对象的指针,而不复制对象本身,新旧对象还是共享同一块内存。

    深拷贝会另外创造一个一模一样的对象,新对象跟原对象不共享内存,修改新对象不会改到原对象。

     浅拷贝:代码如下,我们定义了一个obj对象,和一个newObj对象,并让newObj的person等于指向obj对象(实则是将newObj的person属性指向obj对象的指针),所以改变newObj.person.name的值,实则是改变obj.name的值。

    var obj = {      
        id: 123,
        name: "二狗",
        address: "china"   
      }   
      var newObj = {}   
      newObj.person = obj;   //浅拷贝
      newObj.person.name = "三狗"   
      console.log(obj.name);  //打印三狗

    深拷贝 :代码如下,定义obj对象和newObj对象,在给newObje对象的person属性赋值的时候,我们用JSON.parse(JSON.stringify(obj))方法将obj深拷贝了一份,也就是说重新申请了一个空间,与原对象不共享内存,属于完全独立的存在,所以在改变newObj.person.name属性之后,obj.name是不会跟着发生改变的。

    var obj = {
            id:123,
            name:"二狗",
            address:"china"
        }
        var newObj = {}
        newObj.person = JSON.parse(JSON.stringify(obj));  //深拷贝 
        newObj.person.name="三狗"
        console.log(obj.name);// 打印二狗

     具体在业务中使用哪个,还得根据自己的业务需求。当然,深拷贝的方法也有很多个,这里只列出常用的一种方法,JSON.parse(JSON.stringify())

    推荐一首不久前在网易云音乐里Get√的一首纯音乐《寂静之声》,超赞,很适合撸代码的时候静静地听。

    人要是不给自己一点目标,真的是会越来越懒的啊。今天就这么多,下次再更吧23333。08.23

    这里有324.57GB的修仙资料。嘿嘿嘿你懂得。/手动狗头
    前端入坑全套教学视频
    那么问题来了,如果你也想入坑前端或者学习更多技术,广交天下朋友(基友),认识更多有趣的灵魂的话,欢迎加入前端交流群鸭~
    扫码加群哦
    扫二维码加为好友就完事了!安排~

  • 相关阅读:
    中产阶级_百度百科
    第二天--设置一个数据模型
    请大家支持珊瑚虫~~请大家帮帮soff~~
    Linux Socket学习(十二)
    Debian下调整时间
    Emacs 牵手 scim
    Linux Socket学习(十三)
    mplayer解码
    创建第一个Symfony工程
    页面的基本创建
  • 原文地址:https://www.cnblogs.com/twodog/p/11986174.html
Copyright © 2011-2022 走看看