连接一个对象的两个值答案

【问题标题】：Concatenate two values from an object连接一个对象的两个值
【发布时间】：2017-03-30 19:21:12
【问题描述】：

我正在构建一个地方自动填充地址表单，就像这里看到的演示 https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform

但在演示中，街道编号和街道名称被放入单独的字段中。我想要做的是连接这两个值street_number: 'short_name' 和route: 'long_name' 并将它们放入一个新字段中。

我正在尝试查找这些值在代码中的存储位置，我看到了这个数组

var componentForm = {
    street_number: 'short_name',
    route: 'long_name',
    locality: 'long_name',
    administrative_area_level_1: 'long_name',
    administrative_area_level_2: 'long_name',
    postal_code: 'short_name'
};

所以，如果我执行console.log(componentForm);，它会返回全部内容。所以我尝试了console.log(componentForm[route]);，但控制台显示route is undefined

所以我的问题是，我怎样才能找到街道号码和街道名称的值，然后将它们连接到表单中的一个新字段中？

发布我的完整脚本代码，因为它稍作修改（我删除了地理编码服务并将建议限制在美国地址，并将州县添加为返回值之一）

// load google api
var placeSearch, autocomplete;
var componentForm = {
    street_number: 'short_name',
    route: 'long_name',
    locality: 'long_name',
    administrative_area_level_1: 'long_name',
    administrative_area_level_2: 'long_name',
    postal_code: 'short_name'
};

function initAutocomplete() {
    // Create the autocomplete object, restricting the search to US locations
    var input = document.getElementById('autocomplete');
    var options = {
        componentRestrictions: {
            country: 'us'
        }
    };

    autocomplete = new google.maps.places.Autocomplete(input, options);

    // When the user selects an address from the dropdown, populate the address
    // fields in the form.
    autocomplete.addListener('place_changed', fillInAddress);
}

function fillInAddress() {
    // Get the place details from the autocomplete object.
    var place = autocomplete.getPlace();

    for (var component in componentForm) {
        $(".autoSearch").hide(1000);
        $(".hiddenForm").show(1000);
        document.getElementById(component).value = '';
        document.getElementById(component).disabled = false;
    }

    // Get each component of the address from the place details
    // and fill the corresponding field on the form.
    for (var i = 0; i < place.address_components.length; i++) {
        var addressType = place.address_components[i].types[0];

        if (componentForm[addressType]) {
            var val = place.address_components[i][componentForm[addressType]];

            document.getElementById(addressType).value = val;

        }
    }
}

【问题讨论】：

route 确实是未定义的，你应该做console.log(componentForm['route']); 或console.log(componentForm.route);

标签： javascript jquery arrays google-maps concatenation

【解决方案1】：

当您编写componentForm[route] 时，javascript 会查找路由变量并将其内容用作 componentForm 对象的属性名称，但没有路由变量，因此 javascript 会告诉您它是未定义的。

如果你想访问路由属性，你应该这样做 componentForm["route"] 或 componentForm.route ，要创建这个新字段，你应该添加如下一行：

componentForm.full_address = componentForm.route + " " + componentForm.street_number;

【讨论】：