diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/zh-cn/web/javascript/reference/statements/block/index.html | |
parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip |
initial commit
Diffstat (limited to 'files/zh-cn/web/javascript/reference/statements/block/index.html')
-rw-r--r-- | files/zh-cn/web/javascript/reference/statements/block/index.html | 163 |
1 files changed, 163 insertions, 0 deletions
diff --git a/files/zh-cn/web/javascript/reference/statements/block/index.html b/files/zh-cn/web/javascript/reference/statements/block/index.html new file mode 100644 index 0000000000..4188e5a2ec --- /dev/null +++ b/files/zh-cn/web/javascript/reference/statements/block/index.html @@ -0,0 +1,163 @@ +--- +title: block +slug: Web/JavaScript/Reference/Statements/block +tags: + - JavaScript + - Reference + - Statement +translation_of: Web/JavaScript/Reference/Statements/block +--- +<div> +<div>{{jsSidebar("Statements")}}</div> +</div> + +<p><strong>块语句</strong>(或其他语言的<strong>复合语句</strong>)用于组合零个或多个语句。该块由一对大括号界定,可以是{{jsxref("Statements/label", "labelled")}}:</p> + +<h2 id="语法">语法</h2> + +<h3 id="块声明">块声明</h3> + +<pre class="syntaxbox">{ <em>StatementList </em>} +</pre> + +<h3 id="标记块声明">标记块声明</h3> + +<pre class="syntaxbox"><em>LabelIdentifier</em>: { <em>StatementList </em>} +</pre> + +<dl> + <dt><code>StatementList</code></dt> + <dd>在块语句中分组的语句。</dd> + <dt><code>LabelIdentifier</code></dt> + <dd>用于视觉识别的可选{{jsxref("Statements/label", "label")}}或{{jsxref("Statements/break", "break")}}的目标。</dd> +</dl> + +<h2 id="描述">描述</h2> + +<p>其他语言中通常将语句块称为<strong>复合语句</strong>。它允许你使用多个语句,其中 JavaScript 只需要一个语句。将语句组合成块是 JavaScript 中的常见做法。相反的做法是可以使用一个<a href="/zh-CN/docs/Web/JavaScript/Reference/Statements/Empty">空语句</a>,你不提供任何语句,虽然一个是必需的。</p> + +<h3 id="块级作用域">块级作用域</h3> + +<h4 id="在非严格模式non-strict_mode下的var_或者函数声明时">在非严格模式(non-strict mode)下的<code>var </code>或者函数声明时</h4> + +<p>通过<code>var</code>声明的变量或者非严格模式下(non-strict mode)创建的函数声明<strong>没有</strong>块级作用域。在语句块里声明的变量的作用域不仅是其所在的函数或者 script 标签内,所设置变量的影响会在超出语句块本身之外持续存在。 换句话说,这种语句块不会引入一个作用域。尽管单独的语句块是合法的语句,但在JavaScript中你不会想使用单独的语句块,因为它们不像你想象的C或Java中的语句块那样处理事物。例如:</p> + +<pre class="brush: js example-bad">var x = 1; +{ + var x = 2; +} +console.log(x); // 输出 2 +</pre> + +<p>输出结果是 2,因为块中的 <code>var x</code>语句与块前面的<code>var x</code>语句作用域相同。在 C 或 Java中,这段代码会输出 1。</p> + + + +<h4 id="使用let和_const">使用<code>let</code>和 <code>const</code></h4> + +<p>相比之下,使用 {{jsxref("Statements/let", "let")}}和{{jsxref("Statements/const", "const")}}声明的变量是<strong>有</strong>块级作用域的。</p> + +<pre class="brush: js">let x = 1; +{ + let x = 2; +} +console.log(x); // 输出 1</pre> + +<p><code>x = 2</code>仅限在定义它的块中。</p> + +<p><code>const</code>的结果也是一样的:</p> + +<pre class="brush: js">const c = 1; +{ + const c = 2; +} +console.log(c); // 输出1, 而且不会报错</pre> + +<p>注意,位于块范围之内的 <code>const c = 2</code> 并不会抛出<code>SyntaxError: Identifier 'c' has already been declared</code>这样的语法错误,因为在它自己的块中它可能是唯一一个被声明的常量。</p> + +<h5 id="使用let声明的变量在块级作用域内能强制执行更新变量,下面的两个例子对比:">使用let声明的变量在块级作用域内能强制执行更新变量,下面的两个例子对比:</h5> + +<pre class="brush: js">var a = []; +for (<strong>var</strong> i = 0; i < 10; i++) { + a[i] = function () {console.log(i);}; +} +a[0](); // 10 +a[1](); // 10 +a[6](); // 10 + +/********************/ + +var a = []; +for (<strong>let</strong> i = 0; i < 10; i++) { + a[i] = function () {console.log(i);}; +} +a[0](); // 0 +a[1](); // 1 +a[6](); // 6</pre> + +<h4 id="使用function">使用<code>function</code></h4> + +<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function">函数声明</a>同样被限制在声明他的语句块内:</p> + + + +<pre><code>foo('outside'); // TypeError: foo is not a function +{ + function foo(location) { + console.log('foo is called ' + location); + } + foo('inside'); // 正常工作并且打印 'foo is called inside' +}</code></pre> + + + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-block', 'Block statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-block', 'Block statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.1', 'Block statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-12.1', 'Block statement')}}</td> + <td>{{Spec2('ES3')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-12.1', 'Block statement')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容">浏览器兼容</h2> + +<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("javascript.statements.block")}}</p> + +<h2 id="See_also" name="See_also">相关链接</h2> + +<ul> + <li>{{jsxref("Statements/while", "while")}}</li> + <li>{{jsxref("Statements/if...else", "if...else")}}</li> + <li>{{jsxref("Statements/let", "let")}}</li> +</ul> |