mirror of
https://github.com/fofolee/uTools-Manuals.git
synced 2025-12-17 00:04:34 +08:00
语法高亮,滚动条美化,设置页面调整
This commit is contained in:
@@ -3,7 +3,7 @@
|
||||
<div> </div>
|
||||
<div><strong>let</strong> 语句声明一个块级作用域的本地变量,并且可选的将其初始化为一个值。</div>
|
||||
<h2 id="语法">语法</h2>
|
||||
<pre class="syntaxbox">let var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN]];</pre>
|
||||
<pre><code class="language-javascript">let var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN]];</code></pre>
|
||||
<h3 id="参数">参数</h3>
|
||||
<dl>
|
||||
<dt><code>var1</code>, <code>var2</code>, …, <code>varN</code></dt>
|
||||
@@ -16,7 +16,7 @@
|
||||
<p>点<a class="external" href="https://stackoverflow.com/questions/37916940/js-why-let-have-this-name" rel="noopener">这里</a>可以明白我们为什么选取“<strong>let</strong>”这个名字。</p>
|
||||
<h3 id="作用域规则">作用域规则</h3>
|
||||
<p><code><strong>let</strong></code>声明的变量只在其声明的块或子块中可用,这一点,与<code><strong>var</strong></code>相似。二者之间最主要的区别在于<code><strong>var</strong></code>声明的变量的作用域是整个封闭函数。</p>
|
||||
<pre class="brush: js">function varTest() {
|
||||
<pre><code class="language-javascript">function varTest() {
|
||||
var x = 1;
|
||||
if (true) {
|
||||
var x = 2; // 同样的变量!
|
||||
@@ -32,10 +32,10 @@ function letTest() {
|
||||
console.log(x); // 2
|
||||
}
|
||||
console.log(x); // 1
|
||||
}</pre>
|
||||
}</code></pre>
|
||||
<h3 id="简化内部函数代码">简化内部函数代码</h3>
|
||||
<p>当用到内部函数的时候,<code><strong>let</strong></code>会让你的代码更加简单。</p>
|
||||
<pre class="brush:js">var list = document.getElementById("list");
|
||||
<pre><code class="language-js">var list = document.getElementById("list");
|
||||
|
||||
for (let i = 1; i <= 5; i++) {
|
||||
var item = document.createElement("LI");
|
||||
@@ -47,17 +47,17 @@ for (let i = 1; i <= 5; i++) {
|
||||
};
|
||||
list.appendChild(item);
|
||||
}
|
||||
</pre>
|
||||
</code></pre>
|
||||
<p>上面这段代码的意图是创建5个li,点击不同的li能够打印出当前li的序号。如果不用<strong><code>let</code></strong>,而改用<code><strong>var</strong></code>的话,将总是打印出 <code>Item 5 is Clicked</code>,因为 j 是函数级变量,5个内部函数都指向了同一个 j ,而 j 最后一次赋值是5。用了<strong><code>let</code></strong>后,j 变成块级域(也就是花括号中的块,每进入一次花括号就生成了一个块级域),所以 5 个内部函数指向了不同的 j 。</p>
|
||||
<p>在程序或者函数的顶层,<code><strong>let</strong></code>并不会像<strong><code>var</code></strong>一样在全局对象上创造一个属性,比如</p>
|
||||
<pre class="brush:js">var x = 'global';
|
||||
<pre><code class="language-js">var x = 'global';
|
||||
let y = 'global';
|
||||
console.log(this.x); // "global"
|
||||
console.log(this.y); // undefined
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h3 id="模仿私有接口">模仿私有接口</h3>
|
||||
<p>在处理<a href="https://developer.mozilla.org/en-US/docs/Glossary/Constructor">构造函数</a>的时候,可以通过<code><strong>let</strong></code>声明而不是闭包来创建私有接口。</p>
|
||||
<pre class="brush: js">var SomeConstructor;
|
||||
<pre><code class="language-javascript">var SomeConstructor;
|
||||
|
||||
{
|
||||
let privateScope = {};
|
||||
@@ -82,23 +82,23 @@ var myInstance = new SomeConstructor();
|
||||
myInstance.showPublic();
|
||||
myInstance.showPrivate();
|
||||
|
||||
console.log(privateScope.hiddenProperty); // error</pre>
|
||||
console.log(privateScope.hiddenProperty); // error</code></pre>
|
||||
<h3 id="let_的暂存死区与错误">let 的暂存死区与错误</h3>
|
||||
<p>在(<s>同一个函数或</s>)同一个作用域中用let重复定义一个变量将引起 <code><a class="new" href="/zh-CN/docs/JavaScript/Reference/Global_Objects/TypeError" rel="nofollow" title="TypeError">TypeError</a></code>.</p>
|
||||
<pre class="brush: js">if (x) {
|
||||
<pre><code class="language-javascript">if (x) {
|
||||
let foo;
|
||||
let foo; // TypeError thrown.
|
||||
}
|
||||
</pre>
|
||||
</code></pre>
|
||||
<p>在 ECMAScript 2015 中,<strong>let </strong>绑定不受变量提升的约束,这意味着 <strong>let</strong> <strong> </strong>声明<strong>不会</strong>被提升到当前执行上下文的顶部。在块中的变量初始化之前,引用它将会导致 <a href="Reference/Global_Objects/ReferenceError">ReferenceError</a>(而使用 var 声明变量则恰恰相反,该变量的值是 undefined )。这个变量处于从块开始到 <strong>let</strong> 初始化处理的”暂存死区“之中。</p>
|
||||
<pre class="brush: js">function do_something() {
|
||||
<pre><code class="language-javascript">function do_something() {
|
||||
console.log(bar); // undefined
|
||||
console.log(foo); // ReferenceError: foo is not defined
|
||||
var bar = 1;
|
||||
let foo = 2;
|
||||
}</pre>
|
||||
}</code></pre>
|
||||
<p>在 <a class="new" href="/zh-CN/docs/JavaScript/Reference/Statements/switch" rel="nofollow" title="switch"><code>switch</code></a> 声明中你可能会遇到这样的错误,因为一个switch只有一个作用块。</p>
|
||||
<pre class="brush: js">switch (x) {
|
||||
<pre><code class="language-javascript">switch (x) {
|
||||
case 0:
|
||||
let foo;
|
||||
break;
|
||||
@@ -106,9 +106,9 @@ console.log(privateScope.hiddenProperty); // error</pre>
|
||||
case 1:
|
||||
let foo; // SyntaxError for redeclaration.
|
||||
break;
|
||||
}</pre>
|
||||
}</code></pre>
|
||||
<p>但是,需要指出,在case语句后面可以创建新的作用域块,形成新的词法环境,这样就不会产生上述重复声明(<code>redeclaration</code>)的语法错误。</p>
|
||||
<pre class="brush: js">let x = 1;
|
||||
<pre><code class="language-javascript">let x = 1;
|
||||
|
||||
switch(x) {
|
||||
case 0: {
|
||||
@@ -119,38 +119,38 @@ switch(x) {
|
||||
let foo;
|
||||
break;
|
||||
}
|
||||
}</pre>
|
||||
}</code></pre>
|
||||
<p><code><strong>let</strong></code>后跟一个函数传递的参数时将导致循环内部报错。</p>
|
||||
<pre class="brush: js">function go(n){
|
||||
<pre><code class="language-javascript">function go(n){
|
||||
for (let n of n.a) { // ReferenceError: n is not defined
|
||||
console.log(n);
|
||||
}
|
||||
}
|
||||
|
||||
go({a:[1,2,3]});
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h3 id="循环定义中的let作用域"><font face="Consolas, Liberation Mono, Courier, monospace">循环定义中的let作用域</font></h3>
|
||||
<p>循环体中是可以引用在for声明时用let定义的变量,尽管let不是出现在大括号之间.(注:该方法在 火狐 45.4.0 ,Centos7 下,报错 <span class="hasBreakSwitch objectBox objectBox-errorMessage"><span class="errorMessage">ReferenceError: can't access lexical declaration `i' before initialization</span></span>)</p>
|
||||
<pre class="brush:js">var i = 0;
|
||||
<pre><code class="language-js">var i = 0;
|
||||
for (let i = i; i < 10; i++) {
|
||||
console.log(i);
|
||||
}
|
||||
</pre>
|
||||
</code></pre>
|
||||
<div class="note">
|
||||
<p>注:以上 let 声明的 i 将会变成 undefined;chrome 版本50.0.2661.102 (64-bit);推荐以下写法:</p>
|
||||
</div>
|
||||
<pre>var i = 0;
|
||||
for (let l = i; l < 10; l++) {
|
||||
console.log(l);
|
||||
}</pre>
|
||||
}</code></pre>
|
||||
<h4 id="域作用规则">域作用规则</h4>
|
||||
<pre class="eval">for (let <var>expr1</var>; <var>expr2</var>; <var>expr3</var>) <var>statement</var>
|
||||
</pre>
|
||||
</code></pre>
|
||||
<p>在这个例子中,<var>expr2</var>, <var>expr3</var>, 和 <var>statement</var> 都是包含在一个隐含域块中,其中也包含了 expr1.</p>
|
||||
<h2 id="例子">例子</h2>
|
||||
<h3 id="let_对比_var"><code>let</code> 对比 <code>var</code></h3>
|
||||
<p>let的作用域是块,而var的作用域是函数</p>
|
||||
<pre class="brush: js">var a = 5;
|
||||
<pre><code class="language-javascript">var a = 5;
|
||||
var b = 10;
|
||||
|
||||
if (a === 5) {
|
||||
@@ -162,14 +162,14 @@ if (a === 5) {
|
||||
}
|
||||
|
||||
console.log(a); // 5
|
||||
console.log(b); // 1</pre>
|
||||
console.log(b); // 1</code></pre>
|
||||
<h3 id="let_在循环中"><code>let</code> 在循环中</h3>
|
||||
<p>可以用 let 来代替 var ,在 for 定义块中使用块级变量.</p>
|
||||
<pre class="brush: js">for (let i = 0; i < 10; i++) {
|
||||
<pre><code class="language-javascript">for (let i = 0; i < 10; i++) {
|
||||
console.log(i); // 0, 1, 2, 3, 4 ... 9
|
||||
}
|
||||
|
||||
console.log(i); // i is not defined</pre>
|
||||
console.log(i); // i is not defined</code></pre>
|
||||
<h2 id="非标准的_let_扩展">非标准的 let 扩展</h2>
|
||||
<h3 id="let块(let_block)"><code>let块<strong>(</strong></code><strong><code>let</code> block)</strong></h3>
|
||||
<div class="warning">
|
||||
@@ -177,11 +177,11 @@ console.log(i); // i is not defined</pre>
|
||||
</div>
|
||||
<p><strong><code>let块</code></strong>提供了一种在块的范围内获取变量的值,而不会影响块外面名字相同的变量的值的方法。</p>
|
||||
<h4 id="语法_2">语法</h4>
|
||||
<pre class="syntaxbox">let (var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN]]) block;</pre>
|
||||
<pre><code class="language-javascript">let (var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN]]) block;</code></pre>
|
||||
<h4 id="描述_2">描述</h4>
|
||||
<p>let 语句块为变量提供了局部作用域。它的作用是在单一代码块的词法范围内绑定零个或多个变量; 此外与普通语句块没有任何区别。需要特别注意的是, 在 <code>let </code>语句块内使用 var 声明的变量,它的作用域与在 let 语句块之外声明没有区别;这样的变量仍然具有函数作用域。在使用 <code>let</code> 语句块时,必须使用花括号,否则会导致语法错误。</p>
|
||||
<h4 id="例子_2">例子</h4>
|
||||
<pre class="brush:js">var x = 5;
|
||||
<pre><code class="language-js">var x = 5;
|
||||
var y = 0;
|
||||
|
||||
let (x = x + 10, y = 12) {
|
||||
@@ -189,7 +189,7 @@ let (x = x + 10, y = 12) {
|
||||
}
|
||||
|
||||
console.log(x + y); // 5
|
||||
</pre>
|
||||
</code></pre>
|
||||
<p>let 代码块的规则与 JavaScript 中其他类型的代码块相同。允许在块内通过 let 关键字声明局部变量。</p>
|
||||
<h4 id="作用域规则_2">作用域规则</h4>
|
||||
<p>使用 <code>let</code> 语句块绑定的变量,其作用域是 <code>let</code> 语句块本身,与任何其内部语句块的作用域一样,除非在这些内部语句块内又定义了同名的变量。</p>
|
||||
@@ -199,16 +199,16 @@ console.log(x + y); // 5
|
||||
</div>
|
||||
<p><strong><code>let</code>表达式</strong> 可以将变量的作用域仅作用于一条语句。</p>
|
||||
<h4 id="语法_3">语法</h4>
|
||||
<pre class="syntaxbox">let (var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN]]) expression;</pre>
|
||||
<pre><code class="language-javascript">let (var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN]]) expression;</code></pre>
|
||||
<h4 id="例子_3">例子</h4>
|
||||
<p>你可以在一条语句的范围中使用 <code>let</code> 关键字来设立变量:</p>
|
||||
<pre class="brush: js">var a = 5;
|
||||
<pre><code class="language-javascript">var a = 5;
|
||||
let(a = 6) console.log(a); // 6
|
||||
console.log(a); // 5</pre>
|
||||
console.log(a); // 5</code></pre>
|
||||
<h4 id="作用域规则_3">作用域规则</h4>
|
||||
<p>给定一个 <code>let</code> 表达式:</p>
|
||||
<pre class="eval">let (<var>decls</var>) <var>expr</var>
|
||||
</pre>
|
||||
</code></pre>
|
||||
<p>这里隐式创建了一个包围 <var>expr</var> 的语句块。</p>
|
||||
<h2 id="规范">规范</h2>
|
||||
<table class="standard-table">
|
||||
|
||||
Reference in New Issue
Block a user