无法在Javascript的Object中获取数组/对象的长度

时间:2018-02-06 08:36:29

标签: javascript arrays object variable-length-array

box = {
  curBox: 0,
  boxes: document.getElementsByClassName('box'),
  size: this.boxes.length, //this one won't work
  orSize: Object.keys(this.boxes).length, //as well as this one
  preBox: function() {
    curBox -= 1
  },
  nexBox: function() {
    curBox += 1
  }
}

console.log(box.boxes.length); //This one works well!!!
<div class='active box BG_blue'>
  <meta name='title' content='Overview' /> ...
</div>

<div class='inactive box BG_orange'>
  <meta name='title' content='Career' /> ...
</div>

<div class='inactive box BG_red'>
  <meta name='title' content='Skills' /> ...
</div>

<div class='inactive box BG_awesome'>
  <meta name='title' content='Hobbies' /> ...
</div>

我试图获取从getElementsByClassName返回的数组的长度。如果我把它放在对象范围之外,它就可以了。但是在对象范围内,它不会。现在,我想知道一个怎样的原因。我在其他网站(例如Mozilla)代码编辑器上进行了测试,但它只返回相同的结果。

3 个答案:

答案 0 :(得分:2)

javascript中的

this只有函数作用域,即它指向当前正在执行的函数所在的对象。如果您没有这样的对象,即您处于顶层,那么this在浏览器中通常指向window对象。

因此,在构建对象时,this实际上不是您的对象,而是其他内容。

这样的代码可以工作:

const person = {
  name: "Wekoslav",
  surname: "Stefanovski",
  getName: function(){
    return this.name + " " + this.surname;
  }
}

console.log(person.getName());

因为我在定义它之后才调用getName函数,并且在该函数中,this绑定到person。但是,这段代码:

const person = {
  name: "Wekoslav",
  surname: "Stefanovski",
  fullName: this.name + " " + this.surname;
}

console.log(person.fullName);

不起作用,因为它与const person行执行之前的任何内容绑定。

答案 1 :(得分:0)

document.getElementsByClassName('box')不正确,在这种情况下返回null。该函数返回将第一个参数中指定的所有类作为空格分隔的字符串的元素。您可以使用document.querySelectorAll('.box')

答案 2 :(得分:0)

主要的共鸣是你还在初始化Box对象,因此你无法访问它。换句话说,在您使用它时,您的对象尚未完全形成。

你可以做的是创建一个函数并将其返回。

>>> df.show()
+--------------+---+
|      datetime| id|
+--------------+---+
|20180201000000|275|
|20171231113024|534|
|20180201220000|275|
|20170205000000| 28|
+--------------+---+

>>> df.groupBy('id',df.datetime.substr(0,6)).agg(count('id')).show()
+---+-----------------------+---------+                                         
| id|substring(datetime,0,6)|count(id)|
+---+-----------------------+---------+
|275|                 201802|        2|
|534|                 201712|        1|
| 28|                 201702|        1|
+---+-----------------------+---------+

我创建了一个改进的jsfiddle。 https://jsfiddle.net/jz1thu26/

另请注意,您需要在DOM准备就绪时运行您的方法。