root
/
blog_web


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
							<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>读懂 ECMAScript 规格 | 彪哥博客</title>
    <meta name="generator" content="VuePress 1.9.5">
    <link rel="icon" href="/blog/img/favicon.ico">
    <meta name="description" content="web前端技术博客,专注web前端学习与总结。JavaScript,js,ES6,TypeScript,vue,React,python,css3,html5,Node,git,github等技术文章。">
    <meta name="keywords" content="前端博客,个人技术博客,前端,前端开发,前端框架,web前端,前端面试题,技术文档,学习,面试,JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github,markdown">
    <meta name="theme-color" content="#11a8cd">
    
    <link rel="preload" href="/blog/assets/css/0.styles.dc03b589.css" as="style"><link rel="preload" href="/blog/assets/js/app.90754bd5.js" as="script"><link rel="preload" href="/blog/assets/js/2.106f41fb.js" as="script"><link rel="preload" href="/blog/assets/js/3.6748bd5c.js" as="script"><link rel="preload" href="/blog/assets/js/113.9322f157.js" as="script"><link rel="prefetch" href="/blog/assets/js/10.cad3aa70.js"><link rel="prefetch" href="/blog/assets/js/100.08a8b2d8.js"><link rel="prefetch" href="/blog/assets/js/101.2aabb12c.js"><link rel="prefetch" href="/blog/assets/js/102.13f3cc4d.js"><link rel="prefetch" href="/blog/assets/js/103.c19aee03.js"><link rel="prefetch" href="/blog/assets/js/104.91a6aec1.js"><link rel="prefetch" href="/blog/assets/js/105.71de1aa4.js"><link rel="prefetch" href="/blog/assets/js/106.207422de.js"><link rel="prefetch" href="/blog/assets/js/107.bf754f60.js"><link rel="prefetch" href="/blog/assets/js/108.87ddbf21.js"><link rel="prefetch" href="/blog/assets/js/109.de6075c6.js"><link rel="prefetch" href="/blog/assets/js/11.f2e9eca8.js"><link rel="prefetch" href="/blog/assets/js/110.f19c57ae.js"><link rel="prefetch" href="/blog/assets/js/111.da99a105.js"><link rel="prefetch" href="/blog/assets/js/112.9dd75c6f.js"><link rel="prefetch" href="/blog/assets/js/114.c5150cc6.js"><link rel="prefetch" href="/blog/assets/js/115.4fb547bf.js"><link rel="prefetch" href="/blog/assets/js/116.2ddf1aa8.js"><link rel="prefetch" href="/blog/assets/js/117.3c970f48.js"><link rel="prefetch" href="/blog/assets/js/118.921e1d54.js"><link rel="prefetch" href="/blog/assets/js/119.0141defb.js"><link rel="prefetch" href="/blog/assets/js/12.98512c60.js"><link rel="prefetch" href="/blog/assets/js/120.de47a761.js"><link rel="prefetch" href="/blog/assets/js/121.a0b3693a.js"><link rel="prefetch" href="/blog/assets/js/122.6c7dd225.js"><link rel="prefetch" href="/blog/assets/js/123.dbff103c.js"><link rel="prefetch" href="/blog/assets/js/124.493776ef.js"><link rel="prefetch" href="/blog/assets/js/125.554c9fbf.js"><link rel="prefetch" href="/blog/assets/js/126.2421fe84.js"><link rel="prefetch" href="/blog/assets/js/127.805f10a4.js"><link rel="prefetch" href="/blog/assets/js/128.6543adba.js"><link rel="prefetch" href="/blog/assets/js/129.d7c56b92.js"><link rel="prefetch" href="/blog/assets/js/13.a79fa0c7.js"><link rel="prefetch" href="/blog/assets/js/130.593d21f0.js"><link rel="prefetch" href="/blog/assets/js/131.4c90d8b8.js"><link rel="prefetch" href="/blog/assets/js/132.4ad12bdc.js"><link rel="prefetch" href="/blog/assets/js/133.485de1b9.js"><link rel="prefetch" href="/blog/assets/js/134.78bc8f57.js"><link rel="prefetch" href="/blog/assets/js/135.47498729.js"><link rel="prefetch" href="/blog/assets/js/136.d99350df.js"><link rel="prefetch" href="/blog/assets/js/137.57ba6d3f.js"><link rel="prefetch" href="/blog/assets/js/138.d976c801.js"><link rel="prefetch" href="/blog/assets/js/139.766f20b7.js"><link rel="prefetch" href="/blog/assets/js/14.0fdf0c78.js"><link rel="prefetch" href="/blog/assets/js/140.0d9b8fbc.js"><link rel="prefetch" href="/blog/assets/js/141.128b6e26.js"><link rel="prefetch" href="/blog/assets/js/142.e004a584.js"><link rel="prefetch" href="/blog/assets/js/143.5a19a0b2.js"><link rel="prefetch" href="/blog/assets/js/144.5f397211.js"><link rel="prefetch" href="/blog/assets/js/145.cde5f3a0.js"><link rel="prefetch" href="/blog/assets/js/146.4185092c.js"><link rel="prefetch" href="/blog/assets/js/147.ac0e55d3.js"><link rel="prefetch" href="/blog/assets/js/148.30f02604.js"><link rel="prefetch" href="/blog/assets/js/149.760a79ed.js"><link rel="prefetch" href="/blog/assets/js/15.fce722b2.js"><link rel="prefetch" href="/blog/assets/js/150.3a1675b7.js"><link rel="prefetch" href="/blog/assets/js/151.0d73a46e.js"><link rel="prefetch" href="/blog/assets/js/152.c9c054d4.js"><link rel="prefetch" href="/blog/assets/js/153.b007c8a2.js"><link rel="prefetch" href="/blog/assets/js/154.a3acc6bf.js"><link rel="prefetch" href="/blog/assets/js/155.b5c0abcd.js"><link rel="prefetch" href="/blog/assets/js/156.2ba750fc.js"><link rel="prefetch" href="/blog/assets/js/157.fe92af0c.js"><link rel="prefetch" href="/blog/assets/js/158.e16fda40.js"><link rel="prefetch" href="/blog/assets/js/159.7fc7fd44.js"><link rel="prefetch" href="/blog/assets/js/16.871928af.js"><link rel="prefetch" href="/blog/assets/js/160.b581a0f4.js"><link rel="prefetch" href="/blog/assets/js/161.97acae68.js"><link rel="prefetch" href="/blog/assets/js/162.cec1b9a3.js"><link rel="prefetch" href="/blog/assets/js/163.a00f98f7.js"><link rel="prefetch" href="/blog/assets/js/164.cbf4cf52.js"><link rel="prefetch" href="/blog/assets/js/165.bc7a523a.js"><link rel="prefetch" href="/blog/assets/js/166.ca626fb4.js"><link rel="prefetch" href="/blog/assets/js/167.0ca68106.js"><link rel="prefetch" href="/blog/assets/js/168.2e605db8.js"><link rel="prefetch" href="/blog/assets/js/169.401b96d4.js"><link rel="prefetch" href="/blog/assets/js/17.2399cb2b.js"><link rel="prefetch" href="/blog/assets/js/170.7c8b0366.js"><link rel="prefetch" href="/blog/assets/js/171.c3155533.js"><link rel="prefetch" href="/blog/assets/js/172.b659d767.js"><link rel="prefetch" href="/blog/assets/js/173.62c681db.js"><link rel="prefetch" href="/blog/assets/js/174.5c66f092.js"><link rel="prefetch" href="/blog/assets/js/175.d41dd28b.js"><link rel="prefetch" href="/blog/assets/js/176.e60d7f0a.js"><link rel="prefetch" href="/blog/assets/js/177.10de95b1.js"><link rel="prefetch" href="/blog/assets/js/178.f301674d.js"><link rel="prefetch" href="/blog/assets/js/179.77bb52e9.js"><link rel="prefetch" href="/blog/assets/js/18.c338fe95.js"><link rel="prefetch" href="/blog/assets/js/180.d2a4e612.js"><link rel="prefetch" href="/blog/assets/js/181.a53e32e0.js"><link rel="prefetch" href="/blog/assets/js/182.38687994.js"><link rel="prefetch" href="/blog/assets/js/183.544fef00.js"><link rel="prefetch" href="/blog/assets/js/184.711e54a6.js"><link rel="prefetch" href="/blog/assets/js/185.20075148.js"><link rel="prefetch" href="/blog/assets/js/186.08c67f20.js"><link rel="prefetch" href="/blog/assets/js/187.7ca2d0c6.js"><link rel="prefetch" href="/blog/assets/js/188.cd167879.js"><link rel="prefetch" href="/blog/assets/js/189.e8e2eb21.js"><link rel="prefetch" href="/blog/assets/js/19.6b963460.js"><link rel="prefetch" href="/blog/assets/js/190.8b557318.js"><link rel="prefetch" href="/blog/assets/js/191.10d0f80b.js"><link rel="prefetch" href="/blog/assets/js/192.127fef4c.js"><link rel="prefetch" href="/blog/assets/js/193.781690eb.js"><link rel="prefetch" href="/blog/assets/js/194.4b375e2e.js"><link rel="prefetch" href="/blog/assets/js/195.003e3d67.js"><link rel="prefetch" href="/blog/assets/js/196.7a3f55e5.js"><link rel="prefetch" href="/blog/assets/js/197.30d4c5b4.js"><link rel="prefetch" href="/blog/assets/js/198.628c2c1a.js"><link rel="prefetch" href="/blog/assets/js/199.d7c8cbb8.js"><link rel="prefetch" href="/blog/assets/js/20.839dae41.js"><link rel="prefetch" href="/blog/assets/js/200.1fed86d2.js"><link rel="prefetch" href="/blog/assets/js/201.5ba078d9.js"><link rel="prefetch" href="/blog/assets/js/202.b49b23f4.js"><link rel="prefetch" href="/blog/assets/js/203.d88a03d9.js"><link rel="prefetch" href="/blog/assets/js/204.fb928277.js"><link rel="prefetch" href="/blog/assets/js/205.432c3d8d.js"><link rel="prefetch" href="/blog/assets/js/206.ed726599.js"><link rel="prefetch" href="/blog/assets/js/207.c3794556.js"><link rel="prefetch" href="/blog/assets/js/208.416f7a9e.js"><link rel="prefetch" href="/blog/assets/js/209.d396aad5.js"><link rel="prefetch" href="/blog/assets/js/21.bd21bd29.js"><link rel="prefetch" href="/blog/assets/js/210.02e4ee2f.js"><link rel="prefetch" href="/blog/assets/js/211.0f8a9304.js"><link rel="prefetch" href="/blog/assets/js/212.9220dd3d.js"><link rel="prefetch" href="/blog/assets/js/213.89521ebd.js"><link rel="prefetch" href="/blog/assets/js/214.cd5ec468.js"><link rel="prefetch" href="/blog/assets/js/215.0084d772.js"><link rel="prefetch" href="/blog/assets/js/216.ebd468b9.js"><link rel="prefetch" href="/blog/assets/js/217.fac21407.js"><link rel="prefetch" href="/blog/assets/js/218.9793e19a.js"><link rel="prefetch" href="/blog/assets/js/219.b99343b6.js"><link rel="prefetch" href="/blog/assets/js/22.e6bcf65d.js"><link rel="prefetch" href="/blog/assets/js/220.8065033b.js"><link rel="prefetch" href="/blog/assets/js/221.97268a80.js"><link rel="prefetch" href="/blog/assets/js/222.22bf261f.js"><link rel="prefetch" href="/blog/assets/js/223.d5ff1bff.js"><link rel="prefetch" href="/blog/assets/js/224.364b4b11.js"><link rel="prefetch" href="/blog/assets/js/225.bd8b00c7.js"><link rel="prefetch" href="/blog/assets/js/226.78192713.js"><link rel="prefetch" href="/blog/assets/js/227.06ec006e.js"><link rel="prefetch" href="/blog/assets/js/228.166546a8.js"><link rel="prefetch" href="/blog/assets/js/229.fd44d2be.js"><link rel="prefetch" href="/blog/assets/js/23.ebbc3fd3.js"><link rel="prefetch" href="/blog/assets/js/230.109a1752.js"><link rel="prefetch" href="/blog/assets/js/231.c6faedb6.js"><link rel="prefetch" href="/blog/assets/js/232.f938a3a8.js"><link rel="prefetch" href="/blog/assets/js/233.0dc59324.js"><link rel="prefetch" href="/blog/assets/js/234.bb73adca.js"><link rel="prefetch" href="/blog/assets/js/235.97ed69db.js"><link rel="prefetch" href="/blog/assets/js/236.a8c51930.js"><link rel="prefetch" href="/blog/assets/js/237.6ae31c88.js"><link rel="prefetch" href="/blog/assets/js/238.2f5c56ae.js"><link rel="prefetch" href="/blog/assets/js/239.506a4e9f.js"><link rel="prefetch" href="/blog/assets/js/24.19bd04ec.js"><link rel="prefetch" href="/blog/assets/js/25.b4de33d1.js"><link rel="prefetch" href="/blog/assets/js/26.0bb98ba9.js"><link rel="prefetch" href="/blog/assets/js/27.df98327e.js"><link rel="prefetch" href="/blog/assets/js/28.31289bac.js"><link rel="prefetch" href="/blog/assets/js/29.45af5621.js"><link rel="prefetch" href="/blog/assets/js/30.d5c08e66.js"><link rel="prefetch" href="/blog/assets/js/31.78e43a68.js"><link rel="prefetch" href="/blog/assets/js/32.53ca76ee.js"><link rel="prefetch" href="/blog/assets/js/33.081e8ef6.js"><link rel="prefetch" href="/blog/assets/js/34.cb1866c1.js"><link rel="prefetch" href="/blog/assets/js/35.314ba98e.js"><link rel="prefetch" href="/blog/assets/js/36.1f6a5fae.js"><link rel="prefetch" href="/blog/assets/js/37.45e6d22f.js"><link rel="prefetch" href="/blog/assets/js/38.70b82353.js"><link rel="prefetch" href="/blog/assets/js/39.df6c26ac.js"><link rel="prefetch" href="/blog/assets/js/4.44654b1a.js"><link rel="prefetch" href="/blog/assets/js/40.80101c19.js"><link rel="prefetch" href="/blog/assets/js/41.2b5e8c27.js"><link rel="prefetch" href="/blog/assets/js/42.c6ded3fe.js"><link rel="prefetch" href="/blog/assets/js/43.6d9424d6.js"><link rel="prefetch" href="/blog/assets/js/44.835e4b5c.js"><link rel="prefetch" href="/blog/assets/js/45.d74d29a2.js"><link rel="prefetch" href="/blog/assets/js/46.d15a7dc0.js"><link rel="prefetch" href="/blog/assets/js/47.8d66ca97.js"><link rel="prefetch" href="/blog/assets/js/48.3c1102e1.js"><link rel="prefetch" href="/blog/assets/js/49.e17a3436.js"><link rel="prefetch" href="/blog/assets/js/5.88de390f.js"><link rel="prefetch" href="/blog/assets/js/50.6750f186.js"><link rel="prefetch" href="/blog/assets/js/51.9f93af9f.js"><link rel="prefetch" href="/blog/assets/js/52.f3ef3b5e.js"><link rel="prefetch" href="/blog/assets/js/53.a6bacd25.js"><link rel="prefetch" href="/blog/assets/js/54.dbb7c9ab.js"><link rel="prefetch" href="/blog/assets/js/55.2562d0c8.js"><link rel="prefetch" href="/blog/assets/js/56.14ea4931.js"><link rel="prefetch" href="/blog/assets/js/57.a2fad780.js"><link rel="prefetch" href="/blog/assets/js/58.8165b971.js"><link rel="prefetch" href="/blog/assets/js/59.556cab0d.js"><link rel="prefetch" href="/blog/assets/js/6.277038ca.js"><link rel="prefetch" href="/blog/assets/js/60.f048aa7c.js"><link rel="prefetch" href="/blog/assets/js/61.bdb307a8.js"><link rel="prefetch" href="/blog/assets/js/62.37a94f10.js"><link rel="prefetch" href="/blog/assets/js/63.74811780.js"><link rel="prefetch" href="/blog/assets/js/64.81f21b8a.js"><link rel="prefetch" href="/blog/assets/js/65.d970ff03.js"><link rel="prefetch" href="/blog/assets/js/66.cb805d9b.js"><link rel="prefetch" href="/blog/assets/js/67.39f85baa.js"><link rel="prefetch" href="/blog/assets/js/68.7f79766a.js"><link rel="prefetch" href="/blog/assets/js/69.fa8624bd.js"><link rel="prefetch" href="/blog/assets/js/7.e0a6d1b0.js"><link rel="prefetch" href="/blog/assets/js/70.1f3e978d.js"><link rel="prefetch" href="/blog/assets/js/71.13cd9358.js"><link rel="prefetch" href="/blog/assets/js/72.739b22a8.js"><link rel="prefetch" href="/blog/assets/js/73.95f69ae2.js"><link rel="prefetch" href="/blog/assets/js/74.b6624f6a.js"><link rel="prefetch" href="/blog/assets/js/75.b0d9aa06.js"><link rel="prefetch" href="/blog/assets/js/76.681b78df.js"><link rel="prefetch" href="/blog/assets/js/77.46f6e413.js"><link rel="prefetch" href="/blog/assets/js/78.aebd00ee.js"><link rel="prefetch" href="/blog/assets/js/79.1b784d15.js"><link rel="prefetch" href="/blog/assets/js/8.9428e7ee.js"><link rel="prefetch" href="/blog/assets/js/80.1f550d53.js"><link rel="prefetch" href="/blog/assets/js/81.101cc131.js"><link rel="prefetch" href="/blog/assets/js/82.077c8298.js"><link rel="prefetch" href="/blog/assets/js/83.2e375d11.js"><link rel="prefetch" href="/blog/assets/js/84.38102a34.js"><link rel="prefetch" href="/blog/assets/js/85.24532d6a.js"><link rel="prefetch" href="/blog/assets/js/86.1dabbf00.js"><link rel="prefetch" href="/blog/assets/js/87.763da0f2.js"><link rel="prefetch" href="/blog/assets/js/88.ff6e5f7c.js"><link rel="prefetch" href="/blog/assets/js/89.187e5e16.js"><link rel="prefetch" href="/blog/assets/js/9.da143545.js"><link rel="prefetch" href="/blog/assets/js/90.3c8cff94.js"><link rel="prefetch" href="/blog/assets/js/91.a50bd44d.js"><link rel="prefetch" href="/blog/assets/js/92.5484868f.js"><link rel="prefetch" href="/blog/assets/js/93.c8ee75e3.js"><link rel="prefetch" href="/blog/assets/js/94.b18a3e9b.js"><link rel="prefetch" href="/blog/assets/js/95.cddef6ae.js"><link rel="prefetch" href="/blog/assets/js/96.80e5a938.js"><link rel="prefetch" href="/blog/assets/js/97.1f5e5197.js"><link rel="prefetch" href="/blog/assets/js/98.e3a275c8.js"><link rel="prefetch" href="/blog/assets/js/99.d33bf89e.js">
    <link rel="stylesheet" href="/blog/assets/css/0.styles.dc03b589.css">
  </head>
  <body class="theme-mode-light">
    <div id="app" data-server-rendered="true"><div class="theme-container sidebar-open have-rightmenu"><header class="navbar blur"><div title="目录" class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/blog/" class="home-link router-link-active"><img src="/blog/img/logo.png" alt="彪哥博客" class="logo"> <span class="site-name can-hide">彪哥博客</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/blog/" class="nav-link">首页</a></div><div class="nav-item"><a href="http://fseller.com" target="_blank" rel="noopener noreferrer" class="nav-link external">
  个人游戏网站
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端" class="dropdown-title"><a href="/blog/web/" class="link-title">前端</a> <span class="title" style="display:none;">前端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>前端文章</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blog/pages/8143cc480faf9a11/" class="nav-link">JavaScript</a></li></ul></li><li class="dropdown-item"><h4>学习笔记</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blog/note/javascript/" class="nav-link">《JavaScript教程》</a></li><li class="dropdown-subitem"><a href="/blog/note/js/" class="nav-link">《JavaScript高级程序设计》</a></li><li class="dropdown-subitem"><a href="/blog/note/es6/" class="nav-link">《ES6 教程》</a></li><li class="dropdown-subitem"><a href="/blog/note/vue/" class="nav-link">《Vue》</a></li><li class="dropdown-subitem"><a href="/blog/note/react/" class="nav-link">《React》</a></li><li class="dropdown-subitem"><a href="/blog/note/typescript-axios/" class="nav-link">《TypeScript 从零实现 axios》</a></li><li class="dropdown-subitem"><a href="/blog/note/git/" class="nav-link">《Git》</a></li><li class="dropdown-subitem"><a href="/blog/pages/51afd6/" class="nav-link">TypeScript</a></li><li class="dropdown-subitem"><a href="/blog/pages/4643cd/" class="nav-link">JS设计模式总结</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="页面" class="dropdown-title"><a href="/blog/ui/" class="link-title">页面</a> <span class="title" style="display:none;">页面</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/pages/8309a5b876fc95e3/" class="nav-link">HTML</a></li><li class="dropdown-item"><!----> <a href="/blog/pages/0a83b083bdf257cb/" class="nav-link">CSS</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="技术" class="dropdown-title"><a href="/blog/technology/" class="link-title">技术</a> <span class="title" style="display:none;">技术</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/pages/9a7ee40fc232253e/" class="nav-link">技术文档</a></li><li class="dropdown-item"><!----> <a href="/blog/pages/4c778760be26d8b3/" class="nav-link">GitHub技巧</a></li><li class="dropdown-item"><!----> <a href="/blog/pages/117708e0af7f0bd9/" class="nav-link">Nodejs</a></li><li class="dropdown-item"><!----> <a href="/blog/pages/41f87d890d0a02af/" class="nav-link">博客搭建</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="更多" class="dropdown-title"><a href="/blog/more/" class="link-title">更多</a> <span class="title" style="display:none;">更多</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/pages/f2a556/" class="nav-link">学习</a></li><li class="dropdown-item"><!----> <a href="/blog/pages/aea6571b7a8bae86/" class="nav-link">面试</a></li><li class="dropdown-item"><!----> <a href="/blog/pages/2d615df9a36a98ed/" class="nav-link">心情杂货</a></li><li class="dropdown-item"><!----> <a href="/blog/pages/baaa02/" class="nav-link">实用技巧</a></li><li class="dropdown-item"><!----> <a href="/blog/friends/" class="nav-link">友情链接</a></li></ul></div></div><div class="nav-item"><a href="/blog/about/" class="nav-link">关于</a></div><div class="nav-item"><a href="/blog/pages/beb6c0bd8a66cea6/" class="nav-link">收藏</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="索引" class="dropdown-title"><a href="/blog/archives/" class="link-title">索引</a> <span class="title" style="display:none;">索引</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/categories/" class="nav-link">分类</a></li><li class="dropdown-item"><!----> <a href="/blog/tags/" class="nav-link">标签</a></li><li class="dropdown-item"><!----> <a href="/blog/archives/" class="nav-link">归档</a></li></ul></div></div> <a href="https://github.com/heBody/blog" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar-hover-trigger"></div> <aside class="sidebar" style="display:none;"><div class="blogger"><img src="/blog/img/head.jpg"> <div class="blogger-info"><h3>彪哥</h3> <span>爱好前端</span></div></div> <nav class="nav-links"><div class="nav-item"><a href="/blog/" class="nav-link">首页</a></div><div class="nav-item"><a href="http://fseller.com" target="_blank" rel="noopener noreferrer" class="nav-link external">
  个人游戏网站
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端" class="dropdown-title"><a href="/blog/web/" class="link-title">前端</a> <span class="title" style="display:none;">前端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>前端文章</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blog/pages/8143cc480faf9a11/" class="nav-link">JavaScript</a></li></ul></li><li class="dropdown-item"><h4>学习笔记</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blog/note/javascript/" class="nav-link">《JavaScript教程》</a></li><li class="dropdown-subitem"><a href="/blog/note/js/" class="nav-link">《JavaScript高级程序设计》</a></li><li class="dropdown-subitem"><a href="/blog/note/es6/" class="nav-link">《ES6 教程》</a></li><li class="dropdown-subitem"><a href="/blog/note/vue/" class="nav-link">《Vue》</a></li><li class="dropdown-subitem"><a href="/blog/note/react/" class="nav-link">《React》</a></li><li class="dropdown-subitem"><a href="/blog/note/typescript-axios/" class="nav-link">《TypeScript 从零实现 axios》</a></li><li class="dropdown-subitem"><a href="/blog/note/git/" class="nav-link">《Git》</a></li><li class="dropdown-subitem"><a href="/blog/pages/51afd6/" class="nav-link">TypeScript</a></li><li class="dropdown-subitem"><a href="/blog/pages/4643cd/" class="nav-link">JS设计模式总结</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="页面" class="dropdown-title"><a href="/blog/ui/" class="link-title">页面</a> <span class="title" style="display:none;">页面</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/pages/8309a5b876fc95e3/" class="nav-link">HTML</a></li><li class="dropdown-item"><!----> <a href="/blog/pages/0a83b083bdf257cb/" class="nav-link">CSS</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="技术" class="dropdown-title"><a href="/blog/technology/" class="link-title">技术</a> <span class="title" style="display:none;">技术</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/pages/9a7ee40fc232253e/" class="nav-link">技术文档</a></li><li class="dropdown-item"><!----> <a href="/blog/pages/4c778760be26d8b3/" class="nav-link">GitHub技巧</a></li><li class="dropdown-item"><!----> <a href="/blog/pages/117708e0af7f0bd9/" class="nav-link">Nodejs</a></li><li class="dropdown-item"><!----> <a href="/blog/pages/41f87d890d0a02af/" class="nav-link">博客搭建</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="更多" class="dropdown-title"><a href="/blog/more/" class="link-title">更多</a> <span class="title" style="display:none;">更多</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/pages/f2a556/" class="nav-link">学习</a></li><li class="dropdown-item"><!----> <a href="/blog/pages/aea6571b7a8bae86/" class="nav-link">面试</a></li><li class="dropdown-item"><!----> <a href="/blog/pages/2d615df9a36a98ed/" class="nav-link">心情杂货</a></li><li class="dropdown-item"><!----> <a href="/blog/pages/baaa02/" class="nav-link">实用技巧</a></li><li class="dropdown-item"><!----> <a href="/blog/friends/" class="nav-link">友情链接</a></li></ul></div></div><div class="nav-item"><a href="/blog/about/" class="nav-link">关于</a></div><div class="nav-item"><a href="/blog/pages/beb6c0bd8a66cea6/" class="nav-link">收藏</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="索引" class="dropdown-title"><a href="/blog/archives/" class="link-title">索引</a> <span class="title" style="display:none;">索引</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/categories/" class="nav-link">分类</a></li><li class="dropdown-item"><!----> <a href="/blog/tags/" class="nav-link">标签</a></li><li class="dropdown-item"><!----> <a href="/blog/archives/" class="nav-link">归档</a></li></ul></div></div> <a href="https://github.com/heBody/blog" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav>  <ul class="sidebar-links"><li><a href="/blog/pages/f344d070a1031ef7/" class="sidebar-link">ECMAScript 6 简介</a></li><li><a href="/blog/pages/c1edd70a6b7c7872/" class="sidebar-link">let 和 const 命令</a></li><li><a href="/blog/pages/b1ab10a62f7564da/" class="sidebar-link">变量的解构赋值</a></li><li><a href="/blog/pages/ca89eca8adeba5f4/" class="sidebar-link">字符串的扩展</a></li><li><a href="/blog/pages/a650b4a0ebfc9350/" class="sidebar-link">字符串的新增方法</a></li><li><a href="/blog/pages/0473261a6ab0ee8c/" class="sidebar-link">正则的扩展</a></li><li><a href="/blog/pages/5dfea9a0f2d1a392/" class="sidebar-link">数值的扩展</a></li><li><a href="/blog/pages/8ed309d668b20264/" class="sidebar-link">函数的扩展</a></li><li><a href="/blog/pages/e34009d60d8bc4b2/" class="sidebar-link">数组的扩展</a></li><li><a href="/blog/pages/b5e3e0a0ff6e9c25/" class="sidebar-link">对象的扩展</a></li><li><a href="/blog/pages/e85e68947502cf90/" class="sidebar-link">对象的新增方法</a></li><li><a href="/blog/pages/02c86eb2792f3262/" class="sidebar-link">Symbol</a></li><li><a href="/blog/pages/0c21dae358fca16b/" class="sidebar-link">Set 和 Map 数据结构</a></li><li><a href="/blog/pages/f56ec2ab97d60483/" class="sidebar-link">Proxy</a></li><li><a href="/blog/pages/74de3e45e4491e95/" class="sidebar-link">Reflect</a></li><li><a href="/blog/pages/2810ae8985e9bd52/" class="sidebar-link">Promise 对象</a></li><li><a href="/blog/pages/48df907ad3570f3d/" class="sidebar-link">Iterator 和 for-of 循环</a></li><li><a href="/blog/pages/718b48ed9ce0adce/" class="sidebar-link">Generator 函数的语法</a></li><li><a href="/blog/pages/75af7031eb66847b/" class="sidebar-link">Generator 函数的异步应用</a></li><li><a href="/blog/pages/3777253e65bac487/" class="sidebar-link">async 函数</a></li><li><a href="/blog/pages/e831e1593c82bbe0/" class="sidebar-link">Class 的基本语法</a></li><li><a href="/blog/pages/83f8c3a0cd87dd83/" class="sidebar-link">Class 的继承</a></li><li><a href="/blog/pages/efe2fb04eb8ac5fb/" class="sidebar-link">Module 的语法</a></li><li><a href="/blog/pages/a79ca2e64ceae213/" class="sidebar-link">Module 的加载实现</a></li><li><a href="/blog/pages/984bf549204bb266/" class="sidebar-link">编程风格</a></li><li><a href="/blog/pages/32c35f7651d6e58e/" aria-current="page" class="active sidebar-link">读懂 ECMAScript 规格</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level2"><a href="/blog/pages/32c35f7651d6e58e/#概述" class="sidebar-link">概述</a></li><li class="sidebar-sub-header level2"><a href="/blog/pages/32c35f7651d6e58e/#术语" class="sidebar-link">术语</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/blog/pages/32c35f7651d6e58e/#抽象操作" class="sidebar-link">抽象操作</a></li><li class="sidebar-sub-header level3"><a href="/blog/pages/32c35f7651d6e58e/#record-和-field" class="sidebar-link">Record 和 field</a></li><li class="sidebar-sub-header level3"><a href="/blog/pages/32c35f7651d6e58e/#notation" class="sidebar-link">[[Notation]]</a></li><li class="sidebar-sub-header level3"><a href="/blog/pages/32c35f7651d6e58e/#completion-record" class="sidebar-link">Completion Record</a></li></ul></li><li class="sidebar-sub-header level2"><a href="/blog/pages/32c35f7651d6e58e/#抽象操作的标准流程" class="sidebar-link">抽象操作的标准流程</a></li><li class="sidebar-sub-header level2"><a href="/blog/pages/32c35f7651d6e58e/#相等运算符" class="sidebar-link">相等运算符</a></li><li class="sidebar-sub-header level2"><a href="/blog/pages/32c35f7651d6e58e/#数组的空位" class="sidebar-link">数组的空位</a></li><li class="sidebar-sub-header level2"><a href="/blog/pages/32c35f7651d6e58e/#数组的-map-方法" class="sidebar-link">数组的 map 方法</a></li></ul></li><li><a href="/blog/pages/16121351be68691b/" class="sidebar-link">异步遍历器</a></li><li><a href="/blog/pages/a2ba314746bfdbdd/" class="sidebar-link">ArrayBuffer</a></li><li><a href="/blog/pages/7188882b8d65af1b/" class="sidebar-link">最新提案</a></li><li><a href="/blog/pages/e97bc1e5626b082c/" class="sidebar-link">装饰器</a></li><li><a href="/blog/pages/1cf50330655efc69/" class="sidebar-link">函数式编程</a></li><li><a href="/blog/pages/6a8e2dc558da1b39/" class="sidebar-link">Mixin</a></li><li><a href="/blog/pages/8e8f80f69b775a56/" class="sidebar-link">SIMD</a></li><li><a href="/blog/pages/ea6f3b870f6dab69/" class="sidebar-link">参考链接</a></li></ul> </aside> <div><main class="page"><div class="theme-vdoing-wrapper "><div class="articleInfo-wrap" data-v-06970110><div class="articleInfo" data-v-06970110><ul class="breadcrumbs" data-v-06970110><li data-v-06970110><a href="/blog/" title="首页" class="iconfont icon-home router-link-active" data-v-06970110></a></li> <li data-v-06970110><a href="/blog/note/es6/#《ES6 教程》笔记" data-v-06970110>《ES6 教程》笔记</a></li></ul> <div class="info" data-v-06970110><div title="作者" class="author iconfont icon-touxiang" data-v-06970110><a href="javascript:;" data-v-06970110>阮一峰</a></div> <div title="创建时间" class="date iconfont icon-riqi" data-v-06970110><a href="javascript:;" data-v-06970110>2020-02-09</a></div> <!----></div></div></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div class="right-menu-margin"><div class="right-menu-title">目录</div> <div class="right-menu-content"></div></div></div> <h1><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAABH1JREFUSA3tVl1oHFUUPmdmd2ltklqbpJDiNnXFmgbFktho7YMPNiJSSZM0+CAYSkUELVhM6YuwIPpgoOKDqOBDC0XE2CQoNtQXBUFTTcCi+Wlh1V2TQExsUzcltd3M9Tt3ZjZzZ2fT+OJTL8yeM+eee757fmeJbq//KQL8X3DUSFOcfr7cRsRtxNQMWueeVzOkaITIGqQHNg5y8+jNW9ldM7A6nTpAjuolUikAwq7CE3WcM2RRDz+XGVgN3FptU/aUSlvq9Pa3iZ1+sgAqJyyAFqkipd9dqiwHF3P65YycLWc/6sqGrvoEoIp6DOFaX5h6+dnfjkWprwqsPk0dUGq5vySwDImC10KxFHgGL1SWoc92O3eVht09qdXNH11I2SsTsJYqMWzihqGMi+A+Garf3BAuuLI5oGlULyNfyB/HYNujwktOfRrMr5t77NmevqaUopx0grnKAyvVpmwUDB4x6FPXuGvYLTDwWsejwgtgkYKPqRJg8SV6xaiZ3ZTppGneS4yfH5/66fZSDHv+QZci/+h5c5UHtpy67JUqGppM0sh0Nc1dW6/N1W5Yoqat8/TU/VnadmdeW2PLLSyh0cvxBs3KbqTmwYPpxN4do/mzE8nEpvX/UMu2Wbp74zUAK5q6WkHns7V0eWkdPbPzd3rxkTGybadYySumVzhcaJFbs5UrEkQ/+CK8gF5dnh/6ciIZ73gwQ927L1IitoxKLXYP3SjYdOrHHfTZhRRlFyrorafPk20B3HPD1y2G3qKZME5Jcf3t/HUC13/8tSd++vqFveMUTwAUxSUFI1QekR1+bIze3D9MF2aq6cPvG72CgnldWCFqyRw3lwH8ZMerjTD9ElRO7Gv44wNpC90aASqGfVlz/Rx17srQ57/UU26hkhQqUB7dBR71WmzQhHUnblGmVOEw0jhbV1n9OlXUDCIRGaNV5Jp43N516fN7JmnTHdfp7Hgy0luO4aMhtkLL8Bi3bUWYvzh5Mn1dTxrL6QmGuRhGL/TiTTxRoEdTszSaq9GR0NGA3KdkOz3hqSV3MIDhQ5IVX/Ivx3umBti2es2h4eZby7x8br1rkf7Mo90AqC8aQ3sJeNzqFRu+vSANAQe3PL7l0HGOAdwDCeZYvNKeoZp1Qfs6Aipndh86HmFRi0LAnEO47wsqM6cdfjh3jBPUzhZy7nvlUfFsamED1VQt6aISHVymXZ/B2aCtIG8AI8xfobj2d3en1wWVhOeHELKmLQ1s211s88comkv4UCwWyF787mJdYXtNfhKAXVqnKTq8QZvGAGGOfaTo5pGZ/PwbUCr5+DPr/1J92JNHr9aOl/F3iI5+O1nfybsGxoimvZ3ViWSluDITw3P37mypheDIPY0tw7+O/5ApbkYw+zpfaUVu32Pi98+defdUhEpZkRFq0aqyNh9FuL9hpYbEm6iwi0z2REd09ZmyENEbuhjDWzKvZXTqKYaBIr3tt5kuPtQBZFvEUwHt60vfCNu41XsksH9Ij1BMMz1Y0OOunHNShFIP5868g5zeXmuLwL9T4b6Q2+KejgAAAABJRU5ErkJggg==">读懂 ECMAScript 规格<!----></h1>  <div class="theme-vdoing-content content__default"><h1 id="读懂-ecmascript-规格"><a href="#读懂-ecmascript-规格" class="header-anchor">#</a> 读懂 ECMAScript 规格</h1> <h2 id="概述"><a href="#概述" class="header-anchor">#</a> 概述</h2> <p>规格文件是计算机语言的官方标准，详细描述语法规则和实现方法。</p> <p>一般来说，没有必要阅读规格，除非你要写编译器。因为规格写得非常抽象和精炼，又缺乏实例，不容易理解，而且对于解决实际的应用问题，帮助不大。但是，如果你遇到疑难的语法问题，实在找不到答案，这时可以去查看规格文件，了解语言标准是怎么说的。规格是解决问题的“最后一招”。

