1. 首页
  2. IT资讯

「ES6基础」Object的新方法

“u003Cdivu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F66c4c964f25b4f2b8aec1fe5d92a1b46″ img_width=”1200″ img_height=”864″ alt=”「ES6基础」Object的新方法” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003EObject对象可谓是JS的重要核心内容,在你使用JS的过程中,你会发现自己的工作大部分都是在操作对象,ES6、ES7、ES8引入了不少新的方法,本篇文章笔者将带着大家一起熟悉下重点的新方法。u003Cu002Fpu003Eu003Cpu003E本篇文章,笔者将从以下几个方面进行介绍:u003Cu002Fpu003Eu003Culu003Eu003Cliu003E更简洁的语法u003Cu002Fliu003Eu003Cliu003EObject.values() & Object.keys()u003Cu002Fliu003Eu003Cliu003EObject.entries() u003Cu002Fliu003Eu003Cliu003E__proto__u003Cu002Fliu003Eu003Cliu003EObject.is()u003Cu002Fliu003Eu003Cliu003EObject.setPrototypeOf()u003Cu002Fliu003Eu003Cliu003EObject.assign()u003Cu002Fliu003Eu003Cliu003EObject.getOwnPropertyDescriptors()u003Cu002Fliu003Eu003Cu002Fulu003Eu003Cpu003E本篇文章阅读时间预计u003Cstrongu003E6u003Cu002Fstrongu003E分钟u003Cu002Fpu003Eu003Ch1u003Eu003Cstrongu003E更简洁的语法u003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cpu003Eu003Cstrongu003E定义属性u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E我们都知道定义一个对象,必须明确属性名和对应的值,及时属性名和声明的变量名一样(var a = {obj:obj}),ES6及后续版本允许我们用短的代码声明对象,用于将对象的属性分配给与属性同名的变量,我们一般会这么声明变量,代码如下:u003Cu002Fpu003Eu003Cpreu003Evar x = 1, y = 2;u003Cbru003Evar object = {u003Cbru003E x: x,u003Cbru003E y: y u003Cbru003E};u003Cbru003Econsole.log(object.x); u002Fu002Foutput “1”u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E但是ES6之后,你可以这么做u003Cu002Fpu003Eu003Cpreu003Elet x = 1, y = 2;u003Cbru003Elet object = { x, y };u003Cbru003Econsole.log(object.x); u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003Eu003Cstrongu003E定义方法u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003EES6提供了一种新的语法定义对象的方法,示例代码如下:u003Cu002Fpu003Eu003Cpreu003Elet object = {u003Cbru003E myFunction(){u003Cbru003E console.log(“Hello World!!!”); u002Fu002FOutput “Hello World!!!”u003Cbru003E }u003Cbru003E}u003Cbru003Eobject.myFunction();u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E我们可以看出,省去了声明属性名,属性名即为方法名。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E计算属性名u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E对象属性支持计算属性名。其允许在[]中放入表达式,计算结果可以当做属性名。u003Cu002Fpu003Eu003Cpreu003Elet object = {u003Cbru003E[“first” + “Name”]: “Eden”,u003Cbru003E};u003Cbru003Eu002Fu002Fextractu003Cbru003Econsole.log(object[“first” + “Name”]); u003Cbru003Eu002Fu002FOutput “Eden”u003Cbru003Econsole.log(object);u003Cbru003Eu002Fu002FOutput “{ firstName: ‘Eden’ }”u003Cbru003Eu003Cu002Fpreu003Eu003Ch1u003Eu003Cstrongu003EObject.values() & u003Cu002Fstrongu003EObject.keys()u003Cu002Fh1u003Eu003Cpu003Eu003Cstrongu003EES8u003Cu002Fstrongu003E 引入了Object.values()和Object.keys()方法,以数组的形式输出所有对象的值,省去我们手动迭代取出每个对象属性的值,Object.values()示例代码如下:u003Cu002Fpu003Eu003Cpreu003Econst obj = {u003Cbru003E book: “Learning ES2017 (ES8)”,u003Cbru003E author: “前端达人”,u003Cbru003E publisher: “前端达人”,u003Cbru003E useful: trueu003Cbru003E};u003Cbru003Econsole.log(Object.values(obj));u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E上述代码将会输出:u003Cu002Fpu003Eu003Cpreu003E[ ‘Learning ES2017 (ES8)’, ‘前端达人’, ‘前端达人’, true ]u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003EObject.keys()示例代码如下:u003Cu002Fpu003Eu003Cpreu003Econst obj = {u003Cbru003Etbook: “Learning ES2017 (ES8)”,u003Cbru003Etauthor: “前端达人”,u003Cbru003Etpublisher: “前端达人”,u003Cbru003Etuseful: trueu003Cbru003E};u003Cbru003Econsole.log(Object.keys(obj));u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E上述代码将会输出:u003Cu002Fpu003Eu003Cpreu003E[ ‘book’, ‘author’, ‘publisher’, ‘useful’ ]u003Cbru003Eu003Cu002Fpreu003Eu003Ch1u003Eu003Cstrongu003EObject.entries()u003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cpu003EObject.entries()可用于将对象转换为键u002F值对的数组形式。 即一个二维数组,数组的每个元素是一个包含键和值的数组。 示例代码如下:u003Cu002Fpu003Eu003Cpreu003Econst obj = {u003Cbru003E book: “Learning ES2017 (ES8)”,u003Cbru003E author: “前端达人”,u003Cbru003E publisher: “前端达人”,u003Cbru003E useful: trueu003Cbru003E};u003Cbru003Econsole.log(Object.entries(obj));u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E上述代码将会输出:u003Cu002Fpu003Eu003Cpreu003E[ [ ‘book’, ‘Learning ES2017 (ES8)’ ],u003Cbru003E [ ‘author’, ‘前端达人’ ],u003Cbru003E [ ‘publisher’, ‘前端达人’ ],u003Cbru003E [ ‘useful’, true ] ]u003Cbru003Eu003Cu002Fpreu003Eu003Ch1u003Eu003Cstrongu003E__proto__u003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cpu003Eu003Cstrongu003Eprotou003Cu002Fstrongu003E:是一个对象拥有的内置属性,是JS内部使用寻找原型链的属性。可以理解为它是一个指针,用于指向创建它的函数对象的原型对象prototype(即构造函数的prototype)。prototype(原型对象):是函数(Function)的一个属性(每个函数都有一个prototype),这个对象包含了此函数的所有实例共享的属性和方法,即:原型对象。u003Cstrongu003Eproto__属性在ES5中没有标准化,但由于它的受欢迎程度,它在以后的版本中被标准化了。u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E我们可以使用Object.getPrototypeOf()方法返回指定对象的原型(内部[[Prototype]]属性的值,可以使用Object.create()方法创建一个新对象,使用现有的对象来提供新创建的对象的__protou003Cu002Fstrongu003E。u003Cu002Fpu003Eu003Cpreu003Eu002Fu002FIn ES5u003Cbru003Evar x = {prop1: 12};u003Cbru003Evar y = Object.create(x, {prop2:{value: 13}});u003Cbru003Econsole.log(y.prop1); u002Fu002FOutput “12”u003Cbru003Econsole.log(y.prop2); u002Fu002FOutput “13”u003Cbru003Econsole.log(x); u002Fu002F Output: {prop1: 12}u003Cbru003Econsole.log(y); u002Fu002F Output: {prop2: 13}u003Cbru003Econsole.log(y.__proto__); u002Fu002F Output: {prop1: 12}u003Cbru003Eu002Fu002FIn ES6 onwardsu003Cbru003Elet a = {prop1: 12, __proto__: {prop2: 13}};u003Cbru003Econsole.log(a.prop1); u002Fu002FOutput “12”u003Cbru003Econsole.log(a.prop2); u002Fu002FOutput “13”u003Cbru003Econsole.log(a); u002Fu002F Output: {prop1: 12}u003Cbru003Econsole.log(a.__proto__); u002Fu002F Output: {prop2: 13}u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E在ES5示例中,对象y继承对象x,因此打印输出y对象输出x对象的属性(x的属性相对于y来说是隐藏的),我们可以使用__proto__来查找继承自x的属性prop1.ES6及其后,你可以直接将值添加到对象的原型链中。u003Cu002Fpu003Eu003Ch1u003Eu003Cstrongu003EObject.is()u003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cpu003EObject.is()方法用于确定两个值是否相等。它类似于===运算符,但Object.is()方法有一些特殊情况和使用“===”的结果是不一致的,如下段代码所示:u003Cu002Fpu003Eu003Cpreu003Econsole.log(Object.is(0, -0));u002Fu002Ffalseu003Cbru003Econsole.log(0 === -0);u002Fu002Ftrueu003Cbru003Econsole.log(Object.is(NaN, 0u002F0));u002Fu002Ftrueu003Cbru003Econsole.log(NaN === 0u002F0);u002Fu002Ffalseu003Cbru003Econsole.log(Object.is(NaN, NaN));u002Fu002Ftrueu003Cbru003Econsole.log(NaN ===NaN);u002Fu002Ffalseu003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E如下图所示,展示了使用==,===和Object.is的结果差异:u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002Fc3443e79e1904f228c6023e1a5efbed6″ img_width=”600″ img_height=”642″ alt=”「ES6基础」Object的新方法” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Ch1u003Eu003Cstrongu003EObject.setPrototypeOf()u003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cpu003EObject.setPrototypeOf方法可以为现有对象设置原型,返回一个新对象。Object.setPrototypeOf方法接受两个参数,第一个是现有对象,第二个是原型对象。Object.setPrototypeOf() 是给对象设置原型,是为了obj.u003Cstrongu003Eprotou003Cu002Fstrongu003E = …. 这种写法更优雅,有更好的兼容性。如下段代码所示:u003Cu002Fpu003Eu003Cpreu003Elet x = {x: 12};u003Cbru003Elet y = {y: 13};u003Cbru003EObject.setPrototypeOf(y, x);u003Cbru003Econsole.log(y.x); u002Fu002FOutput “12”u003Cbru003Econsole.log(y.y); u002Fu002FOutput “13”u003Cbru003Econsole.log(y);u002Fu002FOutput “{ y: 13 }”u003Cbru003Econsole.log(y.__proto__);u002Fu002FOutput “{ x: 12 }”u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003Eu003Cstrongu003EObject.assign()u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003EObject.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。它至少需要两个对象作为参数,第一个参数是目标对象,后面的参数都是源对象。如下段代码所示:u003Cu002Fpu003Eu003Cpreu003Elet x = {x: 12};u003Cbru003Elet y = {y: 13, __proto__: x};u003Cbru003Elet z = {z: 14, get b() {return 2;}, q: {}};u003Cbru003EObject.defineProperty(z, “z”, {enumerable: false});u003Cbru003Elet m = {};u003Cbru003EObject.assign(m, y, z);u003Cbru003Econsole.log(m.y);u002Fu002F13u003Cbru003Econsole.log(m.z);u002Fu002Fundefinedu003Cbru003Econsole.log(m.b);u002Fu002F2u003Cbru003Econsole.log(m.x);u002Fu002Fundefinedu003Cbru003Econsole.log(m.q == z.q);u002Fu002Ftrueu003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E从上述代码输出,我们可以得出Object.assign()方法的一些特征:u003Cu002Fpu003Eu003Culu003Eu003Cliu003E该方法使用源对象的[[Get]]和目标对象的[[Set]],所以它会调用相关getter和setter。u003Cu002Fliu003Eu003Cliu003E它只是将源的属性值分配给目标的新属性或现有属性。u003Cu002Fliu003Eu003Cliu003E它不会复制来源的[[prototype]]属性。u003Cu002Fliu003Eu003Cliu003EJavaScript属性名称可以是字符串或symbol。Object.assign()这两种u003Cu002Fliu003Eu003Cliu003EObject.assign方法只会拷贝源对象自身的并且可枚举的属性到目标对象。u003Cu002Fliu003Eu003Cliu003E如果目标对象中的属性具有相同的键,则属性将被源中的属性覆盖。后来的源的属性将类似地覆盖早先的属性。u003Cu002Fliu003Eu003Cliu003E为了将属性定义(包括其可枚举性)复制到原型,应使用Object.getOwnPropertyDescriptor()和Object.defineProperty() 。u003Cu002Fliu003Eu003Cliu003EObject.assign不会跳过那些值为[null]或[undefined]的源对象。u003Cu002Fliu003Eu003Cu002Fulu003Eu003Ch1u003Eu003Cstrongu003EObject.getOwnPropertyDescriptors()u003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cpu003E在ES8中JS引入Object.getOwnPropertyDescriptors()方法将返回给定对象的所有属性描述符,如下段代码所示:u003Cu002Fpu003Eu003Cpreu003Econst details = { u003Cbru003E get food1() { return ‘tasty’; },u003Cbru003E get food2() { return ‘bad’; }u003Cbru003E};u003Cbru003Econsole.log(Object.getOwnPropertyDescriptors(details));u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E上述代码将会输出:u003Cu002Fpu003Eu003Cpreu003E{ food1:u003Cbru003E { get: [Function: get food1],u003Cbru003E set: undefined,u003Cbru003E enumerable: true,u003Cbru003E configurable: true },u003Cbru003E food2:u003Cbru003E { get: [Function: get food2],u003Cbru003E set: undefined,u003Cbru003E enumerable: true,u003Cbru003E configurable: true } }u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E这个方法还会用在对象的克隆上,示例代码如下:u003Cu002Fpu003Eu003Cpreu003Econst x = { foo: 1, __proto__: { bar: 2 } };u003Cbru003Econst y = Object.create( u003Cbru003E Object.getPrototypeOf(x), u003Cbru003E Object.getOwnPropertyDescriptors(x) u003Cbru003E);u003Cbru003Econsole.log(y.__proto__); u002Fu002F { bar: 2 }u003Cbru003Eu003Cu002Fpreu003Eu003Ch1u003Eu003Cstrongu003E小节u003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cpu003E今天的内容就到这里,我们可以看出ES6关于对象的使用,增加了不少新方法,使用得当,可以让我们的业务代码更加简洁易读,建议大家在实践中多多运用,加深和理解其应用场景。u003Cu002Fpu003Eu003Cpu003E更多精彩内容,请微信u003Cstrongu003E关注“前端达人”公众号u003Cu002Fstrongu003E!u003Cu002Fpu003Eu003Cu002Fdivu003E”

原文始发于:「ES6基础」Object的新方法

主题测试文章,只做测试使用。发布者:杀手梦三刀,转转请注明出处:http://www.cxybcw.com/10796.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code