Question

我想将上下文从服务器传递到客户端，以便客户端更动态地获取对象内部的值。

服务器传递一个带有值的对象，例如："booking__validating_carrier__iata": "Cia"。

booking__validating_carrier__iata转换为数组['booking', 'validating_carrier', 'iata']，其想法是获取order['booking']['validating_carrier']['iata']或order.booking.validating_carrier.iata

我想进入一个对象。我能想到的唯一方法是：

if(arr.length === 1) {
  order[arr[0]]
} else if(arr.length === 2) {
  order[arr[0]][arr[1]]
} else if(arr.length === 3) {
  order[arr[0]][arr[1]][arr[2]]
} else if(arr.length === 4) {
  order[arr[0]][arr[1]][arr[2]]
} else if(arr.length === 5) {
  order[arr[0]][arr[1]][arr[2]][arr[3]]
}

但是没有办法遍历数组的长度使对象更深吗？

谢谢！

Answer 1

您可以reduce以install (Vue, options) { if (!options || !options.axiosAuth) { throw new Error('Please initialise plugin with Axios instance.') } Vue.component('MyComponent1', "component1") Vue.component('MyComponent2', component2) ... }作为order参数的数组。这样，嵌套对象将在每次迭代中作为累加器

initialValue

这是一个片段：

arr.reduce((acc, k) => acc[k] || {}, order)

Answer 2

您可以使用类似的递归函数来执行此操作。当数组没有数据字段，或者对象没有与数组字段匹配的嵌套对象时，它将停止。

const arr = ['booking', 'validating_carrier', 'iata'];

const order = {
  booking: {
    validating_carrier: "test"
  }
}

const recFunc = (el, arr, i) => {
  if(arr[i] != undefined && el[arr[i]] != undefined) {
    return recFunc(el[arr[i]], arr, ++i);
  } else {
    return el;
  }
}

console.log(recFunc(order, arr, 0));

或者如果您更喜欢它，则使用for循环：

const arr = ['booking', 'validating_carrier', 'iata'];

const order = {
  booking: {
    validating_carrier: "test"
  }
}

let result = order;
for(field of arr) {
  if(result[field] != undefined) {
    result = result[field];
  }
}

console.log(result);

动态地从对象获取值

2 个答案: