语法高亮,滚动条美化,设置页面调整

This commit is contained in:
fofolee
2019-04-19 02:41:09 +08:00
parent 1e8f76c000
commit 359d29ee0b
1590 changed files with 12328 additions and 11441 deletions

View File

@@ -4,7 +4,7 @@
<div><iframe class="interactive interactive-js" frameborder="0" height="250" src="https://interactive-examples.mdn.mozilla.net/pages/js/expressions-conditionaloperators.html" width="100%"></iframe></div>
<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a class="external" href="https://github.com/mdn/interactive-examples" rel="noopener">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
<h2 id="语法">语法</h2>
<pre class="syntaxbox"><em>condition</em> ? <em>expr1</em> : <em>expr2</em> </pre>
<pre><code class="language-javascript"><em>condition</em> ? <em>expr1</em> : <em>expr2</em> </code></pre>
<h3 id="参数">参数</h3>
<dl>
<dt><code>condition (or conditions)</code></dt>
@@ -17,35 +17,35 @@
<h2 id="描述">描述</h2>
<p>如果<code>condition</code><code>true</code>,运算符就会返回<font face="Consolas, Liberation Mono, Courier, monospace"> <code>expr1</code> 的值;否则,</font> 就会返回 <code>expr2 </code>的值。</p>
<p>一个简单的例子,测试你是否达到了美国法定的饮酒年龄。</p>
<pre class="brush: js">var age = 26;
<pre><code class="language-javascript">var age = 26;
var canDrinkAlcohol = (age &gt; 21) ? "True, over 21" : "False, under 21";
console.log(canDrinkAlcohol); // "True, over 21"
</pre>
</code></pre>
<p>另一个例子,根据<code>isMember</code>变量的值显示不同的信息,可以使用下面的表达式:</p>
<pre class="brush: js">"The fee is " + (isMember ? "$2.00" : "$10.00")
</pre>
<pre><code class="language-javascript">"The fee is " + (isMember ? "$2.00" : "$10.00")
</code></pre>
<p>同样也可以把三元运算符的值赋值给一个变量:</p>
<pre class="brush: js">var elvisLives = Math.PI &gt; 4 ? "Yep" : "Nope";</pre>
<pre><code class="language-javascript">var elvisLives = Math.PI &gt; 4 ? "Yep" : "Nope";</code></pre>
<p>多个三元操作符也是可能的(注:条件运算符是右结合):</p>
<pre class="brush: js">var firstCheck = false,
<pre><code class="language-javascript">var firstCheck = false,
secondCheck = false,
access = firstCheck ? "Access denied" : secondCheck ? "Access denied" : "Access granted";
console.log( access ); // logs "Access granted"</pre>
console.log( access ); // logs "Access granted"</code></pre>
<p>你也可以像使用多重条件的IF表达式一样使用三元运算符</p>
<pre class="brush: js">var condition1 = true,
<pre><code class="language-javascript">var condition1 = true,
condition2 = false,
access = condition1 ? (condition2 ? "true true": "true false") : (condition2 ? "false true" : "false false");
console.log(access); // 输出 "true false"</pre>
console.log(access); // 输出 "true false"</code></pre>
<p>注: 在这里三元表达式的括号不是必须的,删去后不影响执行顺序。在这里加入它们是为了更好的看出结果是如何得出的。</p>
<p>还可以把三元操作符用在等式的左边:</p>
<pre>var stop = false, age = 16;
age &gt; 18 ? location.assign("continue.html") : stop = true;
stop; // true</pre>
stop; // true</code></pre>
<p>你也可以在 <code>expr1</code><code>expr2</code>里使用一个或多个的操作(用逗号分隔):</p>
<pre class="brush: js">var stop = false, age = 23;
<pre><code class="language-javascript">var stop = false, age = 23;
age &gt; 18 ? (
alert("OK, you can go."),
@@ -54,9 +54,9 @@ age &gt; 18 ? (
stop = true,
alert("Sorry, you are much too young!")
);
</pre>
</code></pre>
<p>同样也可以在赋值过程中做多个操作。 如下所示,会将<strong>括号里的最后一个逗号分隔的值</strong>赋给变量<code>url</code></p>
<pre class="brush: js">var age = 16;
<pre><code class="language-javascript">var age = 16;
var url = age &gt; 18 ? (
alert("OK, you can go."),
@@ -70,26 +70,26 @@ var url = age &gt; 18 ? (
"stop.html" // 如果 !(age &gt; 18) 为真,则这个值赋值给 url
);
location.assign(url); // "stop.html"</pre>
location.assign(url); // "stop.html"</code></pre>
<h3 id="返回三元语句">返回三元语句</h3>
<p>三元运算符能够很好地用在函数返回值的表达式中,此时不需要 <code>if/else</code> 语句。</p>
<pre class="brush: js">var func1 = function( .. ) {
<pre><code class="language-javascript">var func1 = function( .. ) {
if (condition1) { return value1 }
else { return value2 }
}
var func2 = function( .. ) {
return condition1 ? value1 : value2
}</pre>
}</code></pre>
<p>一种使用三元表达式作为返回值,测试是否达到美国法定饮酒年龄函数的常用方法</p>
<pre class="brush: js">function canDrinkAlcohol(age) {
<pre><code class="language-javascript">function canDrinkAlcohol(age) {
return (age &gt; 21) ? "True, over 21" : "False, under 21";
}
var output = canDrinkAlcohol(26);
console.log(output); // "True, over 21"</pre>
console.log(output); // "True, over 21"</code></pre>
<p>一个发现能恰当替换掉 <code>if/else</code> 表达式的好办法是,观察是否存在 <code>return</code> 关键字被使用多次, 并且每次使用都是在 if 块的内部。</p>
<p>通过将三元表达式使用额外的空格,拆分写在多行,使得三元运算符能干净利落地替代一个很长的<code>if/else</code> 表达式。在语法上,它使用了一种更明快的方式来表达了相同的逻辑:</p>
<pre class="brush: js">var func1 = function( .. ) {
<pre><code class="language-javascript">var func1 = function( .. ) {
if (condition1) { return value1 }
else if (condition2) { return value2 }
else if (condition3) { return value3 }
@@ -101,7 +101,7 @@ var func2 = function( .. ) {
: condition2 ? value2
: condition3 ? value3
: value4
}</pre>
}</code></pre>
<p> </p>
<h2 id="规范">规范</h2>
<table class="standard-table">