vue前端Object.assign可以复制Number吗？

Vue.js 是一种流行的前端框架，用于构建用户界面。Object.assign() 是 JavaScript 中的一个方法，用于将一个或多个源对象的属性复制到目标对象。然而，Object.assign() 在复制 Number 类型时会将其转换为对象类型。

当你使用 Object.assign() 复制 Number 类型时，它会将 Number 类型转换为 Number 对象，然后复制该对象的属性。这可能会导致一些意想不到的结果，因为 Number 对象和原始的 Number 类型在行为上有所不同。

例如：

const num = 42;
const copy = Object.assign({}, num);
console.log(copy); // 输出: [Number: 42]

在上述示例中，原始的 Number 类型被转换为一个 Number 对象，并将其作为属性复制到目标对象中。

如果你只是想简单地复制一个 Number 值，而不是将其转换为对象，你可以直接赋值给新的变量，而无需使用 Object.assign()。

const num = 42;
const copy = num;
console.log(copy); // 输出: 42

这样就可以直接复制 Number 的值，而不会引入额外的对象。

相关问题

object.assign()的用法 vue

Object.assign()是JavaScript中一个常用的方法，用于将一个或多个源对象的属性复制到目标对象中。在Vue中，我们可以使用Object.assign()来合并对象，例如将一个组件的props和data合并到一个对象中。具体用法如下：

1. 创建一个目标对象，例如：

let target = {};

2. 创建一个或多个源对象，例如：

let source1 = { name: 'Tom' };
let source2 = { age: 18 };

3. 使用Object.assign()将源对象的属性复制到目标对象中，例如：

Object.assign(target, source1, source2);

4. 最终目标对象的属性将包含源对象的所有属性，例如：

console.log(target); // { name: 'Tom', age: 18 }

在Vue中，我们可以使用Object.assign()来合并组件的props和data，例如：

export default {
  props: {
    name: String,
    age: Number
  },
  data() {
    return {
      gender: 'male'
    }
  },
  computed: {
    userInfo() {
      return Object.assign({}, this.$props, this.$data);
    }
  }
}

在上面的代码中，我们使用Object.assign()将组件的props和data合并到一个新的对象中，然后在computed属性中返回这个新的对象。这样，我们就可以在模板中使用userInfo来访问组件的所有属性了。

优化这段代码：import { reactive, toRaw } from 'vue' // 分页钩子函数 interface Options { page?: number size?: number fetchFun: (_arg: any) => Promise<any> params?: Record<any, any> firstLoading?: boolean } export function usePaging(options: Options) { const { page = 1, size = 15, fetchFun, params = {}, firstLoading = false } = options // 记录分页初始参数 const paramsInit: Record<any, any> = Object.assign({}, toRaw(params)) // 分页数据 const pager = reactive({ page, size, loading: firstLoading, count: 0, lists: [] as any[], extend: {} as Record<string, any> }) // 请求分页接口 const getLists = () => { pager.loading = true return fetchFun({ page_no: pager.page, page_size: pager.size, ...params }) .then((res: any) => { pager.count = res?.count pager.lists = res?.lists pager.extend = res?.extend return Promise.resolve(res) }) .catch((err: any) => { return Promise.reject(err) }) .finally(() => { pager.loading = false }) } // 重置为第一页 const resetPage = () => { pager.page = 1 getLists() } // 重置参数 const resetParams = () => { Object.keys(paramsInit).forEach((item) => { params[item] = paramsInit[item] }) getLists() } return { pager, getLists, resetParams, resetPage } }

以下为优化后的代码：

import { reactive, toRaw } from 'vue'

interface Options {
page?: number
size?: number
fetchFun: (_arg: any) => Promise<any>
params?: Record<any, any>
firstLoading?: boolean
}

export function usePaging(options: Options) {
const { page = 1, size = 15, fetchFun, params = {}, firstLoading = false } = options

const paramsInit: Record<any, any> = toRaw(params)

const pager = reactive({
page,
size,
loading: firstLoading,
count: 0,
lists: [] as any[],
extend: {} as Record<string, any>
})

const getLists = async () => {
pager.loading = true
try {
const res = await fetchFun({
page_no: pager.page,
page_size: pager.size,
...params
})
pager.count = res?.count
pager.lists = res?.lists
pager.extend = res?.extend
return Promise.resolve(res)
} catch (err) {
return Promise.reject(err)
} finally {
pager.loading = false
}
}

const resetPage = () => {
pager.page = 1
getLists()
}

const resetParams = () => {
Object.assign(params, paramsInit)
getLists()
}

return {
pager,
getLists,
resetParams,
resetPage
}
}

优化的部分包括：

1. 使用 async/await 替代 Promise.then() 语法，使代码更加简洁易读，同时也更具可读性。

2. 重置参数部分使用 Object.assign() 替代 Object.keys(paramsInit).forEach() 语法，可以更简洁地实现参数重置操作。