{"id":254221,"date":"2022-10-12T08:09:55","date_gmt":"2022-10-12T00:09:55","guid":{"rendered":"https:\/\/lrxjmw.cn\/?p=254221"},"modified":"2022-10-04T11:12:09","modified_gmt":"2022-10-04T03:12:09","slug":"five-new-javascript-features","status":"publish","type":"post","link":"https:\/\/lrxjmw.cn\/five-new-javascript-features.html","title":{"rendered":"\u65b0\u7684 JavaScript \u65b0\u7279\u6027\u6765\u5b66\u4e60\u4e00\u6ce2"},"content":{"rendered":"\n\n\n
\u5bfc\u8bfb<\/td>\nJavaScript\u5728\u4e0d\u65ad\u5730\u5347\u7ea7\u8fed\u4ee3\uff0c\u8d8a\u6765\u8d8a\u591a\u7684\u65b0\u7279\u6027\u8ba9\u6211\u4eec\u7684\u4ee3\u7801\u5199\u8d77\u6765\u53d8\u5f97\u7b80\u6d01\u6709\u8da3\uff0c\u8fd9\u7bc7\u6587\u7ae0\u4f1a\u4ecb\u7ecd5\u4e2a\u65b0\u7279\u6027\uff0c\u4e00\u8d77\u7814\u7a76\u4e00\u4e0b\u628a\u3002<\/strong><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

\"\"<\/p>\n

1. \u4f7f\u7528\"Object.hasOwn\"\u66ff\u4ee3\u201cin\u201d\u64cd\u4f5c\u7b26<\/strong><\/div>\n

\u6709\u65f6\uff0c\u6211\u4eec\u60f3\u77e5\u9053\u5bf9\u8c61\u4e0a\u662f\u5426\u5b58\u5728\u67d0\u4e2a\u5c5e\u6027\uff0c\u4e00\u822c\u4f1a\u4f7f\u7528\u201cin\u201d\u64cd\u4f5c\u7b26\u6216\u201cobj.hasOwnProperty\u201d\uff0c\u4f46\u5b83\u4eec\u90fd\u6709\u5404\u81ea\u7684\u7f3a\u9677\u3002<\/p>\n

in<\/strong><\/span><\/div>\n

\u5982\u679c\u6307\u5b9a\u7684\u5c5e\u6027\u4f4d\u4e8e\u5bf9\u8c61\u6216\u5176\u539f\u578b\u94fe\u4e2d\uff0c\u201cin\u201d\u8fd0\u7b97\u7b26\u5c06\u8fd4\u56detrue\u3002<\/p>\n

\r\nconst Person = function (age) {\r\n  this.age = age\r\n}\r\nPerson.prototype.name = 'fatfish'\r\nconst p1 = new Person(24)\r\nconsole.log('age' in p1) \/\/ true  \r\nconsole.log('name' in p1) \/\/ true  \u6ce8\u610f\u8fd9\u91cc\r\n<\/pre>\n
obj.hasOwnProperty<\/strong><\/span><\/div>\n

hasOwnProperty \u65b9\u6cd5\u4f1a\u8fd4\u56de\u4e00\u4e2a\u5e03\u5c14\u503c\uff0c\u8868\u793a\u5bf9\u8c61\u81ea\u8eab\u5c5e\u6027\u4e2d\u662f\u5426\u5177\u6709\u5bf9\u5e94\u7684\u503c\uff08\u539f\u578b\u94fe\u4e0a\u7684\u5c5e\u6027\u4e0d\u4f1a\u8bfb\u53d6\uff09\u3002<\/p>\n

\r\nconst Person = function (age) {\r\n  this.age = age\r\n}\r\nPerson.prototype.name = 'fatfish'\r\nconst p1 = new Person(24)\r\nconsole.log(p1.hasOwnProperty('age')) \/\/ true  \r\nconsole.log(p1.hasOwnProperty('name')) \/\/ fasle  \u6ce8\u610f\u8fd9\u91cc\r\n<\/pre>\n

obj.hasOwnProperty\u5df2\u7ecf\u53ef\u4ee5\u8fc7\u6ee4\u6389\u539f\u578b\u94fe\u4e0a\u7684\u5c5e\u6027\uff0c\u4f46\u5728\u67d0\u4e9b\u60c5\u51b5\u4e0b\uff0c\u5b83\u8fd8\u662f\u4e0d\u5b89\u5168\u3002<\/p>\n

\r\nObject.create(null).hasOwnProperty('name')\r\n\/\/ Uncaught TypeError: Object.create(...).hasOwnProperty is not a function\r\n<\/pre>\n
Object.hasOwn<\/strong><\/span><\/div>\n

\u522b\u6025\uff0c\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528Object.hasOwn\u6765\u907f\u514d\u8fd9\u4e24\u4e2a\u95ee\u9898\uff0c\u8fd9\u6bd4\u201cobj.hasOwnProperty\u201d\u65b9\u6cd5\u66f4\u52a0\u65b9\u4fbf\u3001\u5b89\u5168\u3002<\/p>\n

\r\nlet object = { age: 24 }\r\nObject.hasOwn(object, 'age') \/\/ true\r\nlet object2 = Object.create({ age: 24 })\r\nObject.hasOwn(object2, 'age') \/\/ false  \r\nlet object3 = Object.create(null)\r\nObject.hasOwn(object3, 'age') \/\/ false\r\n<\/pre>\n
2. \u4f7f\u7528\"#\"\u58f0\u660e\u79c1\u6709\u5c5e\u6027<\/strong><\/div>\n

\u4ee5\u524d\uff0c\u6211\u4eec\u4e00\u822c\u7528_\u8868\u793a\u79c1\u6709\u5c5e\u6027\uff0c\u4f46\u5b83\u5e76\u4e0d\u9760\u8c31\uff0c\u8fd8\u662f\u4f1a\u88ab\u5916\u90e8\u4fee\u6539\u3002<\/p>\n

\r\nclass Person {\r\n  constructor (name) {\r\n    this._money = 1\r\n    this.name = name\r\n  }\r\n  get money () {\r\n    return this._money\r\n  }\r\n  set money (money) {\r\n    this._money = money\r\n  }\r\n  showMoney () {\r\n    console.log(this._money)\r\n  }\r\n}\r\nconst p1 = new Person('fatfish')\r\nconsole.log(p1.money) \/\/ 1\r\nconsole.log(p1._money) \/\/ 1\r\np1._money = 2 \/\/ \u4f9d\u65e7\u53ef\u4ee5\u4ece\u5916\u90e8\u4fee\u6539_money\u5c5e\u6027\uff0c\u6240\u4ee5\u8fd9\u79cd\u505a\u6cd5\u5e76\u4e0d\u5b89\u5168\r\nconsole.log(p1.money) \/\/ 2\r\nconsole.log(p1._money) \/\/ 2\r\n<\/pre>\n

\u4f7f\u7528\u201c#\u201d\u5b9e\u73b0\u771f\u6b63\u79c1\u6709\u5c5e\u6027<\/p>\n

\r\nclass Person {\r\n  #money=1\r\n  constructor (name) {\r\n    this.name = name\r\n  }\r\n  get money () {\r\n    return this.#money\r\n  }\r\n  set money (money) {\r\n    this.#money = money\r\n  }\r\n  showMoney () {\r\n    console.log(this.#money)\r\n  }\r\n}\r\nconst p1 = new Person('fatfish')\r\nconsole.log(p1.money) \/\/ 1\r\n\/\/ p1.#money = 2 \/\/ \u6ca1\u6cd5\u4ece\u5916\u90e8\u76f4\u63a5\u4fee\u6539\r\np1.money = 2\r\nconsole.log(p1.money) \/\/ 2\r\nconsole.log(p1.#money) \/\/ Uncaught SyntaxError: Private field '#money' must be declared in an enclosing class\r\n<\/pre>\n
3. \u8d85\u6709\u7528\u7684\"\u6570\u5b57\u5206\u9694\u7b26\"<\/strong><\/div>\n

\u76f4\u63a5\u770b\u4f8b\u5b50\uff0c\u60ca\u5446\u4e86\u6211...<\/p>\n

\r\nconst sixBillion = 6000000000\r\n\/\/ ❌ \u96be\u4ee5\u9605\u8bfb\r\nconst sixBillion2 = 6000_000_000\r\n\/\/ ✅ \u66f4\u52a0\u6613\u4e8e\u9605\u8bfb\r\nconsole.log(sixBillion2) \/\/ 6000000000\r\n<\/pre>\n

\u5f53\u7136\u4e5f\u53ef\u4ee5\u4f7f\u7528\"_\"\u7528\u4e8e\u8ba1\u7b97<\/p>\n

\r\nconst sum = 1000 + 6000_000_000 \/\/ 6000001000\r\n<\/pre>\n
4. \u4f7f\u7528 ?. \u7b80\u5316 && \u548c \u4e09\u5143\u8fd0\u7b97\u7b26<\/strong><\/div>\n

\u8fd9\u4e9b\u4f8b\u5b50\uff0c\u4f60\u4e00\u5b9a\u975e\u5e38\u719f\u6089\uff0c\u54b1\u4eec\u6709\u529e\u6cd5\u53ef\u4ee5\u7b80\u5316\u5b83\u5417\uff1f<\/p>\n

\r\nconst obj = null\r\nconsole.log(obj && obj.name)\r\nconst $title = document.querySelector('.title')\r\nconst title = $title ? title.innerText : undefined\r\n<\/pre>\n
\u201c?.\u201d<\/strong><\/span><\/div>\n
\r\nconst obj = null\r\nconsole.log(obj?.name)\r\nconst $title = document.querySelector('.title')\r\nconst title = $title?.innerText\r\n<\/pre>\n
Tips<\/strong><\/span><\/div>\n

?. \u7684\u4e00\u822c\u7528\u6cd5<\/p>\n

  • 1.obj?.prop \u5bf9\u8c61\u5c5e\u6027<\/li>\n
  • 2.obj?.[expr] \u5bf9\u8c61\u5c5e\u6027<\/li>\n
  • 3.func?.(...args) \u6267\u884c\u51fd\u6570<\/li>\n
    5. \u4f7f\u7528\"BigInt\"\u652f\u6301\u5927\u6570\u8ba1\u7b97<\/strong><\/div>\n

    JS\u4e2d\u8d85\u8fc7\u201cNumber.MAX_SAFE_INTEGER\u201d\u7684\u6570\u5b57\u8ba1\u7b97\u5c06\u662f\u4e0d\u5b89\u5168\u7684\u3002<\/p>\n

    Example:<\/strong><\/span><\/div>\n
    \r\nMath.pow(2, 53) === Math.pow(2, 53) + 1 \/\/ true\r\n\/\/ Math.pow(2, 53) => 9007199254740992\r\n\/\/ Math.pow(2, 53) + 1 => 9007199254740992\r\n<\/pre>\n

    \u4f7f\u7528\"BigInt\"\u5b8c\u5168\u53ef\u4ee5\u907f\u514d\u8fd9\u4e2a\u95ee\u9898<\/p>\n

    \r\nBigInt(Math.pow(2, 53)) === BigInt(Math.pow(2, 53)) + BigInt(1) \/\/ false\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"

    \u6709\u65f6\uff0c\u6211\u4eec\u60f3\u77e5\u9053\u5bf9\u8c61\u4e0a\u662f\u5426\u5b58\u5728\u67d0\u4e2a\u5c5e\u6027\uff0c\u4e00\u822c\u4f1a\u4f7f\u7528\u201cin\u201d\u64cd\u4f5c\u7b26\u6216\u201cobj.hasOwnProperty\u201d\uff0c\u4f46 […]<\/p>\n","protected":false},"author":1898,"featured_media":254228,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[55],"tags":[631],"class_list":["post-254221","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-thread","tag-javascript"],"acf":[],"_links":{"self":[{"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/posts\/254221","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/users\/1898"}],"replies":[{"embeddable":true,"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/comments?post=254221"}],"version-history":[{"count":8,"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/posts\/254221\/revisions"}],"predecessor-version":[{"id":254254,"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/posts\/254221\/revisions\/254254"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/media\/254228"}],"wp:attachment":[{"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/media?parent=254221"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/categories?post=254221"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/tags?post=254221"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}