1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
|
---
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>
<p>{{Compat("javascript.statements.block")}}</p>
<h2 id="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>
|
