对象方法

Array.prototype.entries()

entries() 方法返回一个新的Array Iterator 对象，该对象包含数组中每个索引的键/值对

  1. let array = ["a","b","c"]
  2. let iterator = array.entries()
  4. for (let e of iterator){
  5.     console.log(e)
  6. }
  8. //[ 0, 'a' ]
  9.     [ 1, 'b' ]
  10.     [ 2, 'c' ]

实际应用

1.循环对象

for in

**for...in**语句以任意顺序遍历一个对象的除Symbol以外的可枚举属性。

  1. var obj = {a:1, b:2, c:3};
  3. for (var prop in obj) {   // prop即为 key
  4.   console.log("obj." + prop + " = " + obj[prop]);
  5. }
  7. // Output:
  8. // "obj.a = 1"
  9. // "obj.b = 2"
  10. // "obj.c = 3"

Object.keys() 和 Object.values()

传入对象，返回 包含对象可枚举属性和方法的数组

  1. var obj = {'a':'123','b':'345'};
  2. console.log(Object.keys(obj));  //['a','b']
  4. var obj1 = { 100: "a", 2: "b", 7: "c"};
  5. console.log(Object.keys(obj1)); // console: ["2", "7", "100"]
  1. var obj = {
  2.     '0': 'a',
  3.     '1': 'b',
  4.     '2': 'c'
  5. };
  6. Object.keys(obj).forEach(function (key) {
  7.     console.log(key, obj[key])
  8. });

如何判断一个对象是否为空
Object.keys(obj).length 通过对象的可枚举属性的个数来判断

2.对提交表单数据中的值进行不为空的判断

一般情况下只进行第一层的判断,也就是判断对象的值是否为空,遇到数组的情况下,可以单独抽出来进行处理

  1. obj ={
  2.     id:"",
  3.     list:[
  4.         {name:""}    
  5.     ],
  6.     data:{
  8.     }
  9. }

3.判断对象数组中是否存在某个对象

  • flag 方法

    1. //执行操作 push新数组进入 如果有存在的名称 则不进行push
    2. var ArrayList = [{
    3.   name: "1",
    4.   value: {}
    5. }, {
    6.   name: "2",
    7.   value: {}
    8. }, {
    9.   name: "3",
    10.   value: {}
    11. }]
    12. /*
    13. 传递参数 原数组 push内容  name
    14. */
    15. function pushArray(array, info, name) {
    16.   let flag = true
    17.   let result = array
    18.   result.forEach(item => {
    19.       if (item.name == name) {
    20.           flag = false
    21.           return
    22.       }
    23.   })
    24.   if (flag) {
    25.       result.push(info)
    26.   } else {
    27.       console.log("已经存在")
    28.   }
    29. }
    30. let info = {
    31.   name: "2",
    32.   value: {}
    33. }
    34. pushArray(ArrayList, info, "1") //已经存在

  • some 用法

    1. function pushArray(array, info, name) {
    2.   let result = array
    3.   let flag = result.some(item => {
    4.       return item.name === name
    5.   })
    6.   if (flag) {
    7.       console.log("已经存在")
    8.   } else {
    9.       result.push(info)
    10.   }
    11. }

4.对象数组根据某一属性查找对象

  1. 例子： 
  3. 在 array 数组中查找 name 是 zhangsan 的这个对象 
  5. let array = [{name: "zhangsan", age: 20}, {name: "lisi", age: 30}]

方法一：find

  1. [
  2.     {
  3.         id: 1,
  4.         name: 'a'
  5.     },
  6.     {
  7.         id: 2,
  8.         name: 'b'
  9.     },
  10. ].find(function (x) {
  11.     return x.id === 10
  12. })

方法二：组装新对象

  1.  list.forEach(function (item) {
  2.    selectObj[item.name] = item
  3.  })
  5. selectObj新对象结构为：
  7. {"zhangsan": {name: "zhangsan", age: 20}, "lisi": {name: "lisi", age: 30}},
  9. 通过selectObj[zhangsan]即可获取

