时间戳

首页 > 解决方案 > 通过对象和两条路径的组合访问对象

javascript - 通过对象和两条路径的组合访问对象

问题描述

我想组合一个对象、一个变量中的路径和一个路径，就像在https://stackoverflow.com/a/43849204/14480225中解释的那样，但有3 个“部分”。

这是最小的可重现示例：我希望combine()函数打印selector[0].children[foo].textContent或selector[0].children[foo].children[0].textContent取决于bar值。

const selector = document.getElementsByClassName('main')
const foo = 0
let bar = ''

const toggle = () => {
  if (bar === '') bar = '.children[0]'
  else bar = ''
}

const test = () => {
  console.log(combine('selector[0].children[foo]', bar, '.textContent'))
  //I want a function like combine() that will print 'selector[0].children[foo].textContent' or 'selector[0].children[foo].children[0].textContent' depending on bar value.
}
<div class='main'>
  <h1>Hello<span>world</span></h1>
  <button onclick='toggle()'>toggle</button>
  <button onclick='test()'>test</button>
</div>

我有一个返回多个相似属性的类 (10)。我的构造函数输入了一个值，该值可用于确定bar最小示例中的内容。每个属性只需更改bar最小示例中的内容即可获得预期的输出。我希望这样的东西能够在不同的情况之间进行切换，而不必为每种bar情况编写大量的开关，因此会产生大量的代码重复。

标签： javascriptstringtypescriptobject

解决方案

像这样的东西？但是在使用它之前请阅读eval() 这里： call javascript object method with a variable

const selector = document.getElementsByClassName('main')
const foo = 0
let bar = ''

const toggle = () => {
  if (bar === '') bar = '.children[0]'
  else bar = ''
}

function combine(){
let result = "selector[0].children[foo]"+bar+".textContent"
return result
}

const test = () => {
  console.log(eval(combine()))
  //I want a function like combine() that will print 'selector[0].children[foo].textContent' or 'selector[0].children[foo].children[0].textContent' depending on bar value.
}
<div class='main'>
  <h1>Hello<span>world</span></h1>
  <button onclick='toggle()'>toggle</button>
  <button onclick='test()'>test</button>
</div>

这是一种安全的使用方法：

const selector = document.getElementsByClassName('main')
const foo = 0
let bar = ''

const toggle = () => {
  if (bar === '') bar = '.children[0]'
  else bar = ''
}

function combine(){
return Function('"use strict";return (selector[0].children[foo]'+bar+'.textContent)')()
}

const test = () => {
  console.log(combine())

}
<div class='main'>
  <h1>Hello<span>world</span></h1>
  <button onclick='toggle()'>toggle</button>
  <button onclick='test()'>test</button>
</div>

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval#never_use_eval

推荐阅读