Javascript 以编程方式将值推送到空对象中

有没有办法将值推送到空的

对象中

？我这里有一个国家列表，显示了国家名称和人口。我想将这些值插入到对象中，就像下面的示例一样

<ul class="countries">
    <li  class="country">
        <span class="country-name">Philippines</span>
        <span class="country-population">200</span>
        <span class="description">Blablabla</span>
    </li>
    <li class="country">
        <span class="country-name">Brunei</span>
         <span class="country-population">200</span>
         <span class="description">Blablabla</span>
     </li>
     <li class="country">
         <span class="country-name">Malaysia</span>
         <span class="country-population">400</span>
         <span class="country-population">Blablabla</span>
     </li>

</ul>

---

我尝试了下面的脚本，但只插入了国家的名称。还可以如何插入

总体

和

说明

值

var countries_new = [];

$('.countries > .country > .country-name').each(function() {
    countries_new.push({
        name: $(this).text()                
    });
}); 

---

而是在

.country

元素上循环，然后

查找每个
.country
中的元素以及其他信息。根据模拟数组，
population
似乎是一个数字，
text（）
返回字符串，使用
number（）
对其进行转换


var-countries\u new=[]；
$（'.countries>.country'）。每个（函数（）{
国家推动新的发展({
名称：$（this）.find（“.country name”）.text（），
人口：数字（$（this）.find（“.country population”）.text（），
description:$（this.find（“.description”）.text（）
});
});
控制台日志（国家/地区/新）



菲律宾
200
喋喋不休


文莱
200
喋喋不休


马来西亚
400
喋喋不休

而是在
.country
元素上循环，然后
查找每个
.country
中的元素以及其他信息。根据模拟数组，
population
似乎是一个数字，
text（）
返回字符串，使用
number（）
对其进行转换


var-countries\u new=[]；
$（'.countries>.country'）。每个（函数（）{
国家推动新的发展({
名称：$（this）.find（“.country name”）.text（），
人口：数字（$（this）.find（“.country population”）.text（），
description:$（this.find（“.description”）.text（）
});
});
控制台日志（国家/地区/新）



菲律宾
200
喋喋不休


文莱
200
喋喋不休


马来西亚
400
喋喋不休

您可以使用
find（）
获取循环中每个上下文的引用。还要注意，
+
，其前缀用于将文本更改为数字类型。您也可以在那里使用
parseInt（）
。使用
trim（）
将有助于删除对象中额外的前导和尾随空格


var国家=[]；
$（'.countries.country'）。每个（函数（）{
var countryRef=$（这是）；
国家。推({
名称：countryRef.find（'.country name'）.text（）.trim（），
人口：+（countryRef.find（'.country人口'）.text（）.trim（）），
描述：countryRef.find（'.description'）.text（）.trim（）
});
});
控制台日志（国家）



菲律宾
200
喋喋不休


文莱
200
喋喋不休


马来西亚
400
喋喋不休

您可以使用
find（）
获取循环中每个上下文的引用。还要注意，
+
，其前缀用于将文本更改为数字类型。您也可以在那里使用
parseInt（）
。使用
trim（）
将有助于删除对象中额外的前导和尾随空格


var国家=[]；
$（'.countries.country'）。每个（函数（）{
var countryRef=$（这是）；
国家。推({
名称：countryRef.find（'.country name'）.text（）.trim（），
人口：+（countryRef.find（'.country人口'）.text（）.trim（）），
描述：countryRef.find（'.description'）.text（）.trim（）
});
});
控制台日志（国家）



菲律宾
200
喋喋不休


文莱
200
喋喋不休


马来西亚
400
喋喋不休

另一种方法短而有效

"use strict";
function _toConsumableArray(a) {
  if (Array.isArray(a)) {
    for (var b = 0, c = Array(a.length); b < a.length; b++) c[b] = a[b];
    return c;
  }
  return Array.from(a);
}
var results = []
  .concat(_toConsumableArray(document.querySelectorAll(".countries>.country")))
  .map(function(a) {
    return {
      name: a.querySelector(".country-name").innerText.trim(),
      population: a.querySelector(".country-population").innerText.trim(),
      description: a.querySelector(".description").innerText.trim()
    };
  });
console.log(results);

“严格使用”；
函数_toConsumableArray（a）{
if（数组isArray（a））{
对于（varb=0，c=Array（a.length）；b.country”））
.map（功能（a）{
返回{
名称：a.querySelector（“.country name”）.innerText.trim（），
人口：a.querySelector（“.country population”）.innerText.trim（），
description:a.querySelector（“.description”）.innerText.trim（）
};
});
控制台日志（结果）；
另一种方法短而有效

"use strict";
function _toConsumableArray(a) {
  if (Array.isArray(a)) {
    for (var b = 0, c = Array(a.length); b < a.length; b++) c[b] = a[b];
    return c;
  }
  return Array.from(a);
}
var results = []
  .concat(_toConsumableArray(document.querySelectorAll(".countries>.country")))
  .map(function(a) {
    return {
      name: a.querySelector(".country-name").innerText.trim(),
      population: a.querySelector(".country-population").innerText.trim(),
      description: a.querySelector(".description").innerText.trim()
    };
  });
console.log(results);

“严格使用”；
函数_toConsumableArray（a）{
if（数组isArray（a））{
对于（varb=0，c=Array（a.length）；b.country”））
.map（功能（a）{
返回{
名称：a.querySelector（“.country name”）.innerText.trim（），
人口：a.querySelector（“.country population”）.innerText.trim（），
description:a.querySelector（“.description”）.innerText.trim（）
};
});
控制台日志（结果）；
您不需要jQuery，只需选择所有国家/地区，然后从该元素中选择所需的值：


console.log(
[…document.querySelectorAll（'.countries>.country'）].map(
（el）=>({
名称：el.querySelector（'.country name'）.innerText.trim（），
人口：el.querySelector（“.国家人口”）
.innerText.trim（），
描述
"use strict";
function _toConsumableArray(a) {
  if (Array.isArray(a)) {
    for (var b = 0, c = Array(a.length); b < a.length; b++) c[b] = a[b];
    return c;
  }
  return Array.from(a);
}
var results = []
  .concat(_toConsumableArray(document.querySelectorAll(".countries>.country")))
  .map(function(a) {
    return {
      name: a.querySelector(".country-name").innerText.trim(),
      population: a.querySelector(".country-population").innerText.trim(),
      description: a.querySelector(".description").innerText.trim()
    };
  });
console.log(results);