设置JavaScript对象属性的默认值
有没有一种方法来设置JavaScript对象的默认属性,使:
var emptyObj = {}; // do some magic emptyObj.nonExistingAttribute // => defaultValue
IE可以忽略不计,Chrome Frame为我解除了头痛。
自从几年前我提出这个问题以来,事情进展得很好。
代理是ES6的一部分。 以下示例适用于Chrome,Firefox,Safari和Edge :
var handler = { get: function(target, name) { return target.hasOwnProperty(name) ? target[name] : 42; } }; var p = new Proxy({}, handler); p.answerToTheUltimateQuestionOfLife; //=> 42
阅读Mozilla有关代理的文档 。
没有办法在Javascript中设置它 – 返回undefined
的不存在的属性是核心Javascript规范的一部分。 请参阅这个类似问题的讨论 。 正如我在那里提出的,一种方法(虽然我不能真正推荐它)将是定义一个全局的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";
这听起来像基于原型的对象的典型用法:
// 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
或者你可以试试这个
dict = { 'somekey': 'somevalue' }; val = dict['anotherkey'] || 'anotherval';
我的代码是:
function(s){ s = { top: s.top || 100, // default value or s.top left: s.left || 300, // default value or s.left } alert(s.top) }
使用解构 (ES6中的新function)
Mozila有很棒的文档,还有一个很棒的博客文章 ,比我能更好地解释语法。
回答你的问题
var emptyObj = {}; const { nonExistingAttribute = defaultValue } = emptyObj; console.log(nonExistingAttribute); // defaultValue
走得更远
我可以重命名这个variables吗? 当然!
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
我昨天看到一篇文章,提到一个Object.__noSuchMethod__
属性: JavascriptTips我没有机会玩弄它,所以我不知道浏览器支持,但也许你可以用某种方式?
我很惊讶没有人提到三元运算符呢。
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
这样,即使'c'的值为0,仍然会得到正确的值。
这实际上可以用Object.create
来做。 它不适用于“未定义”的属性。 但是对于已经被赋予了默认值的那些。
var defaults = { a: 'test1', b: 'test2' };
然后,当你创build你的属性对象,你用Object.create
properties = Object.create(defaults);
现在,您将有两个对象,其中第一个对象是空的,但原型指向defaults
对象。 去testing:
console.log('Unchanged', properties); properties.a = 'updated'; console.log('Updated', properties); console.log('Defaults', Object.getPrototypeOf(properties));
一种方法是采取默认对象,并将其与目标对象合并。 目标对象将覆盖默认对象中的值。
jQuery有这样的.extend()
方法。 jQuery不是必需的,因为有香草JS实现,如可以在这里find:
http://gomakethings.com/vanilla-javascript-version-of-jquery-extend/
我认为最简单的方法是使用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