Question

有没有办法设置javascript对象的默认属性：

var emptyObj = {};
// do some magic
emptyObj.nonExistingAttribute // => defaultValue

IE可以被忽视，Chrome Frame让我感到头疼。

Answer 1

自从我几年前提出问题以来，事情进展顺利。

代理是ES6的一部分。以下示例适用于Chrome, Firefox, Safari and Edge：

var handler = {
  get: function(target, name) {
    return target.hasOwnProperty(name) ? target[name] : 42;
  }
};

var p = new Proxy({}, handler);

p.answerToTheUltimateQuestionOfLife; //=> 42

在Mozilla's documentation on Proxies中阅读更多内容。

Answer 2

没有办法在Javascript中设置它 - 对于不存在的属性返回undefined是核心Javascript规范的一部分。见the discussion for this similar question。正如我在那里建议的那样，一种方法（虽然我不能真正推荐它）将是定义全局getProperty函数：

function getProperty(o, prop) {
    if (o[prop] !== undefined) return o[prop];
    else return "my default";
}

var o = {
    foo: 1
};

getProperty(o, 'foo'); // 1
getProperty(o, 'bar'); // "my default"

但这会导致一堆非标准代码难以被其他人阅读，并且可能会在您期望或想要未定义值的区域产生意想不到的后果。最好随便检查一下：

var someVar = o.someVar || "my default";

Answer 3

使用解构（ES6中的新功能）

有很棒的documentation by Mozila以及精彩的blog post可以更好地解释语法。

回答你的问题

var emptyObj = {};
const { nonExistingAttribute = defaultValue } = emptyObj;
console.log(nonExistingAttribute); // defaultValue

进一步

我可以重命名这个变量吗？当然！

const { nonExistingAttribute: coolerName = 15} = emptyObj;
console.log(coolerName); // 15

嵌套数据怎么样？带上它！

var nestedData = {
    name: 'Awesome Programmer',
    languages: [
        {
            name: 'javascript',
            proficiency: 4,
        }
    ],
    country: 'Canada',
};

var {name: realName, languages: [{name: languageName}]} = nestedData ;

console.log(realName); // Awesome Programmer
console.log(languageName); // javascript

Answer 4

这听起来像是基于原型的对象的典型用法：

// define a new type of object
var foo = function() {};  

// define a default attribute and value that all objects of this type will have
foo.prototype.attribute1 = "defaultValue1";  

// create a new object of my type
var emptyObj = new foo();
console.log(emptyObj.attribute1);       // outputs defaultValue1

Answer 5

我的代码是：

function(s){
    s = {
        top: s.top || 100,    // default value or s.top
        left: s.left || 300,  // default value or s.left
    }
    alert(s.top)
}

Answer 6

或者你可以试试这个

dict = {
 'somekey': 'somevalue'
};

val = dict['anotherkey'] || 'anotherval';

Answer 7

我实现此目标的方法是使用object.assign函数

const defaultProperties = { 'foo': 'bar', 'bar': 'foo' }
const overwriteProperties = { 'foo': 'foo' }
const newObj = Object.assign(defaultProperties, overwriteProperties) // { 'foo': 'foo', 'bar': 'foo' }

Answer 8

昨天我看到一篇文章提到Object.__noSuchMethod__属性：JavascriptTips我没有机会玩它，所以我不知道浏览器支持，但也许你可以以某种方式使用它？

Answer 9

我很惊讶没人提到三元运算符。

var emptyObj = {a:'123', b:'234', c:0};
var defaultValue = 'defaultValue';
var attr = 'someNonExistAttribute';
emptyObj.hasOwnProperty(attr) ? emptyObj[attr] : defaultValue;//=> 'defaultValue'


attr = 'c'; // => 'c'
emptyObj.hasOwnProperty(attr) ? emptyObj[attr] : defaultValue; // => 0

这样，即使＆＃39; c＆＃39;的价值也是如此。是0，它仍然会得到正确的值。

Answer 10

var obj = {
  a: 2,
  b: 4
};

console.log(obj);

--> {a: 2, b: 4}

function applyDefaults(obj) {
  obj.a ||= 10;
  obj.b ||= 10;
  obj.c ||= 10;
}

// do some magic
applyDefaults(obj);

console.log(obj);

--> {a: 2, b: 4, c: 10}

这是可行的，因为

undefined || "1111111" --> "1111111"
"0000000" || "1111111" --> "0000000"

作为null、undefined、NaN、0、""（空字符串）、false本身，都被认为是相当于假 (falsy)。其他都是true (truthy)。

请注意，这并非跨浏览器和 nodejs 版本统一支持（请自行确认）。

所以两个麻烦的情况是空字符串 "" 和 0（零）。如果不覆盖这些很重要，您可能需要将其重写为：

if (typeof obj.d == "undefined") obj.d = "default"

这也将在浏览器中得到更好的支持。

或者你可以把它写成：

obj.d ??= "default"

这是 nullish assignment，它仅适用于 null 或 undefined (nullish) 的值 - 其中空字符串 not 部分。然而，这再次削弱了跨浏览器的支持。

另见 Mozilla 官方网站 - Assigning a default value to a variable。

Answer 11

最简单的解决方案：

dict = {'first': 1,
        'second': 2,
        'third': 3}

现在，

dict['last'] || 'Excluded'

将返回'Excluded'，这是默认值。

Answer 12

我认为最简单的方法是使用Object.assign。

如果你有这个班级：

class MyHelper {
    constructor(options) {
        this.options = Object.assign({
            name: "John",
            surname: "Doe",
            birthDate: "1980-08-08"
        }, options);
    }
}

你可以像这样使用它：

let helper = new MyHelper({ name: "Mark" });
console.log(helper.options.surname); // this will output "Doe"

文档（使用polyfill）： https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

Answer 13

一种方法是获取默认对象并将其与目标对象合并。目标对象将覆盖默认对象中的值。

jQuery使用.extend()方法执行此操作。然而，不需要jQuery，因为有可以在这里找到的vanilla JS实现：

http://gomakethings.com/vanilla-javascript-version-of-jquery-extend/

Answer 14

我来这里是为了寻找解决方案，因为标题与我的问题描述相匹配，但这不是我想要的，但是我为我的问题找到了解决方案（我希望为动态属性提供默认值像日期）。

let Blog = {
title  : String,
image  : String,
body   : String,
created: {type: Date, default: Date.now}
}

上面的代码是我最终解决的解决方案。

Answer 15

在我看来，这是最简单易读的方式：

let options = {name:"James"}
const default_options = {name:"John", surname:"Doe"}

options = Object.assign({}, default_options, options)

Object.assign() reference

Answer 16

实际上这可能与Object.create有关。它不适用于未定义的＆＃34;属性。但对于那些已被赋予默认值的那些。

var defaults = {
    a: 'test1',
    b: 'test2'
};

然后，当您创建属性对象时，可以使用Object.create

执行此操作

properties = Object.create(defaults);

现在您将有两个对象，其中第一个对象为空，但原型指向defaults对象。测试：

console.log('Unchanged', properties);
properties.a = 'updated';
console.log('Updated', properties);
console.log('Defaults', Object.getPrototypeOf(properties));

设置javascript对象属性的默认值

17 个答案:

回答你的问题

进一步