扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇“JavaScript中的对象字面量有什么”文章，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要参考一下，对于“JavaScript中的对象字面量有什么”，小编整理了以下知识点，请大家跟着小编的步伐一步一步的慢慢理解，接下来就让我们进入主题吧。
1.可以使网页具有交互性，例如响应用户点击，给用户提供更好的体验。 2.可以处理表单，检验用户的输入，并提供及时反馈节省用户时间。 3.可以根据用户的操作，动态的创建页面。 4使用JavaScript可以通过设置cookie存储在浏览器上的一些临时信息。
在 ECMAScript 2015 之前，Javascript 中的对象字面量(又叫做对象初始化器)是相当简单的，它可以定义2种属性：
成对的静态属性名和值{ name1: value1 }
通过 getters{ get name(){..} } 和 setters{ set name(val){..} } 定义的动态计算属性值
说来遗憾，一个简单的例子就可以表示对象字面量的所有可能性：
var myObject = {
myString: 'value 1',
get myNumber() {
return this._myNumber;
},
set myNumber(value) {
this._myNumber = Number(value);
},
};
myObject.myString; // => 'value 1'
myObject.myNumber = '15';
myObject.myNumber; // => 15JS 是一种基于原型的语言，因此一切都是对象。 在对象创建，配置和访问原型时，必须提供一种易于构造的语言。
定义一个对象并设置它的原型是一个常见的任务。好的方式是直接在对象字面量使用一条语句来设置原型。
不幸的是，字面量的局限性不允许用一个简单的解决方案来实现这一点。必须结合使用object.create() 和对象字面量来设置原型。
var myProto = {
propertyExists: function(name) {
return name in this;
}
};
var myNumbers = Object.create(myProto);
myNumbers['arrat'] = [1, 6, 7];
myNumbers.propertyExists('array'); // => true
myNumbers.propertyExists('collection'); // => false我认为这种解决方案不够灵活。JS 是基于原型的，为什么要用原型创建对象那么麻烦？
幸运的是，JavaScript 也在慢慢完善。JS 中许多相当令人不舒服的特性正在一步步的被解决。
这篇文章演示了 ES2015 是如何解决以上描述的难题，并增加了哪些特性来提升对象字面量的能力：
在对象构造函数中设置原型
速写式方法声明
进行super 调用
可计算的属性名
另外，还有我们可以展望一下将来，看看 (草案2) 里的新提议： 可收集可展开的属性。
正如你已知的，访问已创建对象的原型有一种方式是引用__proto__ 这个 getter 属性：
var myObject = {
name: 'Hello World!',
};
myObject.__proto__; // => {}
myObject.__proto__.isPrototypeOf(myObject); // => truemyObject.__proto__ 返回myObject 的原型对象。
请注意，不建议将object.__ proto__用作getter/setter。替代方法应考虑使用Object.getPrototypeOf() 和Object.setPrototypeOf()。
好消息是， ES2015 允许使用__proto__ 在对象字面量{ __proto__: protoObject } 中作为属性名来设置原型。
让我们用__proto__ 属性为对象初始化，看它是如何改进介绍中描述的不直观方案：
var myProto = {
propertyExists: function(name) {
return name in this;
},
};
var myNumbers = {
__proto__: myProto,
array: [1, 6, 7],
};
myNumbers.propertyExists('array'); // => true
myNumbers.propertyExists('collection'); // => falsemyNumbers 是使用了特殊的属性名__proto__ 创建的对象，它的原型是myProto 。这个对象用了一个简单的声明来创建，没有使用类似Object.create() 的附加函数。
如你所见，使用__proto__ 进行编码很简单。我通常推荐简洁直观的解决方案。
说点一些题外话，我认为有点奇怪的是，简单可扩展的解决方案依赖大量的设计和工作。如果一个方案很简洁，你也许认为它是容易设计的。然而事实完全相反:
让事情变得简单直接很复杂
让事情变得复杂难以理解很容易
如果一些事情看起来很复杂或者很难使用，可能它是没有被充分考虑过。关于返璞归真，你怎么看？（随意留言评论）
1.1 特殊的情况下__proto__ 的使用手册
即使__proto__ 看起来很简洁， 这有一些特定的场景你需要注意到。
对象字面量中__proto__ 只允许使用一次 。重复使用 JS 会抛出异常：
var object = {
__proto__: {
toString: function() {
return '[object Numbers]'
}
},
numbers: [1, 5, 89],
__proto__: {
toString: function() {
return '[object ArrayOfNumbers]'
}
}
};上面示例中的对象字面量使用了两次__proto__ 属性，这是不允许的。在这种情况下，将在会抛出SyntaxError: Duplicate __proto__ fields are not allowed in object literals 的语法错误。
JS 约束只能用一个对象或null 作为__proto__ 属性值。任何使用原始类型（字符串，数字，布尔值）或undefined 类型都将被忽略，并且不会更改对象的原型。
让我们看看这个限制的例子：
var objUndefined = {
__proto__: undefined,
};
Object.getPrototypeOf(objUndefined); // => {}
var objNumber = {
__proto__: 15,
};
Object.getPrototypeOf(objNumber); // => {}这个对象字面量使用了undefined 和数字15 来设置__proto__ 的值。因为只有对象或null 允许被当做原型，objUndefined 和objNumber 仍然拥有他们默认的原型： JavaScript 空对象{}。__proto__ 的值被忽略了。
当然，尝试用原始类型去设置对象的原型会挺奇怪。这里的约束符合预期。
可以使用较短的语法在对象常量中声明方法，以省略function 关键字和: 冒号的方式。它被称之为速写式方法声明。
接着，让我们使用速写的方法来定义一些方法吧：
var collection = {
items: [],
add(item) {
this.items.push(item);
},
get(index) {
return this.items[index];
},
};
collection.add(15);
collection.add(3);
collection.get(0); // => 15add() 和get() 是collection 里使用这个缩写形式定义的方法。
这个方法声明的方式还一个好处是它们都是非匿名函数，这在调试的时候会很方便。 上个例子执行collection.add.name 返回函数名'add'。
super 调用JS 一个有趣的改进是可以使用super 关键字来访问原型链中父类的属性。看下面的例子：
var calc = {
numbers: null,
sumElements() {
return this.numbers.reduce(function(a, b) {
return a + b;
});
},
};
var numbers = {
__proto__: calc,
numbers: [4, 6, 7],
sumElements() {
if (this.numbers == null || this.numbers.length === 0) {
return 0;
}
return super.sumElements();
},
};
numbers.sumElements(); // => 17calc 是numbers 对象的原型。在numbers 的sumElements 方法中，可以通过super 关键字调用原型的super.sumArray() 方法。
最终，super 是从对象原型链访问继承的属性的快捷方式。
在前面的示例中，可以尝试直接执行calc.sumElements() 来调用原型。 然而，super.sumElements() 可以正确调用，因为它访问对象的原型链。并确保原型中的sumElements() 方法使用this.numbers 正确访问数组。
super 存在清楚地表明继承的属性将被使用。
3.1super 的使用限制
super 在对象字面量中只能在速写式方法声明里 使用。
如果尝试从普通方法声明{ name: function() {} } 访问它，JS 将抛出一个错误:
var calc = {
numbers: null,
sumElements() {
return this.numbers.reduce(function(a, b) {
return a + b;
});
},
};
var numbers = {
__proto__: calc,
numbers: [4, 6, 7],
sumElements: function() {
if (this.numbers == null || this.numbers.length === 0) {
return 0;
}
return super.sumElements();
},
};
// Throws SyntaxError: 'super' keyword unexpected here
numbers.sumElements();这个sumElements 方法被定义为一个属性：sumElements: function() {...}， 因为super 只能在速写式方法声明中使用。所以，在这种情况下调用它会抛出SyntaxError: 'super' keyword unexpected here 的语法错误。
此限制在很大程度上不影响对象字面量的声明方式。 多数情况下因为语法更简洁，使用速写式方法声明会更好。
在 ES2015 之前, 对象初始化使用的是字面量的形式，通常是静态字符串。要创建具有计算名称的属性，就必须使用属性访问器。
function prefix(prefStr, name) {
return prefStr + '_' + name;
}
var object = {};
object[prefix('number', 'pi')] = 3.14;
object[prefix('bool', 'false')] = false;
object; // => { number_pi: 3.14, bool_false: false }当然，这种定义属性的方式到目前为止令人愉快。
计算属性名称可以很好地解决该问题。当你要通过某个表达式计算属性名时，在方括号{[expression]: value} 里替换对应的代码。对应的表达式会把计算结果作为属性名。
我非常喜欢这个语法：简短又简洁。
让我们改进上面的例子：
function prefix(prefStr, name) {
return prefStr + '_' + name;
}
var object = {
[prefix('number', 'pi')]: 3.14,
[prefix('bool', 'false')]: false,
};
object; // => { number_pi: 3.14, bool_false: false }[prefix('number', 'pi')] 通过计算prefix('number', 'pi') 表达式设置了'number_pi' 这个属性名。
相应地，[prefix('bool', 'false')] 将第二个属性名称设置为'bool_false' 。
4.1Symbol 作为属性名
Symbols 也可以作为可计算的属性名。只要确保将它们包括在方括号中即可：{ [Symbol('name')]: 'Prop value' } 。
例如，让我们用Symbol.iterator 这个特殊的属性，去遍历对象的自有属性名。如下所示：
var object = {
number1: 14,
number2: 15,
string1: 'hello',
string2: 'world',
[Symbol.iterator]: function *() {
var own = Object.getOwnPropertyNames(this),
prop;
while(prop = own.pop()) {
yield prop;
}
}
}
[...object]; // => ['number1', 'number2', 'string1', 'string2'][Symbol.iterator]: function *() { } 定义一个属性，该属性用于迭代对象的自有属性。展开操作符[...object] 使用了迭代器来返回自有属性的数组。
对象字面量的可收集可展开的属性 目前是草案第二阶段 (stage 2) 中的一个提议，它将被选入下一个 Javascript 版本。
它们等价于 ECMAScript 2015 中已可用于数组的 展开和收集操作符 。
可收集的属性 允许收集一个对象在解构赋值后剩下的属性们。
下面这个例子收集了object 解构后留下的属性：
var object = {
propA: 1,
propB: 2,
propC: 3,
};
let { propA, ...restObject } = object;
propA; // => 1
restObject; // => { propB: 2, propC: 3 }可展开的属性 允许从一个源对象拷贝它的自有属性到另一个对象字面量中。这个例子中对象字面量的其它属性合集是从source 对象中展开的：
var source = {
propB: 2,
propC: 3,
};
var object = {
propA: 1,
...source,
};
object; // => { propA: 1, propB: 2, propC: 3 }JavaScript 正在迈出重要的一步。
在ECMAScript 2015中，即使是作为对象字面量的相对较小的结构也得到了相当大的改进。提案草案中还包含了许多新功能。
你可以在对象初始化时直接通过__proto__ 属性名设置其原型。比用Object.create() 简单很多。
请注意，__proto__ 是 ES2015 标准附件B的一部分，不鼓励使用。 该附件实现对于浏览器是必需的，但对于其他环境是可选的。NodeJS 4、5和6支持此功能。
现在方法声明有个更简洁的模式，所以你不必输入function 关键字。而且在速写式声明里，你可以使用super 关键字，它允许你十分容易得通过对象的原型链访问父类属性。
如果属性名需要在运行时计算，现在你可以用可计算的属性名[expression] 来初始化对象。
对象字面量现在确实很酷！
以上是“JavaScript中的对象字面量有什么”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网