这对 JavaScript 语言很有必要。因为它的使用场景复杂，语法规则不统一，例外很多，各种运行环境的行为不一致，导致奇怪的语法问题层出不穷，任何语法书都不可能囊括所有情况。查看规格，不失为一种解决语法问题的最可靠、最权威的终极方法。</p> <p>本章介绍如何读懂 ECMAScript 6 的规格文件。</p> <p>ECMAScript 6 的规格，可以在 ECMA 国际标准组织的官方网站（<a href="http://www.ecma-international.org/ecma-262/6.0/" target="_blank" rel="noopener noreferrer">www.ecma-international.org/ecma-262/6.0/<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>）免费下载和在线阅读。</p> <p>这个规格文件相当庞大，一共有 26 章，A4 打印的话，足足有 545 页。它的特点就是规定得非常细致，每一个语法行为、每一个函数的实现都做了详尽的清晰的描述。基本上，编译器作者只要把每一步翻译成代码就可以了。这很大程度上，保证了所有 ES6 实现都有一致的行为。</p> <p>ECMAScript 6 规格的 26 章之中，第 1 章到第 3 章是对文件本身的介绍，与语言关系不大。第 4 章是对这门语言总体设计的描述，有兴趣的读者可以读一下。第 5 章到第 8 章是语言宏观层面的描述。第 5 章是规格的名词解释和写法的介绍，第 6 章介绍数据类型，第 7 章介绍语言内部用到的抽象操作，第 8 章介绍代码如何运行。第 9 章到第 26 章介绍具体的语法。</p> <p>对于一般用户来说，除了第 4 章，其他章节都涉及某一方面的细节，不用通读，只要在用到的时候，查阅相关章节即可。</p> <h2 id="术语"><a href="#术语" class="header-anchor">#</a> 术语</h2> <p>ES6 规格使用了一些专门的术语，了解这些术语，可以帮助你读懂规格。本节介绍其中的几个。</p> <h3 id="抽象操作"><a href="#抽象操作" class="header-anchor">#</a> 抽象操作</h3> <p>所谓“抽象操作”（abstract operations）就是引擎的一些内部方法，外部不能调用。规格定义了一系列的抽象操作，规定了它们的行为，留给各种引擎自己去实现。</p> <p>举例来说，<code>Boolean(value)</code>的算法，第一步是这样的。</p> <blockquote><ol><li>Let <code>b</code> be <code>ToBoolean(value)</code>.</li></ol></blockquote> <p>这里的<code>ToBoolean</code>就是一个抽象操作，是引擎内部求出布尔值的算法。</p> <p>许多函数的算法都会多次用到同样的步骤，所以 ES6 规格将它们抽出来，定义成“抽象操作”，方便描述。</p> <h3 id="record-和-field"><a href="#record-和-field" class="header-anchor">#</a> Record 和 field</h3> <p>ES6 规格将键值对（key-value map）的数据结构称为 Record，其中的每一组键值对称为 field。这就是说，一个 Record 由多个 field 组成，而每个 field 都包含一个键名（key）和一个键值（value）。</p> <h3 id="notation"><a href="#notation" class="header-anchor">#</a> [[Notation]]</h3> <p>ES6 规格大量使用<code>[[Notation]]</code>这种书写法，比如<code>[[Value]]</code>、<code>[[Writable]]</code>、<code>[[Get]]</code>、<code>[[Set]]</code>等等。它用来指代 field 的键名。</p> <p>举例来说，<code>obj</code>是一个 Record，它有一个<code>Prototype</code>属性。ES6 规格不会写<code>obj.Prototype</code>，而是写<code>obj.[[Prototype]]</code>。一般来说，使用<code>[[Notation]]</code>这种书写法的属性，都是对象的内部属性。</p> <p>所有的 JavaScript 函数都有一个内部属性<code>[[Call]]</code>，用来运行该函数。</p> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token constant">F</span><span class="token punctuation">.</span><span class="token punctuation">[</span><span class="token punctuation">[</span>Call<span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">(</span><span class="token constant">V</span><span class="token punctuation">,</span> argumentsList<span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>上面代码中，<code>F</code>是一个函数对象，<code>[[Call]]</code>是它的内部方法，<code>F.[[call]]()</code>表示运行该函数，<code>V</code>表示<code>[[Call]]</code>运行时<code>this</code>的值，<code>argumentsList</code>则是调用时传入函数的参数。</p> <h3 id="completion-record"><a href="#completion-record" class="header-anchor">#</a> Completion Record</h3> <p>每一个语句都会返回一个 Completion Record，表示运行结果。每个 Completion Record 有一个<code>[[Type]]</code>属性，表示运行结果的类型。</p> <p><code>[[Type]]</code>属性有五种可能的值。</p> <ul><li>normal</li> <li>return</li> <li>throw</li> <li>break</li> <li>continue</li></ul> <p>如果<code>[[Type]]</code>的值是<code>normal</code>，就称为 normal completion，表示运行正常。其他的值，都称为 abrupt completion。其中，开发者只需要关注<code>[[Type]]</code>为<code>throw</code>的情况，即运行出错；<code>break</code>、<code>continue</code>、<code>return</code>这三个值都只出现在特定场景，可以不用考虑。</p> <h2 id="抽象操作的标准流程"><a href="#抽象操作的标准流程" class="header-anchor">#</a> 抽象操作的标准流程</h2> <p>抽象操作的运行流程，一般是下面这样。</p> <blockquote><ol><li>Let <code>resultCompletionRecord</code> be <code>AbstractOp()</code>.</li> <li>If <code>resultCompletionRecord</code> is an abrupt completion, return <code>resultCompletionRecord</code>.</li> <li>Let <code>result</code> be <code>resultCompletionRecord.[[Value]]</code>.</li> <li>return <code>result</code>.</li></ol></blockquote> <p>上面的第一步是调用抽象操作<code>AbstractOp()</code>，得到<code>resultCompletionRecord</code>，这是一个 Completion Record。第二步，如果这个 Record 属于 abrupt completion，就将<code>resultCompletionRecord</code>返回给用户。如果此处没有返回，就表示运行结果正常，所得的值存放在<code>resultCompletionRecord.[[Value]]</code>属性。第三步，将这个值记为<code>result</code>。第四步，将<code>result</code>返回给用户。</p> <p>ES6 规格将这个标准流程，使用简写的方式表达。</p> <blockquote><ol><li>Let <code>result</code> be <code>AbstractOp()</code>.</li> <li><code>ReturnIfAbrupt(result)</code>.</li> <li>return <code>result</code>.</li></ol></blockquote> <p>这个简写方式里面的<code>ReturnIfAbrupt(result)</code>，就代表了上面的第二步和第三步，即如果有报错，就返回错误，否则取出值。</p> <p>甚至还有进一步的简写格式。</p> <blockquote><ol><li>Let <code>result</code> be <code>? AbstractOp()</code>.</li> <li>return <code>result</code>.</li></ol></blockquote> <p>上面流程的<code>?</code>，就代表<code>AbstractOp()</code>可能会报错。一旦报错，就返回错误，否则取出值。</p> <p>除了<code>?</code>，ES 6 规格还使用另一个简写符号<code>!</code>。</p> <blockquote><ol><li>Let <code>result</code> be <code>! AbstractOp()</code>.</li> <li>return <code>result</code>.</li></ol></blockquote> <p>上面流程的<code>!</code>，代表<code>AbstractOp()</code>不会报错，返回的一定是 normal completion，总是可以取出值。</p> <h2 id="相等运算符"><a href="#相等运算符" class="header-anchor">#</a> 相等运算符</h2> <p>下面通过一些例子，介绍如何使用这份规格。</p> <p>相等运算符（<code>==</code>）是一个很让人头痛的运算符，它的语法行为多变，不符合直觉。这个小节就看看规格怎么规定它的行为。</p> <p>请看下面这个表达式，请问它的值是多少。</p> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token number">0</span> <span class="token operator">==</span> <span class="token keyword">null</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>如果你不确定答案，或者想知道语言内部怎么处理，就可以去查看规格，<a href="http://www.ecma-international.org/ecma-262/6.0/#sec-abstract-equality-comparison" target="_blank" rel="noopener noreferrer">7.2.12 小节<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>是对相等运算符（<code>==</code>）的描述。</p> <p>规格对每一种语法行为的描述，都分成两部分：先是总体的行为描述，然后是实现的算法细节。相等运算符的总体描述，只有一句话。</p> <blockquote><p>“The comparison <code>x == y</code>, where <code>x</code> and <code>y</code> are values, produces <code>true</code> or <code>false</code>.”</p></blockquote> <p>上面这句话的意思是，相等运算符用于比较两个值，返回<code>true</code>或<code>false</code>。</p> <p>下面是算法细节。</p> <blockquote><ol><li>ReturnIfAbrupt(x).</li> <li>ReturnIfAbrupt(y).</li> <li>If <code>Type(x)</code> is the same as <code>Type(y)</code>, then
<ol><li>Return the result of performing Strict Equality Comparison <code>x === y</code>.</li></ol></li> <li>If <code>x</code> is <code>null</code> and <code>y</code> is <code>undefined</code>, return <code>true</code>.</li> <li>If <code>x</code> is <code>undefined</code> and <code>y</code> is <code>null</code>, return <code>true</code>.</li> <li>If <code>Type(x)</code> is Number and <code>Type(y)</code> is String,
return the result of the comparison <code>x == ToNumber(y)</code>.</li> <li>If <code>Type(x)</code> is String and <code>Type(y)</code> is Number,
return the result of the comparison <code>ToNumber(x) == y</code>.</li> <li>If <code>Type(x)</code> is Boolean, return the result of the comparison <code>ToNumber(x) == y</code>.</li> <li>If <code>Type(y)</code> is Boolean, return the result of the comparison <code>x == ToNumber(y)</code>.</li> <li>If <code>Type(x)</code> is either String, Number, or Symbol and <code>Type(y)</code> is Object, then
return the result of the comparison <code>x == ToPrimitive(y)</code>.</li> <li>If <code>Type(x)</code> is Object and <code>Type(y)</code> is either String, Number, or Symbol, then
return the result of the comparison <code>ToPrimitive(x) == y</code>.</li> <li>Return <code>false</code>.</li></ol></blockquote> <p>上面这段算法，一共有 12 步，翻译如下。</p> <blockquote><ol><li>如果<code>x</code>不是正常值（比如抛出一个错误），中断执行。</li> <li>如果<code>y</code>不是正常值，中断执行。</li> <li>如果<code>Type(x)</code>与<code>Type(y)</code>相同，执行严格相等运算<code>x === y</code>。</li> <li>如果<code>x</code>是<code>null</code>，<code>y</code>是<code>undefined</code>，返回<code>true</code>。</li> <li>如果<code>x</code>是<code>undefined</code>，<code>y</code>是<code>null</code>，返回<code>true</code>。</li> <li>如果<code>Type(x)</code>是数值，<code>Type(y)</code>是字符串，返回<code>x == ToNumber(y)</code>的结果。</li> <li>如果<code>Type(x)</code>是字符串，<code>Type(y)</code>是数值，返回<code>ToNumber(x) == y</code>的结果。</li> <li>如果<code>Type(x)</code>是布尔值，返回<code>ToNumber(x) == y</code>的结果。</li> <li>如果<code>Type(y)</code>是布尔值，返回<code>x == ToNumber(y)</code>的结果。</li> <li>如果<code>Type(x)</code>是字符串或数值或<code>Symbol</code>值，<code>Type(y)</code>是对象，返回<code>x == ToPrimitive(y)</code>的结果。</li> <li>如果<code>Type(x)</code>是对象，<code>Type(y)</code>是字符串或数值或<code>Symbol</code>值，返回<code>ToPrimitive(x) == y</code>的结果。</li> <li>返回<code>false</code>。</li></ol></blockquote> <p>由于<code>0</code>的类型是数值，<code>null</code>的类型是 Null（这是规格<a href="http://www.ecma-international.org/ecma-262/6.0/#sec-terms-and-definitions-null-type" target="_blank" rel="noopener noreferrer">4.3.13 小节<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>的规定，是内部 Type 运算的结果，跟<code>typeof</code>运算符无关）。因此上面的前 11 步都得不到结果，要到第 12 步才能得到<code>false</code>。</p> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token number">0</span> <span class="token operator">==</span> <span class="token keyword">null</span> <span class="token comment">// false</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h2 id="数组的空位"><a href="#数组的空位" class="header-anchor">#</a> 数组的空位</h2> <p>下面再看另一个例子。</p> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">const</span> a1 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token keyword">undefined</span><span class="token punctuation">,</span> <span class="token keyword">undefined</span><span class="token punctuation">,</span> <span class="token keyword">undefined</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> a2 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">,</span> <span class="token punctuation">,</span> <span class="token punctuation">,</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

