mirror of
https://github.com/jaywcjlove/reference.git
synced 2025-06-17 04:31:22 +08:00
1817 lines
336 KiB
HTML
1817 lines
336 KiB
HTML
<!doctype html>
|
||
<html lang="en" data-color-mode="dark">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>JavaScript 备忘清单
|
||
& javascript cheatsheet & Quick Reference</title>
|
||
<meta content="width=device-width, initial-scale=1" name="viewport">
|
||
<meta description="包含最重要概念、函数、方法等的 JavaScript 备忘单。 初学者的完整快速参考。
|
||
|
||
入门，为开发人员分享快速参考备忘单。">
|
||
<meta keywords="javascript,reference,Quick,Reference,cheatsheet,cheat,sheet">
|
||
<meta name="author" content="jaywcjlove">
|
||
<meta name="license" content="MIT">
|
||
<meta name="funding" content="https://jaywcjlove.github.io/#/sponsor">
|
||
<meta rel="apple-touch-icon" href="../icons/touch-icon-iphone.png">
|
||
<meta rel="apple-touch-icon" sizes="152x152" href="../icons/touch-icon-ipad.png">
|
||
<meta rel="apple-touch-icon" sizes="180x180" href="../icons/touch-icon-iphone.png">
|
||
<meta rel="apple-touch-icon" sizes="167x167" href="../icons/touch-icon-ipad-retina.png">
|
||
<meta rel="apple-touch-icon" sizes="120x120" href="../icons/touch-icon-iphone-retina.png">
|
||
<link rel="icon" href="../icons/favicon.svg" type="image/svg+xml">
|
||
<link href="../style/style.css" rel="stylesheet">
|
||
<link href="../style/katex.css" rel="stylesheet">
|
||
</head>
|
||
<body><nav class="header-nav"><div class="max-container"><a href="../index.html" class="logo"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" height="1em" width="1em">
|
||
<path d="m21.66 10.44-.98 4.18c-.84 3.61-2.5 5.07-5.62 4.77-.5-.04-1.04-.13-1.62-.27l-1.68-.4c-4.17-.99-5.46-3.05-4.48-7.23l.98-4.19c.2-.85.44-1.59.74-2.2 1.17-2.42 3.16-3.07 6.5-2.28l1.67.39c4.19.98 5.47 3.05 4.49 7.23Z" fill="#c9d1d9"></path>
|
||
<path d="M15.06 19.39c-.62.42-1.4.77-2.35 1.08l-1.58.52c-3.97 1.28-6.06.21-7.35-3.76L2.5 13.28c-1.28-3.97-.22-6.07 3.75-7.35l1.58-.52c.41-.13.8-.24 1.17-.31-.3.61-.54 1.35-.74 2.2l-.98 4.19c-.98 4.18.31 6.24 4.48 7.23l1.68.4c.58.14 1.12.23 1.62.27Zm2.43-8.88c-.06 0-.12-.01-.19-.02l-4.85-1.23a.75.75 0 0 1 .37-1.45l4.85 1.23a.748.748 0 0 1-.18 1.47Z" fill="#228e6c"></path>
|
||
<path d="M14.56 13.89c-.06 0-.12-.01-.19-.02l-2.91-.74a.75.75 0 0 1 .37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z" fill="#228e6c"></path>
|
||
</svg>
|
||
<span class="title">Quick Reference</span></a><div class="menu"><a href="javascript:void(0);" class="searchbtn" id="searchbtn"><svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 18 18">
|
||
<path fill="currentColor" d="M17.71,16.29 L14.31,12.9 C15.4069846,11.5024547 16.0022094,9.77665502 16,8 C16,3.581722 12.418278,0 8,0 C3.581722,0 0,3.581722 0,8 C0,12.418278 3.581722,16 8,16 C9.77665502,16.0022094 11.5024547,15.4069846 12.9,14.31 L16.29,17.71 C16.4777666,17.8993127 16.7333625,18.0057983 17,18.0057983 C17.2666375,18.0057983 17.5222334,17.8993127 17.71,17.71 C17.8993127,17.5222334 18.0057983,17.2666375 18.0057983,17 C18.0057983,16.7333625 17.8993127,16.4777666 17.71,16.29 Z M2,8 C2,4.6862915 4.6862915,2 8,2 C11.3137085,2 14,4.6862915 14,8 C14,11.3137085 11.3137085,14 8,14 C4.6862915,14 2,11.3137085 2,8 Z"></path>
|
||
</svg><span>搜索</span><span>⌘K</span></a><a href="https://github.com/jaywcjlove/reference/blob/main/docs/javascript.md" class="edit" target="__blank"><svg viewBox="0 0 36 36" fill="currentColor" height="1em" width="1em"><path d="m33 6.4-3.7-3.7a1.71 1.71 0 0 0-2.36 0L23.65 6H6a2 2 0 0 0-2 2v22a2 2 0 0 0 2 2h22a2 2 0 0 0 2-2V11.76l3-3a1.67 1.67 0 0 0 0-2.36ZM18.83 20.13l-4.19.93 1-4.15 9.55-9.57 3.23 3.23ZM29.5 9.43 26.27 6.2l1.85-1.85 3.23 3.23Z"></path><path fill="none" d="M0 0h36v36H0z"></path></svg><span>编辑</span></a><button id="darkMode" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="light" height="1em" width="1em">
|
||
<path d="M6.995 12c0 2.761 2.246 5.007 5.007 5.007s5.007-2.246 5.007-5.007-2.246-5.007-5.007-5.007S6.995 9.239 6.995 12zM11 19h2v3h-2zm0-17h2v3h-2zm-9 9h3v2H2zm17 0h3v2h-3zM5.637 19.778l-1.414-1.414 2.121-2.121 1.414 1.414zM16.242 6.344l2.122-2.122 1.414 1.414-2.122 2.122zM6.344 7.759 4.223 5.637l1.415-1.414 2.12 2.122zm13.434 10.605-1.414 1.414-2.122-2.122 1.414-1.414z"></path>
|
||
</svg>
|
||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="dark" height="1em" width="1em">
|
||
<path d="M12 11.807A9.002 9.002 0 0 1 10.049 2a9.942 9.942 0 0 0-5.12 2.735c-3.905 3.905-3.905 10.237 0 14.142 3.906 3.906 10.237 3.905 14.143 0a9.946 9.946 0 0 0 2.735-5.119A9.003 9.003 0 0 1 12 11.807z"></path>
|
||
</svg>
|
||
</button><script src="../js/dark.js?v=1.8.3"></script><a href="https://github.com/jaywcjlove/reference" class="" target="__blank"><svg viewBox="0 0 16 16" fill="currentColor" height="1em" width="1em"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a></div></div></nav><div class="wrap h1body-exist max-container"><header class="wrap-header h1wrap"><h1 id="javascript-备忘清单"><svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" height="1em" width="1em">
|
||
<path d="M1 1h12v12H1V1Zm11.017 9.138c-.087-.547-.444-1.008-1.502-1.437-.367-.172-.777-.292-.898-.57-.046-.165-.053-.255-.023-.352.075-.323.458-.42.757-.33.195.06.375.21.488.45.517-.338.517-.338.878-.563a2.08 2.08 0 0 0-.293-.39c-.315-.352-.734-.532-1.417-.516l-.352.044c-.338.082-.66.263-.855.502-.57.646-.406 1.771.284 2.236.682.51 1.68.622 1.808 1.103.12.584-.435.772-.983.704-.406-.09-.63-.293-.878-.668l-.915.526c.105.24.225.344.405.554.87.879 3.045.834 3.436-.501.014-.046.12-.353.037-.826l.023.034zM7.525 6.515H6.401c0 .97-.004 1.932-.004 2.903 0 .616.031 1.181-.069 1.355-.165.345-.59.301-.783.24-.198-.098-.298-.232-.415-.427-.032-.053-.055-.098-.064-.098l-.912.563c.152.314.375.585.662.758.427.255 1.002.338 1.603.203.392-.114.73-.346.906-.706.255-.465.201-1.035.198-1.673.006-1.027 0-2.054 0-3.09l.002-.028z"></path>
|
||
</svg>
|
||
<a aria-hidden="true" tabindex="-1" href="#javascript-备忘清单"><span class="icon icon-link"></span></a>JavaScript 备忘清单</h1><div class="wrap-body">
|
||
<p>包含最重要概念、函数、方法等的 JavaScript 备忘单。 初学者的完整快速参考。</p>
|
||
</div></header><div class="menu-tocs"><div class="menu-btn"><svg aria-hidden="true" fill="currentColor" height="1em" width="1em" viewBox="0 0 16 16" version="1.1" data-view-component="true">
|
||
<path fill-rule="evenodd" d="M2 4a1 1 0 100-2 1 1 0 000 2zm3.75-1.5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zM3 8a1 1 0 11-2 0 1 1 0 012 0zm-1 6a1 1 0 100-2 1 1 0 000 2z"></path>
|
||
</svg></div><div class="menu-modal"><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#入门">入门</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#介绍">介绍</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#打印调试">打印调试</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#断点调试">断点调试</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#数字">数字</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#let-关键字">let 关键字</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#const-关键字">const 关键字</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#变量">变量</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#字符串">字符串</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#算术运算符">算术运算符</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#注释">注释</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#赋值运算符">赋值运算符</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#字符串插值">字符串插值</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#字符串-1">字符串</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#数字-1">数字</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#math">Math</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#全局函数">全局函数</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#javascript-条件">JavaScript 条件</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#操作符">操作符</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#逻辑运算符-">逻辑运算符 &&</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#比较运算符">比较运算符</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#逻辑运算符">逻辑运算符</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#空值合并运算符-">空值合并运算符 ??</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#if-statement-if-语句">if Statement (if 语句)</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#ternary-operator-三元运算符">Ternary Operator (三元运算符)</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#else-if">else if</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#-vs-">== vs ===</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#switch-语句">switch 语句</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#switch-多-case---单一操作">switch 多 case - 单一操作</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#javascript-functions-函数">JavaScript Functions 函数</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#函数">函数</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#匿名函数">匿名函数</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#箭头函数-es6">箭头函数 (ES6)</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#有两个参数">有两个参数</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#没有参数">没有参数</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#只有一个参数">只有一个参数</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#简洁箭头函数">简洁箭头函数</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#返回关键字">返回关键字</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#调用函数">调用函数</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#立即执行函数">立即执行函数</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#函数表达式">函数表达式</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#函数参数">函数参数</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#函数声明">函数声明</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#javascript-范围">JavaScript 范围</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#范围">范围</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#块作用域变量">块作用域变量</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#全局变量">全局变量</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#let-vs-var">let vs var</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#带闭包的循环">带闭包的循环</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#javascript-arrays">JavaScript Arrays</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#方法">方法</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#数组">数组</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#属性-length">属性 .length</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#索引">索引</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#可变图表">可变图表</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#方法-push">方法 .push()</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#方法-pop">方法 .pop()</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#方法-shift">方法 .shift()</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#方法-some">方法 .some()</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#方法-concat">方法 .concat()</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#方法-splice">方法 .splice()</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#方法-unshift">方法 .unshift()</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#方法-filter">方法 .filter()</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#javascript-循环">JavaScript 循环</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#while-循环">While 循环</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#反向循环">反向循环</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#dowhile-语句">Do...While 语句</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#for-循环">For 循环</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#遍历数组">遍历数组</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#break">Break</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#continue">Continue</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#嵌套循环">嵌套循环</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#forin-循环">for...in 循环</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#label-语句">label 语句</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#forof-循环">for...of 循环</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#for-awaitof">for await...of</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#可选的-for-表达式">可选的 for 表达式</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#javascript-迭代器iterators">JavaScript 迭代器(Iterators)</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#分配给变量的函数">分配给变量的函数</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#回调函数">回调函数</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#数组方法-reduce">数组方法 .reduce()</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#数组方法-map">数组方法 .map()</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#数组方法-foreach">数组方法 .forEach()</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#数组方法-filter">数组方法 .filter()</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#javascript-对象objects">JavaScript 对象(Objects)</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#访问属性">访问属性</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#命名属性">命名属性</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#不存在的属性">不存在的属性</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#可变的">可变的</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#赋值简写语法">赋值简写语法</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#删除运算符">删除运算符</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#对象作为参数">对象作为参数</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#工厂函数">工厂函数</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#速记对象创建">速记对象创建</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#this-关键字">this 关键字</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#方法-1">方法</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#getters-和-setters">Getters 和 setters</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#proxy">Proxy</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#语法">语法</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#方法-2">方法</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#handler-对象的方法">handler 对象的方法</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#reflect">Reflect</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#静态方法">静态方法</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#javascript-this-绑定">JavaScript this 绑定</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#隐式绑定">隐式绑定</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#隐式丢失">隐式丢失</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#显示绑定">显示绑定</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#call">call</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#apply">apply</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#bind">bind</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#内置函数中的-this">内置函数中的 this</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#javascript-classes">JavaScript Classes</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#静态方法字段">静态方法/字段</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#公有静态字段">公有静态字段</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#class">Class</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#extends">extends</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#class-constructor">Class Constructor</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#class-methods">Class Methods</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#javascript-modules">JavaScript Modules</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#export--import">Export / Import</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#import-加载模块">import 加载模块</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#export-module">Export Module</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#require-加载模块">require 加载模块</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#javascript-promises">JavaScript Promises</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#promise">Promise</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#使用-promises">使用 promises</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#promise-方法">Promise 方法</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#执行器函数">执行器函数</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#settimeout">setTimeout()</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#promise-状态">Promise 状态</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#then-方法">.then() 方法</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#catch-方法">.catch() 方法</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#promiseall">Promise.all()</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#链接多个-then">链接多个 .then()</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#避免嵌套的-promise-和-then">避免嵌套的 Promise 和 .then()</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#javascript-async-await">JavaScript Async-Await</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#异步">异步</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#解决-promises">解决 Promises</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#异步等待-promises">异步等待 Promises</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#错误处理">错误处理</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#异步等待运算符">异步等待运算符</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#javascript-请求">JavaScript 请求</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#json">JSON</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#xmlhttprequest">XMLHttpRequest</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#get">GET</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#post">POST</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#fetch-api">fetch api</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#json-格式">JSON 格式</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#promise-url-参数获取-api">promise url 参数获取 API</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#fetch-api-函数">Fetch API 函数</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#async-await-语法">async await 语法</a></div></div><div class="h1wrap-body"><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="入门"><a aria-hidden="true" tabindex="-1" href="#入门"><span class="icon icon-link"></span></a>入门</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="介绍"><a aria-hidden="true" tabindex="-1" href="#介绍"><span class="icon icon-link"></span></a>介绍</h3><div class="wrap-body">
|
||
<p>JavaScript 是一种轻量级的解释型编程语言。</p>
|
||
<ul>
|
||
<li><a href="json.html">JSON 备忘清单</a></li>
|
||
<li><a href="./regex.html#javascript-%E4%B8%AD%E7%9A%84%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F">JavaScript 中的正则表达式</a></li>
|
||
<li><a href="./typescript.html">TypeScript 备忘清单</a></li>
|
||
</ul>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="打印调试"><a aria-hidden="true" tabindex="-1" href="#打印调试"><span class="icon icon-link"></span></a>打印调试</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token comment">// => Hello world!</span>
|
||
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'Hello world!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// => Hello QuickReference</span>
|
||
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">warn</span><span class="token punctuation">(</span><span class="token string">'hello %s'</span><span class="token punctuation">,</span> <span class="token string">'QuickReference'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 将错误消息打印到 stderr</span>
|
||
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">error</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">'Oops!'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="断点调试"><a aria-hidden="true" tabindex="-1" href="#断点调试"><span class="icon icon-link"></span></a>断点调试</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">function</span> <span class="token function">potentiallyBuggyCode</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">debugger</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token comment">// 做可能有问题的东西来检查，逐步通过等。</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p><strong>debugger</strong> 语句调用任何可用的调试功能。</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="数字"><a aria-hidden="true" tabindex="-1" href="#数字"><span class="icon icon-link"></span></a>数字</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">let</span> amount <span class="token operator">=</span> <span class="token number">6</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">let</span> price <span class="token operator">=</span> <span class="token number">4.99</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">let</span> home <span class="token operator">=</span> <span class="token number">1e2</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">let</span> num <span class="token operator">=</span> <span class="token number">1_000_000</span><span class="token punctuation">;</span> <span class="token comment">// 位数过多可以用 _ 分割</span>
|
||
</span><span class="code-line"><span class="token keyword">let</span> m <span class="token operator">=</span> <span class="token number">0644</span><span class="token punctuation">;</span> <span class="token comment">// 八进制数字 420</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="let-关键字"><a aria-hidden="true" tabindex="-1" href="#let-关键字"><span class="icon icon-link"></span></a>let 关键字</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">let</span> count<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>count<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// => undefined</span>
|
||
</span><span class="code-line">count <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>count<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// => 10</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="const-关键字"><a aria-hidden="true" tabindex="-1" href="#const-关键字"><span class="icon icon-link"></span></a>const 关键字</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> numberOfColumns <span class="token operator">=</span> <span class="token number">4</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// TypeError: Assignment to constant...</span>
|
||
</span><span class="code-line">numberOfColumns <span class="token operator">=</span> <span class="token number">8</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="变量"><a aria-hidden="true" tabindex="-1" href="#变量"><span class="icon icon-link"></span></a>变量</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">let</span> x <span class="token operator">=</span> <span class="token keyword null nil">null</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">let</span> name <span class="token operator">=</span> <span class="token string">"Tammy"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> found <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// => Tammy, false, null</span>
|
||
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>name<span class="token punctuation">,</span> found<span class="token punctuation">,</span> x<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">var</span> a<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// => undefined</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="字符串"><a aria-hidden="true" tabindex="-1" href="#字符串"><span class="icon icon-link"></span></a>字符串</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">let</span> single <span class="token operator">=</span> <span class="token string">'Wheres my bandit hat?'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">let</span> double <span class="token operator">=</span> <span class="token string">"Wheres my bandit hat?"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// => 21</span>
|
||
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>single<span class="token punctuation">.</span><span class="token property-access">length</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="算术运算符"><a aria-hidden="true" tabindex="-1" href="#算术运算符"><span class="icon icon-link"></span></a>算术运算符</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token number">5</span> <span class="token operator">+</span> <span class="token number">5</span> <span class="token operator">=</span> <span class="token number">10</span> <span class="token comment">// 加法 Addition</span>
|
||
</span><span class="code-line"><span class="token number">10</span> <span class="token operator">-</span> <span class="token number">5</span> <span class="token operator">=</span> <span class="token number">5</span> <span class="token comment">// 减法 Subtraction</span>
|
||
</span><span class="code-line"><span class="token number">5</span> <span class="token operator">*</span> <span class="token number">10</span> <span class="token operator">=</span> <span class="token number">50</span> <span class="token comment">// 乘法 Multiplication</span>
|
||
</span><span class="code-line"><span class="token number">10</span> <span class="token operator">/</span> <span class="token number">5</span> <span class="token operator">=</span> <span class="token number">2</span> <span class="token comment">// 除法 Division</span>
|
||
</span><span class="code-line"><span class="token number">10</span> <span class="token operator">%</span> <span class="token number">5</span> <span class="token operator">=</span> <span class="token number">0</span> <span class="token comment">// 取模 Modulo</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="注释"><a aria-hidden="true" tabindex="-1" href="#注释"><span class="icon icon-link"></span></a>注释</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token comment">// 此行将表示注释</span>
|
||
</span><span class="code-line"><span class="token comment">/*
|
||
</span></span><span class="code-line"><span class="token comment">多行配置
|
||
</span></span><span class="code-line"><span class="token comment">部署前必须更改
|
||
</span></span><span class="code-line"><span class="token comment">以下配置。
|
||
</span></span><span class="code-line"><span class="token comment">*/</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="赋值运算符"><a aria-hidden="true" tabindex="-1" href="#赋值运算符"><span class="icon icon-link"></span></a>赋值运算符</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">let</span> number <span class="token operator">=</span> <span class="token number">100</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 两个语句都会加 10</span>
|
||
</span><span class="code-line">number <span class="token operator">=</span> number <span class="token operator">+</span> <span class="token number">10</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">number <span class="token operator">+=</span> <span class="token number">10</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>number<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// => 120</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="字符串插值"><a aria-hidden="true" tabindex="-1" href="#字符串插值"><span class="icon icon-link"></span></a>字符串插值</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">let</span> age <span class="token operator">=</span> <span class="token number">7</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 字符串拼接</span>
|
||
</span><span class="code-line"><span class="token string">'Tommy is '</span> <span class="token operator">+</span> age <span class="token operator">+</span> <span class="token string">' years old.'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 字符串插值</span>
|
||
</span><span class="code-line"><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Tommy is </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>age<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> years old.</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="字符串-1"><a aria-hidden="true" tabindex="-1" href="#字符串-1"><span class="icon icon-link"></span></a>字符串</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=col-span-2-->
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">var</span> abc <span class="token operator">=</span> <span class="token string">"abcdefghijklmnopqrstuvwxyz"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">var</span> esc <span class="token operator">=</span> <span class="token string">'I don\'t \n know'</span><span class="token punctuation">;</span> <span class="token comment">// \n 换行</span>
|
||
</span><span class="code-line"><span class="token keyword">var</span> len <span class="token operator">=</span> abc<span class="token punctuation">.</span><span class="token property-access">length</span><span class="token punctuation">;</span> <span class="token comment">// 字符串长度</span>
|
||
</span><span class="code-line">abc<span class="token punctuation">.</span><span class="token method function property-access">indexOf</span><span class="token punctuation">(</span><span class="token string">"lmno"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 查找子字符串，如果不包含则 -1</span>
|
||
</span><span class="code-line">abc<span class="token punctuation">.</span><span class="token method function property-access">lastIndexOf</span><span class="token punctuation">(</span><span class="token string">"lmno"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 最后一次出现</span>
|
||
</span><span class="code-line">abc<span class="token punctuation">.</span><span class="token method function property-access">slice</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 去掉“def”，负值从后面计算</span>
|
||
</span><span class="code-line">abc<span class="token punctuation">.</span><span class="token method function property-access">replace</span><span class="token punctuation">(</span><span class="token string">"abc"</span><span class="token punctuation">,</span><span class="token string">"123"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 查找和替换，接受正则表达式</span>
|
||
</span><span class="code-line">abc<span class="token punctuation">.</span><span class="token method function property-access">toUpperCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 转换为大写</span>
|
||
</span><span class="code-line">abc<span class="token punctuation">.</span><span class="token method function property-access">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 转换为小写</span>
|
||
</span><span class="code-line">abc<span class="token punctuation">.</span><span class="token method function property-access">concat</span><span class="token punctuation">(</span><span class="token string">" "</span><span class="token punctuation">,</span> str2<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// abc + " " + str2</span>
|
||
</span><span class="code-line">abc<span class="token punctuation">.</span><span class="token method function property-access">charAt</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 索引处的字符：“c”</span>
|
||
</span><span class="code-line">abc<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">// 不安全，abc[2] = "C" 不起作用</span>
|
||
</span><span class="code-line"><span class="token comment">// 索引处的字符代码：“c”-> 99</span>
|
||
</span><span class="code-line">abc<span class="token punctuation">.</span><span class="token method function property-access">charCodeAt</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 用逗号分割字符串给出一个数组</span>
|
||
</span><span class="code-line">abc<span class="token punctuation">.</span><span class="token method function property-access">split</span><span class="token punctuation">(</span><span class="token string">","</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 分割字符</span>
|
||
</span><span class="code-line">abc<span class="token punctuation">.</span><span class="token method function property-access">split</span><span class="token punctuation">(</span><span class="token string">""</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 匹配开头字符串,如果忽略第二个参数，则从索引 0 开始匹配</span>
|
||
</span><span class="code-line">abc<span class="token punctuation">.</span><span class="token method function property-access">startsWith</span><span class="token punctuation">(</span><span class="token string">"bc"</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 匹配结尾的字符串,如果忽略第二个参数，则默认是原字符串长度</span>
|
||
</span><span class="code-line">abc<span class="token punctuation">.</span><span class="token method function property-access">endsWith</span><span class="token punctuation">(</span><span class="token string">"wxy"</span><span class="token punctuation">,</span> abc<span class="token punctuation">.</span><span class="token property-access">length</span> <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// padEnd 和 padStart 都用于填充长度，默认填充对象是空格</span>
|
||
</span><span class="code-line"><span class="token string">"200"</span><span class="token punctuation">.</span><span class="token method function property-access">padEnd</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "200 "</span>
|
||
</span><span class="code-line"><span class="token string">"200"</span><span class="token punctuation">.</span><span class="token method function property-access">padEnd</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token string">"."</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "200.."</span>
|
||
</span><span class="code-line"><span class="token comment">// 重复字符</span>
|
||
</span><span class="code-line"><span class="token string">"abc"</span><span class="token punctuation">.</span><span class="token method function property-access">repeat</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "abcabc"</span>
|
||
</span><span class="code-line"><span class="token comment">// trim、trimEnd 和 trimStart 用于去除首尾空格</span>
|
||
</span><span class="code-line"><span class="token string">" ab c "</span><span class="token punctuation">.</span><span class="token method function property-access">trim</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "ab c"</span>
|
||
</span><span class="code-line"><span class="token comment">// 数字转为十六进制 (16)、八进制 (8) 或二进制 (2)</span>
|
||
</span><span class="code-line"><span class="token punctuation">(</span><span class="token number">128</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">toString</span><span class="token punctuation">(</span><span class="token number">16</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="数字-1"><a aria-hidden="true" tabindex="-1" href="#数字-1"><span class="icon icon-link"></span></a>数字</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">var</span> pi <span class="token operator">=</span> <span class="token number">3.141</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">pi<span class="token punctuation">.</span><span class="token method function property-access">toFixed</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 返回 3 </span>
|
||
</span><span class="code-line">pi<span class="token punctuation">.</span><span class="token method function property-access">toFixed</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 返回 3.14 - 使用金钱</span>
|
||
</span><span class="code-line">pi<span class="token punctuation">.</span><span class="token method function property-access">toPrecision</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span> <span class="token comment">// 返回 3.1</span>
|
||
</span><span class="code-line">pi<span class="token punctuation">.</span><span class="token method function property-access">valueOf</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 返回号码</span>
|
||
</span><span class="code-line"><span class="token known-class-name class-name">Number</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 转换为数字</span>
|
||
</span><span class="code-line"><span class="token comment">// 自 1970 年以来的毫秒数</span>
|
||
</span><span class="code-line"><span class="token known-class-name class-name">Number</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token comment">// 返回第一个数字：3</span>
|
||
</span><span class="code-line"><span class="token function">parseInt</span><span class="token punctuation">(</span><span class="token string">"3 months"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 返回 3.5</span>
|
||
</span><span class="code-line"><span class="token function">parseFloat</span><span class="token punctuation">(</span><span class="token string">"3.5 days"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 最大可能的 JS 数</span>
|
||
</span><span class="code-line"><span class="token known-class-name class-name">Number</span><span class="token punctuation">.</span><span class="token constant">MAX_VALUE</span>
|
||
</span><span class="code-line"><span class="token comment">// 最小可能的 JS 编号</span>
|
||
</span><span class="code-line"><span class="token known-class-name class-name">Number</span><span class="token punctuation">.</span><span class="token constant">MIN_VALUE</span>
|
||
</span><span class="code-line"><span class="token comment">// -无穷</span>
|
||
</span><span class="code-line"><span class="token known-class-name class-name">Number</span><span class="token punctuation">.</span><span class="token constant">NEGATIVE_INFINITY</span>
|
||
</span><span class="code-line"><span class="token comment">// 无穷</span>
|
||
</span><span class="code-line"><span class="token known-class-name class-name">Number</span><span class="token punctuation">.</span><span class="token constant">POSITIVE_INFINITY</span>
|
||
</span></code></pre>
|
||
<h4 id="math"><a aria-hidden="true" tabindex="-1" href="#math"><span class="icon icon-link"></span></a>Math</h4>
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><span class="token keyword">const</span> pi <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token constant">PI</span><span class="token punctuation">;</span> <span class="token comment">// 3.141592653589793</span>
|
||
</span><span class="code-line">Math<span class="token punctuation">.</span><span class="token function">round</span><span class="token punctuation">(</span><span class="token number">4.4</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// = 4 - 数字四舍五入</span>
|
||
</span><span class="code-line">Math<span class="token punctuation">.</span><span class="token function">round</span><span class="token punctuation">(</span><span class="token number">4.5</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// = 5</span>
|
||
</span><span class="code-line">Math<span class="token punctuation">.</span><span class="token function">pow</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">8</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// = 256 - 2 的 8 次方 </span>
|
||
</span><span class="code-line">Math<span class="token punctuation">.</span><span class="token function">sqrt</span><span class="token punctuation">(</span><span class="token number">49</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// = 7 - 平方根</span>
|
||
</span><span class="code-line">Math<span class="token punctuation">.</span><span class="token function">abs</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">3.14</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// = 3.14 - 绝对，正值</span>
|
||
</span><span class="code-line">Math<span class="token punctuation">.</span><span class="token function">ceil</span><span class="token punctuation">(</span><span class="token number">3.14</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// = 4 - 返回 >= 最小整数</span>
|
||
</span><span class="code-line"><span class="token comment">// = 3 - 返回 <= 最大整数</span>
|
||
</span><span class="code-line">Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span><span class="token number">3.99</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// = 0 - 正弦</span>
|
||
</span><span class="code-line">Math<span class="token punctuation">.</span><span class="token function">sin</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// OTHERS: tan,atan,asin,acos,余弦值</span>
|
||
</span><span class="code-line">Math<span class="token punctuation">.</span><span class="token function">cos</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token constant">PI</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// = -2 - 最低值</span>
|
||
</span><span class="code-line">Math<span class="token punctuation">.</span><span class="token function">min</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// = 3 - 最高值</span>
|
||
</span><span class="code-line">Math<span class="token punctuation">.</span><span class="token function">max</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// = 0 自然对数</span>
|
||
</span><span class="code-line">Math<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// = 2.7182pow(E,x) 自然对数的底数</span>
|
||
</span><span class="code-line">Math<span class="token punctuation">.</span><span class="token function">exp</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 0 到 1 之间的随机数</span>
|
||
</span><span class="code-line">Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 随机整数，从 1</span>
|
||
</span><span class="code-line">Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">5</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="全局函数"><a aria-hidden="true" tabindex="-1" href="#全局函数"><span class="icon icon-link"></span></a>全局函数</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=col-span-2-->
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token comment">// 像脚本代码一样执行字符串</span>
|
||
</span><span class="code-line"><span class="token function">eval</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 从数字返回字符串</span>
|
||
</span><span class="code-line"><span class="token known-class-name class-name">String</span><span class="token punctuation">(</span><span class="token number">23</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 从数字返回字符串</span>
|
||
</span><span class="code-line"><span class="token punctuation">(</span><span class="token number">23</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 从字符串返回数字</span>
|
||
</span><span class="code-line"><span class="token known-class-name class-name">Number</span><span class="token punctuation">(</span><span class="token string">"23"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 解码 URI。 结果：“my page.asp”</span>
|
||
</span><span class="code-line"><span class="token function">decodeURI</span><span class="token punctuation">(</span>enc<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 编码 URI。 结果：“my%20page.asp”</span>
|
||
</span><span class="code-line"><span class="token function">encodeURI</span><span class="token punctuation">(</span>uri<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 解码 URI 组件</span>
|
||
</span><span class="code-line"><span class="token function">decodeURIComponent</span><span class="token punctuation">(</span>enc<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 对 URI 组件进行编码</span>
|
||
</span><span class="code-line"><span class="token function">encodeURIComponent</span><span class="token punctuation">(</span>uri<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 是一个有限的合法数</span>
|
||
</span><span class="code-line"><span class="token function">isFinite</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 是一个非法数字</span>
|
||
</span><span class="code-line"><span class="token function">isNaN</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 返回字符串的浮点数</span>
|
||
</span><span class="code-line"><span class="token function">parseFloat</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 解析一个字符串并返回一个整数</span>
|
||
</span><span class="code-line"><span class="token function">parseInt</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="javascript-条件"><a aria-hidden="true" tabindex="-1" href="#javascript-条件"><span class="icon icon-link"></span></a>JavaScript 条件</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-exist row-span-3"><div class="wrap-header h3wrap"><h3 id="操作符"><a aria-hidden="true" tabindex="-1" href="#操作符"><span class="icon icon-link"></span></a>操作符</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-3-->
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token boolean">true</span> <span class="token operator">||</span> <span class="token boolean">false</span><span class="token punctuation">;</span> <span class="token comment">// true</span>
|
||
</span><span class="code-line"><span class="token number">10</span> <span class="token operator">></span> <span class="token number">5</span> <span class="token operator">||</span> <span class="token number">10</span> <span class="token operator">></span> <span class="token number">20</span><span class="token punctuation">;</span> <span class="token comment">// true</span>
|
||
</span><span class="code-line"><span class="token boolean">false</span> <span class="token operator">||</span> <span class="token boolean">false</span><span class="token punctuation">;</span> <span class="token comment">// false</span>
|
||
</span><span class="code-line"><span class="token number">10</span> <span class="token operator">></span> <span class="token number">100</span> <span class="token operator">||</span> <span class="token number">10</span> <span class="token operator">></span> <span class="token number">20</span><span class="token punctuation">;</span> <span class="token comment">// false</span>
|
||
</span></code></pre>
|
||
<h4 id="逻辑运算符-"><a aria-hidden="true" tabindex="-1" href="#逻辑运算符-"><span class="icon icon-link"></span></a>逻辑运算符 &&</h4>
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token boolean">true</span> <span class="token operator">&&</span> <span class="token boolean">true</span><span class="token punctuation">;</span> <span class="token comment">// true</span>
|
||
</span><span class="code-line"><span class="token number">1</span> <span class="token operator">></span> <span class="token number">2</span> <span class="token operator">&&</span> <span class="token number">2</span> <span class="token operator">></span> <span class="token number">1</span><span class="token punctuation">;</span> <span class="token comment">// false</span>
|
||
</span><span class="code-line"><span class="token boolean">true</span> <span class="token operator">&&</span> <span class="token boolean">false</span><span class="token punctuation">;</span> <span class="token comment">// false</span>
|
||
</span><span class="code-line"><span class="token number">4</span> <span class="token operator">===</span> <span class="token number">4</span> <span class="token operator">&&</span> <span class="token number">3</span> <span class="token operator">></span> <span class="token number">1</span><span class="token punctuation">;</span> <span class="token comment">// true</span>
|
||
</span></code></pre>
|
||
<h4 id="比较运算符"><a aria-hidden="true" tabindex="-1" href="#比较运算符"><span class="icon icon-link"></span></a>比较运算符</h4>
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token number">1</span> <span class="token operator">></span> <span class="token number">3</span> <span class="token comment">// false</span>
|
||
</span><span class="code-line"><span class="token number">3</span> <span class="token operator">></span> <span class="token number">1</span> <span class="token comment">// true</span>
|
||
</span><span class="code-line"><span class="token number">250</span> <span class="token operator">>=</span> <span class="token number">250</span> <span class="token comment">// true</span>
|
||
</span><span class="code-line"><span class="token number">1</span> <span class="token operator">===</span> <span class="token number">1</span> <span class="token comment">// true</span>
|
||
</span><span class="code-line"><span class="token number">1</span> <span class="token operator">===</span> <span class="token number">2</span> <span class="token comment">// false</span>
|
||
</span><span class="code-line"><span class="token number">1</span> <span class="token operator">===</span> <span class="token string">'1'</span> <span class="token comment">// false</span>
|
||
</span></code></pre>
|
||
<h4 id="逻辑运算符"><a aria-hidden="true" tabindex="-1" href="#逻辑运算符"><span class="icon icon-link"></span></a>逻辑运算符</h4>
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">let</span> lateToWork <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">let</span> oppositeValue <span class="token operator">=</span> <span class="token operator">!</span>lateToWork<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// => false</span>
|
||
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>oppositeValue<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<h4 id="空值合并运算符-"><a aria-hidden="true" tabindex="-1" href="#空值合并运算符-"><span class="icon icon-link"></span></a>空值合并运算符 ??</h4>
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword null nil">null</span> <span class="token operator">??</span> <span class="token string">'I win'</span><span class="token punctuation">;</span> <span class="token comment">// 'I win'</span>
|
||
</span><span class="code-line"><span class="token keyword nil">undefined</span> <span class="token operator">??</span> <span class="token string">'Me too'</span><span class="token punctuation">;</span> <span class="token comment">// 'Me too'</span>
|
||
</span><span class="code-line"><span class="token boolean">false</span> <span class="token operator">??</span> <span class="token string">'I lose'</span> <span class="token comment">// false</span>
|
||
</span><span class="code-line"><span class="token number">0</span> <span class="token operator">??</span> <span class="token string">'I lose again'</span> <span class="token comment">// 0</span>
|
||
</span><span class="code-line"><span class="token string">''</span> <span class="token operator">??</span> <span class="token string">'Damn it'</span> <span class="token comment">// ''</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="if-statement-if-语句"><a aria-hidden="true" tabindex="-1" href="#if-statement-if-语句"><span class="icon icon-link"></span></a>if Statement (if 语句)</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> isMailSent <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>isMailSent<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'Mail sent to recipient'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="ternary-operator-三元运算符"><a aria-hidden="true" tabindex="-1" href="#ternary-operator-三元运算符"><span class="icon icon-link"></span></a>Ternary Operator (三元运算符)</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">var</span> age <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token comment">// => true</span>
|
||
</span><span class="code-line"><span class="token keyword">var</span> status <span class="token operator">=</span> <span class="token punctuation">(</span>age <span class="token operator">>=</span> <span class="token number">18</span><span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token boolean">true</span> <span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="else-if"><a aria-hidden="true" tabindex="-1" href="#else-if"><span class="icon icon-link"></span></a>else if</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> size <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>size <span class="token operator">></span> <span class="token number">20</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'Medium'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span> <span class="token keyword control-flow">else</span> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>size <span class="token operator">></span> <span class="token number">4</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'Small'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span> <span class="token keyword control-flow">else</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'Tiny'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token comment">// Print: Small</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="-vs-"><a aria-hidden="true" tabindex="-1" href="#-vs-"><span class="icon icon-link"></span></a>== vs ===</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token number">0</span> <span class="token operator">==</span> <span class="token boolean">false</span> <span class="token comment">// true</span>
|
||
</span><span class="code-line"><span class="token number">0</span> <span class="token operator">===</span> <span class="token boolean">false</span> <span class="token comment">// false, 不同类型</span>
|
||
</span><span class="code-line"><span class="token number">1</span> <span class="token operator">==</span> <span class="token string">"1"</span> <span class="token comment">// true, 自动类型转换</span>
|
||
</span><span class="code-line"><span class="token number">1</span> <span class="token operator">===</span> <span class="token string">"1"</span> <span class="token comment">// false, 不同类型</span>
|
||
</span><span class="code-line"><span class="token keyword null nil">null</span> <span class="token operator">==</span> <span class="token keyword nil">undefined</span> <span class="token comment">// true</span>
|
||
</span><span class="code-line"><span class="token keyword null nil">null</span> <span class="token operator">===</span> <span class="token keyword nil">undefined</span> <span class="token comment">// false</span>
|
||
</span><span class="code-line"><span class="token string">'0'</span> <span class="token operator">==</span> <span class="token boolean">false</span> <span class="token comment">// true</span>
|
||
</span><span class="code-line"><span class="token string">'0'</span> <span class="token operator">===</span> <span class="token boolean">false</span> <span class="token comment">// false</span>
|
||
</span></code></pre>
|
||
<p><code>==</code> 只检查值，<code>===</code> 检查值和类型。</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="switch-语句"><a aria-hidden="true" tabindex="-1" href="#switch-语句"><span class="icon icon-link"></span></a>switch 语句</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> food <span class="token operator">=</span> <span class="token string">'salad'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword control-flow">switch</span> <span class="token punctuation">(</span>food<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">case</span> <span class="token string">'oyster'</span><span class="token operator">:</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'海的味道'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">break</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token keyword">case</span> <span class="token string">'pizza'</span><span class="token operator">:</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'美味的馅饼'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">break</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token keyword module">default</span><span class="token operator">:</span>
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'请您用餐'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="switch-多-case---单一操作"><a aria-hidden="true" tabindex="-1" href="#switch-多-case---单一操作"><span class="icon icon-link"></span></a>switch 多 case - 单一操作</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> food <span class="token operator">=</span> <span class="token string">'salad'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword control-flow">switch</span> <span class="token punctuation">(</span>food<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">case</span> <span class="token string">'oyster'</span><span class="token operator">:</span>
|
||
</span><span class="code-line"> <span class="token keyword">case</span> <span class="token string">'pizza'</span><span class="token operator">:</span>
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'美味的馅饼'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">break</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token keyword module">default</span><span class="token operator">:</span>
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'请您用餐'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="javascript-functions-函数"><a aria-hidden="true" tabindex="-1" href="#javascript-functions-函数"><span class="icon icon-link"></span></a>JavaScript Functions 函数</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="函数"><a aria-hidden="true" tabindex="-1" href="#函数"><span class="icon icon-link"></span></a>函数</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token comment">// 定义函数：</span>
|
||
</span><span class="code-line"><span class="token keyword">function</span> <span class="token function">sum</span><span class="token punctuation">(</span><span class="token parameter">num1<span class="token punctuation">,</span> num2</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> num1 <span class="token operator">+</span> num2<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token comment">// 调用函数：</span>
|
||
</span><span class="code-line"><span class="token function">sum</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 9</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="匿名函数"><a aria-hidden="true" tabindex="-1" href="#匿名函数"><span class="icon icon-link"></span></a>匿名函数</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token comment">// 命名函数</span>
|
||
</span><span class="code-line"><span class="token keyword">function</span> <span class="token function">rocketToMars</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token string">'BOOM!'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token comment">// 匿名函数</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function">rocketToMars</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token string">'BOOM!'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-exist row-span-3"><div class="wrap-header h3wrap"><h3 id="箭头函数-es6"><a aria-hidden="true" tabindex="-1" href="#箭头函数-es6"><span class="icon icon-link"></span></a>箭头函数 (ES6)</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-3-->
|
||
<h4 id="有两个参数"><a aria-hidden="true" tabindex="-1" href="#有两个参数"><span class="icon icon-link"></span></a>有两个参数</h4>
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function">sum</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">param1<span class="token punctuation">,</span> param2</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> param1 <span class="token operator">+</span> param2<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token function">sum</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// => 7 </span>
|
||
</span></code></pre>
|
||
<h4 id="没有参数"><a aria-hidden="true" tabindex="-1" href="#没有参数"><span class="icon icon-link"></span></a>没有参数</h4>
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function">printHello</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'hello'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token function">printHello</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// => hello</span>
|
||
</span></code></pre>
|
||
<h4 id="只有一个参数"><a aria-hidden="true" tabindex="-1" href="#只有一个参数"><span class="icon icon-link"></span></a>只有一个参数</h4>
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function">checkWeight</span> <span class="token operator">=</span> <span class="token parameter">weight</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Weight : </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>weight<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token function">checkWeight</span><span class="token punctuation">(</span><span class="token number">25</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// => Weight : 25 </span>
|
||
</span></code></pre>
|
||
<h4 id="简洁箭头函数"><a aria-hidden="true" tabindex="-1" href="#简洁箭头函数"><span class="icon icon-link"></span></a>简洁箭头函数</h4>
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function">multiply</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> a <span class="token operator">*</span> b<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// => 60 </span>
|
||
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token function">multiply</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">30</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>从 ES2015 开始提供<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">箭头函数</a></p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="返回关键字"><a aria-hidden="true" tabindex="-1" href="#返回关键字"><span class="icon icon-link"></span></a>返回关键字</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token comment">// 有 return</span>
|
||
</span><span class="code-line"><span class="token keyword">function</span> <span class="token function">sum</span><span class="token punctuation">(</span><span class="token parameter">num1<span class="token punctuation">,</span> num2</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> num1 <span class="token operator">+</span> num2<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token comment">// 该函数不输出总和</span>
|
||
</span><span class="code-line"><span class="token keyword">function</span> <span class="token function">sum</span><span class="token punctuation">(</span><span class="token parameter">num1<span class="token punctuation">,</span> num2</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> num1 <span class="token operator">+</span> num2<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="调用函数"><a aria-hidden="true" tabindex="-1" href="#调用函数"><span class="icon icon-link"></span></a>调用函数</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token comment">// 定义函数</span>
|
||
</span><span class="code-line"><span class="token keyword">function</span> <span class="token function">sum</span><span class="token punctuation">(</span><span class="token parameter">num1<span class="token punctuation">,</span> num2</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> num1 <span class="token operator">+</span> num2<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token comment">// 调用函数</span>
|
||
</span><span class="code-line"><span class="token function">sum</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 6</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="立即执行函数"><a aria-hidden="true" tabindex="-1" href="#立即执行函数"><span class="icon icon-link"></span></a>立即执行函数</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token comment">//命名函数并立即执行一次</span>
|
||
</span><span class="code-line"><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token function">sum</span><span class="token punctuation">(</span><span class="token parameter">num1<span class="token punctuation">,</span> num2</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> num1 <span class="token operator">+</span> num2<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">)</span><span class="token comment">//6</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="函数表达式"><a aria-hidden="true" tabindex="-1" href="#函数表达式"><span class="icon icon-link"></span></a>函数表达式</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function">dog</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token string">'Woof!'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="函数参数"><a aria-hidden="true" tabindex="-1" href="#函数参数"><span class="icon icon-link"></span></a>函数参数</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token comment">// 参数是 name</span>
|
||
</span><span class="code-line"><span class="token keyword">function</span> <span class="token function">sayHello</span><span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Hello, </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">!</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="函数声明"><a aria-hidden="true" tabindex="-1" href="#函数声明"><span class="icon icon-link"></span></a>函数声明</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">function</span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token parameter">num1<span class="token punctuation">,</span> num2</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> num1 <span class="token operator">+</span> num2<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="javascript-范围"><a aria-hidden="true" tabindex="-1" href="#javascript-范围"><span class="icon icon-link"></span></a>JavaScript 范围</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="范围"><a aria-hidden="true" tabindex="-1" href="#范围"><span class="icon icon-link"></span></a>范围</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">function</span> <span class="token function">myFunction</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">var</span> pizzaName <span class="token operator">=</span> <span class="token string">"Margarita"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token comment">// 这里的代码可以使用 PizzaName</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token comment">// ❌ PizzaName 不能在这里使用</span>
|
||
</span></code></pre>
|
||
<p><code>{ }</code> 块内声明的变量</p>
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">let</span> x <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token comment">// ❌ x 不能在这里使用</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">var</span> x <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token comment">// ✅ x 能在这里使用</span>
|
||
</span></code></pre>
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">var</span> x <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">;</span> <span class="token comment">// Global scope</span>
|
||
</span><span class="code-line"><span class="token keyword">let</span> x <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">;</span> <span class="token comment">// Global scope</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> x <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">;</span> <span class="token comment">// Global scope</span>
|
||
</span></code></pre>
|
||
<p>ES6 引入了两个重要的新 JavaScript 关键字：let 和 const。这两个关键字在 JavaScript 中提供了块作用域。</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="块作用域变量"><a aria-hidden="true" tabindex="-1" href="#块作用域变量"><span class="icon icon-link"></span></a>块作用域变量</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> isLoggedIn <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>isLoggedIn <span class="token operator">==</span> <span class="token boolean">true</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> statusMessage <span class="token operator">=</span> <span class="token string">'Logged in.'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token comment">// Uncaught ReferenceError...</span>
|
||
</span><span class="code-line"><span class="token comment">// 未捕获的引用错误...</span>
|
||
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>statusMessage<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="全局变量"><a aria-hidden="true" tabindex="-1" href="#全局变量"><span class="icon icon-link"></span></a>全局变量</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token comment">// 全局声明的变量</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> color <span class="token operator">=</span> <span class="token string">'blue'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">function</span> <span class="token function">printColor</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>color<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token function">printColor</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// => blue</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="let-vs-var"><a aria-hidden="true" tabindex="-1" href="#let-vs-var"><span class="icon icon-link"></span></a><code>let</code> vs <code>var</code></h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword control-flow">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> <span class="token number">3</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// 这是“let”的最大范围</span>
|
||
</span><span class="code-line"> <span class="token comment">// i 可以访问 ✔️</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token comment">// i 不能访问 ❌</span>
|
||
</span></code></pre>
|
||
<hr>
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword control-flow">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"><</span> <span class="token number">3</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// i 可以访问 ✔️</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token comment">// i 可以访问 ✔️</span>
|
||
</span></code></pre>
|
||
<p><code>var</code> 的范围是最近的函数块，而 <code>let</code> 的范围是最近的封闭块。</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="带闭包的循环"><a aria-hidden="true" tabindex="-1" href="#带闭包的循环"><span class="icon icon-link"></span></a>带闭包的循环</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token comment">// 打印三次，不是我们的意思。</span>
|
||
</span><span class="code-line"><span class="token keyword control-flow">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"><</span> <span class="token number">3</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token parameter">_</span> <span class="token arrow operator">=></span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<hr>
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token comment">// 按预期打印 0、1 和 2。</span>
|
||
</span><span class="code-line"><span class="token keyword control-flow">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> j <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> j <span class="token operator"><</span> <span class="token number">3</span><span class="token punctuation">;</span> j<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token parameter">_</span> <span class="token arrow operator">=></span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>j<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>变量使用 <code>let</code> 有自己的副本，变量有使用 <code>var</code> 的共享副本。</p>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="javascript-arrays"><a aria-hidden="true" tabindex="-1" href="#javascript-arrays"><span class="icon icon-link"></span></a>JavaScript Arrays</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist row-span-6"><div class="wrap-header h3wrap"><h3 id="方法"><a aria-hidden="true" tabindex="-1" href="#方法"><span class="icon icon-link"></span></a>方法</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-6-->
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>Array.from()</code></td><td align="left">类似数组对象创建一个新的 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/from">#</a></td></tr><tr><td align="left"><code>Array.isArray()</code></td><td align="left">值是否是一个 Array <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray">#</a></td></tr><tr><td align="left"><code>Array.of()</code></td><td align="left">创建一个新数组示例 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/of">#</a></td></tr><tr><td align="left"><code>.at()</code></td><td align="left">返回值索引对应的元素 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/at">#</a></td></tr><tr><td align="left"><code>.concat()</code></td><td align="left">合并两个或多个数组 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/concat">#</a></td></tr><tr><td align="left"><code>.copyWithin()</code></td><td align="left">浅复制替换某个位置 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/copyWithin">#</a></td></tr><tr><td align="left"><code>.entries()</code></td><td align="left">新的 Array Iterator 对象 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/entries">#</a></td></tr><tr><td align="left"><code>.every()</code></td><td align="left">是否能通过回调函数的测试 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/every">#</a></td></tr><tr><td align="left"><code>.fill()</code></td><td align="left">固定值填充一个数组中 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/fill">#</a></td></tr><tr><td align="left"><code>.filter()</code></td><td align="left">返回过滤后的数组 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/filter">#</a></td></tr><tr><td align="left"><code>.find()</code></td><td align="left">第一个元素的值 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/find">#</a></td></tr><tr><td align="left"><code>.findIndex()</code></td><td align="left">第一个元素的索引 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex">#</a></td></tr><tr><td align="left"><code>.findLast()</code></td><td align="left">最后一个元素的值 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/findLast">#</a></td></tr><tr><td align="left"><code>.findLastIndex()</code></td><td align="left">最后一个元素的索引 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/findLastIndex">#</a></td></tr><tr><td align="left"><code>.flat()</code></td><td align="left">扁平化嵌套数组 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/flat">#</a></td></tr><tr><td align="left"><code>.flatMap()</code></td><td align="left">与 flat 相同 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap">#</a></td></tr><tr><td align="left"><code>.forEach()</code></td><td align="left">升序循环执行 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach">#</a></td></tr><tr><td align="left"><code>.includes()</code></td><td align="left">是否包含一个指定的值 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/includes">#</a></td></tr><tr><td align="left"><code>.indexOf()</code></td><td align="left">找到给定元素的第一个索引 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf">#</a></td></tr><tr><td align="left"><code>.join()</code></td><td align="left">数组链接成一个字符串 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/join">#</a></td></tr><tr><td align="left"><code>.keys()</code></td><td align="left">每个索引键 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/keys">#</a></td></tr><tr><td align="left"><code>.lastIndexOf()</code></td><td align="left">给定元素的最后一个索引 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf">#</a></td></tr><tr><td align="left"><code>.map()</code></td><td align="left">循环返回一个新数组 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map">#</a></td></tr><tr><td align="left"><code>.pop()</code></td><td align="left"><code>删除</code>最后一个元素 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/pop">#</a></td></tr><tr><td align="left"><code>.push()</code></td><td align="left">元素<code>添加</code>到数组的末尾 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/push">#</a></td></tr><tr><td align="left"><code>.reduce()</code></td><td align="left">循环函数传递当前和上一个值 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce">#</a></td></tr><tr><td align="left"><code>.reduceRight()</code></td><td align="left">类似 <code>reduce</code> 从右往左循环 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/ReduceRight">#</a></td></tr><tr><td align="left"><code>.reverse()</code></td><td align="left">数组元素的位置颠倒 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse">#</a></td></tr><tr><td align="left"><code>.shift()</code></td><td align="left"><code>删除</code>第一个元素 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/shift">#</a></td></tr><tr><td align="left"><code>.slice()</code></td><td align="left"><code>提取</code>元素 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/slice">#</a></td></tr><tr><td align="left"><code>.some()</code></td><td align="left">至少有一个通过测试函数 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/some">#</a></td></tr><tr><td align="left"><code>.sort()</code></td><td align="left">元素进行排序 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/sort">#</a></td></tr><tr><td align="left"><code>.splice()</code></td><td align="left"><code>删除</code>或<code>替换</code>或<code>添加</code>元素 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/splice">#</a></td></tr><tr><td align="left"><code>.toLocaleString()</code></td><td align="left">字符串表示数组中的元素 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/toLocaleString">#</a></td></tr><tr><td align="left"><code>.toString()</code></td><td align="left">返回字符串 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/toString">#</a></td></tr><tr><td align="left"><code>.unshift()</code></td><td align="left">元素<code>添加</code>到数组的<code>开头</code> <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift">#</a></td></tr><tr><td align="left"><code>.values()</code></td><td align="left">返回新的 ArrayIterator 对象 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/values">#</a></td></tr></tbody></table>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="数组"><a aria-hidden="true" tabindex="-1" href="#数组"><span class="icon icon-link"></span></a>数组</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> fruits <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"apple"</span><span class="token punctuation">,</span> <span class="token string">"dew"</span><span class="token punctuation">,</span> <span class="token string">"banana"</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 不同的数据类型</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token string">'chicken'</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="属性-length"><a aria-hidden="true" tabindex="-1" href="#属性-length"><span class="icon icon-link"></span></a>属性 .length</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> numbers <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">numbers<span class="token punctuation">.</span><span class="token property-access">length</span> <span class="token comment">// 4</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="索引"><a aria-hidden="true" tabindex="-1" href="#索引"><span class="icon icon-link"></span></a>索引</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token comment">// 访问数组元素</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> myArray <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">100</span><span class="token punctuation">,</span> <span class="token number">200</span><span class="token punctuation">,</span> <span class="token number">300</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>myArray<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 100</span>
|
||
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>myArray<span class="token punctuation">[</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">// 200</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="可变图表"><a aria-hidden="true" tabindex="-1" href="#可变图表"><span class="icon icon-link"></span></a>可变图表</h3><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table class="show-header"><thead><tr><th align="left"></th><th align="center">添加</th><th align="center">删除</th><th align="center">开始</th><th align="center">结束</th></tr></thead><tbody><tr><td align="left"><code>push</code></td><td align="center">✅</td><td align="center"></td><td align="center"></td><td align="center">✅</td></tr><tr><td align="left"><code>pop</code></td><td align="center"></td><td align="center">✅</td><td align="center"></td><td align="center">✅</td></tr><tr><td align="left"><code>unshift</code></td><td align="center">✅</td><td align="center"></td><td align="center">✅</td><td align="center"></td></tr><tr><td align="left"><code>shift</code></td><td align="center"></td><td align="center">✅</td><td align="center">✅</td><td align="center"></td></tr></tbody></table>
|
||
<!--rehype:className=show-header-->
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="方法-push"><a aria-hidden="true" tabindex="-1" href="#方法-push"><span class="icon icon-link"></span></a>方法 .push()</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token comment">// 添加单个元素：</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> cart <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'apple'</span><span class="token punctuation">,</span> <span class="token string">'orange'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">cart<span class="token punctuation">.</span><span class="token method function property-access">push</span><span class="token punctuation">(</span><span class="token string">'pear'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 添加多个元素：</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> numbers <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">numbers<span class="token punctuation">.</span><span class="token method function property-access">push</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>将项目<strong>添加到末尾</strong>并返回新的数组长度。</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="方法-pop"><a aria-hidden="true" tabindex="-1" href="#方法-pop"><span class="icon icon-link"></span></a>方法 .pop()</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> fruits <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"apple"</span><span class="token punctuation">,</span> <span class="token string">"dew"</span><span class="token punctuation">,</span> <span class="token string">"banana"</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> fruit <span class="token operator">=</span> fruits<span class="token punctuation">.</span><span class="token method function property-access">pop</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 'banana'</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>fruits<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ["apple", "dew"]</span>
|
||
</span></code></pre>
|
||
<p>从<strong>末尾删除</strong>一个项目并返回已删除的项目。</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="方法-shift"><a aria-hidden="true" tabindex="-1" href="#方法-shift"><span class="icon icon-link"></span></a>方法 .shift()</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> array1 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> firstElement <span class="token operator">=</span> array1<span class="token punctuation">.</span><span class="token method function property-access">shift</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>array1<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 输出: Array [2, 3]</span>
|
||
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>firstElement<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 输出: 1</span>
|
||
</span></code></pre>
|
||
<p><strong>从头删除</strong>一个项目并返回已删除的项目。</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="方法-some"><a aria-hidden="true" tabindex="-1" href="#方法-some"><span class="icon icon-link"></span></a>方法 .some()</h3><div class="wrap-body">
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">const</span> array <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 检查元素是否为偶数</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function">even</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">element</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> element <span class="token operator">%</span> <span class="token number">2</span> <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>array<span class="token punctuation">.</span><span class="token method function property-access">some</span><span class="token punctuation">(</span>even<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 预期输出: true</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="方法-concat"><a aria-hidden="true" tabindex="-1" href="#方法-concat"><span class="icon icon-link"></span></a>方法 .concat()</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> numbers <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> newFirstNumber <span class="token operator">=</span> <span class="token number">4</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token comment">// => [ 4, 3, 2, 1 ]</span>
|
||
</span><span class="code-line"><span class="token punctuation">[</span>newFirstNumber<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token method function property-access">concat</span><span class="token punctuation">(</span>numbers<span class="token punctuation">)</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token comment">// => [ 3, 2, 1, 4 ]</span>
|
||
</span><span class="code-line">numbers<span class="token punctuation">.</span><span class="token method function property-access">concat</span><span class="token punctuation">(</span>newFirstNumber<span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
<p>如果你想避免改变你的原始数组，你可以使用 concat。</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="方法-splice"><a aria-hidden="true" tabindex="-1" href="#方法-splice"><span class="icon icon-link"></span></a>方法 .splice()</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> months <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'Jan'</span><span class="token punctuation">,</span> <span class="token string">'March'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">months<span class="token punctuation">.</span><span class="token method function property-access">splice</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token string">'Feb'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 在索引 1 处插入</span>
|
||
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>months<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 预期输出: Array ["Jan", "Feb", "March"]</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line">months<span class="token punctuation">.</span><span class="token method function property-access">splice</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token string">'May'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 替换索引 2 处的 1 个元素</span>
|
||
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>months<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 预期输出: Array ["Jan", "Feb", "May"]</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="方法-unshift"><a aria-hidden="true" tabindex="-1" href="#方法-unshift"><span class="icon icon-link"></span></a>方法 .unshift()</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">let</span> cats <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'Bob'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// => ['Willy', 'Bob']</span>
|
||
</span><span class="code-line">cats<span class="token punctuation">.</span><span class="token method function property-access">unshift</span><span class="token punctuation">(</span><span class="token string">'Willy'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// => ['Puff', 'George', 'Willy', 'Bob']</span>
|
||
</span><span class="code-line">cats<span class="token punctuation">.</span><span class="token method function property-access">unshift</span><span class="token punctuation">(</span><span class="token string">'Puff'</span><span class="token punctuation">,</span> <span class="token string">'George'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>将项目<strong>添加到开头</strong>并返回新的数组长度。</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="方法-filter"><a aria-hidden="true" tabindex="-1" href="#方法-filter"><span class="icon icon-link"></span></a>方法 .filter()</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> words <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'js'</span><span class="token punctuation">,</span> <span class="token string">'java'</span><span class="token punctuation">,</span> <span class="token string">'golang'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> result <span class="token operator">=</span> words<span class="token punctuation">.</span><span class="token method function property-access">filter</span><span class="token punctuation">(</span><span class="token parameter">word</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> word<span class="token punctuation">.</span><span class="token property-access">length</span> <span class="token operator">></span> <span class="token number">3</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 预期输出: Array ["java", "golang"]</span>
|
||
</span></code></pre>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="javascript-循环"><a aria-hidden="true" tabindex="-1" href="#javascript-循环"><span class="icon icon-link"></span></a>JavaScript 循环</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="while-循环"><a aria-hidden="true" tabindex="-1" href="#while-循环"><span class="icon icon-link"></span></a>While 循环</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword control-flow">while</span> <span class="token punctuation">(</span>condition<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// 要执行的代码块</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword control-flow">while</span> <span class="token punctuation">(</span>i <span class="token operator"><</span> <span class="token number">5</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> i<span class="token operator">++</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="反向循环"><a aria-hidden="true" tabindex="-1" href="#反向循环"><span class="icon icon-link"></span></a>反向循环</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> fruits <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"apple"</span><span class="token punctuation">,</span> <span class="token string">"dew"</span><span class="token punctuation">,</span> <span class="token string">"berry"</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword control-flow">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> fruits<span class="token punctuation">.</span><span class="token property-access">length</span> <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">;</span> i <span class="token operator">>=</span> <span class="token number">0</span><span class="token punctuation">;</span> i<span class="token operator">--</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>i<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">. </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>fruits<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token comment">// => 2. berry</span>
|
||
</span><span class="code-line"><span class="token comment">// => 1. dew</span>
|
||
</span><span class="code-line"><span class="token comment">// => 0. apple</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="dowhile-语句"><a aria-hidden="true" tabindex="-1" href="#dowhile-语句"><span class="icon icon-link"></span></a>Do...While 语句</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line">x <span class="token operator">=</span> <span class="token number">0</span>
|
||
</span><span class="code-line">i <span class="token operator">=</span> <span class="token number">0</span>
|
||
</span><span class="code-line"><span class="token keyword control-flow">do</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> x <span class="token operator">=</span> x <span class="token operator">+</span> i<span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>x<span class="token punctuation">)</span>
|
||
</span><span class="code-line"> i<span class="token operator">++</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span> <span class="token keyword control-flow">while</span> <span class="token punctuation">(</span>i <span class="token operator"><</span> <span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// => 0 1 3 6 10</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="for-循环"><a aria-hidden="true" tabindex="-1" href="#for-循环"><span class="icon icon-link"></span></a>For 循环</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword control-flow">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> <span class="token number">4</span><span class="token punctuation">;</span> i <span class="token operator">+=</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// => 0, 1, 2, 3</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="遍历数组"><a aria-hidden="true" tabindex="-1" href="#遍历数组"><span class="icon icon-link"></span></a>遍历数组</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword control-flow">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> array<span class="token punctuation">.</span><span class="token property-access">length</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>array<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token comment">// => 数组中的每一项</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="break"><a aria-hidden="true" tabindex="-1" href="#break"><span class="icon icon-link"></span></a>Break</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword control-flow">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> <span class="token number">99</span><span class="token punctuation">;</span> i <span class="token operator">+=</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>i <span class="token operator">></span> <span class="token number">5</span><span class="token punctuation">)</span> <span class="token keyword control-flow">break</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token comment">// => 0 1 2 3 4 5</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="continue"><a aria-hidden="true" tabindex="-1" href="#continue"><span class="icon icon-link"></span></a>Continue</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword control-flow">for</span> <span class="token punctuation">(</span>i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> <span class="token number">10</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>i <span class="token operator">===</span> <span class="token number">3</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">continue</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"> text <span class="token operator">+=</span> <span class="token string">"The number is "</span> <span class="token operator">+</span> i <span class="token operator">+</span> <span class="token string">"<br>"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="嵌套循环"><a aria-hidden="true" tabindex="-1" href="#嵌套循环"><span class="icon icon-link"></span></a>嵌套循环</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword control-flow">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> <span class="token number">2</span><span class="token punctuation">;</span> i <span class="token operator">+=</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> j <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> j <span class="token operator"><</span> <span class="token number">3</span><span class="token punctuation">;</span> j <span class="token operator">+=</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>i<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">-</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>j<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="forin-循环"><a aria-hidden="true" tabindex="-1" href="#forin-循环"><span class="icon icon-link"></span></a>for...in 循环</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> fruits <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"apple"</span><span class="token punctuation">,</span> <span class="token string">"orange"</span><span class="token punctuation">,</span> <span class="token string">"banana"</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword control-flow">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> index <span class="token keyword">in</span> fruits<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>index<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token comment">// => 0</span>
|
||
</span><span class="code-line"><span class="token comment">// => 1</span>
|
||
</span><span class="code-line"><span class="token comment">// => 2</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="label-语句"><a aria-hidden="true" tabindex="-1" href="#label-语句"><span class="icon icon-link"></span></a>label 语句</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class= row-span-2-->
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">var</span> num <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token literal-property property">outPoint</span><span class="token operator">:</span>
|
||
</span><span class="code-line"><span class="token keyword control-flow">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"><</span> <span class="token number">10</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> j <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> j <span class="token operator"><</span> <span class="token number">10</span><span class="token punctuation">;</span> j<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">if</span><span class="token punctuation">(</span>i <span class="token operator">==</span> <span class="token number">5</span> <span class="token operator">&&</span> j <span class="token operator">==</span> <span class="token number">5</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">continue</span> outPoint<span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"> num<span class="token operator">++</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token function">alert</span><span class="token punctuation">(</span>num<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 95</span>
|
||
</span></code></pre>
|
||
<p>从 <code>alert(num)</code> 的值可以看出，<code>continue outPoint;</code> 语句的作用是跳出当前循环，并跳转到 <code>outPoint</code>（标签）下的 <code>for</code> 循环继续执行。</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="forof-循环"><a aria-hidden="true" tabindex="-1" href="#forof-循环"><span class="icon icon-link"></span></a>for...of 循环</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> fruits <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"apple"</span><span class="token punctuation">,</span> <span class="token string">"orange"</span><span class="token punctuation">,</span> <span class="token string">"banana"</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword control-flow">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> fruit <span class="token keyword">of</span> fruits<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>fruit<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token comment">// => apple</span>
|
||
</span><span class="code-line"><span class="token comment">// => orange</span>
|
||
</span><span class="code-line"><span class="token comment">// => banana</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="for-awaitof"><a aria-hidden="true" tabindex="-1" href="#for-awaitof"><span class="icon icon-link"></span></a>for await...of</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class= row-span-2-->
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">async</span> <span class="token keyword">function</span><span class="token operator">*</span> <span class="token function">asyncGenerator</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">while</span> <span class="token punctuation">(</span>i <span class="token operator"><</span> <span class="token number">3</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">yield</span> i<span class="token operator">++</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token punctuation">(</span><span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">for</span> <span class="token keyword control-flow">await</span> <span class="token punctuation">(</span>num <span class="token keyword">of</span> <span class="token function">asyncGenerator</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>num<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><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><span class="code-line">
|
||
</span><span class="code-line"><span class="token comment">// 0</span>
|
||
</span><span class="code-line"><span class="token comment">// 1</span>
|
||
</span><span class="code-line"><span class="token comment">// 2</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="可选的-for-表达式"><a aria-hidden="true" tabindex="-1" href="#可选的-for-表达式"><span class="icon icon-link"></span></a>可选的 for 表达式</h3><div class="wrap-body">
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword control-flow">for</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><span class="code-line"> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>i <span class="token operator">></span> <span class="token number">3</span><span class="token punctuation">)</span> <span class="token keyword control-flow">break</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> i<span class="token operator">++</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="javascript-迭代器iterators"><a aria-hidden="true" tabindex="-1" href="#javascript-迭代器iterators"><span class="icon icon-link"></span></a>JavaScript 迭代器(Iterators)</h2><div class="wrap-body">
|
||
<!--rehype:body-class=cols-2-->
|
||
</div></div><div class="h2wrap-body cols-2"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="分配给变量的函数"><a aria-hidden="true" tabindex="-1" href="#分配给变量的函数"><span class="icon icon-link"></span></a>分配给变量的函数</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">let</span> <span class="token function-variable function">plusFive</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">number</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> number <span class="token operator">+</span> <span class="token number">5</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// f 被赋值为 plusFive</span>
|
||
</span><span class="code-line"><span class="token keyword">let</span> f <span class="token operator">=</span> plusFive<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token function">plusFive</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 8</span>
|
||
</span><span class="code-line"><span class="token comment">// 由于 f 具有函数值，因此可以调用它。</span>
|
||
</span><span class="code-line"><span class="token function">f</span><span class="token punctuation">(</span><span class="token number">9</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 14</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="回调函数"><a aria-hidden="true" tabindex="-1" href="#回调函数"><span class="icon icon-link"></span></a>回调函数</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function">isEven</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">n</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> n <span class="token operator">%</span> <span class="token number">2</span> <span class="token operator">==</span> <span class="token number">0</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token keyword">let</span> <span class="token function-variable function">printMsg</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">evenFunc<span class="token punctuation">,</span> num</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> isNumEven <span class="token operator">=</span> <span class="token function">evenFunc</span><span class="token punctuation">(</span>num<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>num<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> is an even number: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>isNumEven<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token comment">// Pass in isEven as the callback function</span>
|
||
</span><span class="code-line"><span class="token function">printMsg</span><span class="token punctuation">(</span>isEven<span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// => The number 4 is an even number: True.</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="数组方法-reduce"><a aria-hidden="true" tabindex="-1" href="#数组方法-reduce"><span class="icon icon-link"></span></a>数组方法 .reduce()</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> numbers <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> sum <span class="token operator">=</span> numbers<span class="token punctuation">.</span><span class="token method function property-access">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">accumulator<span class="token punctuation">,</span> curVal</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> accumulator <span class="token operator">+</span> curVal<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>sum<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 10</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="数组方法-map"><a aria-hidden="true" tabindex="-1" href="#数组方法-map"><span class="icon icon-link"></span></a>数组方法 .map()</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> members <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"Taylor"</span><span class="token punctuation">,</span> <span class="token string">"Donald"</span><span class="token punctuation">,</span> <span class="token string">"Don"</span><span class="token punctuation">,</span> <span class="token string">"Natasha"</span><span class="token punctuation">,</span> <span class="token string">"Bobby"</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> announcements <span class="token operator">=</span> members<span class="token punctuation">.</span><span class="token method function property-access">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">member</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> member <span class="token operator">+</span> <span class="token string">" joined the contest."</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>announcements<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="数组方法-foreach"><a aria-hidden="true" tabindex="-1" href="#数组方法-foreach"><span class="icon icon-link"></span></a>数组方法 .forEach()</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> numbers <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">28</span><span class="token punctuation">,</span> <span class="token number">77</span><span class="token punctuation">,</span> <span class="token number">45</span><span class="token punctuation">,</span> <span class="token number">99</span><span class="token punctuation">,</span> <span class="token number">27</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">numbers<span class="token punctuation">.</span><span class="token method function property-access">forEach</span><span class="token punctuation">(</span><span class="token parameter">number</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>number<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="数组方法-filter"><a aria-hidden="true" tabindex="-1" href="#数组方法-filter"><span class="icon icon-link"></span></a>数组方法 .filter()</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> randomNumbers <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">11</span><span class="token punctuation">,</span> <span class="token number">42</span><span class="token punctuation">,</span> <span class="token number">14</span><span class="token punctuation">,</span> <span class="token number">39</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> filteredArray <span class="token operator">=</span> randomNumbers<span class="token punctuation">.</span><span class="token method function property-access">filter</span><span class="token punctuation">(</span><span class="token parameter">n</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> n <span class="token operator">></span> <span class="token number">5</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="javascript-对象objects"><a aria-hidden="true" tabindex="-1" href="#javascript-对象objects"><span class="icon icon-link"></span></a>JavaScript 对象(Objects)</h2><div class="wrap-body">
|
||
<!--rehype:body-class=cols-2-->
|
||
</div></div><div class="h2wrap-body cols-2"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="访问属性"><a aria-hidden="true" tabindex="-1" href="#访问属性"><span class="icon icon-link"></span></a>访问属性</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> apple <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'Green'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">price</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">bulk</span><span class="token operator">:</span> <span class="token string">'$3/kg'</span><span class="token punctuation">,</span> <span class="token literal-property property">smallQty</span><span class="token operator">:</span> <span class="token string">'$4/kg'</span> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>apple<span class="token punctuation">.</span><span class="token property-access">color</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// => Green</span>
|
||
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>apple<span class="token punctuation">.</span><span class="token property-access">price</span><span class="token punctuation">.</span><span class="token property-access">bulk</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// => $3/kg</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="命名属性"><a aria-hidden="true" tabindex="-1" href="#命名属性"><span class="icon icon-link"></span></a>命名属性</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token comment">// 无效键名示例</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> trainSchedule <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// 由于单词之间的空格而无效。</span>
|
||
</span><span class="code-line"> platform num<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token comment">// 表达式不能是键。</span>
|
||
</span><span class="code-line"> <span class="token number">40</span> <span class="token operator">-</span> <span class="token number">10</span> <span class="token operator">+</span> <span class="token number">2</span><span class="token operator">:</span> <span class="token number">30</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token comment">// 除非用引号括起来，否则 + 号无效。</span>
|
||
</span><span class="code-line"> <span class="token operator">+</span>compartment<span class="token operator">:</span> <span class="token string">'C'</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="不存在的属性"><a aria-hidden="true" tabindex="-1" href="#不存在的属性"><span class="icon icon-link"></span></a>不存在的属性</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> classElection <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">'January 12'</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>classElection<span class="token punctuation">.</span><span class="token property-access">place</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// undefined</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="可变的"><a aria-hidden="true" tabindex="-1" href="#可变的"><span class="icon icon-link"></span></a>可变的</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> student <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Sheldon'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">score</span><span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">grade</span><span class="token operator">:</span> <span class="token string">'A'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>student<span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token comment">// { name: 'Sheldon', score: 100, grade: 'A' }</span>
|
||
</span><span class="code-line"><span class="token keyword">delete</span> student<span class="token punctuation">.</span><span class="token property-access">score</span>
|
||
</span><span class="code-line">student<span class="token punctuation">.</span><span class="token property-access">grade</span> <span class="token operator">=</span> <span class="token string">'F'</span>
|
||
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>student<span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token comment">// { name: 'Sheldon', grade: 'F' }</span>
|
||
</span><span class="code-line">student <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token comment">// TypeError: TypeError：分配给常量变量。</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="赋值简写语法"><a aria-hidden="true" tabindex="-1" href="#赋值简写语法"><span class="icon icon-link"></span></a>赋值简写语法</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> person <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Tom'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token string">'22'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token punctuation">{</span>name<span class="token punctuation">,</span> age<span class="token punctuation">}</span> <span class="token operator">=</span> person<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 'Tom'</span>
|
||
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>age<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// '22'</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="删除运算符"><a aria-hidden="true" tabindex="-1" href="#删除运算符"><span class="icon icon-link"></span></a>删除运算符</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> person <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">"Matilda"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">hobby</span><span class="token operator">:</span> <span class="token string">"knitting"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">goal</span><span class="token operator">:</span> <span class="token string">"learning JavaScript"</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">delete</span> person<span class="token punctuation">.</span><span class="token property-access">hobby</span><span class="token punctuation">;</span> <span class="token comment">// 或 delete person['hobby'];</span>
|
||
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>person<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">/*
|
||
</span></span><span class="code-line"><span class="token comment">{
|
||
</span></span><span class="code-line"><span class="token comment"> firstName: "Matilda"
|
||
</span></span><span class="code-line"><span class="token comment"> goal: "learning JavaScript"
|
||
</span></span><span class="code-line"><span class="token comment">} */</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="对象作为参数"><a aria-hidden="true" tabindex="-1" href="#对象作为参数"><span class="icon icon-link"></span></a>对象作为参数</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> origNum <span class="token operator">=</span> <span class="token number">8</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> origObj <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'blue'</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function">changeItUp</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">num<span class="token punctuation">,</span> obj</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> num <span class="token operator">=</span> <span class="token number">7</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> obj<span class="token punctuation">.</span><span class="token property-access">color</span> <span class="token operator">=</span> <span class="token string">'red'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token function">changeItUp</span><span class="token punctuation">(</span>origNum<span class="token punctuation">,</span> origObj<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 将输出 8，因为整数是按值传递的。</span>
|
||
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>origNum<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 由于传递了对象，将输出“red”</span>
|
||
</span><span class="code-line"><span class="token comment">// 通过引用，因此是可变的。</span>
|
||
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>origObj<span class="token punctuation">.</span><span class="token property-access">color</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="工厂函数"><a aria-hidden="true" tabindex="-1" href="#工厂函数"><span class="icon icon-link"></span></a>工厂函数</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token comment">// 一个接受 'name'，'age' 和 'breed' 的工厂函数，</span>
|
||
</span><span class="code-line"><span class="token comment">// 参数返回一个自定义的 dog 对象。</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function">dogFactory</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> age<span class="token punctuation">,</span> breed</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">name</span><span class="token operator">:</span> name<span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">age</span><span class="token operator">:</span> age<span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">breed</span><span class="token operator">:</span> breed<span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token function">bark</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'Woof!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="速记对象创建"><a aria-hidden="true" tabindex="-1" href="#速记对象创建"><span class="icon icon-link"></span></a>速记对象创建</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> activity <span class="token operator">=</span> <span class="token string">'Surfing'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> beach <span class="token operator">=</span> <span class="token punctuation">{</span> activity <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>beach<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// { activity: 'Surfing' }</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="this-关键字"><a aria-hidden="true" tabindex="-1" href="#this-关键字"><span class="icon icon-link"></span></a>this 关键字</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> cat <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Pipey'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">8</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token function">whatName</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">name</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>cat<span class="token punctuation">.</span><span class="token method function property-access">whatName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// => Pipey</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="方法-1"><a aria-hidden="true" tabindex="-1" href="#方法-1"><span class="icon icon-link"></span></a>方法</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> engine <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// 方法简写，有一个参数</span>
|
||
</span><span class="code-line"> <span class="token function">start</span><span class="token punctuation">(</span><span class="token parameter">adverb</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">The engine starts up </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>adverb<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">...</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token comment">// 不带参数的匿名箭头函数表达式</span>
|
||
</span><span class="code-line"> <span class="token function-variable function">sputter</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'The engine sputters...'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">engine<span class="token punctuation">.</span><span class="token method function property-access">start</span><span class="token punctuation">(</span><span class="token string">'noisily'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">engine<span class="token punctuation">.</span><span class="token method function property-access">sputter</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="getters-和-setters"><a aria-hidden="true" tabindex="-1" href="#getters-和-setters"><span class="icon icon-link"></span></a>Getters 和 setters</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> myCat <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">_name</span><span class="token operator">:</span> <span class="token string">'Dottie'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token keyword">get</span> <span class="token function">name</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">_name</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token keyword">set</span> <span class="token function">name</span><span class="token punctuation">(</span><span class="token parameter">newName</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">_name</span> <span class="token operator">=</span> newName<span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 引用调用 getter</span>
|
||
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>myCat<span class="token punctuation">.</span><span class="token property-access">name</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 赋值调用 setter</span>
|
||
</span><span class="code-line">myCat<span class="token punctuation">.</span><span class="token property-access">name</span> <span class="token operator">=</span> <span class="token string">'Yankee'</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-exist"><div class="wrap-header h3wrap"><h3 id="proxy"><a aria-hidden="true" tabindex="-1" href="#proxy"><span class="icon icon-link"></span></a>Proxy</h3><div class="wrap-body">
|
||
<p>Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。</p>
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token comment">// 用于拦截对象的读取属性操作。</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> handler <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function-variable function">get</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">obj<span class="token punctuation">,</span> prop</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> prop <span class="token keyword">in</span> obj <span class="token operator">?</span> obj<span class="token punctuation">[</span>prop<span class="token punctuation">]</span> <span class="token operator">:</span> <span class="token number">37</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> p <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Proxy</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> handler<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">p<span class="token punctuation">.</span><span class="token property-access">a</span> <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">p<span class="token punctuation">.</span><span class="token property-access">b</span> <span class="token operator">=</span> <span class="token keyword nil">undefined</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>p<span class="token punctuation">.</span><span class="token property-access">a</span><span class="token punctuation">,</span> p<span class="token punctuation">.</span><span class="token property-access">b</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 1, undefined</span>
|
||
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'c'</span> <span class="token keyword">in</span> p<span class="token punctuation">,</span> p<span class="token punctuation">.</span><span class="token property-access">c</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// false, 37</span>
|
||
</span></code></pre>
|
||
<h4 id="语法"><a aria-hidden="true" tabindex="-1" href="#语法"><span class="icon icon-link"></span></a>语法</h4>
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> p <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Proxy</span><span class="token punctuation">(</span>target<span class="token punctuation">,</span> handler<span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
<ul>
|
||
<li>target 要使用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。</li>
|
||
<li>handler 一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理 p 的行为。</li>
|
||
</ul>
|
||
<h4 id="方法-2"><a aria-hidden="true" tabindex="-1" href="#方法-2"><span class="icon icon-link"></span></a>方法</h4>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>Proxy.revocable()</code></td><td align="left">创建一个可撤销的Proxy对象 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy/revocable">#</a></td></tr></tbody></table>
|
||
<h4 id="handler-对象的方法"><a aria-hidden="true" tabindex="-1" href="#handler-对象的方法"><span class="icon icon-link"></span></a>handler 对象的方法</h4>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table class="style-list-arrow"><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>handler.getPrototypeOf()</code></td><td align="left">Object.getPrototypeOf 方法的捕捉器 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/getPrototypeOf">#</a></td></tr><tr><td align="left"><code>handler.setPrototypeOf()</code></td><td align="left">Object.setPrototypeOf 方法的捕捉器 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/setPrototypeOf">#</a></td></tr><tr><td align="left"><code>handler.isExtensible()</code></td><td align="left">Object.isExtensible 方法的捕捉器 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/isExtensible">#</a></td></tr><tr><td align="left"><code>handler.preventExtensions()</code></td><td align="left">Object.preventExtensions 方法的捕捉器 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/preventExtensions">#</a></td></tr><tr><td align="left"><code>handler.getOwnPropertyDescriptor()</code></td><td align="left">Object.getOwnPropertyDescriptor 方法的捕捉器 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/getOwnPropertyDescriptor">#</a></td></tr><tr><td align="left"><code>handler.defineProperty()</code></td><td align="left">Object.defineProperty 方法的捕捉器 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/defineProperty">#</a></td></tr><tr><td align="left"><code>handler.has()</code></td><td align="left">in 操作符的捕捉器 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/has">#</a></td></tr><tr><td align="left"><code>handler.get()</code></td><td align="left">属性读取操作的捕捉器 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/get">#</a></td></tr><tr><td align="left"><code>handler.set()</code></td><td align="left">属性设置操作的捕捉器 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/set">#</a></td></tr><tr><td align="left"><code>handler.deleteProperty()</code></td><td align="left">delete 操作符的捕捉器 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/deleteProperty">#</a></td></tr><tr><td align="left"><code>handler.ownKeys()</code></td><td align="left">Object.getOwnPropertyNames 方法和 Object.getOwnPropertySymbols 方法的捕捉器 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/ownKeys">#</a></td></tr><tr><td align="left"><code>handler.apply()</code></td><td align="left">函数调用操作的捕捉器 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/apply">#</a></td></tr><tr><td align="left"><code>handler.construct()</code></td><td align="left">new 操作符的捕捉器 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/construct">#</a></td></tr></tbody></table>
|
||
<!--rehype:className=style-list-arrow-->
|
||
</div></div></div><div class="wrap h3body-exist"><div class="wrap-header h3wrap"><h3 id="reflect"><a aria-hidden="true" tabindex="-1" href="#reflect"><span class="icon icon-link"></span></a>Reflect</h3><div class="wrap-body">
|
||
<p>Reflect 是一个内置的对象，它提供拦截 JavaScript 操作的方法。这些方法与proxy handlers (en-US)的方法相同。Reflect不是一个函数对象，因此它是不可构造的。</p>
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token comment">// 检测一个对象是否存在特定属性</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> duck <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Maurice'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'white'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token function-variable function">greeting</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Quaaaack! My name is </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">name</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token known-class-name class-name">Reflect</span><span class="token punctuation">.</span><span class="token method function property-access">has</span><span class="token punctuation">(</span>duck<span class="token punctuation">,</span> <span class="token string">'color'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// true</span>
|
||
</span><span class="code-line"><span class="token known-class-name class-name">Reflect</span><span class="token punctuation">.</span><span class="token method function property-access">has</span><span class="token punctuation">(</span>duck<span class="token punctuation">,</span> <span class="token string">'haircut'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// false</span>
|
||
</span></code></pre>
|
||
<h4 id="静态方法"><a aria-hidden="true" tabindex="-1" href="#静态方法"><span class="icon icon-link"></span></a>静态方法</h4>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table class="style-list-arrow"><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>Reflect.apply(target, thisArgument, argumentsList)</code></td><td align="left">对一个函数进行调用操作，同时可以传入一个数组作为调用参数。和 Function.prototype.apply() 功能类似 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect/apply">#</a></td></tr><tr><td align="left"><code>Reflect.construct(target, argumentsList[, newTarget])</code></td><td align="left">对构造函数进行 new 操作，相当于执行 new target(...args) <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect/construct">#</a></td></tr><tr><td align="left"><code>Reflect.defineProperty(target, propertyKey, attributes)</code></td><td align="left">和 Object.defineProperty() 类似。如果设置成功就会返回 true <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect/defineProperty">#</a></td></tr><tr><td align="left"><code>Reflect.deleteProperty(target, propertyKey)</code></td><td align="left">作为函数的delete操作符，相当于执行 delete target[name] <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect/deleteProperty">#</a></td></tr><tr><td align="left"><code>Reflect.get(target, propertyKey[, receiver])</code></td><td align="left">获取对象身上某个属性的值，类似于 target[name] <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect/get">#</a></td></tr><tr><td align="left"><code>Reflect.getOwnPropertyDescriptor(target, propertyKey)</code></td><td align="left">类似于 Object.getOwnPropertyDescriptor()。如果对象中存在该属性，则返回对应的属性描述符，否则返回 undefined <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect/getOwnPropertyDescriptor">#</a></td></tr><tr><td align="left"><code>Reflect.getPrototypeOf(target)</code></td><td align="left">类似于 Object.getPrototypeOf() <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect/getPrototypeOf">#</a></td></tr><tr><td align="left"><code>Reflect.has(target, propertyKey)</code></td><td align="left">判断一个对象是否存在某个属性，和 in 运算符 的功能完全相同 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect/has">#</a></td></tr><tr><td align="left"><code>Reflect.isExtensible(target)</code></td><td align="left">类似于 Object.isExtensible() <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect/isExtensible">#</a></td></tr><tr><td align="left"><code>Reflect.ownKeys(target)</code></td><td align="left">返回一个包含所有自身属性（不包含继承属性）的数组。(类似于 Object.keys(), 但不会受enumerable 影响) <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect/ownKeys">#</a></td></tr><tr><td align="left"><code>Reflect.preventExtensions(target)</code></td><td align="left">类似于 Object.preventExtensions()。返回一个Boolean <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect/preventExtensions">#</a></td></tr><tr><td align="left"><code>Reflect.set(target, propertyKey, value[, receiver])</code></td><td align="left">将值分配给属性的函数。返回一个Boolean，如果更新成功，则返回true <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect/set">#</a></td></tr><tr><td align="left"><code>Reflect.setPrototypeOf(target, prototype)</code></td><td align="left">设置对象原型的函数。返回一个 Boolean，如果更新成功，则返回 true <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect/setPrototypeOf">#</a></td></tr></tbody></table>
|
||
<!--rehype:className=style-list-arrow-->
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="javascript-this-绑定"><a aria-hidden="true" tabindex="-1" href="#javascript-this-绑定"><span class="icon icon-link"></span></a>JavaScript this 绑定</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-exist"><div class="wrap-header h3wrap"><h3 id="隐式绑定"><a aria-hidden="true" tabindex="-1" href="#隐式绑定"><span class="icon icon-link"></span></a>隐式绑定</h3><div class="wrap-body">
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">function</span> <span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token keyword">let</span> obj1 <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"obj1"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">foo</span><span class="token operator">:</span> foo
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token keyword">let</span> obj2 <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"obj2"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">obj1</span><span class="token operator">:</span> obj1
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">obj2<span class="token punctuation">.</span><span class="token property-access">obj1</span><span class="token punctuation">.</span><span class="token method function property-access">foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// [Object obj1]</span>
|
||
</span></code></pre>
|
||
<h4 id="隐式丢失"><a aria-hidden="true" tabindex="-1" href="#隐式丢失"><span class="icon icon-link"></span></a>隐式丢失</h4>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">let</span> a <span class="token operator">=</span> obj2<span class="token punctuation">.</span><span class="token property-access">obj1</span><span class="token punctuation">.</span><span class="token method function property-access">foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token function">a</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// Window</span>
|
||
</span></code></pre>
|
||
<ul class="style-round">
|
||
<li>指定隐式绑定：必须在调用的对象内部有一个对函数的引用（比如一个属性）</li>
|
||
<li>将以上调用赋值给一个变量，结果最终会是 Window</li>
|
||
<li>在 a 被调用的位置没有进行过任何显示绑定，最终全局对象 window 会调用它（<code>Window.a</code>）</li>
|
||
</ul>
|
||
<!--rehype:className=style-round-->
|
||
</div></div></div><div class="wrap h3body-exist"><div class="wrap-header h3wrap"><h3 id="显示绑定"><a aria-hidden="true" tabindex="-1" href="#显示绑定"><span class="icon icon-link"></span></a>显示绑定</h3><div class="wrap-body">
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">function</span> <span class="token function">getName</span><span class="token punctuation">(</span><span class="token parameter">a1<span class="token punctuation">,</span> a2</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">"此人"</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">name</span><span class="token punctuation">,</span> <span class="token string">"岁数"</span> <span class="token operator">+</span> <span class="token punctuation">(</span>a1 <span class="token operator">+</span> a2<span class="token punctuation">)</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token keyword">let</span> person <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"zhangsan"</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<h4 id="call"><a aria-hidden="true" tabindex="-1" href="#call"><span class="icon icon-link"></span></a>call</h4>
|
||
<p>call 第一个参数接受 this 作用域，剩余参数传递给其调用的函数</p>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line">getName<span class="token punctuation">.</span><span class="token method function property-access">call</span><span class="token punctuation">(</span>person<span class="token punctuation">,</span> <span class="token number">18</span><span class="token punctuation">,</span> <span class="token number">12</span><span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
<h4 id="apply"><a aria-hidden="true" tabindex="-1" href="#apply"><span class="icon icon-link"></span></a>apply</h4>
|
||
<p>apply 第一个参数与 call 相同，第二个参数是其调用函数的参数数组</p>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line">getName<span class="token punctuation">.</span><span class="token method function property-access">apply</span><span class="token punctuation">(</span>person<span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">18</span><span class="token punctuation">,</span> <span class="token number">12</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
<h4 id="bind"><a aria-hidden="true" tabindex="-1" href="#bind"><span class="icon icon-link"></span></a>bind</h4>
|
||
<p>bind 函数会返回一个新函数</p>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line">getName<span class="token punctuation">.</span><span class="token method function property-access">bind</span><span class="token punctuation">(</span>person<span class="token punctuation">,</span><span class="token number">18</span><span class="token punctuation">,</span><span class="token number">12</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token comment">//或者可以这样</span>
|
||
</span><span class="code-line">getName<span class="token punctuation">.</span><span class="token method function property-access">bind</span><span class="token punctuation">(</span>person<span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token number">18</span><span class="token punctuation">,</span> <span class="token number">12</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token comment">//或者这样</span>
|
||
</span><span class="code-line">getName<span class="token punctuation">.</span><span class="token method function property-access">bind</span><span class="token punctuation">(</span>person<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">bind</span><span class="token punctuation">(</span><span class="token keyword null nil">null</span><span class="token punctuation">,</span> <span class="token number">18</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token number">12</span><span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="内置函数中的-this"><a aria-hidden="true" tabindex="-1" href="#内置函数中的-this"><span class="icon icon-link"></span></a>内置函数中的 this</h3><div class="wrap-body">
|
||
<p>数组中的一些方法，类似于 map、forEach 等，可以自己设置绑定 this</p>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"zhangsan"</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> array <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">array<span class="token punctuation">.</span><span class="token method function property-access">map</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">name</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">,</span> obj<span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token comment">// zhangsan x3 </span>
|
||
</span></code></pre>
|
||
<p>其中一些全局对象，如 setTimeout 等，它们和未显示绑定 this 的部分数组方法一样，都会指向全局对象（<code>Window</code>）</p>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span> <span class="token comment">// Window</span>
|
||
</span></code></pre>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="javascript-classes"><a aria-hidden="true" tabindex="-1" href="#javascript-classes"><span class="icon icon-link"></span></a>JavaScript Classes</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="静态方法字段"><a aria-hidden="true" tabindex="-1" href="#静态方法字段"><span class="icon icon-link"></span></a>静态方法/字段</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">class</span> <span class="token class-name">Dog</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">_name</span> <span class="token operator">=</span> name<span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token function">introduce</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'This is '</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">_name</span> <span class="token operator">+</span> <span class="token string">' !'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token comment">// 静态方法</span>
|
||
</span><span class="code-line"> <span class="token keyword">static</span> <span class="token function">bark</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'Woof!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token keyword">static</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'类静态初始化块调用'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> myDog <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Dog</span><span class="token punctuation">(</span><span class="token string">'Buster'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">myDog<span class="token punctuation">.</span><span class="token method function property-access">introduce</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token comment">// 调用静态方法</span>
|
||
</span><span class="code-line"><span class="token maybe-class-name">Dog</span><span class="token punctuation">.</span><span class="token method function property-access">bark</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<h4 id="公有静态字段"><a aria-hidden="true" tabindex="-1" href="#公有静态字段"><span class="icon icon-link"></span></a>公有静态字段</h4>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">class</span> <span class="token class-name">ClassStaticField</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">static</span> staticField <span class="token operator">=</span> <span class="token string">'static field'</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token maybe-class-name">ClassStaticField</span><span class="token punctuation">.</span><span class="token property-access">staticField</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token comment">// 预期输出值："static field" </span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="class"><a aria-hidden="true" tabindex="-1" href="#class"><span class="icon icon-link"></span></a>Class</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">class</span> <span class="token class-name">Song</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">title</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">author</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token function">play</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'Song playing!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> mySong <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Song</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">mySong<span class="token punctuation">.</span><span class="token method function property-access">play</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="extends"><a aria-hidden="true" tabindex="-1" href="#extends"><span class="icon icon-link"></span></a>extends</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token comment">// Parent class</span>
|
||
</span><span class="code-line"><span class="token keyword">class</span> <span class="token class-name">Media</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">info</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">publishDate</span> <span class="token operator">=</span> info<span class="token punctuation">.</span><span class="token property-access">publishDate</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">name</span> <span class="token operator">=</span> info<span class="token punctuation">.</span><span class="token property-access">name</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token comment">// Child class</span>
|
||
</span><span class="code-line"><span class="token keyword">class</span> <span class="token class-name">Song</span> <span class="token keyword">extends</span> <span class="token class-name">Media</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">songData</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">super</span><span class="token punctuation">(</span>songData<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">artist</span> <span class="token operator">=</span> songData<span class="token punctuation">.</span><span class="token property-access">artist</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> mySong <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Song</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">artist</span><span class="token operator">:</span> <span class="token string">'Queen'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Bohemian Rhapsody'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">publishDate</span><span class="token operator">:</span> <span class="token number">1975</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="class-constructor"><a aria-hidden="true" tabindex="-1" href="#class-constructor"><span class="icon icon-link"></span></a>Class Constructor</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">class</span> <span class="token class-name">Song</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">title<span class="token punctuation">,</span> artist</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">title</span> <span class="token operator">=</span> title<span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">artist</span> <span class="token operator">=</span> artist<span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> mySong <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Song</span><span class="token punctuation">(</span><span class="token string">'Bohemian Rhapsody'</span><span class="token punctuation">,</span> <span class="token string">'Queen'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>mySong<span class="token punctuation">.</span><span class="token property-access">title</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="class-methods"><a aria-hidden="true" tabindex="-1" href="#class-methods"><span class="icon icon-link"></span></a>Class Methods</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">class</span> <span class="token class-name">Song</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">play</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'Playing!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token function">stop</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'Stopping!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="javascript-modules"><a aria-hidden="true" tabindex="-1" href="#javascript-modules"><span class="icon icon-link"></span></a>JavaScript Modules</h2><div class="wrap-body">
|
||
<!--rehype:body-class=cols-2-->
|
||
</div></div><div class="h2wrap-body cols-2"><div class="wrap h3body-exist"><div class="wrap-header h3wrap"><h3 id="export--import"><a aria-hidden="true" tabindex="-1" href="#export--import"><span class="icon icon-link"></span></a>Export / Import</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token comment">// myMath.js</span>
|
||
</span><span class="code-line"><span class="token comment">// 默认导出 Default export</span>
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token keyword">function</span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token parameter">x<span class="token punctuation">,</span>y</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> x <span class="token operator">+</span> y
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token comment">// 正常导出 Normal export</span>
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword">function</span> <span class="token function">subtract</span><span class="token punctuation">(</span><span class="token parameter">x<span class="token punctuation">,</span>y</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> x <span class="token operator">-</span> y
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token comment">// 多重导出 Multiple exports</span>
|
||
</span><span class="code-line"><span class="token keyword">function</span> <span class="token function">multiply</span><span class="token punctuation">(</span><span class="token parameter">x<span class="token punctuation">,</span>y</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> x <span class="token operator">*</span> y
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token keyword">function</span> <span class="token function">duplicate</span><span class="token punctuation">(</span><span class="token parameter">x</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> x <span class="token operator">*</span> <span class="token number">2</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token exports"><span class="token punctuation">{</span>
|
||
</span></span><span class="code-line"><span class="token exports"> multiply<span class="token punctuation">,</span> duplicate
|
||
</span></span><span class="code-line"><span class="token exports"><span class="token punctuation">}</span></span>
|
||
</span></code></pre>
|
||
<h4 id="import-加载模块"><a aria-hidden="true" tabindex="-1" href="#import-加载模块"><span class="icon icon-link"></span></a>import 加载模块</h4>
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token comment">// main.js</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports">add<span class="token punctuation">,</span> <span class="token punctuation">{</span> subtract<span class="token punctuation">,</span> multiply<span class="token punctuation">,</span> duplicate <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'./myMath.js'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token number">6</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 8 </span>
|
||
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token function">subtract</span><span class="token punctuation">(</span><span class="token number">6</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// 4</span>
|
||
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token function">multiply</span><span class="token punctuation">(</span><span class="token number">6</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 12</span>
|
||
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token function">duplicate</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// 10</span>
|
||
</span><span class="code-line"><span class="token comment">// index.html</span>
|
||
</span><span class="code-line"><span class="token operator"><</span>script type<span class="token operator">=</span><span class="token string">"module"</span> src<span class="token operator">=</span><span class="token string">"main.js"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-exist"><div class="wrap-header h3wrap"><h3 id="export-module"><a aria-hidden="true" tabindex="-1" href="#export-module"><span class="icon icon-link"></span></a>Export Module</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token comment">// myMath.js</span>
|
||
</span><span class="code-line"><span class="token keyword">function</span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token parameter">x<span class="token punctuation">,</span>y</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> x <span class="token operator">+</span> y
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token keyword">function</span> <span class="token function">subtract</span><span class="token punctuation">(</span><span class="token parameter">x<span class="token punctuation">,</span>y</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> x <span class="token operator">-</span> y
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token keyword">function</span> <span class="token function">multiply</span><span class="token punctuation">(</span><span class="token parameter">x<span class="token punctuation">,</span>y</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> x <span class="token operator">*</span> y
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token keyword">function</span> <span class="token function">duplicate</span><span class="token punctuation">(</span><span class="token parameter">x</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> x <span class="token operator">*</span> <span class="token number">2</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token comment">// node.js 中的多个导出</span>
|
||
</span><span class="code-line">module<span class="token punctuation">.</span><span class="token property-access">exports</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> add<span class="token punctuation">,</span>
|
||
</span><span class="code-line"> subtract<span class="token punctuation">,</span>
|
||
</span><span class="code-line"> multiply<span class="token punctuation">,</span>
|
||
</span><span class="code-line"> duplicate
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<h4 id="require-加载模块"><a aria-hidden="true" tabindex="-1" href="#require-加载模块"><span class="icon icon-link"></span></a>require 加载模块</h4>
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token comment">// main.js</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> myMath <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./myMath.js'</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>myMath<span class="token punctuation">.</span><span class="token method function property-access">add</span><span class="token punctuation">(</span><span class="token number">6</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 8 </span>
|
||
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>myMath<span class="token punctuation">.</span><span class="token method function property-access">subtract</span><span class="token punctuation">(</span><span class="token number">6</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// 4</span>
|
||
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>myMath<span class="token punctuation">.</span><span class="token method function property-access">multiply</span><span class="token punctuation">(</span><span class="token number">6</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 12</span>
|
||
</span><span class="code-line"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>myMath<span class="token punctuation">.</span><span class="token method function property-access">duplicate</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// 10</span>
|
||
</span></code></pre>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="javascript-promises"><a aria-hidden="true" tabindex="-1" href="#javascript-promises"><span class="icon icon-link"></span></a>JavaScript Promises</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="promise"><a aria-hidden="true" tabindex="-1" href="#promise"><span class="icon icon-link"></span></a>Promise</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<p>创建 promises</p>
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>ok<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">resolve</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span> <span class="token keyword control-flow">else</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">reject</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
<h4 id="使用-promises"><a aria-hidden="true" tabindex="-1" href="#使用-promises"><span class="icon icon-link"></span></a>使用 promises</h4>
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line">promise
|
||
</span><span class="code-line"> <span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">result</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> ··· <span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token punctuation">.</span><span class="token keyword control-flow">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">error</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> ··· <span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
<h4 id="promise-方法"><a aria-hidden="true" tabindex="-1" href="#promise-方法"><span class="icon icon-link"></span></a>Promise 方法</h4>
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token known-class-name class-name">Promise</span><span class="token punctuation">.</span><span class="token method function property-access">all</span><span class="token punctuation">(</span>···<span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token known-class-name class-name">Promise</span><span class="token punctuation">.</span><span class="token method function property-access">race</span><span class="token punctuation">(</span>···<span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token known-class-name class-name">Promise</span><span class="token punctuation">.</span><span class="token method function property-access">reject</span><span class="token punctuation">(</span>···<span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token known-class-name class-name">Promise</span><span class="token punctuation">.</span><span class="token method function property-access">resolve</span><span class="token punctuation">(</span>···<span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="执行器函数"><a aria-hidden="true" tabindex="-1" href="#执行器函数"><span class="icon icon-link"></span></a>执行器函数</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function">executorFn</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'Resolved!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> promise <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span>executorFn<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="settimeout"><a aria-hidden="true" tabindex="-1" href="#settimeout"><span class="icon icon-link"></span></a>setTimeout()</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function">loginAlert</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'Login'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token function">setTimeout</span><span class="token punctuation">(</span>loginAlert<span class="token punctuation">,</span> <span class="token number">6000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="promise-状态"><a aria-hidden="true" tabindex="-1" href="#promise-状态"><span class="icon icon-link"></span></a>Promise 状态</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> promise <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> res <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token comment">// 一个异步操作。</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>res<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'Resolved!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">else</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">reject</span><span class="token punctuation">(</span><span class="token known-class-name class-name">Error</span><span class="token punctuation">(</span><span class="token string">'Error'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">promise<span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">(</span><span class="token parameter">err</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">error</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="then-方法"><a aria-hidden="true" tabindex="-1" href="#then-方法"><span class="icon icon-link"></span></a>.then() 方法</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> promise <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'Result'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">200</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line">promise<span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">err</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">error</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="catch-方法"><a aria-hidden="true" tabindex="-1" href="#catch-方法"><span class="icon icon-link"></span></a>.catch() 方法</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> promise <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">reject</span><span class="token punctuation">(</span><span class="token known-class-name class-name">Error</span><span class="token punctuation">(</span><span class="token string">'Promise 无条件拒绝。'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line">promise<span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line">promise<span class="token punctuation">.</span><span class="token keyword control-flow">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">err</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">error</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="promiseall"><a aria-hidden="true" tabindex="-1" href="#promiseall"><span class="icon icon-link"></span></a>Promise.all()</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=col-span-2-->
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> promise1 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">300</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> promise2 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">200</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token known-class-name class-name">Promise</span><span class="token punctuation">.</span><span class="token method function property-access">all</span><span class="token punctuation">(</span><span class="token punctuation">[</span>promise1<span class="token punctuation">,</span> promise2<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>res<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>res<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="链接多个-then"><a aria-hidden="true" tabindex="-1" href="#链接多个-then"><span class="icon icon-link"></span></a>链接多个 .then()</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> promise <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token parameter">resolve</span> <span class="token arrow operator">=></span>
|
||
</span><span class="code-line"> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'dAlan'</span><span class="token punctuation">)</span><span class="token punctuation">,</span><span class="token number">100</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line">promise<span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> res <span class="token operator">===</span> <span class="token string">'Alan'</span>
|
||
</span><span class="code-line"> <span class="token operator">?</span> <span class="token known-class-name class-name">Promise</span><span class="token punctuation">.</span><span class="token method function property-access">resolve</span><span class="token punctuation">(</span><span class="token string">'Hey Alan!'</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token operator">:</span> <span class="token known-class-name class-name">Promise</span><span class="token punctuation">.</span><span class="token method function property-access">reject</span><span class="token punctuation">(</span><span class="token string">'Who are you?'</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">err</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">error</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="避免嵌套的-promise-和-then"><a aria-hidden="true" tabindex="-1" href="#避免嵌套的-promise-和-then"><span class="icon icon-link"></span></a>避免嵌套的 Promise 和 .then()</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=col-span-2-->
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> promise <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'*'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function">twoStars</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">star</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>star <span class="token operator">+</span> star<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function">oneDot</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">star</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>star <span class="token operator">+</span> <span class="token string">'.'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function">print</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>val<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 将它们链接在一起</span>
|
||
</span><span class="code-line">promise<span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span>twoStars<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span>oneDot<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span>print<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="javascript-async-await"><a aria-hidden="true" tabindex="-1" href="#javascript-async-await"><span class="icon icon-link"></span></a>JavaScript Async-Await</h2><div class="wrap-body">
|
||
<!--rehype:body-class=cols-2-->
|
||
</div></div><div class="h2wrap-body cols-2"><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="异步"><a aria-hidden="true" tabindex="-1" href="#异步"><span class="icon icon-link"></span></a>异步</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">function</span> <span class="token function">helloWorld</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token parameter">resolve</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'Hello World!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">2000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token comment">// 异步函数表达式</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function">msg</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> msg <span class="token operator">=</span> <span class="token keyword control-flow">await</span> <span class="token function">helloWorld</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'Message:'</span><span class="token punctuation">,</span> msg<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token comment">// 异步箭头函数</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function">msg1</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> msg <span class="token operator">=</span> <span class="token keyword control-flow">await</span> <span class="token function">helloWorld</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'Message:'</span><span class="token punctuation">,</span> msg<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token function">msg</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Message: Hello World! <-- 2 秒后</span>
|
||
</span><span class="code-line"><span class="token function">msg1</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Message: Hello World! <-- 2 秒后</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="解决-promises"><a aria-hidden="true" tabindex="-1" href="#解决-promises"><span class="icon icon-link"></span></a>解决 Promises</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">let</span> pro1 <span class="token operator">=</span> <span class="token known-class-name class-name">Promise</span><span class="token punctuation">.</span><span class="token method function property-access">resolve</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">let</span> pro2 <span class="token operator">=</span> <span class="token number">44</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">let</span> pro3 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">setTimeout</span><span class="token punctuation">(</span>resolve<span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">,</span> <span class="token string">'foo'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token known-class-name class-name">Promise</span><span class="token punctuation">.</span><span class="token method function property-access">all</span><span class="token punctuation">(</span><span class="token punctuation">[</span>pro1<span class="token punctuation">,</span> pro2<span class="token punctuation">,</span> pro3<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">values</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>values<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// expected => Array [5, 44, "foo"]</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="异步等待-promises"><a aria-hidden="true" tabindex="-1" href="#异步等待-promises"><span class="icon icon-link"></span></a>异步等待 Promises</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">function</span> <span class="token function">helloWorld</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token parameter">resolve</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'Hello World!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">2000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">msg</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> msg <span class="token operator">=</span> <span class="token keyword control-flow">await</span> <span class="token function">helloWorld</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'Message:'</span><span class="token punctuation">,</span> msg<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token function">msg</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Message: Hello World! <-- 2 秒后</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="错误处理"><a aria-hidden="true" tabindex="-1" href="#错误处理"><span class="icon icon-link"></span></a>错误处理</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token comment">// 数据不完整</span>
|
||
</span><span class="code-line"><span class="token keyword">let</span> json <span class="token operator">=</span> <span class="token string">'{ "age": 30 }'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword control-flow">try</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">let</span> user <span class="token operator">=</span> <span class="token known-class-name class-name">JSON</span><span class="token punctuation">.</span><span class="token method function property-access">parse</span><span class="token punctuation">(</span>json<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// <-- 没有错误</span>
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span> user<span class="token punctuation">.</span><span class="token property-access">name</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// no name!</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span> <span class="token keyword control-flow">catch</span> <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">error</span><span class="token punctuation">(</span> <span class="token string">"Invalid JSON data!"</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="异步等待运算符"><a aria-hidden="true" tabindex="-1" href="#异步等待运算符"><span class="icon icon-link"></span></a>异步等待运算符</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">function</span> <span class="token function">helloWorld</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token parameter">resolve</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'Hello World!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">2000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">msg</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> msg <span class="token operator">=</span> <span class="token keyword control-flow">await</span> <span class="token function">helloWorld</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'Message:'</span><span class="token punctuation">,</span> msg<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token function">msg</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Message: Hello World! <-- 2 秒后</span>
|
||
</span></code></pre>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="javascript-请求"><a aria-hidden="true" tabindex="-1" href="#javascript-请求"><span class="icon icon-link"></span></a>JavaScript 请求</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="json"><a aria-hidden="true" tabindex="-1" href="#json"><span class="icon icon-link"></span></a>JSON</h3><div class="wrap-body">
|
||
<pre class="language-js"><code class="language-JS code-highlight"><span class="code-line"><span class="token keyword">const</span> jsonObj <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"Rick"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token string-property property">"id"</span><span class="token operator">:</span> <span class="token string">"11A"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token string-property property">"level"</span><span class="token operator">:</span> <span class="token number">4</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>另见：<a href="./json.html">JSON 备忘单</a></p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="xmlhttprequest"><a aria-hidden="true" tabindex="-1" href="#xmlhttprequest"><span class="icon icon-link"></span></a>XMLHttpRequest</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> xhr <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">XMLHttpRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">xhr<span class="token punctuation">.</span><span class="token method function property-access">open</span><span class="token punctuation">(</span><span class="token string">'GET'</span><span class="token punctuation">,</span> <span class="token string">'mysite.com/getjson'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p><code>XMLHttpRequest</code> 是一个浏览器级别的 API，它使客户端能够通过 JavaScript 编写数据传输脚本，而不是 JavaScript 语言的一部分。</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="get"><a aria-hidden="true" tabindex="-1" href="#get"><span class="icon icon-link"></span></a>GET</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> req <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">XMLHttpRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">req<span class="token punctuation">.</span><span class="token property-access">responseType</span> <span class="token operator">=</span> <span class="token string">'json'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">req<span class="token punctuation">.</span><span class="token method function property-access">open</span><span class="token punctuation">(</span><span class="token string">'GET'</span><span class="token punctuation">,</span> <span class="token string">'/getdata?id=65'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">req<span class="token punctuation">.</span><span class="token method-variable function-variable method function property-access">onload</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>xhr<span class="token punctuation">.</span><span class="token property-access">response</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">req<span class="token punctuation">.</span><span class="token method function property-access">send</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="post"><a aria-hidden="true" tabindex="-1" href="#post"><span class="icon icon-link"></span></a>POST</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">weight</span><span class="token operator">:</span> <span class="token string">'1.5 KG'</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> xhr <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">XMLHttpRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 初始化一个请求。</span>
|
||
</span><span class="code-line">xhr<span class="token punctuation">.</span><span class="token method function property-access">open</span><span class="token punctuation">(</span><span class="token string">'POST'</span><span class="token punctuation">,</span> <span class="token string">'/inventory/add'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 一个用于定义响应类型的枚举值</span>
|
||
</span><span class="code-line">xhr<span class="token punctuation">.</span><span class="token property-access">responseType</span> <span class="token operator">=</span> <span class="token string">'json'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 发送请求以及数据。</span>
|
||
</span><span class="code-line">xhr<span class="token punctuation">.</span><span class="token method function property-access">send</span><span class="token punctuation">(</span><span class="token known-class-name class-name">JSON</span><span class="token punctuation">.</span><span class="token method function property-access">stringify</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 请求成功完成时触发。</span>
|
||
</span><span class="code-line">xhr<span class="token punctuation">.</span><span class="token method-variable function-variable method function property-access">onload</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>xhr<span class="token punctuation">.</span><span class="token property-access">response</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token comment">// 当 request 遭遇错误时触发。</span>
|
||
</span><span class="code-line">xhr<span class="token punctuation">.</span><span class="token method-variable function-variable method function property-access">onerror</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>xhr<span class="token punctuation">.</span><span class="token property-access">response</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="fetch-api"><a aria-hidden="true" tabindex="-1" href="#fetch-api"><span class="icon icon-link"></span></a>fetch api</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token function">fetch</span><span class="token punctuation">(</span>url<span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">method</span><span class="token operator">:</span> <span class="token string">'POST'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">headers</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token string-property property">'Content-type'</span><span class="token operator">:</span> <span class="token string">'application/json'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token string-property property">'apikey'</span><span class="token operator">:</span> apiKey
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">body</span><span class="token operator">:</span> data
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token parameter">response</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>response<span class="token punctuation">.</span><span class="token property-access">ok</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> response<span class="token punctuation">.</span><span class="token method function property-access">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">'Request failed!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token parameter">networkError</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>networkError<span class="token punctuation">.</span><span class="token property-access">message</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="json-格式"><a aria-hidden="true" tabindex="-1" href="#json-格式"><span class="icon icon-link"></span></a>JSON 格式</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">'url-that-returns-JSON'</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token parameter">response</span> <span class="token arrow operator">=></span> response<span class="token punctuation">.</span><span class="token method function property-access">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token parameter">jsonResponse</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>jsonResponse<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="promise-url-参数获取-api"><a aria-hidden="true" tabindex="-1" href="#promise-url-参数获取-api"><span class="icon icon-link"></span></a>promise url 参数获取 API</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">'url'</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token parameter">response</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>response<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token parameter">rejection</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">error</span><span class="token punctuation">(</span>rejection<span class="token punctuation">.</span><span class="token property-access">message</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="fetch-api-函数"><a aria-hidden="true" tabindex="-1" href="#fetch-api-函数"><span class="icon icon-link"></span></a>Fetch API 函数</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">'https://api-xxx.com/endpoint'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">method</span><span class="token operator">:</span> <span class="token string">'POST'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">body</span><span class="token operator">:</span> <span class="token known-class-name class-name">JSON</span><span class="token punctuation">.</span><span class="token method function property-access">stringify</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">"200"</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token parameter">response</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">if</span><span class="token punctuation">(</span>response<span class="token punctuation">.</span><span class="token property-access">ok</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> response<span class="token punctuation">.</span><span class="token method function property-access">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">'Request failed!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token parameter">networkError</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>networkError<span class="token punctuation">.</span><span class="token property-access">message</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token parameter">jsonResponse</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>jsonResponse<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="async-await-语法"><a aria-hidden="true" tabindex="-1" href="#async-await-语法"><span class="icon icon-link"></span></a>async await 语法</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=col-span-2-->
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function">getSuggestions</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> wordQuery <span class="token operator">=</span> inputField<span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> endpoint <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>url<span class="token interpolation-punctuation punctuation">}</span></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>queryParams<span class="token interpolation-punctuation punctuation">}</span></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>wordQuery<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">try</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> response <span class="token operator">=</span> <span class="token keyword control-flow">await</span> <span class="token function">fetch</span><span class="token punctuation">(</span>endpoint<span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token literal-property property">cache</span><span class="token operator">:</span> <span class="token string">'no-cache'</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">if</span><span class="token punctuation">(</span>response<span class="token punctuation">.</span><span class="token property-access">ok</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> jsonResponse <span class="token operator">=</span> <span class="token keyword control-flow">await</span> response<span class="token punctuation">.</span><span class="token method function property-access">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">catch</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div></div></div></div><script src="https://giscus.app/client.js" data-repo="jaywcjlove/reference" data-repo-id="R_kgDOID2-Mw" data-category="Q&A" data-category-id="DIC_kwDOID2-M84CS5wo" data-mapping="pathname" data-strict="0" data-reactions-enabled="1" data-emit-metadata="0" data-input-position="bottom" data-theme="dark" data-lang="zh-CN" crossorigin="anonymous" async></script><div class="giscus"></div></div><footer class="footer-wrap"><footer class="max-container">© 2022 <a href="https://wangchujiang.com/#/app" target="_blank">Kenny Wang</a>.</footer></footer><script src="../data.js?v=1.8.3" defer></script><script src="../js/fuse.min.js?v=1.8.3" defer></script><script src="../js/main.js?v=1.8.3" defer></script><div id="mysearch"><div class="mysearch-box"><div class="mysearch-input"><div><svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 18 18">
|
||
<path fill="currentColor" d="M17.71,16.29 L14.31,12.9 C15.4069846,11.5024547 16.0022094,9.77665502 16,8 C16,3.581722 12.418278,0 8,0 C3.581722,0 0,3.581722 0,8 C0,12.418278 3.581722,16 8,16 C9.77665502,16.0022094 11.5024547,15.4069846 12.9,14.31 L16.29,17.71 C16.4777666,17.8993127 16.7333625,18.0057983 17,18.0057983 C17.2666375,18.0057983 17.5222334,17.8993127 17.71,17.71 C17.8993127,17.5222334 18.0057983,17.2666375 18.0057983,17 C18.0057983,16.7333625 17.8993127,16.4777666 17.71,16.29 Z M2,8 C2,4.6862915 4.6862915,2 8,2 C11.3137085,2 14,4.6862915 14,8 C14,11.3137085 11.3137085,14 8,14 C4.6862915,14 2,11.3137085 2,8 Z"></path>
|
||
</svg><input id="mysearch-input" type="search" placeholder="搜索" autocomplete="off"><div class="mysearch-clear"></div></div><button id="mysearch-close" type="button">搜索</button></div><div class="mysearch-result"><div id="mysearch-menu"></div><div id="mysearch-content"></div></div></div></div></body>
|
||
</html>
|