5.优雅的取一个深度的值

https://segmentfault.com/q/1010000016285893

场景： 后台返回的对象中，我需要取出里面 student 的值，但是有可能后台返回给我的是 {school: null} 或者 {} 甚至是 undefined，因此我取值时可能是。如何优雅取值且不报错 Cannot read property ‘xxx’ of undefined 

  1. let student = obj?(obj.school?(obj.school.class1?(obj.school.class1.studnet?obj.school.class1.studnet:''):''):''):'';
  1. let obj = {
  2.     school: {
  3.       class1: {
  4.         student: 50
  5.       }
  6.     }
  7. }

解决

  2. function safeProps(func, defaultVal) {
  3.     try {
  4.         return func();
  5.     } catch (e) {
  6.         return defaultVal;
  7.     }
  8. }
  10. safeProps(function(){
  11.     student = obj.school.class1.student
  12. }, -1)

使用 lodash 库 lodash/get

  1. lodash/get
  2. _.get(obj,'school.class1.student', undefined)

6.从一个对象取部分属性给另一个对象

有一个很多属性的对象，我想取出其中部分属性给另一个对象，用了ES6的解构和对象的简写，发现还是有点蠢，需要的属性还是需要写两遍，想问问有没有更好的办法？

lodash _.pick 方法(推荐)

  1. var object = { 'a': 1, 'b': '2', 'c': 3 };
  3. _.pick(object, ['a', 'c']);
  4. // => { 'a': 1, 'c': 3 }

delete 方法

只适用于一层的数组，因为Object.assign 不是深拷贝，如果obj为 {a: 1, b: { c: 2 }}时，删除 obj2.b.c 时，obj.b.c 也会被删除为空对象

  1. let obj = { a: 1, b: 2, c: 3 };
  2. let obj2 = Object.assign({}, obj);
  3. delete obj2.b;
  4. console.log(obj); //{a: 1, b: 2, c: 3}
  5. console.log(obj2); // {a: 1, c: 3}

ES6 解构 

  1. var obj = {
  2.     a: 1,
  3.     b: 2,
  4.     c: 3,
  5.     d: 4,
  6.     e: 5
  7. }
  8. var {a, d, e} = obj
  9. var obj2 = {a, d, e}    
  12. //当不选的属性值比较少的情况，可以这种写法
  13. let {a, c, ...pick} = obj;
  14. console.log(pick);

reduce 封装方法(推荐)

  1. var obj = {
  2.   a: 1,
  3.   b: 2,
  4.   c: 3,
  5.   d: 4,
  6.   e: 5,
  7. };
  9. const pick = (obj, arr) =>
  10.   //   arr.reduce((iter, val) => (val in obj && (iter[val] = obj[val]), iter), {});
  11.   arr.reduce((iter, val) => {
  12.     if (val in obj) {
  13.       iter[val] = obj[val];
  14.     }
  15.     return iter;
  16.   }, {});
  18. let obj2 = pick(obj, ["a", "d", "e"]);
  19. console.log(obj2);

extend() 函数

  1. function extend(obj){
  2.     var o = {}
  3.     var attr = Array.prototype.slice.call(arguments).slice(1) // 截取需要的参数
  5.     attr.forEach((val,index)=>{
  6.         if(val in obj){
  7.             o[val] = obj[val]
  8.         }
  9.     })
  10.     return o
  11. }
  12. console.log(extend(obj, 'c', 'b'));

实际应用-补充

将数组里某个属性相同的对象合并成一个数组

