Question

我偶然发现了一些让我烦恼的事情。我不得不复制一个对象，所以我为该任务编写了一个辅助函数。

function deepCopy2(target, obj) {

    for (var prop in obj) {
        if (obj.hasOwnProperty(prop)) {
            if (typeof obj[prop] !== 'object') {
                target.prop = obj[prop];
            } else {
                var embedded = {};
                deepCopy2(embedded, obj[prop]);
                target.prop = embedded;
            }
        }
    }
    return target;
}

出于某种原因，这不起作用。所以我刚刚改变了。（点）分配到[]，如下所示，它可以工作。

function deepCopy1(target, obj) {

    for (var prop in obj) {
        if (obj.hasOwnProperty(prop)) {
            if (typeof obj[prop] !== 'object') {
                target[prop] = obj[prop]; // changed here
            } else {
                var embedded = {};
                deepCopy1(embedded, obj[prop]);
                target[prop] = embedded; // changed here
            }
        }
    }
    return target;
}

如果我执行以下操作。

var obj = {
    name: 'john',
    getName: function() { return true; },
    inner: { age: 23 }
};

var newObj1 = deepCopy1({}, obj);
var newObj2 = deepCopy2({}, obj);

console.log(obj);
console.log(newObj1);
console.log(newObj2);

我得到了

{name: "john", getName: ƒ, inner: {…}}
{name: "john", getName: ƒ, inner: {…}}
{prop: {…}}

意味着第一个函数失败而不是逐个复制属性，它只创建了一个名为prop的属性。

我找到了这个Valid property names, property assignment and access in JavaScript以及此JavaScript property access: dot notation vs. brackets?并在MDN上搜索过，但没有任何结果可以找到答案。

我还看了prop这个名字是否可以自由使用，并没有找到任何限制。

有人可以向我解释为什么第一种方法在第二种方法不起作用时会起作用吗？

Answer 1

target.prop
// same as
target['prop']

不使用prop 作为变量，但作为名为prop的硬编码属性。这里不使用变量。

target[prop]

获取变量prop并使用它的值作为键。

Answer 2

如您所知，有两种方法可以检索对象属性：

object[prop]

/* OR */

object.prop

你可能会问，为什么？

现在两者之间存在差异。

1。 object.prop

在此方法中，prop用作属性名称。

意思是，这种检索方式表示您已经知道prop中存在属性object。

var object = { dummy: 1, prop: 2 } console.log(object.prop); // Outputs 2

当财产缺席时：

var object = { dummy: 1 } console.log(object.prop); // Outputs undefined

因为没有这样的属性（这就是未定义的原因）。

<强> 2。 object[prop]

在这种方法中，您使用prop作为变量而不是属性名称。

意思是，prop可以是任何值，该值可以是也可以不是对象中的已定义属性。

var prop = 'prop'; var object = { dummy: 1, prop: 2 } console.log(object[prop]); // Outputs 2

缺席时相同：

var prop = 'prop'; var object = { dummy: 1 } console.log(object[prop]); // Outputs undefined

由于同样的原因。

但是，如果稍后将该属性添加到该对象：

var prop = 'prop'; var object = { dummy: 1 } console.log(object[prop]); // Outputs undefined object.prop = 2; console.log(object[prop]); // Outputs 2 prop = 'abc'; console.log(object[prop]); // Outputs undefined object['abc'] = 3; console.log(object[prop]); // Outputs 3

Answer 3

您可以看到JavaScript错误看错误

使用浏览器Google Chrome打开程序。
如果没有输出，请按 F12（功能键）。
按F12即可访问控制台选项。
在控制台中，您可以看到错误。

。（点）vs []属性赋值结果因复制对象

3 个答案: