处理JS对象实用技巧

VUE3-toRef和toRefs

toRef

也可以基于响应式对象上的一个属性，创建一个对应的 ref。这样创建的 ref 与其源属性保持同步：改变源属性的值将更新 ref 的值，反之亦然。

toRefs

将一个响应式对象转换为一个普通对象，这个普通对象的每个属性都是指向源对象相应属性的 ref。每个单独的 ref 都是使用 toRef() 创建的。

代码

<template>
  <h2>{
   
   {data}}</h2>
  <h2>计数器：{
   
   {counter1}}</h2>
  <button @click="counter1++">计数器加1</button>
  <hr>
  <h2>计数器2：{
   
   {counter2}}</h2>
  <button @click="counter2++">计数器加1</button>
  <hr>
  <h2>计数器3：{
   
   {a.b.counter3}}</h2>
  <button @click="a.b.counter3++">计数器加1</button>
</template>

<script>
  import {
    ref,
    toRef,
    reactive,
    toRefs
  } from 'vue'
  export default {
    setup() {
      // data
      let data = reactive({
        counter1: 1,
        counter2: 100,
        a: {
          b: {
            counter3: 1000
          }
        }
      })
      // 这样写肯定不行，因为这种方式第一次打开页面的时候，能够看到数据，但是不是响应式的。因为这个数据和data无关了
      // return {
      //   counter1: data.counter1,
      //   counter2: data.counter2,
      //   counter3: data.a.b.counter3
      // }
      // 下面这种方式可以完成响应式
      // 问题是什么？计数器加1的时候，data对象中的数据不会变
      // return {
      //   counter1: ref(data.counter1),
      //   counter2: ref(data.counter2),
      //   counter3: ref(data.a.b.counter3)
      // }
      // 因为上面这样写与下面的写法没有区别
      // return {
      //   counter1: ref(1),
      //   counter2: ref(100),
      //   counter3: ref(1000)
      // }
      // 由于上面的原因，则引入了下面toRef
      // toRef语法格式：toRef(对象，'该对象中的属性名')
      // toRef函数执行之后会生成一个全新的对象：objectRefImpl（引用对象）
      // 这个引用对象会与指定的数据形成响应式,相当于在两个数据直接搭建了桥梁
      // 只要有引用对象，就有value属性，并且value属性是响应式的。（value有对应的set和get。）
      console.log(toRef(data, 'counter1'));

      // return {
      //   data,
      //   counter1: toRef(data, 'counter1'),
      //   counter2: toRef(data, 'counter2'),
      //   counter3: toRef(data.a.b, 'counter3')
      // }
# 处理JS对象实用技巧

本文来分享 10 个开发技巧，可以使用这些技巧来高效地操作和使用 JavaScript 对象。

## 1. 创建一个绝对空的对象

我们可以通过 {} 来创建空对象。 然而，通过方法中创建的对象，proto、hasOwnProperty等对象方法仍然是存在的，这是因为使用 {} 将创建一个继承自 Object 类的对象。

如果需要创建一个绝对空的对象，最好使用 Object.create(null)，它将创建一个不从任何对象继承且没有属性的对象。

```js
let vehical = Object.create(null);
// vehicle.__proto__ === "undefined"

2. 使用扩展运算符组合两个对象

在许多情况下，需要组合来自不同来源的两个或多个数据集。

最常用的方法是使用 Object.assign()。该方法需要多个参数。 第一个是分配的对象，其余参数是需要组合的对象。

const name = {
    
    
  id: '1234',
  name: 'Charuka'
};
const university = {
    
    
  id: '1234',
  university: 'Harvard'
};
const PersonalDetails = Object.assign({
    
    }, name, university);

console.log(PersonalDetails);
// { id: '1234', name: 'Charuka', university: 'Harvard' }

使用扩展运算符进行组合更方便，只需展开任意数量的对象，并将它们组合成一个对象即可。

const PersonalDetails = {
    
    
  ...name,
  ...university
};

console.log(PersonalDetails);
// { id: '1234', name: 'Charuka', university: 'Harvard' }

需要注意，如果存在重复的键，那后面的会将覆盖前面对象的键。

3. 从对象获取键和值的列表

在开发过程中，有时需要从对象中仅获取键或仅获取值。可以通过以下两个内置函数来实现：

Object.keys()：用于获取键列表。

Object.values()：用于获取值列表。

const vehicle = {
    
    
  brand: 'BWM',
  year: 2022,
  type: 'suv'
};
//获取键
console.log(Object.keys(vehicle)); // [ 'brand', 'year', 'type' ]
//获取值
console.log(Object.values(vehicle)); // [ 'BWM', 2022, 'suv' ]

4. 检查属性

使用 for-in 循环时，检查对象的属性有助于避免迭代对象原型中的属性。可以使用 Object.hasOwnProperty()进行检查，而不是使用 if-else。

const vehicle = {
    
    
  brand: 'BWM',
  year: 2022,
  type: 'suv'
};
for (var item in vehicle) {
    
    
  if (vehicle.hasOwnProperty(item)) {
    
    
    console.log(item);
  };
};
// brand
// year
// type

5. 克隆对象

假设有一个对象并且需要复制它以更改其值，但原始对象应该保持不变。可以通过以下方法来实现。

第一种方法是使用 Object.assign()，它将所有可枚举属性的值从一个对象复制到另一个对象。

const initialVehicle = {
    
    
  brand: 'BWM',
  year: 2022,
  type: 'suv'
};
const secondaryVehicle = Object.assign({
    
    }, initialVehicle);
console.log(secondaryVehicle); // { brand: 'BWM', year: 2022, type: 'suv'};

第二种方法是使用 JSON.parse() 复制对象。

var initialVehicle = {
    
    
  brand: 'BWM',
  year: 2022,
  type: 'suv'
};
var secondaryVehicle = JSON.parse(JSON.stringify(initialVehicle));
console.log(secondaryVehicle); // { brand: 'BWM', year: 2022, type: 'suv'};

6. 从对象中选择特定数据

针对对象中的特定键（key），可以使用不同的方法进行选择。选择方法的选择取决于希望对这些值进行的操作。下面的示例展示了一种有条理的方式从对象中选择数据，并可以选择所需的键，并将它们提取到一个新的对象中。

const selectObj = (obj, items) => {
    
    
  return items.reduce((result, item) => {
    
    
    result[item] = obj[item];
    return result;
  }, {
    
    });
};
const vehicle = {
    
    
  brand: 'BWM',
  year: 2022,
  type: 'suv'
};
const selected = selectObj(vehicle, ['brand', 'type']);
console.log(selected); // { brand: 'BWM', type: 'suv' }

7. 从对象中删除键

有时我们需要从对象中删除特定的键及其值。最合适的方法是编写一个可重用的删除方法，该方法将一个对象和要删除的键列表作为输入。 然后循环遍历要删除的每个键并将其从对象中删除。

const remove = (object, removeList = []) => {
    
    
  const result = {
    
    
    ...object
  };
  removeList.forEach((item) => {
    
    
    delete result[item];
  });
  return result;
}

const vehicle = {
    
    
  brand: 'BWM',
  year: 2022,
  type: 'suv'
}

const itemRemoved = remove(vehicle, ['year']);
console.log(itemRemoved); // Result { brand: 'BWM', type: 'suv' }

8. 将对象数据拉入数组

在某些情况下，我们需要将对象数据拉入数组中，例如下拉菜单。可以使用 Object.entries() 函数，该函数将一个对象作为其第一个参数并返回一个数组。

返回的结果是一个二维数组。内部数组将有两个值：第一个是键，第二个是值。

const vehicle = {
    
    
  brand: 'BWM',
  year: 2022,
  type: 'suv'
}
console.log(Object.entries(vehicle));
// [ [ 'brand', 'BWM' ], [ 'year', 2022 ], [ 'type', 'suv' ] ]

9. 循环访问 JavaScript 对象

avaScript 中有多种方法可用于循环访问对象。

第一种方法是使用 Object.entries()，该函数可以避免查找原始对象中的每个值。

const vehicle = {
    
    
  brand: 'BWM',
  year: 2022,
  type: 'suv'
}
Object.entries(vehicle).forEach(
  ([key, value]) => console.log(key, value)
);
// brand BWM
// year 2022
// type suv

作为一种更好、更清晰的方法，可以使用 Object.entries() 进行对象解构。

const vehicle = {
    
    
  brand: 'BWM',
  year: 2022,
  type: 'suv'
}
for (const [key, value] of Object.entries(vehicle)) {
    
    
  console.log(key, value);
}
// brand BWM
// year 2022
// type suv

10. 有条件地向对象添加属性

通常，开发人员使用 if-else 来有条件地向对象添加新元素。 然而，最简单的方法是使用对象解构和扩展运算符。

const type = {
    
    
  type: 'suv'
};
const vehicle = {
    
    
  brand: 'BMW',
  year: 2022,
  ...(!type ? {
    
    } : type)
}
console.log(vehicle); //{ brand: 'BMW', year: 2022, type: 'suv' }

同样，使用不同的条件，可以向对象添加任意数量的元素。

涉及内容

JS、Object
// toRefs函数用法：toRefs(data)
console.log(toRefs(data)) // 这个生成的是一个对象

  return {
    data,
    ...toRefs(data)
  }
  // 相当于上面简写相当于下面
  // return {
  //   data,
  //   counter1: toRef(data, 'counter1'),
  //   counter2: toRef(data, 'counter2'),
  //   a:{
  //     b:{
  //       counter3: toRef(data.a.b, 'counter3')
  //     }
  //   }
  // }
}

}

## 涉及内容

vue3、toRef、toRefs