根据指定属性，对对象数组中的对象进行分组

  1. let resData = [
  2.       {
  3.         "name": "住院医疗最高报销",
  4.         "tagName": "医疗",
  5.         "insuredAmount": "6000"
  6.       },
  7.       {
  8.         "name": "身故赔付",
  9.         "tagName": "寿险",
  10.         "insuredAmount": "36.00"
  11.       },
  12.       {
  13.         "name": "烦死了免费陈述事实",
  14.         "tagName": "寿险",
  15.         "insuredAmount": "8888.00"
  16.       },
  17.       {
  18.         "name": "你好，噜噜噜",
  19.         "tagName": "寿险",
  20.         "insuredAmount": "66.00"
  21.       },
  22.       {
  23.         "name": "120种重大疾病确诊赔付",
  24.         "tagName": "重疾",
  25.         "insuredAmount": "350000"
  26.       }
  27.     ]
  1. let Data = [
  2.       {
  3.         "tagName": "医疗",
  4.         dataInfo: [
  5.           {
  6.             "name": "住院医疗最高报销",
  7.             "tagName": "医疗",
  8.             "insuredAmount": "6000"
  9.           }
  10.         ]
  11.       },
  12.       {
  13.         "tagName": "寿险",
  14.         dataInfo: [
  15.           {
  16.             "name": "身故赔付",
  17.             "tagName": "寿险",
  18.             "insuredAmount": "36.00"
  19.           },
  20.           {
  21.             "name": "烦死了免费陈述事实",
  22.             "tagName": "寿险",
  23.             "insuredAmount": "8888.00"
  24.           },
  25.           {
  26.             "name": "你好，噜噜噜",
  27.             "tagName": "寿险",
  28.             "insuredAmount": "66.00"
  29.           },
  30.         ]
  31.       },
  32.       {
  33.         "tagName": "重疾",
  34.         dataInfo: [
  35.           {
  36.             "name": "120种重大疾病确诊赔付",
  37.             "tagName": "重疾",
  38.             "insuredAmount": "350000"
  39.           }
  40.         ]
  41.       }
  42.     ]
  1. let dataInfo = {}
  2. resData.forEach(item=>{
  3.     let {tagName} = item
  4.     // 如果该属性在对象中不存在 先开辟空间
  5.     if(!dataInfo[tagName]){
  6.         dataInfo[tagName] = {
  7.             tagName,
  8.             child:[]
  9.         }
  10.     }
  11.     dataInfo[tagName].child.push(item)
  12. })
  13. let list = Object.values(dataInfo)
  14. console.log(list)
  2. let tempArr = []
  3. let Data  =[] //最后的数据
  4. let temp = resData.forEach(item=>{
  5.     // 不存在
  6.     if(tempArr.indexOf(item.tagName) === -1){
  7.         Data.push({
  8.             tagName:item.tagName,
  9.             dataInfo: [item]
  10.         })
  11.         tempArr.push(item.tagName)
  12.     }else{
  13.         // 查找value
  14.         let id = Data.findIndex(value=>value.tagName === item.tagName)
  15.         Data[id].dataInfo.push(item)
  16.     }
  17. })

方案三：reduce

  1.  const result6 = arr6.reduce((acc,curr)=>{
  2.     const currentVal = curr['tagName']
  3.     if(!acc[currentVal]){
  4.         acc[currentVal] = []
  5.     }
  6.     acc[currentVal].push(curr)
  7.     return acc
  8. },{})
  9. console.log(result6)

拓展：展示形式为根据某个属性分组

  1. function arrGroup (arr, fn) {
  2.   const keyArr = [...new Set(arr.map(item => fn(item)))];
  3.   return keyArr.map(key => arr.filter(i => i.tagName === key));
  4. }
  5. let result6 = arrGroup(arr6,(item)=>item.tagName);
  6. console.log(result6);
  1. function arrGroup(arr, fn) {
  2.         const obj = {};
  3.         arr.forEach(item => {
  4.             const key = JSON.stringify(fn(item));
  5.             obj[key] = obj[key] || [];
  6.             obj[key].push(item)
  7.         });
  8.         return Object.keys(obj).map(k => {
  9.             return obj[k];
  10.         })
  11.     }
  13.     const newArr = arrGroup(list, (item) => item.tagName)
  14.     console.log(newArr)

https://blog.csdn.net/weixin_40805079/article/details/93092601