〔js如何输出objectobjectobjectobject〕js如何输出页面内容

Object对象可谓是JS的重要核心内容，在你使用JS的过程中，你会发现自己的工作大部分都是在操作对象，ES6、ES7、ES8引入了不少新的方法，本篇文章笔者将带着大家一起熟悉下重点的新方法。

本篇文章，笔者将从以下几个方面进行介绍：

• 更简洁的语法
• Object.values() & Object.keys()
• Object.entries()
• __proto__
• Object.is()
• Object.setprototypeOf()
• Object.assign()
• Object.getOwnPropertyDescriptors()

本篇文章阅读时间预计6分钟

更简洁的语法

定义属性

我们都知道定义一个对象，必须明确属性名和对应的值，及时属性名和声明的变量名一样（var a = {obj：obj}），ES6及后续版本允许我们用短的代码声明对象，用于将对象的属性分配给与属性同名的变量，我们一般会这么声明变量，代码如下：

var x = 1, y = 2; var object = { x: x, y: y }; con); //Output "1”

但是ES6之后，你可以这么做

let x = 1, y = 2; let object = { x, y }; con);

定义方法

ES6提供了一种新的语法定义对象的方法，示例代码如下：

let object = { myFunction(){ con("Hello World!!!"); //Output "Hello World!!!" } } object.myFunction();

我们可以看出，省去了声明属性名，属性名即为方法名。

计算属性名

对象属性支持计算属性名。其允许在[]中放入表达式，计算结果可以当做属性名。

let object = { ["first" + "Name"]: "Eden", }; //extract con(object["first" + "Name"]); //Output "Eden” con(object); //Output "{ firstName: 'Eden' }”

Object.values() & Object.keys()

ES8 引入了Object.values()和Object.keys()方法，以数组的形式输出所有对象的值，省去我们手动迭代取出每个对象属性的值，Object.values()示例代码如下：

const obj = { book: "Learning ES2017 (ES8)", author: "前端达人", publisher: "前端达人", useful: true }; con(obj));

上述代码将会输出：

[ 'Learning ES2017 (ES8)', '前端达人', '前端达人', true ]

Object.keys()示例代码如下：

const obj = { book: "Learning ES2017 (ES8)", author: "前端达人", publisher: "前端达人", useful: true }; con(obj));

上述代码将会输出：

[ 'book', 'author', 'publisher', 'useful' ]

Object.entries()

Object.entries()可用于将对象转换为键/值对的数组形式。 即一个二维数组，数组的每个元素是一个包含键和值的数组。 示例代码如下：

const obj = { book: "Learning ES2017 (ES8)", author: "前端达人", publisher: "前端达人", useful: true }; con(obj));

上述代码将会输出：

[ [ 'book', 'Learning ES2017 (ES8)' ], [ 'author', '前端达人' ], [ 'publisher', '前端达人' ], [ 'useful', true ] ]

__proto__

proto：是一个对象拥有的内置属性，是JS内部使用寻找原型链的属性。可以理解为它是一个指针，用于指向创建它的函数对象的原型对象prototype（即构造函数的prototype）。prototype（原型对象）：是函数（Function）的一个属性（每个函数都有一个prototype），这个对象包含了此函数的所有实例共享的属性和方法，即：原型对象。proto__属性在ES5中没有标准化，但由于它的受欢迎程度，它在以后的版本中被标准化了。

我们可以使用Object.getPrototypeOf()方法返回指定对象的原型（内部[[Prototype]]属性的值，可以使用Object.create()方法创建一个新对象，使用现有的对象来提供新创建的对象的__proto。

//In ES5 var x = {prop1: 12}; var y = Object.create(x, {prop2:{value: 13}}); con); //Output "12" con); //Output "13" con(x); // Output: {prop1: 12} con(y); // Output: {prop2: 13} con); // Output: {prop1: 12} //In ES6 onwards let a = {prop1: 12, __proto__: {prop2: 13}}; con); //Output "12" con); //Output "13" con(a); // Output: {prop1: 12} con); // Output: {prop2: 13}

在ES5示例中，对象y继承对象x,因此打印输出y对象输出x对象的属性(x的属性相对于y来说是隐藏的)，我们可以使用__proto__来查找继承自x的属性及其后，你可以直接将值添加到对象的原型链中。

Object.is()

Object.is()方法用于确定两个值是否相等。它类似于===运算符，但Object.is()方法有一些特殊情况和使用“===”的结果是不一致的，如下段代码所示：

con(0, -0));//false con(0 === -0);//true con(NaN, 0/0));//true con(NaN === 0/0);//false con(NaN, NaN));//true con(NaN ===NaN);//false

如下图所示，展示了使用==，===和Object.is的结果差异：

Object.setPrototypeOf()

Object.setPrototypeOf方法可以为现有对象设置原型，返回一个新对象。Object.setPrototypeOf方法接受两个参数，第一个是现有对象，第二个是原型对象。Object.setPrototypeOf() 是给对象设置原型，是为了obj.proto = .... 这种写法更优雅，有更好的兼容性。如下段代码所示：

let x = {x: 12}; let y = {y: 13}; Object.setPrototypeOf(y, x); con); //Output "12" con); //Output "13” con(y);//Output "{ y: 13 }" con);//Output "{ x: 12 }"

Object.assign()

Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。它至少需要两个对象作为参数，第一个参数是目标对象，后面的参数都是源对象。如下段代码所示：

let x = {x: 12}; let y = {y: 13, __proto__: x}; let z = {z: 14, get b() {return 2;}, q: {}}; Object.defineProperty(z, "z", {enumerable: false}); let m = {}; Object.assign(m, y, z); con);//13 con);//undefined con);//2 con);//undefined con == z.q);//true

从上述代码输出，我们可以得出Object.assign()方法的一些特征：

• 该方法使用源对象的[[Get]]和目标对象的[[Set]]，所以它会调用相关getter和setter。
• 它只是将源的属性值分配给目标的新属性或现有属性。
• 它不会复制来源的[[prototype]]属性。
• JavaScript属性名称可以是字符串或symbol。Object.assign()这两种
• Object.assign方法只会拷贝源对象自身的并且可枚举的属性到目标对象。
• 如果目标对象中的属性具有相同的键，则属性将被源中的属性覆盖。后来的源的属性将类似地覆盖早先的属性。
• 为了将属性定义（包括其可枚举性）复制到原型，应使用Object.getOwnPropertyDescriptor()和Object.defineProperty() 。
• Object.assign不会跳过那些值为[null]或[undefined]的源对象。

Object.getOwnPropertyDescriptors()

在ES8中JS引入Object.getOwnPropertyDescriptors()方法将返回给定对象的所有属性描述符，如下段代码所示：

const details = { get food1() { return 'tasty'; }, get food2() { return 'bad'; } }; con(details));

上述代码将会输出：

{ food1: { get: [Function: get food1], set: undefined, enumerable: true, configurable: true }, food2: { get: [Function: get food2], set: undefined, enumerable: true, configurable: true } }

这个方法还会用在对象的克隆上，示例代码如下：

const x = { foo: 1, __proto__: { bar: 2 } }; const y = Object.create( Object.getPrototypeOf(x), Object.getOwnPropertyDescriptors(x) ); con); // { bar: 2 }

小节

今天的内容就到这里，我们可以看出ES6关于对象的使用，增加了不少新方法，使用得当，可以让我们的业务代码更加简洁易读，建议大家在实践中多多运用，加深和理解其应用场景。

更多精彩内容，请微信关注“前端达人”公众号！