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())