a1<span class="token punctuation">.</span>length <span class="token comment">// 3</span>
a2<span class="token punctuation">.</span>length <span class="token comment">// 3</span>

a1<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token comment">// undefined</span>
a2<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token comment">// undefined</span>

a1<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">===</span> a2<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token comment">// true</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p>上面代码中，数组<code>a1</code>的成员是三个<code>undefined</code>，数组<code>a2</code>的成员是三个空位。这两个数组很相似，长度都是 3，每个位置的成员读取出来都是<code>undefined</code>。</p> <p>但是，它们实际上存在重大差异。</p> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token number">0</span> <span class="token keyword">in</span> a1 <span class="token comment">// true</span>
<span class="token number">0</span> <span class="token keyword">in</span> a2 <span class="token comment">// false</span>

a1<span class="token punctuation">.</span><span class="token function">hasOwnProperty</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span> <span class="token comment">// true</span>
a2<span class="token punctuation">.</span><span class="token function">hasOwnProperty</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span> <span class="token comment">// false</span>

Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>a1<span class="token punctuation">)</span> <span class="token comment">// [&quot;0&quot;, &quot;1&quot;, &quot;2&quot;]</span>
Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>a2<span class="token punctuation">)</span> <span class="token comment">// []</span>

a1<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">n</span> <span class="token operator">=&gt;</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token comment">// [1, 1, 1]</span>
a2<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">n</span> <span class="token operator">=&gt;</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token comment">// [, , ,]</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><p>上面代码一共列出了四种运算，数组<code>a1</code>和<code>a2</code>的结果都不一样。前三种运算（<code>in</code>运算符、数组的<code>hasOwnProperty</code>方法、<code>Object.keys</code>方法）都说明，数组<code>a2</code>取不到属性名。最后一种运算（数组的<code>map</code>方法）说明，数组<code>a2</code>没有发生遍历。</p> <p>为什么<code>a1</code>与<code>a2</code>成员的行为不一致？数组的成员是<code>undefined</code>或空位，到底有什么不同？</p> <p>规格的<a href="http://www.ecma-international.org/ecma-262/6.0/#sec-array-initializer" target="_blank" rel="noopener noreferrer">12.2.5 小节《数组的初始化》<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>给出了答案。</p> <blockquote><p>“Array elements may be elided at the beginning, middle or end of the element list. Whenever a comma in the element list is not preceded by an AssignmentExpression (i.e., a comma at the beginning or after another comma), the missing array element contributes to the length of the Array and increases the index of subsequent elements. Elided array elements are not defined. If an element is elided at the end of an array, that element does not contribute to the length of the Array.”</p></blockquote> <p>翻译如下。</p> <blockquote><p>&quot;数组成员可以省略。只要逗号前面没有任何表达式，数组的<code>length</code>属性就会加 1，并且相应增加其后成员的位置索引。被省略的成员不会被定义。如果被省略的成员是数组最后一个成员，则不会导致数组<code>length</code>属性增加。”</p></blockquote> <p>上面的规格说得很清楚，数组的空位会反映在<code>length</code>属性，也就是说空位有自己的位置，但是这个位置的值是未定义，即这个值是不存在的。如果一定要读取，结果就是<code>undefined</code>（因为<code>undefined</code>在 JavaScript 语言中表示不存在）。</p> <p>这就解释了为什么<code>in</code>运算符、数组的<code>hasOwnProperty</code>方法、<code>Object.keys</code>方法，都取不到空位的属性名。因为这个属性名根本就不存在，规格里面没说要为空位分配属性名(位置索引），只说要为下一个元素的位置索引加 1。</p> <p>至于为什么数组的<code>map</code>方法会跳过空位，请看下一节。</p> <h2 id="数组的-map-方法"><a href="#数组的-map-方法" class="header-anchor">#</a> 数组的 map 方法</h2> <p>规格的<a href="http://www.ecma-international.org/ecma-262/6.0/#sec-array.prototype.map" target="_blank" rel="noopener noreferrer">22.1.3.15 小节<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>定义了数组的<code>map</code>方法。该小节先是总体描述<code>map</code>方法的行为，里面没有提到数组空位。</p> <p>后面的算法描述是这样的。</p> <blockquote><ol><li>Let <code>O</code> be <code>ToObject(this value)</code>.</li> <li><code>ReturnIfAbrupt(O)</code>.</li> <li>Let <code>len</code> be <code>ToLength(Get(O, &quot;length&quot;))</code>.</li> <li><code>ReturnIfAbrupt(len)</code>.</li> <li>If <code>IsCallable(callbackfn)</code> is <code>false</code>, throw a TypeError exception.</li> <li>If <code>thisArg</code> was supplied, let <code>T</code> be <code>thisArg</code>; else let <code>T</code> be <code>undefined</code>.</li> <li>Let <code>A</code> be <code>ArraySpeciesCreate(O, len)</code>.</li> <li><code>ReturnIfAbrupt(A)</code>.</li> <li>Let <code>k</code> be 0.</li> <li>Repeat, while <code>k</code> &lt; <code>len</code> <ol><li>Let <code>Pk</code> be <code>ToString(k)</code>.</li> <li>Let <code>kPresent</code> be <code>HasProperty(O, Pk)</code>.</li> <li><code>ReturnIfAbrupt(kPresent)</code>.</li> <li>If <code>kPresent</code> is <code>true</code>, then
<ol><li>Let <code>kValue</code> be <code>Get(O, Pk)</code>.</li> <li><code>ReturnIfAbrupt(kValue)</code>.</li> <li>Let <code>mappedValue</code> be <code>Call(callbackfn, T, «kValue, k, O»)</code>.</li> <li><code>ReturnIfAbrupt(mappedValue)</code>.</li> <li>Let <code>status</code> be <code>CreateDataPropertyOrThrow (A, Pk, mappedValue)</code>.</li> <li><code>ReturnIfAbrupt(status)</code>.</li></ol></li> <li>Increase <code>k</code> by 1.</li></ol></li> <li>Return <code>A</code>.</li></ol></blockquote> <p>翻译如下。</p> <blockquote><ol><li>得到当前数组的<code>this</code>对象</li> <li>如果报错就返回</li> <li>求出当前数组的<code>length</code>属性</li> <li>如果报错就返回</li> <li>如果 map 方法的参数<code>callbackfn</code>不可执行，就报错</li> <li>如果 map 方法的参数之中，指定了<code>this</code>，就让<code>T</code>等于该参数，否则<code>T</code>为<code>undefined</code></li> <li>生成一个新的数组<code>A</code>，跟当前数组的<code>length</code>属性保持一致</li> <li>如果报错就返回</li> <li>设定<code>k</code>等于 0</li> <li>只要<code>k</code>小于当前数组的<code>length</code>属性，就重复下面步骤
<ol><li>设定<code>Pk</code>等于<code>ToString(k)</code>，即将<code>K</code>转为字符串</li> <li>设定<code>kPresent</code>等于<code>HasProperty(O, Pk)</code>，即求当前数组有没有指定属性</li> <li>如果报错就返回</li> <li>如果<code>kPresent</code>等于<code>true</code>，则进行下面步骤
<ol><li>设定<code>kValue</code>等于<code>Get(O, Pk)</code>，取出当前数组的指定属性</li> <li>如果报错就返回</li> <li>设定<code>mappedValue</code>等于<code>Call(callbackfn, T, «kValue, k, O»)</code>，即执行回调函数</li> <li>如果报错就返回</li> <li>设定<code>status</code>等于<code>CreateDataPropertyOrThrow (A, Pk, mappedValue)</code>，即将回调函数的值放入<code>A</code>数组的指定位置</li> <li>如果报错就返回</li></ol></li> <li><code>k</code>增加 1</li></ol></li> <li>返回<code>A</code></li></ol></blockquote> <p>仔细查看上面的算法，可以发现，当处理一个全是空位的数组时，前面步骤都没有问题。进入第 10 步中第 2 步时，<code>kPresent</code>会报错，因为空位对应的属性名，对于数组来说是不存在的，因此就会返回，不会进行后面的步骤。</p> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">const</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">,</span> <span class="token punctuation">,</span> <span class="token punctuation">,</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
arr<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">n</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>n<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> <span class="token number">1</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token comment">// [, , ,]</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>上面代码中，<code>arr</code>是一个全是空位的数组，<code>map</code>方法遍历成员时，发现是空位，就直接跳过，不会进入回调函数。因此，回调函数里面的<code>console.log</code>语句根本不会执行，整个<code>map</code>方法返回一个全是空位的新数组。</p> <p>V8 引擎对<code>map</code>方法的<a href="https://github.com/v8/v8/blob/44c44521ae11859478b42004f57ea93df52526ee/src/js/array.js#L1347" target="_blank" rel="noopener noreferrer">实现<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>如下，可以看到跟规格的算法描述完全一致。</p> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">function</span> <span class="token function">ArrayMap</span><span class="token punctuation">(</span><span class="token parameter">f<span class="token punctuation">,</span> receiver</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token constant">CHECK_OBJECT_COERCIBLE</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token string">&quot;Array.prototype.map&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token comment">// Pull out the length so that modifications to the length in the</span>
  <span class="token comment">// loop will not affect the looping and side effects are visible.</span>
  <span class="token keyword">var</span> array <span class="token operator">=</span> <span class="token constant">TO_OBJECT</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">var</span> length <span class="token operator">=</span> <span class="token constant">TO_LENGTH_OR_UINT32</span><span class="token punctuation">(</span>array<span class="token punctuation">.</span>length<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> <span class="token function">InnerArrayMap</span><span class="token punctuation">(</span>f<span class="token punctuation">,</span> receiver<span class="token punctuation">,</span> array<span class="token punctuation">,</span> length<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">function</span> <span class="token function">InnerArrayMap</span><span class="token punctuation">(</span><span class="token parameter">f<span class="token punctuation">,</span> receiver<span class="token punctuation">,</span> array<span class="token punctuation">,</span> length</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token constant">IS_CALLABLE</span><span class="token punctuation">(</span>f<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token keyword">throw</span> <span class="token function">MakeTypeError</span><span class="token punctuation">(</span>kCalledNonCallable<span class="token punctuation">,</span> f<span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token keyword">var</span> accumulator <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">InternalArray</span><span class="token punctuation">(</span>length<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">var</span> is_array <span class="token operator">=</span> <span class="token constant">IS_ARRAY</span><span class="token punctuation">(</span>array<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">var</span> stepping <span class="token operator">=</span> <span class="token constant">DEBUG_IS_STEPPING</span><span class="token punctuation">(</span>f<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token constant">HAS_INDEX</span><span class="token punctuation">(</span>array<span class="token punctuation">,</span> i<span class="token punctuation">,</span> is_array<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">var</span> element <span class="token operator">=</span> array<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">;</span>
      <span class="token comment">// Prepare break slots for debugger step in.</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>stepping<span class="token punctuation">)</span> <span class="token operator">%</span><span class="token function">DebugPrepareStepInIfStepping</span><span class="token punctuation">(</span>f<span class="token punctuation">)</span><span class="token punctuation">;</span>
      accumulator<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token operator">%</span><span class="token function">_Call</span><span class="token punctuation">(</span>f<span class="token punctuation">,</span> receiver<span class="token punctuation">,</span> element<span class="token punctuation">,</span> i<span class="token punctuation">,</span> array<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">var</span> result <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">GlobalArray</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token operator">%</span><span class="token function">MoveArrayContents</span><span class="token punctuation">(</span>accumulator<span class="token punctuation">,</span> result<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> result<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br></div></div></div></div>  <div class="page-edit"><div class="edit-link"><a href="https://github.com/heBody/blog/edit/master/docs/《ES6 教程》笔记/26.读懂 ECMAScript 规格.md" target="_blank" rel="noopener noreferrer">编辑</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <div class="tags"><a href="/blog/tags/?tag=ES6" title="标签">#ES6</a></div> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">2022/12/14, 19:36:42</span></div></div> <div class="page-nav-wapper"><div class="page-nav-centre-wrap"><a href="/blog/pages/984bf549204bb266/" class="page-nav-centre page-nav-centre-prev"><div class="tooltip">编程风格</div></a> <a href="/blog/pages/16121351be68691b/" class="page-nav-centre page-nav-centre-next"><div class="tooltip">异步遍历器</div></a></div> <div class="page-nav"><p class="inner"><span class="prev">
        ←
        <a href="/blog/pages/984bf549204bb266/" class="prev">编程风格</a></span> <span class="next"><a href="/blog/pages/16121351be68691b/">异步遍历器</a>→
      </span></p></div></div></div> <div class="article-list"><div class="article-title"><a href="/blog/archives/" class="iconfont icon-bi">最近更新</a></div> <div class="article-wrapper"><dl><dd>01</dd> <dt><a href="/blog/pages/922650/"><div>
            Git修改分支名
            <!----></div></a> <span class="date">08-11</span></dt></dl><dl><dd>02</dd> <dt><a href="/blog/pages/55f894/"><div>
            CSS给table的tbody添加滚动条
            <!----></div></a> <span class="date">06-29</span></dt></dl><dl><dd>03</dd> <dt><a href="/blog/pages/829589/"><div>
            我做了一个手写春联小网页，祝大家虎年暴富
            <span class="title-tag">
              原创
            </span></div></a> <span class="date">01-28</span></dt></dl> <dl><dd></dd> <dt><a href="/blog/archives/" class="more">更多文章&gt;</a></dt></dl></div></div></main></div> <div class="footer"><div class="icons"><a href="mailto:30363811@qq.com" title="发邮件" target="_blank" class="iconfont icon-youjian"></a><a href="https://github.com/heBody" title="GitHub" target="_blank" class="iconfont icon-github"></a></div> 
    Copyright © 2016-2022
    <span>Hesb | <a href="https://github.com/heBody/blob" target="_blank">MIT License</a></span></div> <div class="buttons"><div title="返回顶部" class="button blur go-to-top iconfont icon-fanhuidingbu" style="display:none;"></div> <div title="去评论" class="button blur go-to-comment iconfont icon-pinglun" style="display:none;"></div> <div title="主题模式" class="button blur theme-mode-but iconfont icon-zhuti"><ul class="select-box" style="display:none;"><li class="iconfont icon-zidong">
          跟随系统
        </li><li class="iconfont icon-rijianmoshi">
          浅色模式
        </li><li class="iconfont icon-yejianmoshi">
          深色模式
        </li><li class="iconfont icon-yuedu">
          阅读模式
        </li></ul></div></div> <!----> <!----> <!----></div><div class="global-ui"><div></div></div></div>
    <script src="/blog/assets/js/app.90754bd5.js" defer></script><script src="/blog/assets/js/2.106f41fb.js" defer></script><script src="/blog/assets/js/3.6748bd5c.js" defer></script><script src="/blog/assets/js/113.9322f157.js" defer></script>
  </body>
</html>