JavaScript流程控制与数组实战练习案例
<div id="navCategory"><h5 class="catalogue">目录</h5><ul class="first_class_ul"><li><a href="#_label0">运算符</a></li><ul class="second_class_ul"><li><a href="#_lab2_0_0">算术运算符</a></li><li><a href="#_lab2_0_1">赋值运算符 & 复合赋值运算符</a></li><li><a href="#_lab2_0_2">自增自减运算符</a></li><li><a href="#_lab2_0_3">比较运算符</a></li></ul><li><a href="#_label1">逻辑运算符</a></li><ul class="second_class_ul"></ul><li><a href="#_label2">位运算</a></li><ul class="second_class_ul"></ul><li><a href="#_label3">移位运算</a></li><ul class="second_class_ul"></ul><li><a href="#_label4">条件语句</a></li><ul class="second_class_ul"><li><a href="#_lab2_4_4">if 语句</a></li><li><a href="#_lab2_4_5">三元表达式</a></li><li><a href="#_lab2_4_6">switch</a></li></ul><li><a href="#_label5">循环语句</a></li><ul class="second_class_ul"><li><a href="#_lab2_5_7">while 循环</a></li><li><a href="#_lab2_5_8">continue</a></li><li><a href="#_lab2_5_9">break</a></li><li><a href="#_lab2_5_10">for 循环</a></li></ul><li><a href="#_label6">数组</a></li><ul class="second_class_ul"><li><a href="#_lab2_6_11">创建数组</a></li><li><a href="#_lab2_6_12">获取数组元素</a></li><li><a href="#_lab2_6_13">新增数组元素</a></li><li><a href="#_lab2_6_14">删除数组中的元素</a></li></ul><li><a href="#_label7">总结 </a></li><ul class="second_class_ul"></ul></ul></div><p class="maodian"><a name="_label0"></a></p><h2>运算符</h2><p>JavaScript 中的运算符和 Java 用法基本相同，此处不做详细介绍了。</p>
<p class="maodian"><a name="_lab2_0_0"></a></p><h3>算术运算符</h3>
<ul><li><code>+</code></li><li><code>-</code></li><li><code>*</code></li><li><code>/</code></li><li><code>%</code></li></ul>
<p class="maodian"><a name="_lab2_0_1"></a></p><h3>赋值运算符 & 复合赋值运算符</h3>
<ul><li><code>=</code></li><li><code>+=</code></li><li><code>-=</code></li><li><code>*=</code></li><li><code>/=</code></li><li><code>%=</code></li></ul>
<p class="maodian"><a name="_lab2_0_2"></a></p><h3>自增自减运算符</h3>
<ul><li><code>++</code>: 自增 1</li><li><code>--</code>: 自减 1</li></ul>
<p class="maodian"><a name="_lab2_0_3"></a></p><h3>比较运算符</h3>
<ul><li><code><</code></li><li><code>></code></li><li><code><=</code></li><li><code>>=</code></li><li><code>==</code>：比较相等（会进行隐式类型转换）</li><li><code>!=</code></li><li><code>===</code>：比较相等（不会进行隐式类型转换）</li><li><code>!==</code></li></ul>
<p class="maodian"><a name="_label1"></a></p><h2>逻辑运算符</h2>
<p>用于计算多个 boolean 表达式的值。</p>
<ul><li><code>&&</code>：与（一假则假）</li><li><code>||</code>：或（一真则真）</li><li><code>!</code>：非</li></ul>
<p class="maodian"><a name="_label2"></a></p><h2>位运算</h2>
<ul><li><code>&</code>：按位与</li><li><code>|</code>：按位或</li><li><code>~</code>：按位取反</li><li><code>^</code>：按位异或</li></ul>
<p class="maodian"><a name="_label3"></a></p><h2>移位运算</h2>
<ul><li><code><<</code>：左移</li><li><code>>></code>：有符号右移（算术右移）</li><li><code>>>></code>：无符号右移（逻辑右移）</li></ul>
<p class="maodian"><a name="_label4"></a></p><h2>条件语句</h2>
<p class="maodian"><a name="_lab2_4_4"></a></p><h3>if 语句</h3>
<p><strong>基本语法格式</strong>条件表达式为 true，则执行 if 的<code>{}</code>中的代码</p>
<div class="jb51code"><pre class="brush:js;">// 形式1
if (条件) {
语句
}
// 形式2
if (条件1) {
语句1
} else {
语句2
}
// 形式3
if (条件1) {
语句1
} else if (条件2) {
语句2
} else if ...... {
语句...
} else {
语句N
}
</pre></div>
<p><strong>练习案例</strong></p>
<ul><li><strong>代码示例 1: 判定一个数字是奇数还是偶数</strong></li></ul>
<div class="jb51code"><pre class="brush:js;">var num = 10;
if (num % 2 == 0) {
console.log("num 是偶数");
} else {
console.log("num 是奇数");
}
</pre></div>
<p>注意！不能写成<code>num % 2 == 1</code>就是奇数，负的奇数 %2 结果可能是 - 1。</p>
<ul><li><strong>代码示例 2: 判定一个数字是正数还是负数</strong></li></ul>
<div class="jb51code"><pre class="brush:js;">var num = 10;
if (num > 0) {
console.log("num 是正数");
} else if (num < 0) {
console.log("num 是负数");
} else {
console.log("num 是 0");
}
</pre></div>
<ul><li><strong>代码示例 3: 判定某一年份是否是闰年</strong></li></ul>
<div class="jb51code"><pre class="brush:js;">var year = 2000;
if (year % 100 == 0) {
// 判定世纪闰年
if (year % 400 == 0) {
console.log("是闰年");
} else {
console.log("不是闰年");
}
} else {
// 普通闰年
if (year % 4 == 0) {
console.log("是闰年");
} else {
console.log("不是闰年");
}
}
</pre></div>
<p class="maodian"><a name="_lab2_4_5"></a></p><h3>三元表达式</h3>
<p>是<code>if else</code>的简写写法。</p>
<blockquote><p>条件 ? 表达式1 : 表达式2</p></blockquote>
<p>条件为真，返回表达式 1 的值；条件为假，返回表达式 2 的值。注意，三元表达式的优先级是比较低的。</p>
<p class="maodian"><a name="_lab2_4_6"></a></p><h3>switch</h3>
<p>更适合多分支的场景。</p>
<div class="jb51code"><pre class="brush:js;">switch (表达式) {
case 值1:
语句1;
break;
case 值2:
语句2;
break;
default:
语句N;
}
</pre></div>
<p><strong>用户输入一个整数，提示今天是星期几</strong></p>
<div class="jb51code"><pre class="brush:js;">var day = prompt("请输入今天星期几:");
switch (parseInt(day)) {
case 1:
console.log("星期一");
break;
case 2:
console.log("星期二");
break;
case 3:
console.log("星期三");
break;
case 4:
console.log("星期四");
break;
case 5:
console.log("星期五");
break;
case 6:
console.log("星期六");
break;
case 7:
console.log("星期日");
break;
default:
console.log("输入有误");
}
</pre></div>
<p class="maodian"><a name="_label5"></a></p><h2>循环语句</h2>
<p>重复执行某些语句</p>
<p class="maodian"><a name="_lab2_5_7"></a></p><h3>while 循环</h3>
<blockquote><p>while (条件) {<br /> 循环体;<br />}</p></blockquote>
<p><strong>执行过程</strong>:</p>
<ul><li>先执行条件语句</li><li>条件为 true，执行循环体代码</li><li>条件为 false，直接结束循环</li></ul>
<p><strong>代码示例 1: 打印 1-10</strong></p>
<div class="jb51code"><pre class="brush:js;">var num = 1;
while (num <= 10) {
console.log(num);
num++;
}
</pre></div>
<p><strong>代码示例 2: 计算 5 的阶乘</strong></p>
<div class="jb51code"><pre class="brush:js;">var result = 1;
var i = 1;
while (i <= 5) {
result *= i;
i++;
}
console.log(result)
</pre></div>
<p class="maodian"><a name="_lab2_5_8"></a></p><h3>continue</h3>
<p>结束这次循环（比如：吃五个李子，发现第三个李子有虫子，扔掉这个，继续吃下一个）</p>
<div class="jb51code"><pre class="brush:js;">var i = 1;
while (i <= 5) {
if (i == 3) {
i++;
continue;
}
console.log("我在吃第" + i + "个李子");
i++;
}
</pre></div>
<p>输出结果:</p>
<div class="jb51code"><pre class="brush:js;">我在吃第1个李子
我在吃第2个李子
我在吃第4个李子
我在吃第5个李子
</pre></div>
<p><strong>代码示例：找到 100-200 中所有 3 的倍数</strong></p>
<div class="jb51code"><pre class="brush:js;">var num = 100;
while (num <= 200) {
if (num % 3 == 0) {
num++; // 这里的++不要忘记！否则会死循环
continue;
}
console.log("找到了3的倍数，为:" + num);
num++;
}
</pre></div>
<p class="maodian"><a name="_lab2_5_9"></a></p><h3>break</h3>
<p>结束整个循环（比如：吃五个李子，发现第三个有虫子，剩下的也不吃了）</p>
<div class="jb51code"><pre class="brush:js;">var i = 1;
while (i <= 5) {
if (i == 3) {
break;
}
console.log("我在吃第" + i + "个李子");
i++;
}
</pre></div>
<p>输出结果</p>
<div class="jb51code"><pre class="brush:js;">我在吃第1个李子
我在吃第2个李子
</pre></div>
<p><strong>代码示例：找到 100-200 中第一个 3 的倍数</strong></p>
<p>执行结果:</p>
<div class="jb51code"><pre class="brush:js;">找到了3的倍数，为:102
</pre></div>
<p class="maodian"><a name="_lab2_5_10"></a></p><h3>for 循环</h3>
<div class="jb51code"><pre class="brush:js;">for (表达式1; 表达式2; 表达式3) {
循环体
}
</pre></div>
<ul><li>表达式 1: 用于初始化循环变量</li><li>表达式 2: 循环条件</li><li>表达式 3: 更新循环变量</li></ul>
<p><strong>执行过程</strong>:</p>
<ol><li>先执行表达式 1，初始化循环变量</li><li>再执行表达式 2，判定循环条件</li><li>如果条件为 false，结束循环</li><li>如果条件为 true，则执行循环体代码</li><li>执行表达式 3，更新循环变量</li></ol>
<p><strong>代码示例：计算 5 的阶乘</strong></p>
<div class="jb51code"><pre class="brush:js;">var result = 0;
for (var i = 1; i <= 5; i++) {
result *= i;
}
console.log("result = " + result);</pre></div>
<p class="maodian"><a name="_label6"></a></p><h2>数组</h2>
<p class="maodian"><a name="_lab2_6_11"></a></p><h3>创建数组</h3>
<ul><li><strong>使用 new 关键字创建</strong></li></ul>
<div class="jb51code"><pre class="brush:js;">// Array的A要大写
var arr = new Array();
</pre></div>
<ul><li><strong>使用字面量方式创建（常用）</strong></li></ul>
<div class="jb51code"><pre class="brush:js;">var arr = [];
var arr2 = ; // 数组中保存的内容称为“元素”
</pre></div>
<p>注意: JS 的数组不要求元素是相同类型。这一点和 C、C++、Java 等静态类型语言差别很大，但是 Python、PHP 等动态类型语言也是如此。</p>
<p class="maodian"><a name="_lab2_6_12"></a></p><h3>获取数组元素</h3>
<p>使用下标的方式访问数组元素（从 0 开始）</p>
<div class="jb51code"><pre class="brush:js;">var arr = ["小狐佩奇", "小猪乔治", "小羊苏西"];
console.log(arr);
console.log(arr);
console.log(arr);
console.log(arr);
arr = "小狐凯迪";
console.log(arr);
</pre></div>
<p>如果下标超出范围读取元素，则结果为 undefined:</p>
<div class="jb51code"><pre class="brush:js;">console.log(arr);// undefined
console.log(arr[-1]); // undefined
</pre></div>
<p>注意：不要给数组名直接赋值，此时数组中的所有元素都没了。（相当于本来 arr 是一个数组，重新赋值后变成字符串了）</p>
<div class="jb51code"><pre class="brush:js;">var arr = ["小狐佩奇", "小猪乔治", "小羊苏西"];
arr = "小狐凯迪";
</pre></div>
<p class="maodian"><a name="_lab2_6_13"></a></p><h3>新增数组元素</h3>
<ol><li><strong>通过修改 length 新增</strong>相当于在末尾新增元素，新增的元素默认值为 undefined</li></ol>
<div class="jb51code"><pre class="brush:js;">var arr = ;
arr.length = 6;
console.log(arr);
console.log(arr, arr);
</pre></div>
<p>输出结果:</p>
<div class="jb51code"><pre class="brush:js;">(6)
undefined undefined
</pre></div>
<ol><li><strong>通过下标新增</strong>如果下标超出范围赋值元素，则会给指定位置插入新元素</li></ol>
<div class="jb51code"><pre class="brush:js;">var arr = [];
arr = 10;
console.log(arr)
</pre></div>
<p>此时这个数组的 和 都是 undefined，输出结果:</p>
<div class="jb51code"><pre class="brush:js;">Array(3)
2: 10
length: 3
__proto__: Array(0)
</pre></div>
<ol><li><strong>使用 push 进行追加元素</strong><strong>代码示例：给定一个数组，把数组中的奇数放到一个 newArr 中</strong></li></ol>
<div class="jb51code"><pre class="brush:js;">var arr = ;
var newArr = [];
for (var i = 0; i < arr.length; i++) {
if (arr % 2 != 0) {
newArr.push(arr);
}
}
console.log(newArr);</pre></div>
<p class="maodian"><a name="_lab2_6_14"></a></p><h3>删除数组中的元素</h3>
<p>使用 splice 方法删除元素</p>
<div class="jb51code"><pre class="brush:js;">var arr = ;
// 第一个参数表示从下标为 2 的位置开始删除，第二个参数表示要删除的元素个数是 1 个
arr.splice(2, 1);
console.log(arr);
// 结果
</pre></div>
<p>目前咱们已经用到了数组中的一些属性和方法:</p>
<ul><li><code>arr.length</code>: length 使用的时候不带括号，此时 length 就是一个普通的变量（称为成员变量，也叫属性）</li><li><code>arr.push()</code>、<code>arr.splice()</code>: 使用的时候带括号，并且可以传参数，此时是一个函数（也叫做方法）</li></ul>
<p class="maodian"><a name="_label7"></a></p><h2>总结 </h2>
頁:
[1]