{"id":1128,"date":"2022-05-06T14:13:09","date_gmt":"2022-05-06T06:13:09","guid":{"rendered":"http:\/\/zhuxinyong.com\/?p=1128"},"modified":"2023-02-16T14:43:24","modified_gmt":"2023-02-16T06:43:24","slug":"21-javascript-zhong-shao-you-ren-zhi-dao-de-ji-qi","status":"publish","type":"post","link":"https:\/\/zhuxinyong.com\/?p=1128","title":{"rendered":"21 &#8211; JavaScript \u4e2d\u5c11\u6709\u4eba\u77e5\u9053\u7684\u6280\u5de7"},"content":{"rendered":"<p><img decoding=\"async\" src=\"http:\/\/zhuxinyong.com\/wp-content\/uploads\/2022\/05\/16518258498268.jpg\" alt=\"\" \/><\/p>\n<p>\u539f\u6587\u94fe\u63a5\uff1a<a href=\"https:\/\/dev.to\/bhagatparwinder\/lesser-known-javascript-tricks-kjj\" target=\"_blank\" rel=\"noopener\">https:\/\/dev.to\/bhagatparwinder\/lesser-known-javascript-tricks-kjj<\/a><\/p>\n<h3><a id=\"%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0%E7%9A%84%E6%8B%AC%E5%8F%B7%E5%8F%AF%E9%80%89\" class=\"anchor\" aria-hidden=\"true\"><span class=\"octicon octicon-link\"><\/span><\/a>\u6784\u9020\u51fd\u6570\u7684\u62ec\u53f7\u53ef\u9009<\/h3>\n<pre><code class=\"language-plain_text\">const newDate = new Date(); \/\/ valid\nconst myClass = new MyClass(); \/\/ valid\n\nconst anotherDate = new Date; \/\/ Also valid\nconst myClass = new MyClass; \/\/ You bet this is valid\n<\/code><\/pre>\n<p>\u53ea\u6709\u5f53\u6784\u9020\u51fd\u6570\u9700\u8981\u53c2\u6570\u65f6\uff0c\u62ec\u53f7\u624d\u662f\u5fc5\u987b\u7684\u3002<\/p>\n<h3><a id=\"with%E8%AF%AD%E5%8F%A5\" class=\"anchor\" aria-hidden=\"true\"><span class=\"octicon octicon-link\"><\/span><\/a>With \u8bed\u53e5<\/h3>\n<p><strong>with<\/strong> \u8bed\u53e5\u662f\u4e0d\u63a8\u8350\u4f7f\u7528\u7684\uff0c\u5e76\u4e14\u5728 ES5 \u7684\u4e25\u683c\u6a21\u5f0f\u4e0b\u662f\u7981\u7528\u7684\u3002<\/p>\n<p>with \u6269\u5c55\u4e86\u8bed\u53e5\u7684\u4f5c\u7528\u57df\uff0cwith \u4f1a\u628a\u4f20\u5165\u53c2\u6570\u4e0a\u7684\u6240\u6709\u5c5e\u6027\u90fd\u9644\u52a0\u5230\u4f5c\u7528\u57df\u94fe\u4e0a\u3002<\/p>\n<pre><code class=\"language-plain_text\">const person = {\n    name: &quot;Parwinder&quot;,\n    age: 33,\n    work: &quot;Software Architect&quot;\n}\n\nwith (person) {\n    console.log(`Hi, I am ${name}, and I am ${ age } years old. I work as a ${work}.`);\n    \/\/ Hi, I am Parwinder, and I am 33 years old. I work as a Software Architect.\n}\n<\/code><\/pre>\n<h3><a id=\"function%E7%9A%84%E5%8F%82%E6%95%B0\" class=\"anchor\" aria-hidden=\"true\"><span class=\"octicon octicon-link\"><\/span><\/a>Function \u7684\u53c2\u6570<\/h3>\n<p>\u6bcf\u4e2a\u51fd\u6570\uff08\u9664\u4e86\u7bad\u5934\u51fd\u6570\uff09\u6709\u4e00\u4e2a <strong>arguments<\/strong> \u7c7b\u6570\u7ec4\u5bf9\u8c61\uff0c\u5305\u62ec\u6240\u6709\u4f20\u9012\u7ed9\u51fd\u6570\u7684\u53c2\u6570\u3002<\/p>\n<pre><code class=\"language-plain_text\">function foo(a, b, c) {\n  console.log(arguments[0]); \/\/ 1\n  console.log(arguments[1]); \/\/ 2\n  console.log(arguments[2]); \/\/ 3\n}\n\nfoo(1, 2, 3);\n<\/code><\/pre>\n<p>arguments \u6709\u4e24\u4e2a\u5c5e\u6027\uff1a<\/p>\n<ol>\n<li><strong>arguments.callee<\/strong>: \u88ab\u8c03\u7528\u7684\u51fd\u6570\uff1b<\/li>\n<li><strong>arguments.callee.caller<\/strong>: \u8c03\u7528\u51fd\u6570\u7684\u51fd\u6570\uff1b<\/li>\n<\/ol>\n<pre><code class=\"language-plain_text\">function foo(){\n    console.log(arguments)\n    console.log(arguments.callee)\n    console.log(arguments.callee.caller)       \n}\n\nfunction fun(){\n    foo()\n}\n\nfun() \n<\/code><\/pre>\n<p>\u7ed3\u679c\uff1a<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/zhuxinyong.com\/wp-content\/uploads\/2022\/05\/16518238972247.jpg\" alt=\"\" \/><\/p>\n<p>\u6ce8\u610f\uff1a\u5c31\u50cf\u4e0a\u9762\u7684 with \u8bed\u53e5\uff0cES5 \u7684\u4e25\u683c\u6a21\u5f0f\u4e0b callee \u548c caller \u662f\u88ab\u7981\u6b62\u7684\u3002<\/p>\n<h3><a id=\"%E7%BA%AF%E5%AF%B9%E8%B1%A1\" class=\"anchor\" aria-hidden=\"true\"><span class=\"octicon octicon-link\"><\/span><\/a>\u7eaf\u5bf9\u8c61<\/h3>\n<p>\u4e00\u4e2a\u7eaf\u5bf9\u8c61\u662f\u5728\u5176 prototype \u4e0a\u6ca1\u6709\u65b9\u6cd5\u7684\u3002<\/p>\n<pre><code class=\"language-plain_text\">const x = {};\n<\/code><\/pre>\n<p>\u4e0a\u9762\u521b\u5efa\u4e86\u4e00\u4e2a\u5bf9\u8c61\uff0c\u4f46\u5176 prototype \u4e0a\u6709 constructor \u5c5e\u6027\u548c hasOwnProperty\u3001isPrototypeOf \u548c toString \u8fd9\u6837\u7684\u65b9\u6cd5\u3002<\/p>\n<pre><code class=\"language-plain_text\">const x = Object.create(null);\n<\/code><\/pre>\n<p><strong>create(null)<\/strong> \u751f\u6210\u4e86\u4e00\u4e2a\u6ca1\u6709 prototype \u7684\u5bf9\u8c61\uff01<\/p>\n<h3><a id=\"%E7%A7%BB%E5%87%BA%E6%95%B0%E7%BB%84%E4%B8%AD%E7%9A%84%E9%87%8D%E5%A4%8D%E9%A1%B9\" class=\"anchor\" aria-hidden=\"true\"><span class=\"octicon octicon-link\"><\/span><\/a>\u79fb\u51fa\u6570\u7ec4\u4e2d\u7684\u91cd\u590d\u9879<\/h3>\n<pre><code class=\"language-plain_text\">const arr = [1, 1, 1, 1, 2, 3, 4, 5, 6, 7, 6, 6, 6, 7, 8, 9];\nconst arrWithoutDuplicates = [...new Set(arr)];\nconsole.log(arrWithoutDuplicates); \/\/ [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]\n<\/code><\/pre>\n<p>Set \u4e2d\u7684\u503c\u90fd\u662f\u552f\u4e00\u7684\uff0c\u5f53\u6570\u7ec4\u7ecf\u8fc7 Set \u5305\u88c5\u540e\uff0c\u6211\u4eec\u53ea\u9700\u8981\u901a\u8fc7 spread(&#8230;)\u64cd\u4f5c\u7b26\u5206\u89e3\u5230\u4e00\u4e2a\u7a7a\u7684\u6570\u7ec4\u5c31\u884c\u4e86\u3002<\/p>\n<h3><a id=\"%E5%8F%AF%E9%80%89%E9%93%BE\" class=\"anchor\" aria-hidden=\"true\"><span class=\"octicon octicon-link\"><\/span><\/a>\u53ef\u9009\u94fe<\/h3>\n<p>\u65e0\u8bba\u4f55\u65f6\u4f60\u9700\u8981\u83b7\u53d6\u5d4c\u5957\u5bf9\u8c61\u4e0a\u7684\u5c5e\u6027\u4e14\u4f60\u4e0d\u77e5\u9053\u5b83\u662f\u5426\u5b58\u5728\uff0c\u4f60\u9700\u8981\u5411\u4e0b\u9762\u8fd9\u6837\u505a\uff1a<\/p>\n<pre><code class=\"language-plain_text\">const nestedObject = {\n    name: &quot;Parwinder&quot;,\n    details: {\n        age: 33,\n        cars: {\n            first: &quot;jeep&quot;,\n            second: &quot;tesla&quot;,\n            accessories: {\n                x: 200,\n                y: 300\n            }\n        }\n    }\n}\n\nif (nestedObject &amp;&amp;\n    nestedObject.details &amp;&amp;\n    nestedObject.details.cars &amp;&amp;\n    nestedObject.details.cars.accessories) {\n    console.log(nestedObject.details.cars.accessories.x); \/\/ 200\n}\n<\/code><\/pre>\n<p>\u53ef\u9009\u94fe\uff08Optional Chaining\uff09\u5c31\u662f\u6765\u89e3\u51b3\u8fd9\u4e2a\u7e41\u7410\u95ee\u9898\u7684\uff0c\u901a\u8fc7\u53ef\u9009\u94fe\uff08 Options Chaining\uff09\u4f60\u53ef\u4ee5\u8fd9\u6837\u505a\uff1a<\/p>\n<pre><code class=\"language-plain_text\">const nestedObject = {\n    name: &quot;Parwinder&quot;,\n    details: {\n        age: 33,\n        cars: {\n            first: &quot;jeep&quot;,\n            second: &quot;tesla&quot;,\n            accessories: {\n                x: 200,\n                y: 300\n            }\n        }\n    }\n}\n\nconsole.log(nestedObject?.details?.cars?.accessories?.x); \/\/ 200\n<\/code><\/pre>\n<p>\u6ce8\u610f\uff1aOptional Chaining \u51fa\u73b0\u5728 ES2020\/ES11 \u89c4\u8303\u91cc\uff0c\u6765\u770b\u770b\u8fd9\u91cc\uff1a<a href=\"https:\/\/tc39.es\/ecma262\/2020\/%E3%80%82\" target=\"_blank\" rel=\"noopener\">https:\/\/tc39.es\/ecma262\/2020\/\u3002<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u539f\u6587\u94fe\u63a5\uff1ahttps:\/\/dev.to\/bhagatparwinder\/lesser-known-j&#46;&#46;&#46;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[249,2,20,3],"tags":[6,114],"class_list":["post-1128","post","type-post","status-publish","format-standard","hentry","category-javascript","category-all","category-frontend","category-tech","tag-javascript","tag-tricks"],"_links":{"self":[{"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/posts\/1128","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1128"}],"version-history":[{"count":1,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/posts\/1128\/revisions"}],"predecessor-version":[{"id":1129,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/posts\/1128\/revisions\/1129"}],"wp:attachment":[{"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1128"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1128"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1128"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}