{"id":2127,"date":"2024-12-19T17:55:26","date_gmt":"2024-12-19T09:55:26","guid":{"rendered":"http:\/\/blog.xtaa.cn\/?p=2127"},"modified":"2024-12-20T11:57:17","modified_gmt":"2024-12-20T03:57:17","slug":"javascript%e5%86%8d%e5%a4%8d%e4%b9%a0","status":"publish","type":"post","link":"http:\/\/blog.xtaa.cn\/index.php\/2024\/12\/19\/javascript%e5%86%8d%e5%a4%8d%e4%b9%a0\/","title":{"rendered":"JavaScript\u518d\u590d\u4e60"},"content":{"rendered":"\n<p><a href=\"https:\/\/liaoxuefeng.com\/books\/javascript\/introduction\/index.html\">https:\/\/liaoxuefeng.com\/books\/javascript\/introduction\/index.html<\/a>\u6458\u81ea<\/p>\n\n\n\n<p>\u4e0b\u9762\u7684\u4e00\u884c\u4ee3\u7801\u5305\u542b\u4e24\u4e2a\u8bed\u53e5\uff0c\u6bcf\u4e2a\u8bed\u53e5\u7528<code>;<\/code>\u8868\u793a\u8bed\u53e5\u7ed3\u675f<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>var x = 1; var y = 2; \/\/ \u5b9a\u4e49\u4e86\u4e24\u4e2a\u53d8\u91cf\uff0c\u4e0d\u5efa\u8bae\u4e00\u884c\u5199\u591a\u4e2a\u8bed\u53e5!\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>\u7528\u7b49\u53f7=\u5bf9\u53d8\u91cf\u8fdb\u884c\u8d4b\u503c\u3002\u53ef\u4ee5\u628a\u4efb\u610f\u6570\u636e\u7c7b\u578b\u8d4b\u503c\u7ed9\u53d8\u91cf\uff0c\u540c\u4e00\u4e2a\u53d8\u91cf\u53ef\u4ee5\u53cd\u590d\u8d4b\u503c\uff0c\u800c\u4e14\u53ef\u4ee5\u662f\u4e0d\u540c\u7c7b\u578b\u7684\u53d8\u91cf\uff0c\u4f46\u662f\u8981\u6ce8\u610f\u53ea\u80fd\u7528var\u7533\u660e\u4e00\u6b21\uff0c\u4f8b\u5982\uff1a\n\nvar a = 123; \/\/ a\u7684\u503c\u662f\u6574\u6570123\na = 'ABC'; \/\/ a\u53d8\u4e3a\u5b57\u7b26\u4e32\n\u8fd9\u79cd\u53d8\u91cf\u672c\u8eab\u7c7b\u578b\u4e0d\u56fa\u5b9a\u7684\u8bed\u8a00\u79f0\u4e4b\u4e3a\u52a8\u6001\u8bed\u8a00<\/code><\/pre>\n\n\n\n<p>\u5982\u679c\u4e00\u4e2a\u53d8\u91cf\u6ca1\u6709\u901a\u8fc7<code>var<\/code>\u7533\u660e\u5c31\u88ab\u4f7f\u7528\uff0c\u90a3\u4e48\u8be5\u53d8\u91cf\u5c31\u81ea\u52a8\u88ab\u7533\u660e\u4e3a\u5168\u5c40\u53d8\u91cf\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>i = 10; \/\/ i\u73b0\u5728\u662f\u5168\u5c40\u53d8\u91cf\n<\/code><\/pre>\n\n\n\n<p>\u5728\u540c\u4e00\u4e2a\u9875\u9762\u7684\u4e0d\u540c\u7684JavaScript\u6587\u4ef6\u4e2d\uff0c\u5982\u679c\u90fd\u4e0d\u7528<code>var<\/code>\u7533\u660e\uff0c\u6070\u597d\u90fd\u4f7f\u7528\u4e86\u53d8\u91cf<code>i<\/code>\uff0c\u5c06\u9020\u6210\u53d8\u91cf<code>i<\/code>\u4e92\u76f8\u5f71\u54cd\uff0c\u4ea7\u751f\u96be\u4ee5\u8c03\u8bd5\u7684\u9519\u8bef\u7ed3\u679c\u3002\u8fd9\u662f\u8981\u907f\u514d\u7684\uff0c\u53ef\u4ee5\u5728JavaScript\u4ee3\u7801\u7684\u7b2c\u4e00\u884c\u5199\u4e0a\uff1a&#8217;use strict&#8217;;\u5f3a\u5236\u8981\u6c42\u901a\u8fc7<code>var<\/code>\u7533\u660e\u53d8\u91cf<\/p>\n\n\n\n<p><code>const<\/code>\u6765\u5b9a\u4e49\u5e38\u91cf\uff0c\u6bd4\u5982const PI = 3.1415926\u8981\u6c42\u6570\u503c\u4e00\u5b9a\u540e\u9762\u4e0d\u80fd\u6539\uff0c\u53ef\u4ee5\u7528\u8fd9\u4e2a\u5b9a\u4e49<\/p>\n\n\n\n<p>\u8bed\u53e5\u5757\u662f\u4e00\u7ec4\u8bed\u53e5\u7684\u96c6\u5408\uff0c\u4f8b\u5982\uff0c\u4e0b\u9762\u7684\u4ee3\u7801\u5148\u505a\u4e86\u4e00\u4e2a\u5224\u65ad\uff0c\u5982\u679c\u5224\u65ad\u6210\u7acb\uff0c\u5c06\u6267\u884c<code>{...}<\/code>\u4e2d\u7684\u6240\u6709\u8bed\u53e5\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>if (2 &gt; 1) {\n    x = 1;\n    y = 2;\n    z = 3;\n}\n<\/code><\/pre>\n\n\n\n<p>\u6ce8\u610f\u82b1\u62ec\u53f7<code>{...}<\/code>\u5185\u7684\u8bed\u53e5\u5177\u6709\u7f29\u8fdb\uff0c\u901a\u5e38\u662f4\u4e2a\u7a7a\u683c\u3002\u7f29\u8fdb\u4e0d\u662fJavaScript\u8bed\u6cd5\u8981\u6c42\u5fc5\u987b\u7684<\/p>\n\n\n\n<p>\u4ee5<code>\/\/<\/code>\u5f00\u5934\u76f4\u5230\u884c\u672b\u7684\u5b57\u7b26\u88ab\u89c6\u4e3a\u884c\u6ce8\u91ca\uff0c    <code>\/*...*\/<\/code>\u628a\u591a\u884c\u5b57\u7b26\u5305\u88f9\u8d77\u6765<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>JavaScript\u4e0d\u533a\u5206\u6574\u6570\u548c\u6d6e\u70b9\u6570\uff0c\u7edf\u4e00\u7528Number\u8868\u793a\uff0c\u4ee5\u4e0b\u90fd\u662f\u5408\u6cd5\u7684Number\u7c7b\u578b\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>123; \/\/ \u6574\u6570123\n0.456; \/\/ \u6d6e\u70b9\u65700.456\n1.2345e3; \/\/ \u79d1\u5b66\u8ba1\u6570\u6cd5\u8868\u793a1.2345x1000\uff0c\u7b49\u540c\u4e8e1234.5\n-99; \/\/ \u8d1f\u6570\nNaN; \/\/ NaN\u8868\u793aNot a Number\uff0c\u5f53\u65e0\u6cd5\u8ba1\u7b97\u7ed3\u679c\u65f6\u7528NaN\u8868\u793a\nInfinity; \/\/ Infinity\u8868\u793a\u65e0\u9650\u5927\uff0c\u5f53\u6570\u503c\u8d85\u8fc7\u4e86JavaScript\u7684Number\u6240\u80fd\u8868\u793a\u7684\u6700\u5927\u503c\u65f6\uff0c\u5c31\u8868\u793a\u4e3aInfinity\n<\/code><\/pre>\n\n\n\n<p>\u8ba1\u7b97\u673a\u7531\u4e8e\u4f7f\u7528\u4e8c\u8fdb\u5236\uff0c\u6240\u4ee5\uff0c\u6709\u65f6\u5019\u7528\u5341\u516d\u8fdb\u5236\u8868\u793a\u6574\u6570\u6bd4\u8f83\u65b9\u4fbf\uff0c\u5341\u516d\u8fdb\u5236\u75280x\u524d\u7f00\u548c0-9\uff0ca-f\u8868\u793a\uff0c\u4f8b\u5982\uff1a<code>0xff00<\/code>\uff0c<code>0xa5b4c3d2<\/code>\uff0c\u7b49\u7b49\uff0c\u5b83\u4eec\u548c\u5341\u8fdb\u5236\u8868\u793a\u7684\u6570\u503c\u5b8c\u5168\u4e00\u6837\u3002<\/p>\n\n\n\n<p>Number\u53ef\u4ee5\u76f4\u63a5\u505a\u56db\u5219\u8fd0\u7b97\uff0c\u89c4\u5219\u548c\u6570\u5b66\u4e00\u81f4\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>1 + 2; \/\/ 3\n(1 + 2) * 5 \/ 2; \/\/ 7.5\n2 \/ 0; \/\/ Infinity\n0 \/ 0; \/\/ NaN\n10 % 3; \/\/ 1\n10.5 % 3; \/\/ 1.5\n<\/code><\/pre>\n\n\n\n<p>\u6ce8\u610f<code>%<\/code>\u662f\u6c42\u4f59\u8fd0\u7b97\u3002<\/p>\n\n\n\n<p>\u8981\u6ce8\u610f\uff0cJavaScript\u7684Number\u4e0d\u533a\u5206\u6574\u6570\u548c\u6d6e\u70b9\u6570\uff0c\u4e5f\u5c31\u662f\u8bf4\uff0c<code>12.00 === 12<\/code>\u3002\uff08\u5728\u5927\u591a\u6570\u5176\u4ed6\u8bed\u8a00\u4e2d\uff0c\u6574\u6570\u548c\u6d6e\u70b9\u6570\u4e0d\u80fd\u76f4\u63a5\u6bd4\u8f83\uff09\u5e76\u4e14\uff0cJavaScript\u7684\u6574\u6570\u6700\u5927\u8303\u56f4\u4e0d\u662f\u00b12<sup>63<\/sup>\uff0c\u800c\u662f\u00b12<sup>53<\/sup>\uff0c\u56e0\u6b64\uff0c\u8d85\u8fc72<sup>53<\/sup>\u7684\u6574\u6570\u5c31\u53ef\u80fd\u65e0\u6cd5\u7cbe\u786e\u8868\u793a\uff1a\uff0c\u5982\u679c\u4e00\u4e32\u5b57\u7b26\u5f88\u957f\u4e14\u4e0d\u662f\u8ba1\u7b97\u5219\u5c3d\u91cf\u8981\u628a\u4ed6\u53d8\u6210\u5b57\u7b26\u4e32\uff0c\u5426\u5219\u4f1a\u628a\u540e\u9762\u622a\u53bb\u5f71\u54cd\u7ed3\u679c<\/p>\n\n\n\n<p>\/\/ \u8ba1\u7b97\u5706\u9762\u79ef:<br>var r = 123.456;<br>var s = 3.14 * r * r;<br>console.log(s); \/\/ 47857.94555904001<\/p>\n\n\n\n<p>\u5b57\u7b26\u4e32\u662f\u4ee5\u5355\u5f15\u53f7&#8217;\u6216\u53cc\u5f15\u53f7&#8221;\u62ec\u8d77\u6765\u7684\u4efb\u610f\u6587\u672c\uff0c\u6bd4\u5982<code>'abc'<\/code>\uff0c<code>\"xyz\"<\/code>\u7b49\u7b49\u3002\u8bf7\u6ce8\u610f\uff0c<code>''<\/code>\u6216<code>\"\"<\/code>\u672c\u8eab\u53ea\u662f\u4e00\u79cd\u8868\u793a\u65b9\u5f0f\uff0c\u4e0d\u662f\u5b57\u7b26\u4e32\u7684\u4e00\u90e8\u5206\uff0c\u56e0\u6b64\uff0c\u5b57\u7b26\u4e32<code>'abc'<\/code>\u53ea\u6709<code>a<\/code>\uff0c<code>b<\/code>\uff0c<code>c<\/code>\u8fd93\u4e2a\u5b57\u7b26<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><code>&amp;&amp;<\/code>\u8fd0\u7b97\u662f\u4e0e\u8fd0\u7b97\uff0c\u53ea\u6709\u6240\u6709\u90fd\u4e3a<code>true<\/code>\uff0c<code>&amp;&amp;<\/code>\u8fd0\u7b97\u7ed3\u679c\u624d\u662f<code>true<\/code>\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>true &amp;&amp; true; \/\/ \u8fd9\u4e2a&amp;&amp;\u8bed\u53e5\u8ba1\u7b97\u7ed3\u679c\u4e3atrue\ntrue &amp;&amp; false; \/\/ \u8fd9\u4e2a&amp;&amp;\u8bed\u53e5\u8ba1\u7b97\u7ed3\u679c\u4e3afalse\nfalse &amp;&amp; true &amp;&amp; false; \/\/ \u8fd9\u4e2a&amp;&amp;\u8bed\u53e5\u8ba1\u7b97\u7ed3\u679c\u4e3afalse\n<\/code><\/pre>\n\n\n\n<p><code>||<\/code>\u8fd0\u7b97\u662f\u6216\u8fd0\u7b97\uff0c\u53ea\u8981\u5176\u4e2d\u6709\u4e00\u4e2a\u4e3a<code>true<\/code>\uff0c<code>||<\/code>\u8fd0\u7b97\u7ed3\u679c\u5c31\u662f<code>true<\/code>\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>false || false; \/\/ \u8fd9\u4e2a||\u8bed\u53e5\u8ba1\u7b97\u7ed3\u679c\u4e3afalse\ntrue || false; \/\/ \u8fd9\u4e2a||\u8bed\u53e5\u8ba1\u7b97\u7ed3\u679c\u4e3atrue\nfalse || true || false; \/\/ \u8fd9\u4e2a||\u8bed\u53e5\u8ba1\u7b97\u7ed3\u679c\u4e3atrue\n<\/code><\/pre>\n\n\n\n<p><code>!<\/code>\u8fd0\u7b97\u662f\u975e\u8fd0\u7b97\uff0c\u5b83\u662f\u4e00\u4e2a\u5355\u76ee\u8fd0\u7b97\u7b26\uff0c\u628a<code>true<\/code>\u53d8\u6210<code>false<\/code>\uff0c<code>false<\/code>\u53d8\u6210<code>true<\/code>\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>! true; \/\/ \u7ed3\u679c\u4e3afalse\n\n\u5b9e\u9645\u4e0a\uff0cJavaScript\u5141\u8bb8\u5bf9\u4efb\u610f\u6570\u636e\u7c7b\u578b\u505a\u6bd4\u8f83\uff1a\n\nfalse == 0; \/\/ true\nfalse === 0; \/\/ false\n\u8981\u7279\u522b\u6ce8\u610f\u76f8\u7b49\u8fd0\u7b97\u7b26==\u3002JavaScript\u5728\u8bbe\u8ba1\u65f6\uff0c\u6709\u4e24\u79cd\u6bd4\u8f83\u8fd0\u7b97\u7b26\uff1a\n\n\u7b2c\u4e00\u79cd\u662f==\u6bd4\u8f83\uff0c\u5b83\u4f1a\u81ea\u52a8\u8f6c\u6362\u6570\u636e\u7c7b\u578b\u518d\u6bd4\u8f83\uff0c\u5f88\u591a\u65f6\u5019\uff0c\u4f1a\u5f97\u5230\u975e\u5e38\u8be1\u5f02\u7684\u7ed3\u679c\uff1b\n\n\u7b2c\u4e8c\u79cd\u662f===\u6bd4\u8f83\uff0c\u5b83\u4e0d\u4f1a\u81ea\u52a8\u8f6c\u6362\u6570\u636e\u7c7b\u578b\uff0c\u5982\u679c\u6570\u636e\u7c7b\u578b\u4e0d\u4e00\u81f4\uff0c\u8fd4\u56defalse\uff0c\u5982\u679c\u4e00\u81f4\uff0c\u518d\u6bd4\u8f83\u3002\n\n\u7531\u4e8eJavaScript\u8fd9\u4e2a\u8bbe\u8ba1\u7f3a\u9677\uff0c\u4e0d\u8981\u4f7f\u7528==\u6bd4\u8f83\uff0c\u59cb\u7ec8\u575a\u6301\u4f7f\u7528===\u6bd4\u8f83\u3002\n\n\u53e6\u4e00\u4e2a\u4f8b\u5916\u662fNaN\u8fd9\u4e2a\u7279\u6b8a\u7684Number\u4e0e\u6240\u6709\u5176\u4ed6\u503c\u90fd\u4e0d\u76f8\u7b49\uff0c\u5305\u62ec\u5b83\u81ea\u5df1\uff1a\n\nNaN === NaN; \/\/ false\n\u552f\u4e00\u80fd\u5224\u65adNaN\u7684\u65b9\u6cd5\u662f\u901a\u8fc7isNaN()\u51fd\u6570\uff1a\n\nisNaN(NaN); \/\/ true\n\u6700\u540e\u8981\u6ce8\u610f\u6d6e\u70b9\u6570\u7684\u76f8\u7b49\u6bd4\u8f83\uff1a\n\n1 \/ 3 === (1 - 2 \/ 3); \/\/ false\n\u8fd9\u4e0d\u662fJavaScript\u7684\u8bbe\u8ba1\u7f3a\u9677\u3002\u6d6e\u70b9\u6570\u5728\u8fd0\u7b97\u8fc7\u7a0b\u4e2d\u4f1a\u4ea7\u751f\u8bef\u5dee\uff0c\u56e0\u4e3a\u8ba1\u7b97\u673a\u65e0\u6cd5\u7cbe\u786e\u8868\u793a\u65e0\u9650\u5faa\u73af\u5c0f\u6570\u3002\u8981\u6bd4\u8f83\u4e24\u4e2a\u6d6e\u70b9\u6570\u662f\u5426\u76f8\u7b49\uff0c\u53ea\u80fd\u8ba1\u7b97\u5b83\u4eec\u4e4b\u5dee\u7684\u7edd\u5bf9\u503c\uff0c\u770b\u662f\u5426\u5c0f\u4e8e\u67d0\u4e2a\u9608\u503c\uff1a\n\nMath.abs(1 \/ 3 - (1 - 2 \/ 3)) &lt; 0.0000001; \/\/ true\n\nnull\u548cundefined\nnull\u8868\u793a\u4e00\u4e2a\u201c\u7a7a\u201d\u7684\u503c\uff0c\u5b83\u548c0\u4ee5\u53ca\u7a7a\u5b57\u7b26\u4e32''\u4e0d\u540c\uff0c0\u662f\u4e00\u4e2a\u6570\u503c\uff0c''\u8868\u793a\u957f\u5ea6\u4e3a0\u7684\u5b57\u7b26\u4e32\uff0c\u800cnull\u8868\u793a\u201c\u7a7a\u201d\u3002\n\n\u5728\u5176\u4ed6\u8bed\u8a00\u4e2d\uff0c\u4e5f\u6709\u7c7b\u4f3cJavaScript\u7684null\u7684\u8868\u793a\uff0c\u4f8b\u5982Java\u4e5f\u7528null\uff0cSwift\u7528nil\uff0cPython\u7528None\u8868\u793a\u3002\u4f46\u662f\uff0c\u5728JavaScript\u4e2d\uff0c\u8fd8\u6709\u4e00\u4e2a\u548cnull\u7c7b\u4f3c\u7684undefined\uff0c\u5b83\u8868\u793a\u201c\u672a\u5b9a\u4e49\u201d\u3002\n\nJavaScript\u7684\u8bbe\u8ba1\u8005\u5e0c\u671b\u7528null\u8868\u793a\u4e00\u4e2a\u7a7a\u7684\u503c\uff0c\u800cundefined\u8868\u793a\u503c\u672a\u5b9a\u4e49\u3002\u4e8b\u5b9e\u8bc1\u660e\uff0c\u8fd9\u5e76\u6ca1\u6709\u4ec0\u4e48\u5375\u7528\uff0c\u533a\u5206\u4e24\u8005\u7684\u610f\u4e49\u4e0d\u5927\u3002\u5927\u591a\u6570\u60c5\u51b5\u4e0b\uff0c\u6211\u4eec\u90fd\u5e94\u8be5\u7528null\u3002undefined\u4ec5\u4ec5\u5728\u5224\u65ad\u51fd\u6570\u53c2\u6570\u662f\u5426\u4f20\u9012\u7684\u60c5\u51b5\u4e0b\u6709\u7528\n\n\u6570\u7ec4\u662f\u4e00\u7ec4\u6309\u987a\u5e8f\u6392\u5217\u7684\u96c6\u5408\uff0c\u96c6\u5408\u7684\u6bcf\u4e2a\u503c\u79f0\u4e3a\u5143\u7d20\u3002JavaScript\u7684\u6570\u7ec4\u53ef\u4ee5\u5305\u62ec\u4efb\u610f\u6570\u636e\u7c7b\u578b\u3002\u4f8b\u5982\uff1a\n\n&#91;1, 2, 3.14, 'Hello', null, true];\n\u4e0a\u8ff0\u6570\u7ec4\u5305\u542b6\u4e2a\u5143\u7d20\u3002\u6570\u7ec4\u7528&#91;]\u8868\u793a\uff0c\u5143\u7d20\u4e4b\u95f4\u7528,\u5206\u9694\u3002\n\n\u53e6\u4e00\u79cd\u521b\u5efa\u6570\u7ec4\u7684\u65b9\u6cd5\u662f\u901a\u8fc7Array()\u51fd\u6570\u5b9e\u73b0\uff1a\n\nnew Array(1, 2, 3); \/\/ \u521b\u5efa\u4e86\u6570\u7ec4&#91;1, 2, 3]\n\n\nJavaScript\u7684\u5bf9\u8c61\u662f\u4e00\u7ec4\u7531\u952e-\u503c\u7ec4\u6210\u7684\u65e0\u5e8f\u96c6\u5408\uff0c\u4f8b\u5982\uff1a\n\nvar person = {\n    name: 'Bob',\n    age: 20,\n    tags: &#91;'js', 'web', 'mobile'],\n    city: 'Beijing',\n    hasCar: true,\n    zipcode: null\n};\nJavaScript\u5bf9\u8c61\u7684\u952e\u90fd\u662f\u5b57\u7b26\u4e32\u7c7b\u578b\uff0c\u503c\u53ef\u4ee5\u662f\u4efb\u610f\u6570\u636e\u7c7b\u578b\u3002\n\n\u8981\u83b7\u53d6\u4e00\u4e2a\u5bf9\u8c61\u7684\u5c5e\u6027\uff0c\u6211\u4eec\u7528\u5bf9\u8c61\u53d8\u91cf.\u5c5e\u6027\u540d\u7684\u65b9\u5f0f\uff1a\n\nperson.name; \/\/ 'Bob'\nperson.zipcode; \/\/ null<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p>JavaScript\u7684\u5b57\u7b26\u4e32\u5c31\u662f\u7528<code>''<\/code>\u6216<code>\"\"<\/code>\u62ec\u8d77\u6765\u7684\u5b57\u7b26\u8868\u793a\u3002<\/p>\n\n\n\n<p>\u5982\u679c<code>'<\/code>\u672c\u8eab\u4e5f\u662f\u4e00\u4e2a\u5b57\u7b26\uff0c\u90a3\u5c31\u53ef\u4ee5\u7528<code>\"\"<\/code>\u62ec\u8d77\u6765\uff0c\u6bd4\u5982<code>\"I'm OK\"<\/code><\/p>\n\n\n\n<p>\u5982\u679c\u5b57\u7b26\u4e32\u5185\u90e8\u65e2\u5305\u542b<code>'<\/code>\u53c8\u5305\u542b<code>\"<\/code>\u600e\u4e48\u529e\uff1f\u53ef\u4ee5\u7528\u8f6c\u4e49\u5b57\u7b26<code>\\<\/code>\u6765\u6807\u8bc6\uff0c\u6bd4\u5982\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>'I\\'m \\\"OK\\\"!'; \/\/ I'm \"OK\"!\n<\/code><\/pre>\n\n\n\n<p>\u8868\u793a\u7684\u5b57\u7b26\u4e32\u5185\u5bb9\u662f\uff1a<code>I'm \"OK\"!<\/code><\/p>\n\n\n\n<p>\u8f6c\u4e49\u5b57\u7b26<code>\\<\/code>\u53ef\u4ee5\u8f6c\u4e49\u5f88\u591a\u5b57\u7b26\uff0c\u6bd4\u5982<code>\\n<\/code>\u8868\u793a\u6362\u884c\uff0c<code>\\t<\/code>\u8868\u793a\u5236\u8868\u7b26\uff0c\u5b57\u7b26<code>\\<\/code>\u672c\u8eab\u4e5f\u8981\u8f6c\u4e49\uff0c\u6240\u4ee5<code>\\\\<\/code>\u8868\u793a\u7684\u5b57\u7b26\u5c31\u662f<code>\\<\/code>\u3002<\/p>\n\n\n\n<p>ASCII\u5b57\u7b26\u53ef\u4ee5\u4ee5<code>\\x##<\/code>\u5f62\u5f0f\u7684\u5341\u516d\u8fdb\u5236\u8868\u793a\uff0c\u4f8b\u5982\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>'\\x41'; \/\/ \u5b8c\u5168\u7b49\u540c\u4e8e 'A'\n<\/code><\/pre>\n\n\n\n<p>\u8fd8\u53ef\u4ee5\u7528<code>\\u####<\/code>\u8868\u793a\u4e00\u4e2aUnicode\u5b57\u7b26\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>'\\u4e2d\\u6587'; \/\/ \u5b8c\u5168\u7b49\u540c\u4e8e '\u4e2d\u6587'\n\n\u591a\u884c\u5b57\u7b26\u4e32\u7528\\n\u5199\u8d77\u6765\u6bd4\u8f83\u8d39\u4e8b\uff0c\u7528\u53cd\u5f15\u53f7`...`\u8868\u793a\n<\/code><\/pre>\n\n\n\n<p>\u591a\u4e2a\u5b57\u7b26\u4e32\u8fde\u63a5\u8d77\u6765\uff0c\u53ef\u4ee5\u7528<code>+<\/code>\u53f7\u8fde\u63a5<\/p>\n\n\n\n<p>\u5982\u679c\u6709\u5f88\u591a\u53d8\u91cf\u9700\u8981\u8fde\u63a5\uff0c\u7528<code>+<\/code>\u53f7\u5c31\u6bd4\u8f83\u9ebb\u70e6\u3002ES6\u65b0\u589e\u4e86\u4e00\u79cd\u6a21\u677f\u5b57\u7b26\u4e32\uff0c\u5b83\u4f1a\u81ea\u52a8\u66ff\u6362\u5b57\u7b26\u4e32\u4e2d\u7684\u53d8\u91cf\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let name = '\u5c0f\u660e';\nlet age = 20;\nlet message = `\u4f60\u597d, ${name}, \u4f60\u4eca\u5e74${age}\u5c81\u4e86!`;\nalert(message);\n\n\u83b7\u53d6\u5b57\u7b26\u4e32\u957f\u5ea6\uff1a\n\nlet s = 'Hello, world!';\ns.length; \/\/ 13\n\u8981\u83b7\u53d6\u5b57\u7b26\u4e32\u67d0\u4e2a\u6307\u5b9a\u4f4d\u7f6e\u7684\u5b57\u7b26\uff0c\u4f7f\u7528\u7c7b\u4f3cArray\u7684\u4e0b\u6807\u64cd\u4f5c\uff0c\u7d22\u5f15\u53f7\u4ece0\u5f00\u59cb\uff1a\n\nlet s = 'Hello, world!';\n\ns&#91;0]; \/\/ 'H'\ns&#91;6]; \/\/ ' '\ns&#91;7]; \/\/ 'w'\ns&#91;12]; \/\/ '!'\ns&#91;13]; \/\/ undefined \u8d85\u51fa\u8303\u56f4\u7684\u7d22\u5f15\u4e0d\u4f1a\u62a5\u9519\uff0c\u4f46\u4e00\u5f8b\u8fd4\u56deundefined\n\u9700\u8981\u7279\u522b\u6ce8\u610f\u7684\u662f\uff0c\u5b57\u7b26\u4e32\u662f\u4e0d\u53ef\u53d8\u7684\uff0c\u5982\u679c\u5bf9\u5b57\u7b26\u4e32\u7684\u67d0\u4e2a\u7d22\u5f15\u8d4b\u503c\uff0c\u4e0d\u4f1a\u6709\u4efb\u4f55\u9519\u8bef\uff0c\u4f46\u662f\uff0c\u4e5f\u6ca1\u6709\u4efb\u4f55\u6548\u679c\uff1a\n\nlet s = 'Test';\ns&#91;0] = 'X';\nconsole.log(s); \/\/ s\u4ecd\u7136\u4e3a'Test'\nJavaScript\u4e3a\u5b57\u7b26\u4e32\u63d0\u4f9b\u4e86\u4e00\u4e9b\u5e38\u7528\u65b9\u6cd5\uff0c\u6ce8\u610f\uff0c\u8c03\u7528\u8fd9\u4e9b\u65b9\u6cd5\u672c\u8eab\u4e0d\u4f1a\u6539\u53d8\u539f\u6709\u5b57\u7b26\u4e32\u7684\u5185\u5bb9\uff0c\u800c\u662f\u8fd4\u56de\u4e00\u4e2a\u65b0\u5b57\u7b26\u4e32\uff1a\n\ntoUpperCase\ntoUpperCase()\u628a\u4e00\u4e2a\u5b57\u7b26\u4e32\u5168\u90e8\u53d8\u4e3a\u5927\u5199\uff1a\n\nlet s = 'Hello';\ns.toUpperCase(); \/\/ \u8fd4\u56de'HELLO'\ntoLowerCase\ntoLowerCase()\u628a\u4e00\u4e2a\u5b57\u7b26\u4e32\u5168\u90e8\u53d8\u4e3a\u5c0f\u5199\uff1a\n\nlet s = 'Hello';\nlet lower = s.toLowerCase(); \/\/ \u8fd4\u56de'hello'\u5e76\u8d4b\u503c\u7ed9\u53d8\u91cflower\nlower; \/\/ 'hello'\nindexOf\nindexOf()\u4f1a\u641c\u7d22\u6307\u5b9a\u5b57\u7b26\u4e32\u51fa\u73b0\u7684\u4f4d\u7f6e\uff1a\n\nlet s = 'hello, world';\ns.indexOf('world'); \/\/ \u8fd4\u56de7\ns.indexOf('World'); \/\/ \u6ca1\u6709\u627e\u5230\u6307\u5b9a\u7684\u5b50\u4e32\uff0c\u8fd4\u56de-1\nsubstring\nsubstring()\u8fd4\u56de\u6307\u5b9a\u7d22\u5f15\u533a\u95f4\u7684\u5b50\u4e32\uff1a\n\nlet s = 'hello, world'\ns.substring(0, 5); \/\/ \u4ece\u7d22\u5f150\u5f00\u59cb\u52305\uff08\u4e0d\u5305\u62ec5\uff09\uff0c\u8fd4\u56de'hello'\ns.substring(7); \/\/ \u4ece\u7d22\u5f157\u5f00\u59cb\u5230\u7ed3\u675f\uff0c\u8fd4\u56de'world'<\/code><\/pre>\n\n\n\n<p><code>Array<\/code>\u53ef\u4ee5\u5305\u542b\u4efb\u610f\u6570\u636e\u7c7b\u578b\uff0c\u5e76\u901a\u8fc7\u7d22\u5f15\u6765\u8bbf\u95ee\u6bcf\u4e2a\u5143\u7d20<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">indexOf<\/h3>\n\n\n\n<p>\u4e0eString\u7c7b\u4f3c\uff0c<code>Array<\/code>\u4e5f\u53ef\u4ee5\u901a\u8fc7<code>indexOf()<\/code>\u6765\u641c\u7d22\u4e00\u4e2a\u6307\u5b9a\u7684\u5143\u7d20\u7684\u4f4d\u7f6e\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let arr = &#91;10, 20, '30', 'xyz'];\narr.indexOf(10); \/\/ \u5143\u7d2010\u7684\u7d22\u5f15\u4e3a0\narr.indexOf(20); \/\/ \u5143\u7d2020\u7684\u7d22\u5f15\u4e3a1\narr.indexOf(30); \/\/ \u5143\u7d2030\u6ca1\u6709\u627e\u5230\uff0c\u8fd4\u56de-1\narr.indexOf('30'); \/\/ \u5143\u7d20'30'\u7684\u7d22\u5f15\u4e3a2\n<\/code><\/pre>\n\n\n\n<p>\u6ce8\u610f\u4e86\uff0c\u6570\u5b57<code>30<\/code>\u548c\u5b57\u7b26\u4e32<code>'30'<\/code>\u662f\u4e0d\u540c\u7684\u5143\u7d20\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">slice<\/h3>\n\n\n\n<p><code>slice()<\/code>\u5c31\u662f\u5bf9\u5e94String\u7684<code>substring()<\/code>\u7248\u672c\uff0c\u5b83\u622a\u53d6<code>Array<\/code>\u7684\u90e8\u5206\u5143\u7d20\uff0c\u7136\u540e\u8fd4\u56de\u4e00\u4e2a\u65b0\u7684<code>Array<\/code>\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let arr = &#91;'A', 'B', 'C', 'D', 'E', 'F', 'G'];\narr.slice(0, 3); \/\/ \u4ece\u7d22\u5f150\u5f00\u59cb\uff0c\u5230\u7d22\u5f153\u7ed3\u675f\uff0c\u4f46\u4e0d\u5305\u62ec\u7d22\u5f153: &#91;'A', 'B', 'C']\narr.slice(3); \/\/ \u4ece\u7d22\u5f153\u5f00\u59cb\u5230\u7ed3\u675f: &#91;'D', 'E', 'F', 'G']\n<\/code><\/pre>\n\n\n\n<p>\u6ce8\u610f\u5230<code>slice()<\/code>\u7684\u8d77\u6b62\u53c2\u6570\u5305\u62ec\u5f00\u59cb\u7d22\u5f15\uff0c\u4e0d\u5305\u62ec\u7ed3\u675f\u7d22\u5f15\u3002<\/p>\n\n\n\n<p>\u5982\u679c\u4e0d\u7ed9<code>slice()<\/code>\u4f20\u9012\u4efb\u4f55\u53c2\u6570\uff0c\u5b83\u5c31\u4f1a\u4ece\u5934\u5230\u5c3e\u622a\u53d6\u6240\u6709\u5143\u7d20\u3002\u5229\u7528\u8fd9\u4e00\u70b9\uff0c\u6211\u4eec\u53ef\u4ee5\u5f88\u5bb9\u6613\u5730\u590d\u5236\u4e00\u4e2a<code>Array<\/code>\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let arr = &#91;'A', 'B', 'C', 'D', 'E', 'F', 'G'];\nlet aCopy = arr.slice();\naCopy; \/\/ &#91;'A', 'B', 'C', 'D', 'E', 'F', 'G']\naCopy === arr; \/\/ false\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">push\u548cpop<\/h3>\n\n\n\n<p><code>push()<\/code>\u5411<code>Array<\/code>\u7684\u672b\u5c3e\u6dfb\u52a0\u82e5\u5e72\u5143\u7d20\uff0c<code>pop()<\/code>\u5219\u628a<code>Array<\/code>\u7684\u6700\u540e\u4e00\u4e2a\u5143\u7d20\u5220\u9664\u6389\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let arr = &#91;1, 2];\narr.push('A', 'B'); \/\/ \u8fd4\u56deArray\u65b0\u7684\u957f\u5ea6: 4\narr; \/\/ &#91;1, 2, 'A', 'B']\narr.pop(); \/\/ pop()\u8fd4\u56de'B'\narr; \/\/ &#91;1, 2, 'A']\narr.pop(); arr.pop(); arr.pop(); \/\/ \u8fde\u7eedpop 3\u6b21\narr; \/\/ &#91;]\narr.pop(); \/\/ \u7a7a\u6570\u7ec4\u7ee7\u7eedpop\u4e0d\u4f1a\u62a5\u9519\uff0c\u800c\u662f\u8fd4\u56deundefined\narr; \/\/ &#91;]\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">unshift\u548cshift<\/h3>\n\n\n\n<p>\u5982\u679c\u8981\u5f80<code>Array<\/code>\u7684\u5934\u90e8\u6dfb\u52a0\u82e5\u5e72\u5143\u7d20\uff0c\u4f7f\u7528<code>unshift()<\/code>\u65b9\u6cd5\uff0c<code>shift()<\/code>\u65b9\u6cd5\u5219\u628a<code>Array<\/code>\u7684\u7b2c\u4e00\u4e2a\u5143\u7d20\u5220\u6389\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let arr = &#91;1, 2];\narr.unshift('A', 'B'); \/\/ \u8fd4\u56deArray\u65b0\u7684\u957f\u5ea6: 4\narr; \/\/ &#91;'A', 'B', 1, 2]\narr.shift(); \/\/ 'A'\narr; \/\/ &#91;'B', 1, 2]\narr.shift(); arr.shift(); arr.shift(); \/\/ \u8fde\u7eedshift 3\u6b21\narr; \/\/ &#91;]\narr.shift(); \/\/ \u7a7a\u6570\u7ec4\u7ee7\u7eedshift\u4e0d\u4f1a\u62a5\u9519\uff0c\u800c\u662f\u8fd4\u56deundefined\narr; \/\/ &#91;]\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">sort<\/h3>\n\n\n\n<p><code>sort()<\/code>\u53ef\u4ee5\u5bf9\u5f53\u524d<code>Array<\/code>\u8fdb\u884c\u6392\u5e8f\uff0c\u5b83\u4f1a\u76f4\u63a5\u4fee\u6539\u5f53\u524d<code>Array<\/code>\u7684\u5143\u7d20\u4f4d\u7f6e\uff0c\u76f4\u63a5\u8c03\u7528\u65f6\uff0c\u6309\u7167\u9ed8\u8ba4\u987a\u5e8f\u6392\u5e8f\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let arr = &#91;'B', 'C', 'A'];\narr.sort();\narr; \/\/ &#91;'A', 'B', 'C']\n<\/code><\/pre>\n\n\n\n<p>\u80fd\u5426\u6309\u7167\u6211\u4eec\u81ea\u5df1\u6307\u5b9a\u7684\u987a\u5e8f\u6392\u5e8f\u5462\uff1f\u5b8c\u5168\u53ef\u4ee5\uff0c\u6211\u4eec\u5c06\u5728\u540e\u9762\u7684\u51fd\u6570\u4e2d\u8bb2\u5230\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">reverse<\/h3>\n\n\n\n<p><code>reverse()<\/code>\u628a\u6574\u4e2a<code>Array<\/code>\u7684\u5143\u7d20\u7ed9\u8c03\u4e2a\u4e2a\uff0c\u4e5f\u5c31\u662f\u53cd\u8f6c\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let arr = &#91;'one', 'two', 'three'];\narr.reverse(); \narr; \/\/ &#91;'three', 'two', 'one']\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">splice<\/h3>\n\n\n\n<p><code>splice()<\/code>\u65b9\u6cd5\u662f\u4fee\u6539<code>Array<\/code>\u7684\u201c\u4e07\u80fd\u65b9\u6cd5\u201d\uff0c\u5b83\u53ef\u4ee5\u4ece\u6307\u5b9a\u7684\u7d22\u5f15\u5f00\u59cb\u5220\u9664\u82e5\u5e72\u5143\u7d20\uff0c\u7136\u540e\u518d\u4ece\u8be5\u4f4d\u7f6e\u6dfb\u52a0\u82e5\u5e72\u5143\u7d20\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let arr = &#91;'Microsoft', 'Apple', 'Yahoo', 'AOL', 'Excite', 'Oracle'];\n\/\/ \u4ece\u7d22\u5f152\u5f00\u59cb\u5220\u96643\u4e2a\u5143\u7d20,\u7136\u540e\u518d\u6dfb\u52a0\u4e24\u4e2a\u5143\u7d20:\narr.splice(2, 3, 'Google', 'Facebook'); \/\/ \u8fd4\u56de\u5220\u9664\u7684\u5143\u7d20 &#91;'Yahoo', 'AOL', 'Excite']\narr; \/\/ &#91;'Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']\n\/\/ \u53ea\u5220\u9664,\u4e0d\u6dfb\u52a0:\narr.splice(2, 2); \/\/ &#91;'Google', 'Facebook']\narr; \/\/ &#91;'Microsoft', 'Apple', 'Oracle']\n\/\/ \u53ea\u6dfb\u52a0,\u4e0d\u5220\u9664:\narr.splice(2, 0, 'Google', 'Facebook'); \/\/ \u8fd4\u56de&#91;],\u56e0\u4e3a\u6ca1\u6709\u5220\u9664\u4efb\u4f55\u5143\u7d20\narr; \/\/ &#91;'Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">concat<\/h3>\n\n\n\n<p><code>concat()<\/code>\u65b9\u6cd5\u628a\u5f53\u524d\u7684<code>Array<\/code>\u548c\u53e6\u4e00\u4e2a<code>Array<\/code>\u8fde\u63a5\u8d77\u6765\uff0c\u5e76\u8fd4\u56de\u4e00\u4e2a\u65b0\u7684<code>Array<\/code>\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let arr = &#91;'A', 'B', 'C'];\nlet added = arr.concat(&#91;1, 2, 3]);\nadded; \/\/ &#91;'A', 'B', 'C', 1, 2, 3]\narr; \/\/ &#91;'A', 'B', 'C']\n<\/code><\/pre>\n\n\n\n<p><em>\u8bf7\u6ce8\u610f<\/em>\uff0c<code>concat()<\/code>\u65b9\u6cd5\u5e76\u6ca1\u6709\u4fee\u6539\u5f53\u524d<code>Array<\/code>\uff0c\u800c\u662f\u8fd4\u56de\u4e86\u4e00\u4e2a\u65b0\u7684<code>Array<\/code>\u3002<\/p>\n\n\n\n<p>\u5b9e\u9645\u4e0a\uff0c<code>concat()<\/code>\u65b9\u6cd5\u53ef\u4ee5\u63a5\u6536\u4efb\u610f\u4e2a\u5143\u7d20\u548c<code>Array<\/code>\uff0c\u5e76\u4e14\u81ea\u52a8\u628a<code>Array<\/code>\u62c6\u5f00\uff0c\u7136\u540e\u5168\u90e8\u6dfb\u52a0\u5230\u65b0\u7684<code>Array<\/code>\u91cc\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let arr = &#91;'A', 'B', 'C'];\narr.concat(1, 2, &#91;3, 4]); \/\/ &#91;'A', 'B', 'C', 1, 2, 3, 4]\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">join<\/h3>\n\n\n\n<p><code>join()<\/code>\u65b9\u6cd5\u662f\u4e00\u4e2a\u975e\u5e38\u5b9e\u7528\u7684\u65b9\u6cd5\uff0c\u5b83\u628a\u5f53\u524d<code>Array<\/code>\u7684\u6bcf\u4e2a\u5143\u7d20\u90fd\u7528\u6307\u5b9a\u7684\u5b57\u7b26\u4e32\u8fde\u63a5\u8d77\u6765\uff0c\u7136\u540e\u8fd4\u56de\u8fde\u63a5\u540e\u7684\u5b57\u7b26\u4e32\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let arr = &#91;'A', 'B', 'C', 1, 2, 3];\narr.join('-'); \/\/ 'A-B-C-1-2-3'<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p>JavaScript\u7684\u5bf9\u8c61\u6709\u4e2a\u5c0f\u95ee\u9898\uff0c\u5c31\u662f\u952e\u5fc5\u987b\u662f\u5b57\u7b26\u4e32\u3002\u4f46\u5b9e\u9645\u4e0aNumber\u6216\u8005\u5176\u4ed6\u6570\u636e\u7c7b\u578b\u4f5c\u4e3a\u952e\u4e5f\u662f\u975e\u5e38\u5408\u7406\u7684\u3002<\/p>\n\n\n\n<p>\u4e3a\u4e86\u89e3\u51b3\u8fd9\u4e2a\u95ee\u9898\uff0c\u6700\u65b0\u7684ES6\u89c4\u8303\u5f15\u5165\u4e86\u65b0\u7684\u6570\u636e\u7c7b\u578b<code>Map<\/code><\/p>\n\n\n\n<p><code>Map<\/code>\u662f\u4e00\u7ec4\u952e\u503c\u5bf9\u7684\u7ed3\u6784\uff0c\u5177\u6709\u6781\u5feb\u7684\u67e5\u627e\u901f\u5ea6\u3002<\/p>\n\n\n\n<p>\u4e3e\u4e2a\u4f8b\u5b50\uff0c\u5047\u8bbe\u8981\u6839\u636e\u540c\u5b66\u7684\u540d\u5b57\u67e5\u627e\u5bf9\u5e94\u7684\u6210\u7ee9\uff0c\u5982\u679c\u7528<code>Array<\/code>\u5b9e\u73b0\uff0c\u9700\u8981\u4e24\u4e2a<code>Array<\/code>\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let names = &#91;'Michael', 'Bob', 'Tracy'];\nlet scores = &#91;95, 75, 85];\n<\/code><\/pre>\n\n\n\n<p>\u7ed9\u5b9a\u4e00\u4e2a\u540d\u5b57\uff0c\u8981\u67e5\u627e\u5bf9\u5e94\u7684\u6210\u7ee9\uff0c\u5c31\u5148\u8981\u5728names\u4e2d\u627e\u5230\u5bf9\u5e94\u7684\u4f4d\u7f6e\uff0c\u518d\u4ecescores\u53d6\u51fa\u5bf9\u5e94\u7684\u6210\u7ee9\uff0cArray\u8d8a\u957f\uff0c\u8017\u65f6\u8d8a\u957f\u3002<\/p>\n\n\n\n<p>\u5982\u679c\u7528Map\u5b9e\u73b0\uff0c\u53ea\u9700\u8981\u4e00\u4e2a\u201c\u540d\u5b57\u201d-\u201c\u6210\u7ee9\u201d\u7684\u5bf9\u7167\u8868\uff0c\u76f4\u63a5\u6839\u636e\u540d\u5b57\u67e5\u627e\u6210\u7ee9\uff0c\u65e0\u8bba\u8fd9\u4e2a\u8868\u6709\u591a\u5927\uff0c\u67e5\u627e\u901f\u5ea6\u90fd\u4e0d\u4f1a\u53d8\u6162\u3002\u7528JavaScript\u5199\u4e00\u4e2aMap\u5982\u4e0b\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let m = new Map(&#91;&#91;'Michael', 95], &#91;'Bob', 75], &#91;'Tracy', 85]]);\nm.get('Michael'); \/\/ 95\n<\/code><\/pre>\n\n\n\n<p>\u521d\u59cb\u5316<code>Map<\/code>\u9700\u8981\u4e00\u4e2a\u4e8c\u7ef4\u6570\u7ec4\uff0c\u6216\u8005\u76f4\u63a5\u521d\u59cb\u5316\u4e00\u4e2a\u7a7a<code>Map<\/code>\u3002<code>Map<\/code>\u5177\u6709\u4ee5\u4e0b\u65b9\u6cd5\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let m = new Map(); \/\/ \u7a7aMap\nm.set('Adam', 67); \/\/ \u6dfb\u52a0\u65b0\u7684key-value\nm.set('Bob', 59);\nm.has('Adam'); \/\/ \u662f\u5426\u5b58\u5728key 'Adam': true\nm.get('Adam'); \/\/ 67\nm.delete('Adam'); \/\/ \u5220\u9664key 'Adam'\nm.get('Adam'); \/\/ undefined\n<\/code><\/pre>\n\n\n\n<p><code>Set<\/code>\u548c<code>Map<\/code>\u7c7b\u4f3c\uff0c\u4e5f\u662f\u4e00\u7ec4key\u7684\u96c6\u5408\uff0c\u4f46\u4e0d\u5b58\u50a8value\u3002\u7531\u4e8ekey\u4e0d\u80fd\u91cd\u590d\uff0c\u6240\u4ee5\uff0c\u5728<code>Set<\/code>\u4e2d\uff0c\u6ca1\u6709\u91cd\u590d\u7684key\u3002<\/p>\n\n\n\n<p>\u8981\u521b\u5efa\u4e00\u4e2a<code>Set<\/code>\uff0c\u9700\u8981\u63d0\u4f9b\u4e00\u4e2a<code>Array<\/code>\u4f5c\u4e3a\u8f93\u5165\uff0c\u6216\u8005\u76f4\u63a5\u521b\u5efa\u4e00\u4e2a\u7a7a<code>Set<\/code>\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let s1 = new Set(); \/\/ \u7a7aSet\nlet s2 = new Set(&#91;1, 2, 3]); \/\/ \u542b1, 2, 3\n<\/code><\/pre>\n\n\n\n<p>\u91cd\u590d\u5143\u7d20\u5728<code>Set<\/code>\u4e2d\u81ea\u52a8\u88ab\u8fc7\u6ee4\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let s = new Set(&#91;1, 2, 3, 3, '3']);\ns; \/\/ Set {1, 2, 3, \"3\"}\n<\/code><\/pre>\n\n\n\n<p>\u6ce8\u610f\u6570\u5b57<code>3<\/code>\u548c\u5b57\u7b26\u4e32<code>'3'<\/code>\u662f\u4e0d\u540c\u7684\u5143\u7d20\u3002<\/p>\n\n\n\n<p>\u901a\u8fc7<code>add(key)<\/code>\u65b9\u6cd5\u53ef\u4ee5\u6dfb\u52a0\u5143\u7d20\u5230<code>Set<\/code>\u4e2d\uff0c\u53ef\u4ee5\u91cd\u590d\u6dfb\u52a0\uff0c\u4f46\u4e0d\u4f1a\u6709\u6548\u679c\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>s.add(4);\ns; \/\/ Set {1, 2, 3, 4}\ns.add(4);\ns; \/\/ \u4ecd\u7136\u662f Set {1, 2, 3, 4}\n<\/code><\/pre>\n\n\n\n<p>\u901a\u8fc7<code>delete(key)<\/code>\u65b9\u6cd5\u53ef\u4ee5\u5220\u9664\u5143\u7d20<\/p>\n\n\n\n<p>\u904d\u5386<code>Array<\/code>\u53ef\u4ee5\u91c7\u7528\u4e0b\u6807\u5faa\u73af\uff0c\u904d\u5386<code>Map<\/code>\u548c<code>Set<\/code>\u5c31\u65e0\u6cd5\u4f7f\u7528\u4e0b\u6807\u3002\u4e3a\u4e86\u7edf\u4e00\u96c6\u5408\u7c7b\u578b\uff0cES6\u6807\u51c6\u5f15\u5165\u4e86\u65b0\u7684<code>iterable<\/code>\u7c7b\u578b\uff0c<code>Array<\/code>\u3001<code>Map<\/code>\u548c<code>Set<\/code>\u90fd\u5c5e\u4e8e<code>iterable<\/code>\u7c7b\u578b\u3002<\/p>\n\n\n\n<p>\u5177\u6709<code>iterable<\/code>\u7c7b\u578b\u7684\u96c6\u5408\u53ef\u4ee5\u901a\u8fc7\u65b0\u7684<code>for ... of<\/code>\u5faa\u73af\u6765\u904d\u5386<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let a = &#91;'A', 'B', 'C'];\nlet s = new Set(&#91;'A', 'B', 'C']);\nlet m = new Map(&#91;&#91;1, 'x'], &#91;2, 'y'], &#91;3, 'z']]);\nfor (let x of a) { \/\/ \u904d\u5386Array\n    console.log(x);\n}\nfor (let x of s) { \/\/ \u904d\u5386Set\n    console.log(x);\n}\nfor (let x of m) { \/\/ \u904d\u5386Map\n    console.log(x&#91;0] + '=' + x&#91;1]);\n}<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p>\u6211\u4eec\u5efa\u8bae\u7528for &#8230; of\uff0c\u800c\u4e0d\u662ffor &#8230; in  \u66f4\u597d\u7684\u65b9\u5f0f\u662f\u76f4\u63a5\u4f7f\u7528<code>iterable<\/code>\u5185\u7f6e\u7684<code>forEach<\/code>\u65b9\u6cd5\uff0c\u5b83\u63a5\u6536\u4e00\u4e2a\u51fd\u6570\uff0c\u6bcf\u6b21\u8fed\u4ee3\u5c31\u81ea\u52a8\u56de\u8c03\u8be5\u51fd\u6570\u3002\u4ee5<code>Array<\/code>\u4e3a\u4f8b\uff1a<\/p>\n\n\n\n<p>let a = [&#8216;A&#8217;, &#8216;B&#8217;, &#8216;C&#8217;];<br>a.forEach(function (element, index, array) {<br>\/\/ element: \u6307\u5411\u5f53\u524d\u5143\u7d20\u7684\u503c<br>\/\/ index: \u6307\u5411\u5f53\u524d\u7d22\u5f15<br>\/\/ array: \u6307\u5411Array\u5bf9\u8c61\u672c\u8eab<br>console.log(<code>${element}, index = ${index}<\/code>);<br>});<\/p>\n\n\n\n<p>\u5173\u952e\u5b57<code>arguments<\/code>\uff0c\u5b83\u53ea\u5728\u51fd\u6570\u5185\u90e8\u8d77\u4f5c\u7528\uff0c\u5e76\u4e14\u6c38\u8fdc\u6307\u5411\u5f53\u524d\u51fd\u6570\u7684\u8c03\u7528\u8005\u4f20\u5165\u7684\u6240\u6709\u53c2\u6570<\/p>\n\n\n\n<p>\u5b9e\u9645\u4e0a<code>arguments<\/code>\u6700\u5e38\u7528\u4e8e\u5224\u65ad\u4f20\u5165\u53c2\u6570\u7684\u4e2a\u6570\u3002\u4f60\u53ef\u80fd\u4f1a\u770b\u5230\u8fd9\u6837\u7684\u5199\u6cd5\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ foo(a&#91;, b], c)\n\/\/ \u63a5\u65362~3\u4e2a\u53c2\u6570\uff0cb\u662f\u53ef\u9009\u53c2\u6570\uff0c\u5982\u679c\u53ea\u4f202\u4e2a\u53c2\u6570\uff0cb\u9ed8\u8ba4\u4e3anull\uff1a\nfunction foo(a, b, c) {\n    if (arguments.length === 2) {\n        \/\/ \u5b9e\u9645\u62ff\u5230\u7684\u53c2\u6570\u662fa\u548cb\uff0cc\u4e3aundefined\n        c = b; \/\/ \u628ab\u8d4b\u7ed9c\n        b = null; \/\/ b\u53d8\u4e3a\u9ed8\u8ba4\u503c\n    }\n    \/\/ ...\n}<\/code><\/pre>\n\n\n\n<p>\u7531\u4e8eJavaScript\u51fd\u6570\u5141\u8bb8\u63a5\u6536\u4efb\u610f\u4e2a\u53c2\u6570\uff0c\u4e8e\u662f\u6211\u4eec\u5c31\u4e0d\u5f97\u4e0d\u7528<code>arguments<\/code>\u6765\u83b7\u53d6\u6240\u6709\u53c2\u6570\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function foo(a, b) {\n    let i, rest = &#91;];\n    if (arguments.length &gt; 2) {\n        for (i = 2; i&lt;arguments.length; i++) {\n            rest.push(arguments&#91;i]);\n        }\n    }\n    console.log('a = ' + a);\n    console.log('b = ' + b);\n    console.log(rest);\n}\n<\/code><\/pre>\n\n\n\n<p>\u4e3a\u4e86\u83b7\u53d6\u9664\u4e86\u5df2\u5b9a\u4e49\u53c2\u6570<code>a<\/code>\u3001<code>b<\/code>\u4e4b\u5916\u7684\u53c2\u6570\uff0c\u6211\u4eec\u4e0d\u5f97\u4e0d\u7528<code>arguments<\/code>\uff0c\u5e76\u4e14\u5faa\u73af\u8981\u4ece\u7d22\u5f15<code>2<\/code>\u5f00\u59cb\u4ee5\u4fbf\u6392\u9664\u524d\u4e24\u4e2a\u53c2\u6570\uff0c\u8fd9\u79cd\u5199\u6cd5\u5f88\u522b\u626d\uff0c\u53ea\u662f\u4e3a\u4e86\u83b7\u5f97\u989d\u5916\u7684<code>rest<\/code>\u53c2\u6570\uff0c\u6709\u6ca1\u6709\u66f4\u597d\u7684\u65b9\u6cd5\uff1f<\/p>\n\n\n\n<p>ES6\u6807\u51c6\u5f15\u5165\u4e86rest\u53c2\u6570\uff0c\u4e0a\u9762\u7684\u51fd\u6570\u53ef\u4ee5\u6539\u5199\u4e3a\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function foo(a, b, ...rest) {\n    console.log('a = ' + a);\n    console.log('b = ' + b);\n    console.log(rest);\n}\n\nfoo(1, 2, 3, 4, 5);\n\/\/ \u7ed3\u679c:\n\/\/ a = 1\n\/\/ b = 2\n\/\/ Array &#91; 3, 4, 5 ]\n\nfoo(1);\n\/\/ \u7ed3\u679c:\n\/\/ a = 1\n\/\/ b = undefined\n\/\/ Array &#91;]\n<\/code><\/pre>\n\n\n\n<p>rest\u53c2\u6570\u53ea\u80fd\u5199\u5728\u6700\u540e\uff0c\u524d\u9762\u7528<code>...<\/code>\u6807\u8bc6\uff0c\u4ece\u8fd0\u884c\u7ed3\u679c\u53ef\u77e5\uff0c\u4f20\u5165\u7684\u53c2\u6570\u5148\u7ed1\u5b9a<code>a<\/code>\u3001<code>b<\/code>\uff0c\u591a\u4f59\u7684\u53c2\u6570\u4ee5\u6570\u7ec4\u5f62\u5f0f\u4ea4\u7ed9\u53d8\u91cf<code>rest<\/code>\uff0c\u6240\u4ee5\uff0c\u4e0d\u518d\u9700\u8981<code>arguments<\/code>\u6211\u4eec\u5c31\u83b7\u53d6\u4e86\u5168\u90e8\u53c2\u6570\u3002<\/p>\n\n\n\n<p>\u5982\u679c\u4f20\u5165\u7684\u53c2\u6570\u8fde\u6b63\u5e38\u5b9a\u4e49\u7684\u53c2\u6570\u90fd\u6ca1\u586b\u6ee1\uff0c\u4e5f\u4e0d\u8981\u7d27\uff0crest\u53c2\u6570\u4f1a\u63a5\u6536\u4e00\u4e2a\u7a7a\u6570\u7ec4\uff08\u6ce8\u610f\u4e0d\u662f<code>undefined<\/code>\uff09<\/p>\n\n\n\n<p>JavaScript\u9ed8\u8ba4\u6709\u4e00\u4e2a\u5168\u5c40\u5bf9\u8c61<code>window<\/code>\uff0c\u5168\u5c40\u4f5c\u7528\u57df\u7684\u53d8\u91cf\u5b9e\u9645\u4e0a\u88ab\u7ed1\u5b9a\u5230<code>window<\/code>\u7684\u4e00\u4e2a\u5c5e\u6027,\u4ee5\u53d8\u91cf\u65b9\u5f0f<code>var foo = function () {}<\/code>\u5b9a\u4e49\u7684\u51fd\u6570\u5b9e\u9645\u4e0a\u4e5f\u662f\u4e00\u4e2a\u5168\u5c40\u53d8\u91cf\uff0c\u56e0\u6b64\uff0c\u9876\u5c42\u51fd\u6570\u7684\u5b9a\u4e49\u4e5f\u88ab\u89c6\u4e3a\u4e00\u4e2a\u5168\u5c40\u53d8\u91cf\uff0c\u5e76\u7ed1\u5b9a\u5230<code>window<\/code>\u5bf9\u8c61\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function foo() {\n    alert('foo');\n}\n\nfoo(); \/\/ \u76f4\u63a5\u8c03\u7528foo()\nwindow.foo(); \/\/ \u901a\u8fc7window.foo()\u8c03\u7528\n<\/code><\/pre>\n\n\n\n<p>\u8fdb\u4e00\u6b65\u5927\u80c6\u5730\u731c\u6d4b\uff0c\u6211\u4eec\u6bcf\u6b21\u76f4\u63a5\u8c03\u7528\u7684<code>alert()<\/code>\u51fd\u6570\u5176\u5b9e\u4e5f\u662f<code>window<\/code>\u7684\u4e00\u4e2a\u53d8\u91cf<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>\u9ad8\u9636\u51fd\u6570<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">map<\/h3>\n\n\n\n<p>\u4e3e\u4f8b\u8bf4\u660e\uff0c\u6bd4\u5982\u6211\u4eec\u6709\u4e00\u4e2a\u51fd\u6570f(x)=x<sup>2<\/sup>\uff0c\u8981\u628a\u8fd9\u4e2a\u51fd\u6570\u4f5c\u7528\u5728\u4e00\u4e2a\u6570\u7ec4<code>[1, 2, 3, 4, 5, 6, 7, 8, 9]<\/code>\u4e0a\uff0c\u5c31\u53ef\u4ee5\u7528<code>map<\/code>\u5b9e\u73b0\u5982\u4e0b\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>            f(x) = x * x\n\n                  \u2502\n                  \u2502\n  \u250c\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u253c\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2510\n  \u2502   \u2502   \u2502   \u2502   \u2502   \u2502   \u2502   \u2502   \u2502\n  \u25bc   \u25bc   \u25bc   \u25bc   \u25bc   \u25bc   \u25bc   \u25bc   \u25bc\n\n&#91; 1   2   3   4   5   6   7   8   9 ]\n\n  \u2502   \u2502   \u2502   \u2502   \u2502   \u2502   \u2502   \u2502   \u2502\n  \u2502   \u2502   \u2502   \u2502   \u2502   \u2502   \u2502   \u2502   \u2502\n  \u25bc   \u25bc   \u25bc   \u25bc   \u25bc   \u25bc   \u25bc   \u25bc   \u25bc\n\n&#91; 1   4   9  16  25  36  49  64  81 ]\n<\/code><\/pre>\n\n\n\n<p>\u7531\u4e8e<code>map()<\/code>\u65b9\u6cd5\u5b9a\u4e49\u5728JavaScript\u7684<code>Array<\/code>\u4e2d\uff0c\u6211\u4eec\u8c03\u7528<code>Array<\/code>\u7684<code>map()<\/code>\u65b9\u6cd5\uff0c\u4f20\u5165\u6211\u4eec\u81ea\u5df1\u7684\u51fd\u6570\uff0c\u5c31\u5f97\u5230\u4e86\u4e00\u4e2a\u65b0\u7684<code>Array<\/code>\u4f5c\u4e3a\u7ed3\u679c\uff1a<\/p>\n\n\n\n<p>function pow(x) {<br>return x * x;<br>}<\/p>\n\n\n\n<p>let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];<br>let results = arr.map(pow); \/\/\u7ed3\u679c [1, 4, 9, 16, 25, 36, 49, 64, 81]<\/p>\n\n\n\n<p>\u8981\u533a\u522b\u4e8e\u4e0a\u9875\u7684Map,\u4e0a\u9762\u7684Map\u662f\u4e00\u4e2a\u6570\u636e\u7ed3\u6784\uff0c\u4e00\u4e9b\u952e\u503c\u5bf9\uff0c\u8fd9\u91cc\u662f\u4e00\u4e2a\u9ad8\u9636\u51fd\u6570<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">reduce<\/h3>\n\n\n\n<p>\u518d\u770breduce\u7684\u7528\u6cd5\u3002Array\u7684<code>reduce()<\/code>\u628a\u4e00\u4e2a\u51fd\u6570\u4f5c\u7528\u5728\u8fd9\u4e2a<code>Array<\/code>\u7684<code>[x1, x2, x3...]<\/code>\u4e0a\uff0c\u8fd9\u4e2a\u51fd\u6570\u5fc5\u987b\u63a5\u6536\u4e24\u4e2a\u53c2\u6570\uff0c<code>reduce()<\/code>\u628a\u7ed3\u679c\u7ee7\u7eed\u548c\u5e8f\u5217\u7684\u4e0b\u4e00\u4e2a\u5143\u7d20\u505a\u7d2f\u79ef\u8ba1\u7b97\uff0c\u5176\u6548\u679c\u5c31\u662f\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#91;x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)\n<\/code><\/pre>\n\n\n\n<p>\u6bd4\u65b9\u8bf4\u5bf9\u4e00\u4e2a<code>Array<\/code>\u6c42\u548c\uff0c\u5c31\u53ef\u4ee5\u7528<code>reduce<\/code>\u5b9e\u73b0\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let arr = &#91;1, 3, 5, 7, 9];\narr.reduce(function (x, y) {\n    return x + y;\n}); \/\/ 25<\/code><\/pre>\n\n\n\n<p>filter\u4e5f\u662f\u4e00\u4e2a\u5e38\u7528\u7684\u64cd\u4f5c\uff0c\u5b83\u7528\u4e8e\u628a<code>Array<\/code>\u7684\u67d0\u4e9b\u5143\u7d20\u8fc7\u6ee4\u6389\uff0c\u7136\u540e\u8fd4\u56de\u5269\u4e0b\u7684\u5143\u7d20\u3002<\/p>\n\n\n\n<p><code>filter()<\/code>\u628a\u4f20\u5165\u7684\u51fd\u6570\u4f9d\u6b21\u4f5c\u7528\u4e8e\u6bcf\u4e2a\u5143\u7d20\uff0c\u7136\u540e\u6839\u636e\u8fd4\u56de\u503c\u662f<code>true<\/code>\u8fd8\u662f<code>false<\/code>\u51b3\u5b9a\u4fdd\u7559\u8fd8\u662f\u4e22\u5f03\u8be5\u5143\u7d20\u3002<\/p>\n\n\n\n<p>\u4f8b\u5982\uff0c\u5728\u4e00\u4e2a<code>Array<\/code>\u4e2d\uff0c\u5220\u6389\u5076\u6570\uff0c\u53ea\u4fdd\u7559\u5947\u6570\uff0c\u53ef\u4ee5\u8fd9\u4e48\u5199\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let arr = &#91;1, 2, 4, 5, 6, 9, 10, 15];\nlet r = arr.filter(function (x) {\n    return x % 2 !== 0;\n});\nr; \/\/ &#91;1, 5, 9, 15]<\/code><\/pre>\n\n\n\n<p><code>sort()<\/code>\u65b9\u6cd5\u662f\u7528\u4e8e\u6392\u5e8f\u7684\uff0c \u8981\u6ce8\u610f\u7684\u662f\u9ed8\u8ba4\u628a\u6240\u6709\u5143\u7d20\u5148\u8f6c\u6362\u4e3aString\u518d\u6392\u5e8f\uff0c\u6240\u4ee5<code>'10'<\/code>\u6392\u5728\u4e86<code>'2'<\/code>\u7684\u524d\u9762\uff0c\u56e0\u4e3a\u5b57\u7b26<code>'1'<\/code>\u6bd4\u5b57\u7b26<code>'2'<\/code>\u7684ASCII\u7801\u5c0f\uff0c\u5e78\u8fd0\u7684\u662f\uff0c<code>sort()<\/code>\u65b9\u6cd5\u4e5f\u662f\u4e00\u4e2a\u9ad8\u9636\u51fd\u6570\uff0c\u5b83\u8fd8\u53ef\u4ee5\u63a5\u6536\u4e00\u4e2a\u6bd4\u8f83\u51fd\u6570\u6765\u5b9e\u73b0\u81ea\u5b9a\u4e49\u7684\u6392\u5e8f\u3002<\/p>\n\n\n\n<p>\u8981\u6309\u6570\u5b57\u5927\u5c0f\u6392\u5e8f\uff0c\u6211\u4eec\u53ef\u4ee5\u8fd9\u4e48\u5199\uff1a<\/p>\n\n\n\n<p>let arr = [10, 20, 1, 2];<\/p>\n\n\n\n<p>arr.sort(function (x, y) {<br>if (x &lt; y) { return -1; } if (x &gt; y) {<br>return 1;<br>}<br>return 0;<br>});<\/p>\n\n\n\n<p>console.log(arr); \/\/ [1, 2, 10, 20]<\/p>\n\n\n\n<p><code>every()<\/code>\u65b9\u6cd5\u53ef\u4ee5\u5224\u65ad\u6570\u7ec4\u7684\u6240\u6709\u5143\u7d20\u662f\u5426\u6ee1\u8db3\u6d4b\u8bd5\u6761\u4ef6<\/p>\n\n\n\n<p><code>find()<\/code>\u65b9\u6cd5\u7528\u4e8e\u67e5\u627e\u7b26\u5408\u6761\u4ef6\u7684\u7b2c\u4e00\u4e2a\u5143\u7d20\uff0c\u5982\u679c\u627e\u5230\u4e86\uff0c\u8fd4\u56de\u8fd9\u4e2a\u5143\u7d20\uff0c\u5426\u5219\uff0c\u8fd4\u56de<code>undefined<\/code><\/p>\n\n\n\n<p><code>findIndex()<\/code>\u548c<code>find()<\/code>\u7c7b\u4f3c\uff0c\u4e5f\u662f\u67e5\u627e\u7b26\u5408\u6761\u4ef6\u7684\u7b2c\u4e00\u4e2a\u5143\u7d20\uff0c\u4e0d\u540c\u4e4b\u5904\u5728\u4e8e<code>findIndex()<\/code>\u4f1a\u8fd4\u56de\u8fd9\u4e2a\u5143\u7d20\u7684\u7d22\u5f15\uff0c\u5982\u679c\u6ca1\u6709\u627e\u5230\uff0c\u8fd4\u56de<code>-1<\/code><\/p>\n\n\n\n<p><code>forEach()<\/code>\u548c<code>map()<\/code>\u7c7b\u4f3c\uff0c\u5b83\u4e5f\u628a\u6bcf\u4e2a\u5143\u7d20\u4f9d\u6b21\u4f5c\u7528\u4e8e\u4f20\u5165\u7684\u51fd\u6570\uff0c\u4f46\u4e0d\u4f1a\u8fd4\u56de\u65b0\u7684\u6570\u7ec4\u3002<code>forEach()<\/code>\u5e38\u7528\u4e8e\u904d\u5386\u6570\u7ec4\uff0c\u56e0\u6b64\uff0c\u4f20\u5165\u7684\u51fd\u6570\u4e0d\u9700\u8981\u8fd4\u56de\u503c\uff1a<\/p>\n\n\n\n<p>let arr = [&#8216;Apple&#8217;, &#8216;pear&#8217;, &#8216;orange&#8217;];<br>arr.forEach(x=&gt;console.log(x)); \/\/ \u4f9d\u6b21\u6253\u5370\u6bcf\u4e2a\u5143\u7d20<\/p>\n\n\n\n<p>\u9ad8\u9636\u51fd\u6570\u9664\u4e86\u53ef\u4ee5\u63a5\u53d7\u51fd\u6570\u4f5c\u4e3a\u53c2\u6570\u5916\uff0c\u8fd8\u53ef\u4ee5\u628a\u51fd\u6570\u4f5c\u4e3a\u7ed3\u679c\u503c\u8fd4\u56de<\/p>\n\n\n\n<p>\u7bad\u5934\u51fd\u6570<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\nx => x * x<\/code><\/pre>\n\n\n\n<p>\u4e0a\u9762\u7684\u7bad\u5934\u51fd\u6570\u76f8\u5f53\u4e8e\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function (x) {\n    return x * x;\n}\n<\/code><\/pre>\n\n\n\n<p>\u8fd8\u6709\u4e00\u79cd\u53ef\u4ee5\u5305\u542b\u591a\u6761\u8bed\u53e5\uff0c\u8fd9\u65f6\u5019\u5c31\u4e0d\u80fd\u7701\u7565<code>{ ... }<\/code>\u548c<code>return<\/code>\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>x =&gt; {\n    if (x &gt; 0) {\n        return x * x;\n    }\n    else {\n        return - x * x;\n    }\n}\n<\/code><\/pre>\n\n\n\n<p>\u5982\u679c\u53c2\u6570\u4e0d\u662f\u4e00\u4e2a\uff0c\u5c31\u9700\u8981\u7528\u62ec\u53f7<code>()<\/code>\u62ec\u8d77\u6765<\/p>\n\n\n\n<p>\u6807\u7b7e\u51fd\u6570<\/p>\n\n\n\n<p>const email = &#8220;test@example.com&#8221;;<br>const password = &#8216;hello123&#8217;;<\/p>\n\n\n\n<p>function sql(strings, \u2026exps) {<br>console.log(<code>SQL: ${strings.join('?')}<\/code>);<br>console.log(<code>SQL parameters: ${JSON.stringify(exps)}<\/code>);<br>return {<br>name: &#8216;\u5c0f\u660e&#8217;,<br>age: 20<br>};<br>}<\/p>\n\n\n\n<p>const result = sql<code>SELECT * FROM users WHERE email=${email} AND password=${password}<\/code>;<\/p>\n\n\n\n<p>console.log(JSON.stringify(result));<\/p>\n\n\n\n<p>\u8fd9\u91cc\u51fa\u73b0\u4e86\u4e00\u4e2a\u5947\u602a\u7684\u8bed\u6cd5\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>sql`SELECT * FROM users WHERE email=${email} AND password=${password}`\n<\/code><\/pre>\n\n\n\n<p>\u6a21\u677f\u5b57\u7b26\u4e32\u524d\u9762\u4ee5<code>sql<\/code>\u5f00\u5934\uff0c\u5b9e\u9645\u4e0a\u8fd9\u662f\u4e00\u4e2a\u6807\u7b7e\u51fd\u6570\uff0c\u4e0a\u8ff0\u8bed\u6cd5\u4f1a\u81ea\u52a8\u8f6c\u6362\u4e3a\u5bf9<code>sql()<\/code>\u51fd\u6570\u7684\u8c03\u7528\u3002\u6211\u4eec\u5173\u6ce8\u7684\u662f\uff0c\u4f20\u5165<code>sql()<\/code>\u51fd\u6570\u7684\u53c2\u6570\u662f\u4ec0\u4e48\u3002<\/p>\n\n\n\n<p><code>sql()<\/code>\u51fd\u6570\u5b9e\u9645\u4e0a\u63a5\u6536\u4e24\u4e2a\u53c2\u6570\uff1a<\/p>\n\n\n\n<p>\u7b2c\u4e00\u4e2a\u53c2\u6570<code>strings<\/code>\u662f\u4e00\u4e2a\u5b57\u7b26\u4e32\u6570\u7ec4\uff0c\u5b83\u662f<code>[\"SELECT * FROM users WHERE email=\", \" AND password=\", \"\"]<\/code>\uff0c\u5373\u9664\u53bb<code>${xxx}<\/code>\u5269\u4e0b\u7684\u5b57\u7b26\u7ec4\u6210\u7684\u6570\u7ec4\uff1b<\/p>\n\n\n\n<p>\u7b2c\u4e8c\u4e2a\u53c2\u6570<code>...exps<\/code>\u662f\u4e00\u4e2a\u53ef\u53d8\u53c2\u6570\uff0c\u5b83\u63a5\u6536\u7684\u4e5f\u662f\u4e00\u4e2a\u6570\u7ec4\uff0c\u4f46\u6570\u7ec4\u7684\u5185\u5bb9\u662f\u7531\u6a21\u677f\u5b57\u7b26\u4e32\u91cc\u6240\u6709\u7684<code>${xxx}<\/code>\u7684\u5b9e\u9645\u503c\u7ec4\u6210\uff0c\u5373<code>[\"test@example.com\", \"hello123\"]<\/code>\uff0c\u56e0\u4e3a\u89e3\u6790<code>${email}<\/code>\u5f97\u5230<code>\"test@example.com\"<\/code>\uff0c\u89e3\u6790<code>${password}<\/code>\u5f97\u5230<code>\"hello123\"<\/code>\u3002<\/p>\n\n\n\n<p>\u751f\u6210\u5668     generator\u7531<code>function*<\/code>\u5b9a\u4e49\uff08\u6ce8\u610f\u591a\u51fa\u7684<code>*<\/code>\u53f7\uff09<\/p>\n\n\n\n<p>\u8c03\u7528generator\u5bf9\u8c61\u6709\u4e24\u4e2a\u65b9\u6cd5\uff0c\u4e00\u662f\u4e0d\u65ad\u5730\u8c03\u7528generator\u5bf9\u8c61\u7684<code>next()<\/code>\u65b9\u6cd5<\/p>\n\n\n\n<p>\u7b2c\u4e8c\u4e2a\u65b9\u6cd5\u662f\u76f4\u63a5\u7528<code>for ... of<\/code>\u5faa\u73af\u8fed\u4ee3generator\u5bf9\u8c61<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function* fib(max) {\n    let\n        a = 0,\n        b = 1,\n        n = 0;\n    while (n &lt; max) {\n        yield a;\n        &#91;a, b] = &#91;b, a + b];\n        n ++;\n    }\n    return;\n}\n\nfor (let x of fib(10)) {\n    console.log(x); \/\/ \u4f9d\u6b21\u8f93\u51fa0, 1, 1, 2, 3, ...\n}<\/code><\/pre>\n\n\n\n<p>\u5728JavaScript\u4e2d\uff0c<code>Date<\/code>\u5bf9\u8c61\u7528\u6765\u8868\u793a\u65e5\u671f\u548c\u65f6\u95f4\u3002<\/p>\n\n\n\n<p>\u8981\u83b7\u53d6\u7cfb\u7edf\u5f53\u524d\u65f6\u95f4\uff0c\u7528\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let now = new Date();\nnow; \/\/ Wed Jun 24 2015 19:49:22 GMT+0800 (CST)\nnow.getFullYear(); \/\/ 2015, \u5e74\u4efd\nnow.getMonth(); \/\/ 5, \u6708\u4efd\uff0c\u6ce8\u610f\u6708\u4efd\u8303\u56f4\u662f0~11\uff0c5\u8868\u793a\u516d\u6708\nnow.getDate(); \/\/ 24, \u8868\u793a24\u53f7\nnow.getDay(); \/\/ 3, \u8868\u793a\u661f\u671f\u4e09\nnow.getHours()<\/code><\/pre>\n\n\n\n<p>JavaScript\u6709\u4e24\u79cd\u65b9\u5f0f\u521b\u5efa\u4e00\u4e2a\u6b63\u5219\u8868\u8fbe\u5f0f\uff1a<\/p>\n\n\n\n<p>\u7b2c\u4e00\u79cd\u65b9\u5f0f\u662f\u76f4\u63a5\u901a\u8fc7<code>\/\u6b63\u5219\u8868\u8fbe\u5f0f\/<\/code>\u5199\u51fa\u6765\uff0c\u7b2c\u4e8c\u79cd\u65b9\u5f0f\u662f\u901a\u8fc7<code>new RegExp('\u6b63\u5219\u8868\u8fbe\u5f0f')<\/code>\u521b\u5efa\u4e00\u4e2aRegExp\u5bf9\u8c61\u3002<\/p>\n\n\n\n<p>\u4e24\u79cd\u5199\u6cd5\u662f\u4e00\u6837\u7684\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let re1 = \/ABC\\-001\/;\nlet re2 = new RegExp('ABC\\\\-001');\n\nre1; \/\/ \/ABC\\-001\/\nre2; \/\/ \/ABC\\-001\/\n<\/code><\/pre>\n\n\n\n<p>\u6ce8\u610f\uff0c\u5982\u679c\u4f7f\u7528\u7b2c\u4e8c\u79cd\u5199\u6cd5\uff0c\u56e0\u4e3a\u5b57\u7b26\u4e32\u7684\u8f6c\u4e49\u95ee\u9898\uff0c\u5b57\u7b26\u4e32\u7684\u4e24\u4e2a<code>\\\\<\/code>\u5b9e\u9645\u4e0a\u662f\u4e00\u4e2a<code>\\<\/code>\u3002<\/p>\n\n\n\n<p>\u5148\u770b\u770b\u5982\u4f55\u5224\u65ad\u6b63\u5219\u8868\u8fbe\u5f0f\u662f\u5426\u5339\u914d\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let re = \/^\\d{3}\\-\\d{3,8}$\/;\nre.test('010-12345'); \/\/ true\nre.test('010-1234x'); \/\/ false\nre.test('010 12345'); \/\/ false\n<\/code><\/pre>\n\n\n\n<p>RegExp\u5bf9\u8c61\u7684<code>test()<\/code>\u65b9\u6cd5\u7528\u4e8e\u6d4b\u8bd5\u7ed9\u5b9a\u7684\u5b57\u7b26\u4e32\u662f\u5426\u7b26\u5408\u6761\u4ef6<\/p>\n\n\n\n<p>JSON\u662fJavaScript Object Notation\u7684\u7f29\u5199\uff0c\u5b83\u662f\u4e00\u79cd\u6570\u636e\u4ea4\u6362\u683c\u5f0f,JSON\u5b9e\u9645\u4e0a\u662fJavaScript\u7684\u4e00\u4e2a\u5b50\u96c6\u3002\u5728JSON\u4e2d\uff0c\u4e00\u5171\u5c31\u8fd9\u4e48\u51e0\u79cd\u6570\u636e\u7c7b\u578b\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>number\uff1a\u548cJavaScript\u7684<code>number<\/code>\u5b8c\u5168\u4e00\u81f4\uff1b<\/li>\n\n\n\n<li>boolean\uff1a\u5c31\u662fJavaScript\u7684<code>true<\/code>\u6216<code>false<\/code>\uff1b<\/li>\n\n\n\n<li>string\uff1a\u5c31\u662fJavaScript\u7684<code>string<\/code>\uff1b<\/li>\n\n\n\n<li>null\uff1a\u5c31\u662fJavaScript\u7684<code>null<\/code>\uff1b<\/li>\n\n\n\n<li>array\uff1a\u5c31\u662fJavaScript\u7684<code>Array<\/code>\u8868\u793a\u65b9\u5f0f\u2014\u2014<code>[]<\/code>\uff1b<\/li>\n\n\n\n<li>object\uff1a\u5c31\u662fJavaScript\u7684<code>{ ... }<\/code>\u8868\u793a\u65b9\u5f0f\u3002<\/li>\n<\/ul>\n\n\n\n<p>\u4ee5\u53ca\u4e0a\u9762\u7684\u4efb\u610f\u7ec4\u5408\u3002<\/p>\n\n\n\n<p>\u5e76\u4e14\uff0cJSON\u8fd8\u5b9a\u6b7b\u4e86\u5b57\u7b26\u96c6\u5fc5\u987b\u662fUTF-8\uff0c\u8868\u793a\u591a\u8bed\u8a00\u5c31\u6ca1\u6709\u95ee\u9898\u4e86\u3002\u4e3a\u4e86\u7edf\u4e00\u89e3\u6790\uff0cJSON\u7684\u5b57\u7b26\u4e32\u89c4\u5b9a\u5fc5\u987b\u7528\u53cc\u5f15\u53f7<code>\"\"<\/code>\uff0cObject\u7684\u952e\u4e5f\u5fc5\u987b\u7528\u53cc\u5f15\u53f7<code>\"\"<\/code>\u3002<\/p>\n\n\n\n<p>\u62ff\u5230\u4e00\u4e2aJSON\u683c\u5f0f\u7684\u5b57\u7b26\u4e32\uff0c\u6211\u4eec\u76f4\u63a5\u7528<code>JSON.parse()<\/code>\u628a\u5b83\u53cd\u5e8f\u5217\u5316\u53d8\u6210\u4e00\u4e2aJavaScript\u5bf9\u8c61<\/p>\n\n\n\n<p>JSON.stringify()\u628a\u4e00\u4e2aJavaScript\u5bf9\u8c61\u5e8f\u5217\u5316\u4e3aJSON<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>\u5bf9\u8c61\u7f16\u7a0b<\/p>\n\n\n\n<p>\u521b\u5efa\u4e00\u4e2a<code>Array<\/code>\u5bf9\u8c61\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let arr = &#91;1, 2, 3];<\/code><\/pre>\n\n\n\n<p>\u5f53\u6211\u4eec\u521b\u5efa\u4e00\u4e2a\u51fd\u6570\u65f6\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function foo() {\n    return 0;\n}\n<\/code><\/pre>\n\n\n\n<p>\u51fd\u6570\u4e5f\u662f\u4e00\u4e2a\u5bf9\u8c61\uff0c<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u6784\u9020\u51fd\u6570<\/h3>\n\n\n\n<p>\u9664\u4e86\u76f4\u63a5\u7528<code>{ ... }<\/code>\u521b\u5efa\u4e00\u4e2a\u5bf9\u8c61\u5916\uff0cJavaScript\u8fd8\u53ef\u4ee5\u7528\u4e00\u79cd\u6784\u9020\u51fd\u6570\u7684\u65b9\u6cd5\u6765\u521b\u5efa\u5bf9\u8c61\u3002\u5b83\u7684\u7528\u6cd5\u662f\uff0c\u5148\u5b9a\u4e49\u4e00\u4e2a\u6784\u9020\u51fd\u6570\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function Student(name) {\n    this.name = name;\n    this.hello = function () {\n        alert('Hello, ' + this.name + '!');\n    }\n}\n<\/code><\/pre>\n\n\n\n<p>\u4f60\u4f1a\u95ee\uff0c\u54a6\uff0c\u8fd9\u4e0d\u662f\u4e00\u4e2a\u666e\u901a\u51fd\u6570\u5417\uff1f<\/p>\n\n\n\n<p>\u8fd9\u786e\u5b9e\u662f\u4e00\u4e2a\u666e\u901a\u51fd\u6570\uff0c\u4f46\u662f\u5728JavaScript\u4e2d\uff0c\u53ef\u4ee5\u7528\u5173\u952e\u5b57<code>new<\/code>\u6765\u8c03\u7528\u8fd9\u4e2a\u51fd\u6570\uff0c\u5e76\u8fd4\u56de\u4e00\u4e2a\u5bf9\u8c61\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let xiaoming = new Student('\u5c0f\u660e');\nxiaoming.name; \/\/ '\u5c0f\u660e'\nxiaoming.hello(); \/\/ Hello, \u5c0f\u660e!\n<\/code><\/pre>\n\n\n\n<p><em>\u6ce8\u610f<\/em>\uff0c\u5982\u679c\u4e0d\u5199<code>new<\/code>\uff0c\u8fd9\u5c31\u662f\u4e00\u4e2a\u666e\u901a\u51fd\u6570\uff0c\u5b83\u8fd4\u56de<code>undefined<\/code>\u3002\u4f46\u662f\uff0c\u5982\u679c\u5199\u4e86<code>new<\/code>\uff0c\u5b83\u5c31\u53d8\u6210\u4e86\u4e00\u4e2a\u6784\u9020\u51fd\u6570\uff0c\u5b83\u7ed1\u5b9a\u7684<code>this<\/code>\u6307\u5411\u65b0\u521b\u5efa\u7684\u5bf9\u8c61\uff0c\u5e76\u9ed8\u8ba4\u8fd4\u56de<code>this<\/code>\uff0c\u4e5f\u5c31\u662f\u8bf4\uff0c\u4e0d\u9700\u8981\u5728\u6700\u540e\u5199<code>return this;<\/code>\u3002<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">JavaScript\u53ef\u4ee5\u83b7\u53d6\u6d4f\u89c8\u5668\u63d0\u4f9b\u7684\u5f88\u591a\u5bf9\u8c61\uff0c\u5e76\u8fdb\u884c\u64cd\u4f5c\u3002<\/h3>\n\n\n\n<h3 class=\"wp-block-heading\">window<\/h3>\n\n\n\n<p><code>window<\/code>\u5bf9\u8c61\u4e0d\u4f46\u5145\u5f53\u5168\u5c40\u4f5c\u7528\u57df\uff0c\u800c\u4e14\u8868\u793a\u6d4f\u89c8\u5668\u7a97\u53e3\u3002<\/p>\n\n\n\n<p><code>window<\/code>\u5bf9\u8c61\u6709<code>innerWidth<\/code>\u548c<code>innerHeight<\/code>\u5c5e\u6027\uff0c\u53ef\u4ee5\u83b7\u53d6\u6d4f\u89c8\u5668\u7a97\u53e3\u7684\u5185\u90e8\u5bbd\u5ea6\u548c\u9ad8\u5ea6\u7684\u5185\u90e8\u5bbd\u5ea6\u548c\u9ad8\u5ea6<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">navigator<\/h3>\n\n\n\n<p><code>navigator<\/code>\u5bf9\u8c61\u8868\u793a\u6d4f\u89c8\u5668\u7684\u4fe1\u606f\uff0c\u6700\u5e38\u7528\u7684\u5c5e\u6027\u5305\u62ec\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>navigator.appName\uff1a\u6d4f\u89c8\u5668\u540d\u79f0\uff1b<\/li>\n\n\n\n<li>navigator.appVersion\uff1a\u6d4f\u89c8\u5668\u7248\u672c\uff1b<\/li>\n\n\n\n<li>navigator.language\uff1a\u6d4f\u89c8\u5668\u8bbe\u7f6e\u7684\u8bed\u8a00\uff1b<\/li>\n\n\n\n<li>navigator.platform\uff1a\u64cd\u4f5c\u7cfb\u7edf\u7c7b\u578b\uff1b<\/li>\n\n\n\n<li>navigator.userAgent\uff1a\u6d4f\u89c8\u5668\u8bbe\u5b9a\u7684<code>User-Agent<\/code>\u5b57\u7b26\u4e32<\/li>\n<\/ul>\n\n\n\n<p><code>screen<\/code>\u5bf9\u8c61\u8868\u793a\u5c4f\u5e55\u7684\u4fe1\u606f<\/p>\n\n\n\n<p><code>location<\/code>\u5bf9\u8c61\u8868\u793a\u5f53\u524d\u9875\u9762\u7684URL\u4fe1\u606f\u3002\u4f8b\u5982\uff0c\u4e00\u4e2a\u5b8c\u6574\u7684URL\uff0c\u53ef\u4ee5\u7528<code>location.href<\/code>\u83b7\u53d6<\/p>\n\n\n\n<p><code>document<\/code>\u5bf9\u8c61\u8868\u793a\u5f53\u524d\u9875\u9762\u3002\u7531\u4e8eHTML\u5728\u6d4f\u89c8\u5668\u4e2d\u4ee5DOM\u5f62\u5f0f\u8868\u793a\u4e3a\u6811\u5f62\u7ed3\u6784\uff0c<code>document<\/code>\u5bf9\u8c61\u5c31\u662f\u6574\u4e2aDOM\u6811\u7684\u6839\u8282\u70b9\u3002<\/p>\n\n\n\n<p><code>document<\/code>\u7684<code>title<\/code>\u5c5e\u6027\u662f\u4eceHTML\u6587\u6863\u4e2d\u7684<code>&lt;title&gt;xxx&lt;\/title&gt;<\/code>\u8bfb\u53d6\u7684<\/p>\n\n\n\n<p>\u8981\u67e5\u627eDOM\u6811\u7684\u67d0\u4e2a\u8282\u70b9\uff0c\u9700\u8981\u4ece<code>document<\/code>\u5bf9\u8c61\u5f00\u59cb\u67e5\u627e\u3002\u6700\u5e38\u7528\u7684\u67e5\u627e\u662f\u6839\u636eID\u548cTag Name\u3002<\/p>\n\n\n\n<p>JavaScript\u53ef\u4ee5\u901a\u8fc7<code>document.cookie<\/code>\u8bfb\u53d6\u5230\u5f53\u524d\u9875\u9762\u7684Cookie<\/p>\n\n\n\n<p>\u7531\u4e8eHTML\u6587\u6863\u88ab\u6d4f\u89c8\u5668\u89e3\u6790\u540e\u5c31\u662f\u4e00\u68f5DOM\u6811\uff0c\u8981\u6539\u53d8HTML\u7684\u7ed3\u6784\uff0c\u5c31\u9700\u8981\u901a\u8fc7JavaScript\u6765\u64cd\u4f5cDOM\u3002<\/p>\n\n\n\n<p>\u59cb\u7ec8\u8bb0\u4f4fDOM\u662f\u4e00\u4e2a\u6811\u5f62\u7ed3\u6784\u3002\u64cd\u4f5c\u4e00\u4e2aDOM\u8282\u70b9\u5b9e\u9645\u4e0a\u5c31\u662f\u8fd9\u4e48\u51e0\u4e2a\u64cd\u4f5c\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u66f4\u65b0\uff1a\u66f4\u65b0\u8be5DOM\u8282\u70b9\u7684\u5185\u5bb9\uff0c\u76f8\u5f53\u4e8e\u66f4\u65b0\u4e86\u8be5DOM\u8282\u70b9\u8868\u793a\u7684HTML\u7684\u5185\u5bb9\uff1b<\/li>\n\n\n\n<li>\u904d\u5386\uff1a\u904d\u5386\u8be5DOM\u8282\u70b9\u4e0b\u7684\u5b50\u8282\u70b9\uff0c\u4ee5\u4fbf\u8fdb\u884c\u8fdb\u4e00\u6b65\u64cd\u4f5c\uff1b<\/li>\n\n\n\n<li>\u6dfb\u52a0\uff1a\u5728\u8be5DOM\u8282\u70b9\u4e0b\u65b0\u589e\u4e00\u4e2a\u5b50\u8282\u70b9\uff0c\u76f8\u5f53\u4e8e\u52a8\u6001\u589e\u52a0\u4e86\u4e00\u4e2aHTML\u8282\u70b9\uff1b<\/li>\n\n\n\n<li>\u5220\u9664\uff1a\u5c06\u8be5\u8282\u70b9\u4eceHTML\u4e2d\u5220\u9664\uff0c\u76f8\u5f53\u4e8e\u5220\u6389\u4e86\u8be5DOM\u8282\u70b9\u7684\u5185\u5bb9\u4ee5\u53ca\u5b83\u5305\u542b\u7684\u6240\u6709\u5b50\u8282\u70b9\u3002<\/li>\n<\/ul>\n\n\n\n<p>\u5728\u64cd\u4f5c\u4e00\u4e2aDOM\u8282\u70b9\u524d\uff0c\u6211\u4eec\u9700\u8981\u901a\u8fc7\u5404\u79cd\u65b9\u5f0f\u5148\u62ff\u5230\u8fd9\u4e2aDOM\u8282\u70b9\u3002\u6700\u5e38\u7528\u7684\u65b9\u6cd5\u662f<code>document.getElementById()<\/code>\u548c<code>document.getElementsByTagName()<\/code>\uff0c\u4ee5\u53caCSS\u9009\u62e9\u5668<code>document.getElementsByClassName()<\/code>\u3002<\/p>\n\n\n\n<p>\u7531\u4e8eID\u5728HTML\u6587\u6863\u4e2d\u662f\u552f\u4e00\u7684\uff0c\u6240\u4ee5<code>document.getElementById()<\/code>\u53ef\u4ee5\u76f4\u63a5\u5b9a\u4f4d\u552f\u4e00\u7684\u4e00\u4e2aDOM\u8282\u70b9\u3002<code>document.getElementsByTagName()<\/code>\u548c<code>document.getElementsByClassName()<\/code>\u603b\u662f\u8fd4\u56de\u4e00\u7ec4DOM\u8282\u70b9\u3002\u8981\u7cbe\u786e\u5730\u9009\u62e9DOM\uff0c\u53ef\u4ee5\u5148\u5b9a\u4f4d\u7236\u8282\u70b9\uff0c\u518d\u4ece\u7236\u8282\u70b9\u5f00\u59cb\u9009\u62e9\uff0c\u4ee5\u7f29\u5c0f\u8303\u56f4\u3002<\/p>\n\n\n\n<p>\u7b2c\u4e8c\u79cd\u65b9\u6cd5\u662f\u4f7f\u7528<code>querySelector()<\/code>\u548c<code>querySelectorAll()<\/code>\uff0c\u9700\u8981\u4e86\u89e3selector\u8bed\u6cd5\uff0c\u7136\u540e\u4f7f\u7528\u6761\u4ef6\u6765\u83b7\u53d6\u8282\u70b9\uff0c\u66f4\u52a0\u65b9\u4fbf\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ \u901a\u8fc7querySelector\u83b7\u53d6ID\u4e3aq1\u7684\u8282\u70b9\uff1a\nlet q1 = document.querySelector('#q1');\n\n\/\/ \u901a\u8fc7querySelectorAll\u83b7\u53d6q1\u8282\u70b9\u5185\u7684\u7b26\u5408\u6761\u4ef6\u7684\u6240\u6709\u8282\u70b9\uff1a\nlet ps = q1.querySelectorAll('div.highlighted &gt; p');<\/code><\/pre>\n\n\n\n<p>\u62ff\u5230\u4e00\u4e2aDOM\u8282\u70b9\u540e\uff0c\u6211\u4eec\u53ef\u4ee5\u5bf9\u5b83\u8fdb\u884c\u66f4\u65b0\u3002<\/p>\n\n\n\n<p>\u53ef\u4ee5\u76f4\u63a5\u4fee\u6539\u8282\u70b9\u7684\u6587\u672c\uff0c\u65b9\u6cd5\u6709\u4e24\u79cd\uff1a<\/p>\n\n\n\n<p>\u4e00\u79cd\u662f\u4fee\u6539<code>innerHTML<\/code>\u5c5e\u6027\uff0c\u8fd9\u4e2a\u65b9\u5f0f\u975e\u5e38\u5f3a\u5927\uff0c\u4e0d\u4f46\u53ef\u4ee5\u4fee\u6539\u4e00\u4e2aDOM\u8282\u70b9\u7684\u6587\u672c\u5185\u5bb9\uff0c\u8fd8\u53ef\u4ee5\u76f4\u63a5\u901a\u8fc7HTML\u7247\u6bb5\u4fee\u6539DOM\u8282\u70b9\u5185\u90e8\u7684\u5b50\u6811\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ \u83b7\u53d6&lt;p id=\"p-id\"&gt;...&lt;\/p&gt;\nlet p = document.getElementById('p-id');\n\/\/ \u8bbe\u7f6e\u6587\u672c\u4e3aabc:\np.innerHTML = 'ABC'; \/\/ &lt;p id=\"p-id\"&gt;ABC&lt;\/p&gt;\n\/\/ \u8bbe\u7f6eHTML:\np.innerHTML = 'ABC &lt;span style=\"color:red\"&gt;RED&lt;\/span&gt; XYZ';\n\/\/ &lt;p&gt;...&lt;\/p&gt;\u7684\u5185\u90e8\u7ed3\u6784\u5df2\u4fee\u6539\n<\/code><\/pre>\n\n\n\n<p>\u7528<code>innerHTML<\/code>\u65f6\u8981\u6ce8\u610f\uff0c\u662f\u5426\u9700\u8981\u5199\u5165HTML\u3002\u5982\u679c\u5199\u5165\u7684\u5b57\u7b26\u4e32\u662f\u901a\u8fc7\u7f51\u7edc\u62ff\u5230\u7684\uff0c\u8981\u6ce8\u610f\u5bf9\u5b57\u7b26\u7f16\u7801\u6765\u907f\u514dXSS\u653b\u51fb\u3002<\/p>\n\n\n\n<p>\u7b2c\u4e8c\u79cd\u662f\u4fee\u6539<code>innerText<\/code>\u6216<code>textContent<\/code>\u5c5e\u6027<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>\u5f53\u6211\u4eec\u83b7\u5f97\u4e86\u67d0\u4e2aDOM\u8282\u70b9\uff0c\u60f3\u5728\u8fd9\u4e2aDOM\u8282\u70b9\u5185\u63d2\u5165\u65b0\u7684DOM\uff0c\u5e94\u8be5\u5982\u4f55\u505a\uff1f<\/p>\n\n\n\n<p>\u5982\u679c\u8fd9\u4e2aDOM\u8282\u70b9\u662f\u7a7a\u7684\uff0c\u4f8b\u5982\uff0c<code>&lt;div&gt;&lt;\/div&gt;<\/code>\uff0c\u90a3\u4e48\uff0c\u76f4\u63a5\u4f7f\u7528<code>innerHTML = '&lt;span&gt;child&lt;\/span&gt;'<\/code>\u5c31\u53ef\u4ee5\u4fee\u6539DOM\u8282\u70b9\u7684\u5185\u5bb9\uff0c\u76f8\u5f53\u4e8e\u201c\u63d2\u5165\u201d\u4e86\u65b0\u7684DOM\u8282\u70b9\u3002<\/p>\n\n\n\n<p>\u5982\u679c\u8fd9\u4e2aDOM\u8282\u70b9\u4e0d\u662f\u7a7a\u7684\uff0c\u90a3\u5c31\u4e0d\u80fd\u8fd9\u4e48\u505a\uff0c\u56e0\u4e3a<code>innerHTML<\/code>\u4f1a\u76f4\u63a5\u66ff\u6362\u6389\u539f\u6765\u7684\u6240\u6709\u5b50\u8282\u70b9\u3002<\/p>\n\n\n\n<p>\u6709\u4e24\u4e2a\u529e\u6cd5\u53ef\u4ee5\u63d2\u5165\u65b0\u7684\u8282\u70b9\u3002\u4e00\u4e2a\u662f\u4f7f\u7528<code>appendChild<\/code>\uff0c\u628a\u4e00\u4e2a\u5b50\u8282\u70b9\u6dfb\u52a0\u5230\u7236\u8282\u70b9\u7684\u6700\u540e\u4e00\u4e2a\u5b50\u8282\u70b9\u3002\u4f8b\u5982\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!-- HTML\u7ed3\u6784 --&gt;\n&lt;p id=\"js\"&gt;JavaScript&lt;\/p&gt;\n&lt;div id=\"list\"&gt;\n    &lt;p id=\"java\"&gt;Java&lt;\/p&gt;\n    &lt;p id=\"python\"&gt;Python&lt;\/p&gt;\n    &lt;p id=\"scheme\"&gt;Scheme&lt;\/p&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<p>\u628a<code>&lt;p id=\"js\"&gt;JavaScript&lt;\/p&gt;<\/code>\u6dfb\u52a0\u5230<code>&lt;div id=\"list\"&gt;<\/code>\u7684\u6700\u540e\u4e00\u9879\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let\n    js = document.getElementById('js'),\n    list = document.getElementById('list');\nlist.appendChild(js);<\/code><\/pre>\n\n\n\n<p>\u5982\u679c\u6211\u4eec\u8981\u628a\u5b50\u8282\u70b9\u63d2\u5165\u5230\u6307\u5b9a\u7684\u4f4d\u7f6e\u600e\u4e48\u529e\uff1f\u53ef\u4ee5\u4f7f\u7528<code>parentElement.insertBefore(newElement, referenceElement);<\/code>\uff0c\u5b50\u8282\u70b9\u4f1a\u63d2\u5165\u5230<code>referenceElement<\/code>\u4e4b\u524d<\/p>\n\n\n\n<p>\u5220\u9664\u4e00\u4e2aDOM\u8282\u70b9\u5c31\u6bd4\u63d2\u5165\u8981\u5bb9\u6613\u5f97\u591a\u3002<\/p>\n\n\n\n<p>\u8981\u5220\u9664\u4e00\u4e2a\u8282\u70b9\uff0c\u9996\u5148\u8981\u83b7\u5f97\u8be5\u8282\u70b9\u672c\u8eab\u4ee5\u53ca\u5b83\u7684\u7236\u8282\u70b9\uff0c\u7136\u540e\uff0c\u8c03\u7528\u7236\u8282\u70b9\u7684<code>removeChild<\/code>\u628a\u81ea\u5df1\u5220\u6389\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ \u62ff\u5230\u5f85\u5220\u9664\u8282\u70b9:\nlet self = document.getElementById('to-be-removed');\n\/\/ \u62ff\u5230\u7236\u8282\u70b9:\nlet parent = self.parentElement;\n\/\/ \u5220\u9664:\nlet removed = parent.removeChild(self);\nremoved === self; \/\/ true<\/code><\/pre>\n\n\n\n<p>\u64cd\u4f5c\u8868\u5355\u76f4\u63a5\u770b<a href=\"https:\/\/liaoxuefeng.com\/books\/javascript\/browser\/form\/index.html\">https:\/\/liaoxuefeng.com\/books\/javascript\/browser\/form\/index.html<\/a><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>AJAX<\/strong><\/h2>\n\n\n\n<p>\u4e00\u3001AJAX\u6982\u8ff0<\/p>\n\n\n\n<p>AJAX\u662fAsynchronous JavaScript and XML\u7684\u7f29\u5199\uff0c\u5373\u5f02\u6b65JavaScript\u548cXML\u3002\u5b83\u662f\u4e00\u79cd\u5728\u4e0d\u91cd\u65b0\u52a0\u8f7d\u6574\u4e2a\u9875\u9762\u7684\u60c5\u51b5\u4e0b\uff0c\u901a\u8fc7JavaScript\u548c\u670d\u52a1\u5668\u8fdb\u884c\u6570\u636e\u4ea4\u4e92\u548c\u9875\u9762\u66f4\u65b0\u7684\u6280\u672f\u3002AJAX\u6280\u672f\u53ef\u4ee5\u4f7f\u5f97\u7f51\u9875\u4ea4\u4e92\u66f4\u52a0\u6d41\u7545\u548c\u5feb\u901f\uff0c\u540c\u65f6\u4e5f\u53ef\u4ee5\u51cf\u5c11\u7f51\u7edc\u6d41\u91cf\u548c\u670d\u52a1\u5668\u8d44\u6e90\u7684\u5360\u7528\u3002<\/p>\n\n\n\n<p>\u5728AJAX\u6280\u672f\u4e2d\uff0c\u5f53\u7528\u6237\u6267\u884c\u67d0\u4e2a\u64cd\u4f5c\u65f6\uff0c\u4f8b\u5982\u70b9\u51fb\u6309\u94ae\u6216\u8f93\u5165\u6570\u636e\uff0cJavaScript\u4ee3\u7801\u4f1a\u901a\u8fc7XMLHttpRequest\u5bf9\u8c61\u5411\u670d\u52a1\u5668\u53d1\u9001\u5f02\u6b65\u8bf7\u6c42\uff0c\u5e76\u63a5\u6536\u670d\u52a1\u5668\u8fd4\u56de\u7684\u6570\u636e\u3002\u5728\u63a5\u6536\u5230\u6570\u636e\u540e\uff0cJavaScript\u4ee3\u7801\u53ef\u4ee5\u5bf9\u9875\u9762\u8fdb\u884c\u52a8\u6001\u66f4\u65b0\uff0c\u4f8b\u5982\u66f4\u65b0\u90e8\u5206\u9875\u9762\u5185\u5bb9\u3001\u6dfb\u52a0\u65b0\u7684\u5185\u5bb9\u3001\u6216\u8005\u6267\u884c\u7279\u5b9a\u7684\u64cd\u4f5c\u7b49\u3002<\/p>\n\n\n\n<p>\u4e8c\u3001XMLHttpRequest\u5bf9\u8c61<\/p>\n\n\n\n<p>XMLHttpRequest\u5bf9\u8c61\u662fAJAX\u6280\u672f\u7684\u6838\u5fc3\uff0c\u5b83\u662f\u4e00\u4e2a\u5185\u7f6e\u5bf9\u8c61\uff0c\u53ef\u4ee5\u5728JavaScript\u4e2d\u4f7f\u7528\u3002\u8be5\u5bf9\u8c61\u53ef\u4ee5\u901a\u8fc7JavaScript\u5411\u670d\u52a1\u5668\u53d1\u9001HTTP\u8bf7\u6c42\uff0c\u5e76\u63a5\u6536\u670d\u52a1\u5668\u8fd4\u56de\u7684\u6570\u636e\u3002\u4ee5\u4e0b\u662fXMLHttpRequest\u5bf9\u8c61\u7684\u57fa\u672c\u7528\u6cd5\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u521b\u5efaXMLHttpRequest\u5bf9\u8c61<br>\u5728JavaScript\u4e2d\uff0c\u53ef\u4ee5\u4f7f\u7528\u4ee5\u4e0b\u4ee3\u7801\u521b\u5efa\u4e00\u4e2aXMLHttpRequest\u5bf9\u8c61\uff1a<br>&#8220;`javascript<br>let xhr = new XMLHttpRequest();<br>&#8220;`<\/li>\n\n\n\n<li>\u53d1\u9001HTTP\u8bf7\u6c42<\/li>\n<\/ol>\n\n\n\n<p>\u4f7f\u7528XMLHttpRequest\u5bf9\u8c61\u53d1\u9001HTTP\u8bf7\u6c42\u7684\u57fa\u672c\u6b65\u9aa4\u5982\u4e0b\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u8c03\u7528open()\u65b9\u6cd5\uff0c\u6307\u5b9a\u8bf7\u6c42\u7684\u65b9\u6cd5\u3001URL\u548c\u662f\u5426\u4f7f\u7528\u5f02\u6b65\u65b9\u5f0f\u3002\u4f8b\u5982\uff0c\u4ee5\u4e0b\u4ee3\u7801\u6307\u5b9a\u4e86\u4e00\u4e2aGET\u65b9\u6cd5\u7684\u8bf7\u6c42\uff0c\u8bf7\u6c42URL\u4e3a&#8221;\/api\/data&#8221;\uff0c\u5e76\u4f7f\u7528\u5f02\u6b65\u65b9\u5f0f\u53d1\u9001\u8bf7\u6c42\uff1a<br>&#8220;`javascript<br>xhr.open(&#8220;GET&#8221;, &#8220;\/api\/data&#8221;, true);<br>&#8220;`<\/li>\n\n\n\n<li>\u6dfb\u52a0\u8bf7\u6c42\u5934\u3002\u53ef\u4ee5\u4f7f\u7528setRequestHeader()\u65b9\u6cd5\u6dfb\u52a0\u8bf7\u6c42\u5934\uff0c\u4f8b\u5982\uff1a<br>&#8220;`javascript<br>xhr.setRequestHeader(&#8220;Content-Type&#8221;, &#8220;application\/json&#8221;);<br>&#8220;`<\/li>\n\n\n\n<li>\u53d1\u9001\u8bf7\u6c42\u3002\u4f7f\u7528send()\u65b9\u6cd5\u53d1\u9001HTTP\u8bf7\u6c42\uff0c\u4f8b\u5982\uff1a<\/li>\n<\/ol>\n\n\n\n<p>&#8220;`javascript<\/p>\n\n\n\n<p>xhr.send();<\/p>\n\n\n\n<p>&#8220;`<\/p>\n\n\n\n<p>3. \u5904\u7406\u670d\u52a1\u5668\u54cd\u5e94<\/p>\n\n\n\n<p>\u5f53\u670d\u52a1\u5668\u54cd\u5e94XMLHttpRequest\u5bf9\u8c61\u7684\u8bf7\u6c42\u65f6\uff0c\u53ef\u4ee5\u901a\u8fc7\u4ee5\u4e0b\u5c5e\u6027\u548c\u65b9\u6cd5\u6765\u83b7\u53d6\u54cd\u5e94\u6570\u636e\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>responseText\uff1a\u54cd\u5e94\u7684\u6587\u672c\u6570\u636e\u3002<\/li>\n\n\n\n<li>responseXML\uff1a\u54cd\u5e94\u7684XML\u6570\u636e\u3002<\/li>\n\n\n\n<li>status\uff1a\u54cd\u5e94\u7684\u72b6\u6001\u7801\u3002<\/li>\n\n\n\n<li>statusText\uff1a<a href=\"https:\/\/zhida.zhihu.com\/search?content_id=236234505&amp;content_type=Article&amp;match_order=1&amp;q=%E5%93%8D%E5%BA%94%E7%8A%B6%E6%80%81%E7%A0%81&amp;zhida_source=entity\" target=\"_blank\" rel=\"noreferrer noopener\">\u54cd\u5e94\u72b6\u6001\u7801<\/a>\u5bf9\u5e94\u7684\u6587\u672c\u4fe1\u606f\u3002<\/li>\n\n\n\n<li>getAllResponseHeaders()\uff1a\u83b7\u53d6\u6240\u6709\u54cd\u5e94\u5934\u3002<\/li>\n\n\n\n<li>getResponseHeader(header)\uff1a\u83b7\u53d6\u6307\u5b9a\u54cd\u5e94\u5934\u3002<\/li>\n<\/ol>\n\n\n\n<p>\u5728\u63a5\u6536\u5230\u54cd\u5e94\u540e\uff0c\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7<a href=\"https:\/\/zhida.zhihu.com\/search?content_id=236234505&amp;content_type=Article&amp;match_order=1&amp;q=%E5%9B%9E%E8%B0%83%E5%87%BD%E6%95%B0&amp;zhida_source=entity\" target=\"_blank\" rel=\"noreferrer noopener\">\u56de\u8c03\u51fd\u6570<\/a>\u6765\u5904\u7406\u54cd\u5e94\u6570\u636e\u3002\u4f8b\u5982\uff0c\u4ee5\u4e0b\u4ee3\u7801\u5b9a\u4e49\u4e86\u4e00\u4e2a\u56de\u8c03\u51fd\u6570\uff0c\u5f53XMLHttpRequest\u5bf9\u8c61\u63a5\u6536\u5230\u54cd\u5e94\u65f6\uff0c\u4f1a\u8c03\u7528\u8be5\u51fd\u6570\uff1a<\/p>\n\n\n\n<p>&#8220;`javascript<\/p>\n\n\n\n<p>xhr.onload = function() {<\/p>\n\n\n\n<p>if (xhr.status === 200) {<\/p>\n\n\n\n<p>console.log(xhr.responseText);<\/p>\n\n\n\n<p>} else {<\/p>\n\n\n\n<p>console.log(&#8220;\u8bf7\u6c42\u5931\u8d25\uff1a&#8221; + xhr.statusText);<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>};<\/p>\n\n\n\n<p>&#8220;`<\/p>\n\n\n\n<p>\u5982\u679c\u4e0d\u8003\u8651\u65e9\u671f\u6d4f\u89c8\u5668\u7684\u517c\u5bb9\u6027\u95ee\u9898\uff0c\u73b0\u4ee3\u6d4f\u89c8\u5668\u8fd8\u63d0\u4f9b\u4e86\u539f\u751f\u652f\u6301\u7684Fetch API\uff0c\u4ee5<a href=\"https:\/\/liaoxuefeng.com\/books\/javascript\/browser\/promise\/index.html\">Promise<\/a>\u65b9\u5f0f\u63d0\u4f9b\u3002\u4f7f\u7528Fetch API\u53d1\u9001HTTP\u8bf7\u6c42\u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n\n\n\n<p>async function get(url) {<br>let resp = await fetch(url);<br>let result = await resp.text();<br>return result;<br>}<\/p>\n\n\n\n<p>\/\/ \u53d1\u9001\u5f02\u6b65\u8bf7\u6c42:<br>get(&#8216;.\/content.html&#8217;).then(data =&gt; {<br>let textarea = document.getElementById(&#8216;fetch-response-text&#8217;);<br>textarea.value = data;<br>});<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">CORS<\/h3>\n\n\n\n<p>CORS\u5168\u79f0Cross-Origin Resource Sharing\uff0c\u662fHTML5\u89c4\u8303\u5b9a\u4e49\u7684\u5982\u4f55\u8de8\u57df\u8bbf\u95ee\u8d44\u6e90\u3002<\/p>\n\n\n\n<p>\u4e86\u89e3CORS\u524d\uff0c\u6211\u4eec\u5148\u641e\u660e\u767d\u6982\u5ff5\uff1a<\/p>\n\n\n\n<p>Origin\u8868\u793a\u672c\u57df\uff0c\u4e5f\u5c31\u662f\u6d4f\u89c8\u5668\u5f53\u524d\u9875\u9762\u7684\u57df\u3002\u5f53JavaScript\u5411\u5916\u57df\uff08\u5982sina.com\uff09\u53d1\u8d77\u8bf7\u6c42\u540e\uff0c\u6d4f\u89c8\u5668\u6536\u5230\u54cd\u5e94\u540e\uff0c\u9996\u5148\u68c0\u67e5<code>Access-Control-Allow-Origin<\/code>\u662f\u5426\u5305\u542b\u672c\u57df\uff0c\u5982\u679c\u662f\uff0c\u5219\u6b64\u6b21\u8de8\u57df\u8bf7\u6c42\u6210\u529f\uff0c\u5982\u679c\u4e0d\u662f\uff0c\u5219\u8bf7\u6c42\u5931\u8d25\uff0cJavaScript\u5c06\u65e0\u6cd5\u83b7\u53d6\u5230\u54cd\u5e94\u7684\u4efb\u4f55\u6570\u636e\u3002<\/p>\n\n\n\n<p>\u7528\u4e00\u4e2a\u56fe\u6765\u8868\u793a\u5c31\u662f\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>         GET \/res\/abc.data\n         Host: sina.com\n\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2510 Origin: http:\/\/my.com                      \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502my.com\u2502\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u25b6\u2502sina.com\u2502\n\u2502      \u2502\u25c0\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2502        \u2502\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2518 HTTP\/1.1 200 OK                            \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n         Access-Control-Allow-Origin: http:\/\/my.com\n         Content-Type: text\/xml\n\n         &lt;xml data...>\n<\/code><\/pre>\n\n\n\n<p>\u5047\u8bbe\u672c\u57df\u662f<code>my.com<\/code>\uff0c\u5916\u57df\u662f<code>sina.com<\/code>\uff0c\u53ea\u8981\u54cd\u5e94\u5934<code>Access-Control-Allow-Origin<\/code>\u4e3a<code>http:\/\/my.com<\/code>\uff0c\u6216\u8005\u662f<code>*<\/code>\uff0c\u672c\u6b21\u8bf7\u6c42\u5c31\u53ef\u4ee5\u6210\u529f\u3002<\/p>\n\n\n\n<p>\u53ef\u89c1\uff0c\u8de8\u57df\u80fd\u5426\u6210\u529f\uff0c\u53d6\u51b3\u4e8e\u5bf9\u65b9\u670d\u52a1\u5668\u662f\u5426\u613f\u610f\u7ed9\u4f60\u8bbe\u7f6e\u4e00\u4e2a\u6b63\u786e\u7684<code>Access-Control-Allow-Origin<\/code>\uff0c\u51b3\u5b9a\u6743\u59cb\u7ec8\u5728\u5bf9\u65b9\u624b\u4e2d\u3002<\/p>\n\n\n\n<p>\u4e0a\u9762\u8fd9\u79cd\u8de8\u57df\u8bf7\u6c42\uff0c\u79f0\u4e4b\u4e3a\u201c\u7b80\u5355\u8bf7\u6c42\u201d\u3002\u7b80\u5355\u8bf7\u6c42\u5305\u62ecGET\u3001HEAD\u548cPOST\uff08POST\u7684Content-Type\u7c7b\u578b \u4ec5\u9650<code>application\/x-www-form-urlencoded<\/code>\u3001<code>multipart\/form-data<\/code>\u548c<code>text\/plain<\/code>\uff09\uff0c\u5e76\u4e14\u4e0d\u80fd\u51fa\u73b0\u4efb\u4f55\u81ea\u5b9a\u4e49\u5934\uff08\u4f8b\u5982\uff0c<code>X-Custom: 12345<\/code>\uff09\uff0c\u901a\u5e38\u80fd\u6ee1\u8db390%\u7684\u9700\u6c42\u3002<\/p>\n\n\n\n<p>\u65e0\u8bba\u4f60\u662f\u5426\u9700\u8981\u7528JavaScript\u901a\u8fc7CORS\u8de8\u57df\u8bf7\u6c42\u8d44\u6e90\uff0c\u4f60\u90fd\u8981\u4e86\u89e3CORS\u7684\u539f\u7406\u3002\u6700\u65b0\u7684\u6d4f\u89c8\u5668\u5168\u9762\u652f\u6301HTML5\u3002\u5728\u5f15\u7528\u5916\u57df\u8d44\u6e90\u65f6\uff0c\u9664\u4e86JavaScript\u548cCSS\u5916\uff0c\u90fd\u8981\u9a8c\u8bc1CORS\u3002\u4f8b\u5982\uff0c\u5f53\u4f60\u5f15\u7528\u4e86\u67d0\u4e2a\u7b2c\u4e09\u65b9CDN\u4e0a\u7684\u5b57\u4f53\u6587\u4ef6\u65f6\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* CSS *\/\n@font-face {\n  font-family: 'FontAwesome';\n  src: url('http:\/\/cdn.com\/fonts\/fontawesome.ttf') format('truetype');\n}\n<\/code><\/pre>\n\n\n\n<p>\u5982\u679c\u8be5CDN\u670d\u52a1\u5546\u672a\u6b63\u786e\u8bbe\u7f6e<code>Access-Control-Allow-Origin<\/code>\uff0c\u90a3\u4e48\u6d4f\u89c8\u5668\u65e0\u6cd5\u52a0\u8f7d\u5b57\u4f53\u8d44\u6e90\u3002<\/p>\n\n\n\n<p>\u5bf9\u4e8ePUT\u3001DELETE\u4ee5\u53ca\u5176\u4ed6\u7c7b\u578b\u5982<code>application\/json<\/code>\u7684POST\u8bf7\u6c42\uff0c\u5728\u53d1\u9001AJAX\u8bf7\u6c42\u4e4b\u524d\uff0c\u6d4f\u89c8\u5668\u4f1a\u5148\u53d1\u9001\u4e00\u4e2a<code>OPTIONS<\/code>\u8bf7\u6c42\uff08\u79f0\u4e3apreflighted\u8bf7\u6c42\uff09\u5230\u8fd9\u4e2aURL\u4e0a\uff0c\u8be2\u95ee\u76ee\u6807\u670d\u52a1\u5668\u662f\u5426\u63a5\u53d7\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>OPTIONS \/path\/to\/resource HTTP\/1.1\nHost: bar.com\nOrigin: http:\/\/my.com\nAccess-Control-Request-Method: POST\n<\/code><\/pre>\n\n\n\n<p>\u670d\u52a1\u5668\u5fc5\u987b\u54cd\u5e94\u5e76\u660e\u786e\u6307\u51fa\u5141\u8bb8\u7684Method\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>HTTP\/1.1 200 OK\nAccess-Control-Allow-Origin: http:\/\/my.com\nAccess-Control-Allow-Methods: POST, GET, PUT, OPTIONS\nAccess-Control-Max-Age: 86400\n<\/code><\/pre>\n\n\n\n<p>\u6d4f\u89c8\u5668\u786e\u8ba4\u670d\u52a1\u5668\u54cd\u5e94\u7684<code>Access-Control-Allow-Methods<\/code>\u5934\u786e\u5b9e\u5305\u542b\u5c06\u8981\u53d1\u9001\u7684AJAX\u8bf7\u6c42\u7684Method\uff0c\u624d\u4f1a\u7ee7\u7eed\u53d1\u9001AJAX\uff0c\u5426\u5219\uff0c\u629b\u51fa\u4e00\u4e2a\u9519\u8bef\u3002<\/p>\n\n\n\n<p>\u7531\u4e8e\u4ee5<code>POST<\/code>\u3001<code>PUT<\/code>\u65b9\u5f0f\u4f20\u9001JSON\u683c\u5f0f\u7684\u6570\u636e\u5728REST\u4e2d\u5f88\u5e38\u89c1\uff0c\u6240\u4ee5\u8981\u8de8\u57df\u6b63\u786e\u5904\u7406<code>POST<\/code>\u548c<code>PUT<\/code>\u8bf7\u6c42\uff0c\u670d\u52a1\u5668\u7aef\u5fc5\u987b\u6b63\u786e\u54cd\u5e94<code>OPTIONS<\/code>\u8bf7\u6c42\u3002<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>Promise<\/strong><\/p>\n\n\n\n<p>\u201c\u627f\u8bfa\u5c06\u6765\u4f1a\u6267\u884c\u201d\u7684\u5bf9\u8c61\u5728JavaScript\u4e2d\u79f0\u4e3aPromise\u5bf9\u8c61\u3002\u5982\u4e0btest\u662f\u4e00\u4e2a\u5224\u65ad\u51fd\u6570\uff0c\u7528\u4e00\u4e2aPromise\u5bf9\u8c61\u6765\u6267\u884c\u5b83\uff0c\u5e76\u5728\u5c06\u6765\u67d0\u4e2a\u65f6\u523b\u83b7\u5f97\u6210\u529f\u6216\u5931\u8d25\u7684\u7ed3\u679c\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let p1 = new Promise(test);\nlet p2 = p1.then(function (result) {\n    console.log('\u6210\u529f\uff1a' + result);\n});\nlet p3 = p2.catch(function (reason) {\n    console.log('\u5931\u8d25\uff1a' + reason);\n});\n<\/code><\/pre>\n\n\n\n<p>\u53d8\u91cf<code>p1<\/code>\u662f\u4e00\u4e2aPromise\u5bf9\u8c61\uff0c\u5b83\u8d1f\u8d23\u6267\u884c<code>test<\/code>\u51fd\u6570\u3002\u7531\u4e8e<code>test<\/code>\u51fd\u6570\u5728\u5185\u90e8\u662f\u5f02\u6b65\u6267\u884c\u7684\uff0c\u5f53<code>test<\/code>\u51fd\u6570\u6267\u884c\u6210\u529f\u65f6\uff0c\u6211\u4eec\u544a\u8bc9Promise\u5bf9\u8c61\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ \u5982\u679c\u6210\u529f\uff0c\u6267\u884c\u8fd9\u4e2a\u51fd\u6570\uff1a\np1.then(function (result) {\n    console.log('\u6210\u529f\uff1a' + result);\n});\n<\/code><\/pre>\n\n\n\n<p>\u5f53<code>test<\/code>\u51fd\u6570\u6267\u884c\u5931\u8d25\u65f6\uff0c\u6211\u4eec\u544a\u8bc9Promise\u5bf9\u8c61\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>p2.catch(function (reason) {\n    console.log('\u5931\u8d25\uff1a' + reason);\n});\n<\/code><\/pre>\n\n\n\n<p>Promise\u5bf9\u8c61\u53ef\u4ee5\u4e32\u8054\u8d77\u6765\uff0c\u6240\u4ee5\u4e0a\u8ff0\u4ee3\u7801\u53ef\u4ee5\u7b80\u5316\u4e3a\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>new Promise(test).then(function (result) {\n    console.log('\u6210\u529f\uff1a' + result);\n}).catch(function (reason) {\n    console.log('\u5931\u8d25\uff1a' + reason);\n});<\/code><\/pre>\n\n\n\n<p>\u4e00\u4e2aPromise\u5bf9\u8c61\u5728\u64cd\u4f5c\u7f51\u7edc\u65f6\u662f\u5f02\u6b65\u7684\uff0c\u7b49\u5230\u8fd4\u56de\u540e\u518d\u8c03\u7528\u56de\u8c03\u51fd\u6570\uff0c\u6267\u884c\u6b63\u786e\u5c31\u8c03\u7528<code>then()<\/code>\uff0c\u6267\u884c\u9519\u8bef\u5c31\u8c03\u7528<code>catch()<\/code>\uff0c\u867d\u7136\u5f02\u6b65\u5b9e\u73b0\u4e86\uff0c\u4e0d\u4f1a\u8ba9\u7528\u6237\u611f\u89c9\u5230\u9875\u9762\u201c\u5361\u4f4f\u201d\u4e86\uff0c\u4f46\u662f\u4e00\u5806<code>then()<\/code>\u3001<code>catch()<\/code>\u5199\u8d77\u6765\u9ebb\u70e6\u770b\u8d77\u6765\u4e5f\u4e71\u3002<\/p>\n\n\n\n<p>\u6709\u6ca1\u6709\u66f4\u7b80\u5355\u7684\u5199\u6cd5\uff1f<\/p>\n\n\n\n<p>\u53ef\u4ee5\u7528\u5173\u952e\u5b57<code>async<\/code>\u914d\u5408<code>await<\/code>\u8c03\u7528Promise\uff0c\u5b9e\u73b0\u5f02\u6b65\u64cd\u4f5c\uff0c\u4f46\u4ee3\u7801\u5374\u548c\u540c\u6b65\u5199\u6cd5\u7c7b\u4f3c\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>async function get(url) {\n    let resp = await fetch(url);\n    let result = await resp.json();\n    return result;\n}\n<\/code><\/pre>\n\n\n\n<p>\u4f7f\u7528<code>async function<\/code>\u53ef\u4ee5\u5b9a\u4e49\u4e00\u4e2a\u5f02\u6b65\u51fd\u6570\uff0c\u5f02\u6b65\u51fd\u6570\u548cPromise\u53ef\u4ee5\u770b\u4f5c\u662f\u7b49\u4ef7\u7684\uff0c\u5728async function\u5185\u90e8\uff0c\u7528<code>await<\/code>\u8c03\u7528\u53e6\u4e00\u4e2a\u5f02\u6b65\u51fd\u6570\uff0c\u5199\u8d77\u6765\u548c\u540c\u6b65\u4ee3\u7801\u6ca1\u5565\u533a\u522b\uff0c\u4f46\u6267\u884c\u8d77\u6765\u662f\u5f02\u6b65\u7684\u3002<\/p>\n\n\n\n<p>\u4e5f\u5c31\u662f\u8bf4\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let resp = await fetch(url);\n<\/code><\/pre>\n\n\n\n<p>\u81ea\u52a8\u5b9e\u73b0\u4e86\u5f02\u6b65\u8c03\u7528\uff0c\u5b83\u548c\u4e0b\u9762\u7684Promise\u4ee3\u7801\u7b49\u4ef7\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let promise = fetch(url);\npromise.then((resp) =&gt; {\n    \/\/ \u62ff\u5230resp\n});\n<\/code><\/pre>\n\n\n\n<p>\u5982\u679c\u6211\u4eec\u8981\u5b9e\u73b0<code>catch()<\/code>\u600e\u4e48\u529e\uff1f\u7528Promise\u7684\u5199\u6cd5\u5982\u4e0b\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let promise = fetch(url);\npromise.then((resp) =&gt; {\n    \/\/ \u62ff\u5230resp\n}).catch(e =&gt; {\n    \/\/ \u51fa\u9519\u4e86\n});\n<\/code><\/pre>\n\n\n\n<p>\u7528<code>await<\/code>\u8c03\u7528\u65f6\uff0c\u76f4\u63a5\u7528\u4f20\u7edf\u7684<code>try { ... } catch<\/code>\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>async function get(url) {\n    try {\n        let resp = await fetch(url);\n        let result = await resp.json();\n        return result;\n    } catch (e) {\n        \/\/ \u51fa\u9519\u4e86\n    }\n}\n<\/code><\/pre>\n\n\n\n<p>\u7528async\u5b9a\u4e49\u5f02\u6b65\u51fd\u6570\uff0c\u7528await\u8c03\u7528\u5f02\u6b65\u51fd\u6570\uff0c\u5199\u8d77\u6765\u548c\u540c\u6b65\u4ee3\u7801\u5dee\u4e0d\u591a\uff0c\u4f46\u53ef\u8bfb\u6027\u5927\u5927\u63d0\u9ad8<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Canvas\u662fHTML5\u65b0\u589e\u7684\u7ec4\u4ef6\uff0c\u5b83\u5c31\u50cf\u4e00\u5757\u5e55\u5e03\uff0c\u53ef\u4ee5\u7528JavaScript\u5728\u4e0a\u9762\u7ed8\u5236\u5404\u79cd\u56fe\u8868\u3001\u52a8\u753b\u7b49\u3002<\/p>\n\n\n\n<p>\u4e00\u4e2aCanvas\u5b9a\u4e49\u4e86\u4e00\u4e2a\u6307\u5b9a\u5c3a\u5bf8\u7684\u77e9\u5f62\u6846\uff0c\u5728\u8fd9\u4e2a\u8303\u56f4\u5185\u6211\u4eec\u53ef\u4ee5\u968f\u610f\u7ed8\u5236\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;canvas id=\"test-canvas\" width=\"300\" height=\"200\">&lt;\/canvas>\ngetContext('2d')\u65b9\u6cd5\u8ba9\u6211\u4eec\u62ff\u5230\u4e00\u4e2aCanvasRenderingContext2D\u5bf9\u8c61\uff0c\u6240\u6709\u7684\u7ed8\u56fe\u64cd\u4f5c\u90fd\u9700\u8981\u901a\u8fc7\u8fd9\u4e2a\u5bf9\u8c61\u5b8c\u6210\u3002\n\nlet ctx = canvas.getContext('2d');\n\u5982\u679c\u9700\u8981\u7ed8\u52363D\u600e\u4e48\u529e\uff1fHTML5\u8fd8\u6709\u4e00\u4e2aWebGL\u89c4\u8303\uff0c\u5141\u8bb8\u5728Canvas\u4e2d\u7ed8\u52363D\u56fe\u5f62\uff1a\n\ngl = canvas.getContext(\"webgl\")<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>\u524d\u7aef\u5e93jQuery<\/strong>\u7b80\u4ecb<\/p>\n\n\n\n<p>jQuery\u80fd\u5e2e\u6211\u4eec\u5e72\u8fd9\u4e9b\u4e8b\u60c5\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u6d88\u9664\u6d4f\u89c8\u5668\u5dee\u5f02\uff1a\u4f60\u4e0d\u9700\u8981\u81ea\u5df1\u5199\u5197\u957f\u7684\u4ee3\u7801\u6765\u9488\u5bf9\u4e0d\u540c\u7684\u6d4f\u89c8\u5668\u6765\u7ed1\u5b9a\u4e8b\u4ef6\uff0c\u7f16\u5199AJAX\u7b49\u4ee3\u7801\uff1b<\/li>\n\n\n\n<li>\u7b80\u6d01\u7684\u64cd\u4f5cDOM\u7684\u65b9\u6cd5\uff1a\u5199<code>$('#test')<\/code>\u80af\u5b9a\u6bd4<code>document.getElementById('test')<\/code>\u6765\u5f97\u7b80\u6d01\uff1b<\/li>\n\n\n\n<li>\u8f7b\u677e\u5b9e\u73b0\u52a8\u753b\u3001\u4fee\u6539CSS\u7b49\u5404\u79cd\u64cd\u4f5c\u3002<\/li>\n<\/ul>\n\n\n\n<p>\u53ea\u9700\u8981\u5728\u9875\u9762\u7684<code>&lt;head><\/code>\u5f15\u5165jQuery\u6587\u4ef6\u5373\u53ef\u5c31\u53ef\u4f7f\u7528  &lt;script src=&#8221;https:\/\/code.jquery.com\/jquery-3.7.1.min.js&#8221;&gt;&lt;\/script&gt;<\/p>\n\n\n\n<p><code>$<\/code>\u662f\u8457\u540d\u7684jQuery\u7b26\u53f7\u3002\u5b9e\u9645\u4e0a\uff0cjQuery\u628a\u6240\u6709\u529f\u80fd\u5168\u90e8\u5c01\u88c5\u5728\u4e00\u4e2a\u5168\u5c40\u53d8\u91cf<code>jQuery<\/code>\u4e2d\uff0c<\/p>\n\n\n\n<p>\u5982\u679c\u67d0\u4e2aDOM\u8282\u70b9\u6709<code>id<\/code>\u5c5e\u6027\uff0c\u5229\u7528jQuery\u67e5\u627e\u5982\u4e0b\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ \u67e5\u627e&lt;div id=\"abc\"&gt;:\nlet div = $('#abc');\n<\/code><\/pre>\n\n\n\n<p><em>\u6ce8\u610f<\/em>\uff0c<code>#abc<\/code>\u4ee5<code>#<\/code>\u5f00\u5934\u3002\u8fd4\u56de\u7684\u5bf9\u8c61\u662fjQuery\u5bf9\u8c61\u3002<\/p>\n\n\n\n<p>\u4ec0\u4e48\u662fjQuery\u5bf9\u8c61\uff1fjQuery\u5bf9\u8c61\u7c7b\u4f3c\u6570\u7ec4\uff0c\u5b83\u7684\u6bcf\u4e2a\u5143\u7d20\u90fd\u662f\u4e00\u4e2a\u5f15\u7528\u4e86DOM\u8282\u70b9\u7684\u5bf9\u8c61\u3002<\/p>\n\n\n\n<p>\u4ee5\u4e0a\u9762\u7684\u67e5\u627e\u4e3a\u4f8b\uff0c\u5982\u679c<code>id<\/code>\u4e3a<code>abc<\/code>\u7684<code>&lt;div&gt;<\/code>\u5b58\u5728\uff0c\u8fd4\u56de\u7684jQuery\u5bf9\u8c61\u5982\u4e0b\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#91;&lt;div id=\"abc\"&gt;...&lt;\/div&gt;]<\/code><\/pre>\n\n\n\n<p>\u6309tag\u67e5\u627e\u53ea\u9700\u8981\u5199\u4e0atag\u540d\u79f0\u5c31\u53ef\u4ee5\u4e86\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let ps = $('p'); \/\/ \u8fd4\u56de\u6240\u6709&lt;p>\u8282\u70b9\nps.length; \/\/ \u6570\u4e00\u6570\u9875\u9762\u6709\u591a\u5c11\u4e2a&lt;p>\u8282\u70b9\n\u6309class\u67e5\u627e\u6ce8\u610f\u5728class\u540d\u79f0\u524d\u52a0\u4e00\u4e2a.\uff1a\n\nlet a = $('.red'); \/\/ \u6240\u6709\u8282\u70b9\u5305\u542b`class=\"red\"`\u90fd\u5c06\u8fd4\u56de\n\/\/ \u4f8b\u5982:\n\/\/ &lt;div class=\"red\">...&lt;\/div>\n\/\/ &lt;p class=\"green red\">...&lt;\/p>\n\u901a\u5e38\u5f88\u591a\u8282\u70b9\u6709\u591a\u4e2aclass\uff0c\u6211\u4eec\u53ef\u4ee5\u67e5\u627e\u540c\u65f6\u5305\u542bred\u548cgreen\u7684\u8282\u70b9\uff1a\n\nlet a = $('.red.green'); \/\/ \u6ce8\u610f\u6ca1\u6709\u7a7a\u683c\uff01\n\/\/ \u7b26\u5408\u6761\u4ef6\u7684\u8282\u70b9\uff1a\n\/\/ &lt;div class=\"red green\">...&lt;\/div>\n\/\/ &lt;div class=\"blue green red\">...&lt;\/div><\/code><\/pre>\n\n\n\n<p>\u5f88\u591a\u65f6\u5019\u6309\u5c5e\u6027\u67e5\u627e\u4f1a\u975e\u5e38\u65b9\u4fbf\uff0c\u6bd4\u5982\u5728\u4e00\u4e2a\u8868\u5355\u4e2d\u6309\u5c5e\u6027\u6765\u67e5\u627e\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let email = $('&#91;name=email]'); \/\/ \u627e\u51fa&lt;??? name=\"email\"&gt;\nlet passwordInput = $('&#91;type=password]'); \/\/ \u627e\u51fa&lt;??? type=\"password\"&gt;\nlet a = $('&#91;items=\"A B\"]'); \/\/ \u627e\u51fa&lt;??? items=\"A B\"&gt;<\/code><\/pre>\n\n\n\n<p>\u6dfb\u52a0\u65b0\u7684DOM\u8282\u70b9\uff0c\u9664\u4e86\u901a\u8fc7jQuery\u7684<code>html()<\/code>\u8fd9\u79cd\u66b4\u529b\u65b9\u6cd5\u5916\uff0c\u8fd8\u53ef\u4ee5\u7528<code>append()<\/code>\u65b9\u6cd5\uff0c\u4f8b\u5982\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div id=\"test-div\"&gt;\n    &lt;ul&gt;\n        &lt;li&gt;&lt;span&gt;JavaScript&lt;\/span&gt;&lt;\/li&gt;\n        &lt;li&gt;&lt;span&gt;Python&lt;\/span&gt;&lt;\/li&gt;\n        &lt;li&gt;&lt;span&gt;Swift&lt;\/span&gt;&lt;\/li&gt;\n    &lt;\/ul&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<p>\u5982\u4f55\u5411\u5217\u8868\u65b0\u589e\u4e00\u4e2a\u8bed\u8a00\uff1f\u9996\u5148\u8981\u62ff\u5230<code>&lt;ul&gt;<\/code>\u8282\u70b9\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let ul = $('#test-div&gt;ul');\n<\/code><\/pre>\n\n\n\n<p>\u7136\u540e\uff0c\u8c03\u7528<code>append()<\/code>\u4f20\u5165HTML\u7247\u6bb5\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>ul.append('&lt;li&gt;&lt;span&gt;Haskell&lt;\/span&gt;&lt;\/li&gt;');<\/code><\/pre>\n\n\n\n<p>\u6d4f\u89c8\u5668\u5728\u63a5\u6536\u5230\u7528\u6237\u7684\u9f20\u6807\u6216\u952e\u76d8\u8f93\u5165\u540e\uff0c\u4f1a\u81ea\u52a8\u5728\u5bf9\u5e94\u7684DOM\u8282\u70b9\u4e0a\u89e6\u53d1\u76f8\u5e94\u7684\u4e8b\u4ef6\u3002\u5982\u679c\u8be5\u8282\u70b9\u5df2\u7ecf\u7ed1\u5b9a\u4e86\u5bf9\u5e94\u7684JavaScript\u5904\u7406\u51fd\u6570\uff0c\u8be5\u51fd\u6570\u5c31\u4f1a\u81ea\u52a8\u8c03\u7528\u3002<\/p>\n\n\n\n<p>\u7531\u4e8e\u4e0d\u540c\u7684\u6d4f\u89c8\u5668\u7ed1\u5b9a\u4e8b\u4ef6\u7684\u4ee3\u7801\u90fd\u4e0d\u592a\u4e00\u6837\uff0c\u6240\u4ee5\u7528jQuery\u6765\u5199\u4ee3\u7801\uff0c\u5c31\u5c4f\u853d\u4e86\u4e0d\u540c\u6d4f\u89c8\u5668\u7684\u5dee\u5f02\uff0c\u6211\u4eec\u603b\u662f\u7f16\u5199\u76f8\u540c\u7684\u4ee3\u7801\u3002<\/p>\n\n\n\n<p>\u4e3e\u4e2a\u4f8b\u5b50\uff0c\u5047\u8bbe\u8981\u5728\u7528\u6237\u70b9\u51fb\u4e86\u8d85\u94fe\u63a5\u65f6\u5f39\u51fa\u63d0\u793a\u6846\uff0c\u6211\u4eec\u7528jQuery\u8fd9\u6837\u7ed1\u5b9a\u4e00\u4e2a<code>click<\/code>\u4e8b\u4ef6<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ \u83b7\u53d6\u8d85\u94fe\u63a5\u7684jQuery\u5bf9\u8c61:\nlet a = $('#test-link');\na.click(function () {\n    alert('Hello!');\n});\n<\/code><\/pre>\n\n\n\n<p>jQuery\u80fd\u591f\u7ed1\u5b9a\u7684\u4e8b\u4ef6\u4e3b\u8981\u5305\u62ec\uff1a<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u9f20\u6807\u4e8b\u4ef6<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>click: \u9f20\u6807\u5355\u51fb\u65f6\u89e6\u53d1\uff1b<\/li>\n\n\n\n<li>dblclick\uff1a\u9f20\u6807\u53cc\u51fb\u65f6\u89e6\u53d1\uff1b<\/li>\n\n\n\n<li>mouseenter\uff1a\u9f20\u6807\u8fdb\u5165\u65f6\u89e6\u53d1\uff1b<\/li>\n\n\n\n<li>mouseleave\uff1a\u9f20\u6807\u79fb\u51fa\u65f6\u89e6\u53d1\uff1b<\/li>\n\n\n\n<li>mousemove\uff1a\u9f20\u6807\u5728DOM\u5185\u90e8\u79fb\u52a8\u65f6\u89e6\u53d1\uff1b<\/li>\n\n\n\n<li>hover\uff1a\u9f20\u6807\u8fdb\u5165\u548c\u9000\u51fa\u65f6\u89e6\u53d1\u4e24\u4e2a\u51fd\u6570\uff0c\u76f8\u5f53\u4e8emouseenter\u52a0\u4e0amouseleave\u3002<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\u952e\u76d8\u4e8b\u4ef6<\/h3>\n\n\n\n<p>\u952e\u76d8\u4e8b\u4ef6\u4ec5\u4f5c\u7528\u5728\u5f53\u524d\u7126\u70b9\u7684DOM\u4e0a\uff0c\u901a\u5e38\u662f<code>&lt;input&gt;<\/code>\u548c<code>&lt;textarea&gt;<\/code>\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>keydown\uff1a\u952e\u76d8\u6309\u4e0b\u65f6\u89e6\u53d1\uff1b<\/li>\n\n\n\n<li>keyup\uff1a\u952e\u76d8\u677e\u5f00\u65f6\u89e6\u53d1\uff1b<\/li>\n\n\n\n<li>keypress\uff1a\u6309\u4e00\u6b21\u952e\u540e\u89e6\u53d1\u3002<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\u5176\u4ed6\u4e8b\u4ef6<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>focus\uff1a\u5f53DOM\u83b7\u5f97\u7126\u70b9\u65f6\u89e6\u53d1\uff1b<\/li>\n\n\n\n<li>blur\uff1a\u5f53DOM\u5931\u53bb\u7126\u70b9\u65f6\u89e6\u53d1\uff1b<\/li>\n\n\n\n<li>change\uff1a\u5f53<code>&lt;input><\/code>\u3001<code>&lt;select><\/code>\u6216<code>&lt;textarea><\/code>\u7684\u5185\u5bb9\u6539\u53d8\u65f6\u89e6\u53d1\uff1b<\/li>\n\n\n\n<li>submit\uff1a\u5f53<code>&lt;form><\/code>\u63d0\u4ea4\u65f6\u89e6\u53d1\uff1b<\/li>\n\n\n\n<li>ready\uff1a\u5f53\u9875\u9762\u88ab\u8f7d\u5165\u5e76\u4e14DOM\u6811\u5b8c\u6210\u521d\u59cb\u5316\u540e\u89e6\u53d1\u3002<\/li>\n<\/ul>\n\n\n\n<p>\u5176\u4e2d\uff0c<code>ready<\/code>\u4ec5\u4f5c\u7528\u4e8e<code>document<\/code>\u5bf9\u8c61\u3002\u7531\u4e8e<code>ready<\/code>\u4e8b\u4ef6\u5728DOM\u5b8c\u6210\u521d\u59cb\u5316\u540e\u89e6\u53d1\uff0c\u4e14\u53ea\u89e6\u53d1\u4e00\u6b21<\/p>\n\n\n\n<p>jQuery\u5185\u7f6e\u4e86\u51e0\u79cd\u52a8\u753b\u6837\u5f0f\uff1a<\/p>\n\n\n\n<p>\u5982\u76f4\u63a5\u4ee5\u65e0\u53c2\u6570\u5f62\u5f0f\u8c03\u7528<code>show()<\/code>\u548c<code>hide()<\/code>\uff0c\u4f1a\u663e\u793a\u548c\u9690\u85cfDOM\u5143\u7d20\u3002\u4f46\u662f\uff0c\u53ea\u8981\u4f20\u9012\u4e00\u4e2a\u65f6\u95f4\u53c2\u6570\u8fdb\u53bb\uff0c\u5c31\u53d8\u6210\u4e86\u52a8\u753b\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let div = $('#test-show-hide');\ndiv.hide(3000); \/\/ \u57283\u79d2\u949f\u5185\u9010\u6e10\u6d88\u5931<\/code><\/pre>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>https:\/\/liaoxuefeng.com\/books\/javascript\/introduction\/i [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[],"class_list":["post-2127","post","type-post","status-publish","format-standard","hentry","category-10"],"_links":{"self":[{"href":"http:\/\/blog.xtaa.cn\/index.php\/wp-json\/wp\/v2\/posts\/2127","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/blog.xtaa.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/blog.xtaa.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/blog.xtaa.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/blog.xtaa.cn\/index.php\/wp-json\/wp\/v2\/comments?post=2127"}],"version-history":[{"count":6,"href":"http:\/\/blog.xtaa.cn\/index.php\/wp-json\/wp\/v2\/posts\/2127\/revisions"}],"predecessor-version":[{"id":2133,"href":"http:\/\/blog.xtaa.cn\/index.php\/wp-json\/wp\/v2\/posts\/2127\/revisions\/2133"}],"wp:attachment":[{"href":"http:\/\/blog.xtaa.cn\/index.php\/wp-json\/wp\/v2\/media?parent=2127"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/blog.xtaa.cn\/index.php\/wp-json\/wp\/v2\/categories?post=2127"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/blog.xtaa.cn\/index.php\/wp-json\/wp\/v2\/tags?post=2127"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}