流年似水博客开通了,本站主要是写关于Web和大数据方面内容,正在更新中,欢迎大家光临!
  1. 文章:97 篇
  2. 总浏览:69,674 次
  3. 评论:22条
  4. 最后更新:2020-06-08
  5. 分类目录:39 个

你不知道的对象处理方法

Javascript l, xy 529℃ 0评论


前言

在编程的道路上我们经常会遇到各种各样的Object以及Array处理,使用最多的可能就是for 循环,但这不是最优的方法,我整理了一些方法。

1、JSON对象排序

 var areaList= [{
            id: '007',
            type: "广州"
        }, {
            id: '005',
            type: "深圳"
        }, {
            id: '008',
            type: "东莞"
        }, {
            id: '003',
            type: "中山"
        }, {
            id: '002',
            type: "深圳"
        }, {
            id: '006',
            type: "佛山"
        }];

areaList按照 东莞佛山广州深圳中山   进行排序

方法:

 var compete = ["东莞", "佛山", "广州", "深圳", "中山"];
 var relute = areaList.sort(function(a, b) {
    return compete.indexOf(a.type) - compete.indexOf(a.type);
 })

解:结合Array的sort方法,返回compete定义的顺序。


2、检测JSON对象中是否存在某值

检测id为"002"的值在areaList是否存在:

var exist = areaList.some(function(item) {
   return item.id == "002"
}, this)

解:如果areaList中存在id为"002"的值,exist将返回true。

或者你想拿到这个id为"002"的对象,那么也可以这么做

var filter = areaList.filter(function(item) {
    return item.id == "002"
})


解:filter将返回id为"002"的对象

3、合并对象

这里涉及到一个概念:浅拷贝和深拷贝

1>浅拷贝和深拷贝

浅拷贝:

var obj1 = { a: 1, b: 2, c: 3 }
var obj2 = obj1;
obj2.b = 4;

结果:

obj1: {a: 1, b: 4, c: 3}
obj2: {a: 1, b: 4, c: 3}

只改变arr2,但是arr1也跟着改变了,这就是浅拷贝。引用类型的复制,两个引用类型的指针都指向同一个堆内存。

深拷贝:使用JSON.parse实现

var obj1 = { a: 1, b: 2, c: 3 }
var obj2 = JSON.parse(JSON.stringify(obj1));
obj2.b = 4;

结果:

obj1: {a: 1, b: 2, c: 3}
obj2:{a: 1, b: 4, c: 3}

改变arr2并没有影响arr1,实现深拷贝。

2>合并对象

实现1:

 var target = { a: 1, b: 2 };
 var source = { b: 4, c: 5 };
 var result = Object.assign(target, source);

结果:

result: {a: 1, b: 4, c: 5}

官方定义:Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

解:如果目标对象中的属性具有相同的键,前者将会被后者覆盖掉。

Object.assign()是深拷贝还是浅拷贝呢?我们写个例子试一下

 var obj1 = {
              a: 1,
              b: {
                c: 0
             }
           }
 var obj2 = Object.assign({}, obj1);
 obj2.a = 10;
 obj2.b.c = 4;

结果:

obj1:{a: 1, b: {c:4}}
obj2:{a: 10, b: {c:4}}

obj1.b受影响了,Object.assign()事实上只是深拷贝了一层,拷贝的属性值,假如源对象的属性值是一个对象的引用,那么它也只指向那个引用,类似的方法还有sliceconcatArray.from...

实现2:

jquery实现

 var obj1 = {  a: 1, b: 2 };
 var obj2 = { b: 4, c: 5 }; 
 $.extend(obj1, obj2);

实现3:

es6实现

 var target = {  a: 1,   b: 2 };
 var source = {  b: 4, c: 5 };      
 var result = {...target, ...source }

4、使用map过滤需要参数

let userlist = [{
   "id": 1,
   "name": "小明",
   "gender": "1"
   }, {
    "id": 2,
    "name": "小美",
    "gender": "2"
   }, {
    "id": 3,
    "name": "安娜",
    "gender": "2"
   }, {
    "id": 4,
    "name": "壮壮",
    "gender": "1"
   }]
   var mapResult = userlist.map(function(item) {
      return item.name;
   })

结果:

mapResult: ["小明", "小美", "安娜", "壮壮"]

es6箭头函数可以这样:

 var mapResult = userlist.map(item => item.name)

若是返回name和id呢?

var mapResult = userlist.map(function(item) {
    return {
      "id": item.id,
      "name": item.name
   };
})

或者es6实现

 var mapResult = userlist.map(item => ({
     "id": item.id,
     "name": item.name
 }));


最后,文章总结就到这里,后续若有新的思绪,会再次更新,欢迎关注啊

转载请注明:流年似水 » 你不知道的对象处理方法

喜欢 (0)or分享 (0)

Warning: copy(https://cn.gravatar.com/avatar/?s=54&d=%2Fwp-content%2Fthemes%2Fyusi1.0%2Fimg%2Fdefault.png&r=g): failed to open stream: HTTP request failed! HTTP/1.1 400 Bad Request in /usr/share/nginx/html/timewentby/wp-content/themes/yusi1.0/functions.php on line 239

Warning: copy(/wp-content/themes/yusi1.0/img/default.png): failed to open stream: No such file or directory in /usr/share/nginx/html/timewentby/wp-content/themes/yusi1.0/functions.php on line 243
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址