1.JSフロー制御文
(1)、if判定
if文は成立した条件に基づいて対応するコードを実行します。
if...else文とは、指定した条件が真の場合にifが実行され、条件が真ではない場合にelseの後のコードが実行されます。
if...else ネストされたステートメントは、複数の条件下で実行する対応するコード ブロックの 1 つを選択します。
if ステートメントはあらゆる種類のデータに適しており、複雑な論理関係を処理できます。
(2)、switch文
選択肢が多い場合、if...elseよりもswitchの方が使いやすいです。単純な構造で複数の選択肢に特化して設計されていますが、扱えるのは複数の列挙型論理のみです。関係。このステートメントは、個人の好みに応じて if を使用して完成させることもできます。
switch ステートメントの仕組み: まず式 (通常は変数) を作成し、その式の値を switch ステートメント内の各 case の値と比較し、一致する場合は case の後のステートメントが実行されます。すべてのケースに一致する どの値も一致しない場合、default 以降のステートメントが実行されます。 switch ステートメントを使用する場合は、各 case ステートメントの後に Break を使用してループを抜け出し、次の case が実行されないようにする必要があります。
var d = new Date().getDay(); //如果今天不是周末，则提示默认消息
switch (d){
case 6:
alert("今天是星期六");
break;
case 0:
alert("今天是星期天");
break;
default:
alert("同志尚未努力，革命仍需成功。");
}ログイン後にコピー
switch ステートメントは比較するときに等価ではなく合同を使用するため、文字列と数値を一致させる場合は特別な注意を払う必要があります。
//使用switch语句将字符串与数字做比较
//返回：不等于，执行default语句
var n = '5'; switch(n){
case 5:
alert('等于，执行case语句');
break;
default:
alert('不等于，执行default语句'); }
//使用if语句将字符串与数字做比较
//返回：等于
var n = '2'; if(n == 2){
alert('等于');
}else{
alert('不等于');
}
//将case的值改为字符串再做比较
//返回：等于，执行case语句
var n = '2'; switch(n){
case '2':
alert('等于，执行case语句');
break;
default:
alert('不等于，执行default语句');
}
//使用全等再做比较
//返回：不等于
var n = '2';
if(n===2){
alert('等于'); }else{
alert('不等于'); }ログイン後にコピー
(3)、forループ
多くのことは一度だけでなく、繰り返し行う必要があります。たとえば、文書を一度に 1 部ずつ 10 部印刷し、印刷が完了するまでこの操作を繰り返します。このようなことは、for ループを使用して行われます。ループとは、毎回異なる値を使用してコードを繰り返し実行することです。
以下は for ループの小さな応用です。異なる金種の 1.2.3... 10 人民元があると仮定し、合計で何人民元があるかを計算します。
var sum = 0; for(var rmb=1; rmb<=10; rmb++){
sum += rmb; } alert('一共有: ' + sum + '元'); //返回：一共有：55元ログイン後にコピー
(4)、whileループ
whileループは、条件がtrueに指定されている限り、条件が満たされなくなるまでループを実行できます。
//使用while循环输出5个数字
var i = 0; //第一部分：初始化，给一个初始的值，让i从0循环
while(i < 5){ //第二部分：条件。成立继续循环，不成立退出
alert(i); //第三部分：语句
i++; //第四部分：自增
} //while循环使用比较复杂，使用for循环更简洁。
//for(初始化;条件;自增){语句}ログイン後にコピー
(5), do...while ループ
do...while ループの原理構造は基本的に while ループと同じですが、ループは条件が満たされているかどうかを確認する前にコード ブロックを 1 回実行します。 true。条件が true の場合、ループが繰り返されます。このループには少し問題があります。最初にコードを実行してから条件を判断するため、条件が不適切な場合は無限ループに入り、ブラウザがクラッシュします。
/*
语法： do{ 执行语句 } while(条件); */
//操作有风险，尝试需谨慎
//若将循环条件改为：num <= 6 会导致浏览器崩溃
var num = 6; do{ document.write("数字:" + num + "<br>"); num -= 1; } while(num > 0);ログイン後にコピー
(6)、JSエラー処理文
例外処理にはtry...catch文を使用します。 try ステートメントは、コード ブロック内のエラーを検出し、処理する必要があるコード セグメントを示すために使用されます。 catch ステートメントは、try ステートメントでスローされたエラーを処理するために使用されます。 try ステートメントが最初に実行され、操作中にエラーが発生した場合、try ステートメント内のコードはスキップされ、catch 内のステートメントの実行が実行されます。エラーが発生しない場合、catch 内のステートメントは実行されません。一般に、try...catch ステートメントは、予見可能なエラーに対処するために使用できます。
try{
document.write("开始执行try语句" + '<br>');
document.write("还没抛出错误" + '<br>');
alert(x); //抛出错误
alert('123'); //没被执行
} catch(e){
document.write("捕捉到错误，开始执行catch语句" + '<br>');
document.write("错误类型: " + e.name + '<br>');
document.write("错误信息: " + e.message);
alert('x'); }ログイン後にコピー
throw ステートメントを使用してカスタム エラーを作成できます。正式な用語は、「例外の作成またはスロー」です。構文: 「例外オブジェクト」をスローします。
throw ステートメントを try...catch ステートメントと一緒に使用すると、プログラム フローを制御し、正確なエラー メッセージを生成できます。
//输入0到10之间的数字，如果输入错误，会抛出一个错误，catch会捕捉到错误，并显示自定义的错误消息。
<body>
<input id="txt" type="text"/>
<span id="demo" style="font-weight:bold;"></span><br>
<input type="button" value="检测输入" onclick="error()">
<script> function error(){
try{
var x = document.getElementById("txt").value;
var y = document.getElementById("demo");
y.style.color = 'red';
if(x == '') throw '输入不能为空';
if(isNaN(x)) throw '请输入数字';
var num = [7,8,9];
for(var i=0; i<num.length; i++){
if(x == num[i]){
throw '该数字已经存在';
}
}
if(x == 0){
throw '输入不能为0';
}
else if(x > 10){
throw '数字太大了';
}
else if(x <= 3){
throw '数字太小了';
}
else{
y.style.color = 'green';
y.innerHTML = 'OK';
}
}
catch(e){
y.innerHTML = '错误提示：' + e + '！';
}
}
</script>
</body>ログイン後にコピー
(7), ループから抜け出す
break ステートメントは、現在のループから飛び出し、直接ループを抜けて次のコードを実行する、つまり、それ以上の判断を行わずにループ全体を終了するために使用されます。 continue ステートメントは、このループから抜け出して次のループを実行し続けるだけです。つまり、このループを終了し、次のループを実行するかどうかを決定します。 return は関数本体の実行を終了し、値を返すことができます。
for(var i=0; i<6; i++){ if(i == 3) break; //当i=3时跳出整个循环，不再执行循环
alert(i); //返回：0,1,2
}
for(var i=0; i<6; i++){ if(i == 3) continue; //当i=3时跳出本次循环，继续执行后面循环
alert(i); 返回：0,1,2,4,5
}ログイン後にコピー
2. JSON
JSON (JavaScript Object Notation): JS オブジェクトの表記法。 JSON は、XML と同様、主にデータ情報の保存と交換に使用されますが、XML と比較すると、JSON は読み取りと書き込みが容易で、解析が容易です。
JSON 構文は JS オブジェクト表現構文のサブセットです。データはカンマで区切られたキーと値のペアであり、波括弧はオブジェクトを保持し、角括弧は配列を保持します。
JSON構文の記述形式: "name" : "value"、"name" : "value"
名前と値は二重引用符で囲まれコロンで区切られ、各データはカンマで区切られます。これは、JS の name = "value" とは対照的に、理解しやすいです。
JSON の値は次のとおりです: 数値 (整数と 10 進数を含む)、文字列 (二重引用符で囲まれた)、ブール値 (true または false)、オブジェクト (中括弧で囲まれた)、配列 (角括弧で囲まれた) 、またはnull。
JSONはプレーンテキストであり、通常、サーバーがWebページにデータを転送し、サーバーからJSONデータを取得し、Webページでデータを使用するために使用されます。
(1)、JSONオブジェクト
var json = {"a": 12, "b": "abc", "c":[1,2,3]}; //返回第一项的值：
alert(json.a);
//修改第二项的值
alert(json.b = "xyz");
//返回第三项数组中第一项的值
alert(json.c[0]);ログイン後にコピー
(2)、JSONと配列
類似点:
項目の値は添字を通して返せます。ループを使用できます。 JSON には長さ属性がないため、for ループを使用できませんが、for...in ループを使用して for ループと同じアクションを完了できます。
配列はfor...inループでも使えますが、forループを使った方が良いです。 for...in ループは、配列の要素ではなく、オブジェクトのプロパティを反復処理します。
の違い:
JSON 的下标是字符串，数组的下标为数字。JSON 没有 length 属性，数组有该属性。
var arr = [12,5,7]; var json = {"a":12,"b":5,"c":7};
alert(arr[0]); //返回：12
alert(json["a"]); //返回：12
alert(arr.length); //返回：3
alert(json.length); //返回：undefined
//数组for循环
for(var i=0; i<arr.length; i++){ alert('第' + (i+1) + '个数据是：' + arr[i]); } alert(typeof i); //返回：number
//数组使用for...in循环
for(var i in arr){ alert('第' + (i+1) + '个数据是：' + arr[i]); } alert(typeof i); //返回：string
//JSON使用for...in循环
for(var i in json){ alert('第' + i + '个数据是：' + json[i]); }ログイン後にコピー
(3)、JSON 数组对象
<body>
<p>
姓 名: <span id="fname"></span><br>
性 别: <span id="gender"></span><br>
员工号: <span id="num"></span><br>
修改姓名: <span id="lname"></span><br>
</p>
<script> var staff = [ {"name" : "小明", "sex" : "男", "id" : 1},
{"name" : "小白", "sex" : "男", "id" : 2},
{"name" : "小红", "sex" : "女", "id" : 3} ];
var x = document.getElementById("fname");
var y = document.getElementById("gender");
var z = document.getElementById("num");
var n = document.getElementById("lname"); //访问对象数组中第一项的值：
x.innerHTML = staff[0].name; y.innerHTML = staff[0].sex; z.innerHTML = staff[0].id;
//修改数据：
n.innerHTML = staff[1].name = '大白'; </script>
</body>ログイン後にコピー
(4)、JSON 字符串对象
var str = '{"name":"小明", "sex":"男", "age":21}';
var toObj = JSON.parse(str); //JSON字符串转换为JSON对象alert(toObj.name);
alert(typeof toObj); //返回：object
var json = {"name":"小红", "sex":"女", "age":18};
var toStr = JSON.stringify(json); //JSON对象转换为JSON字符串
alert(toStr); //返回字符串alert(json.age);
alert(typeof toStr); //返回：stringログイン後にコピー
(5)、JSON 应用
当需要表示一组数据时，JSON 不但能够提高可读性，而且还可以减少复杂性。JSON 能够表示多个值，每个值又可包含多个值，例如要表示一个用户列表信息，就可以将所有信息存储在一个变量中，分成多项，每项中又可分成多个条目，每个条目中记录一个用户的信息。
var userName = {
"first": [{
"name": "路飞",
"sex": "男",
"tel": "aaa"
}, {
"name": "索罗",
"sex": "男",
"tel": "bbb"
}, {
"name": "娜美",
"sex": "女",
"tel": "ccc" }],
"second": [{
"name": "卡卡西",
"sex": "男",
"tel": "ddd"
}, {
"name": "鸣人",
"sex": "男",
"tel": "fff"
}, {
"name": "佐助",
"sex": "男",
"tel": "eee"
}, {
"name": "皱田",
"sex": "女",
"tel": "sss"
}],
"third": [{
"name": "小明",
"sex": "男",
"tel": "xxx"
},{
"name": "小红",
"sex": "女",
"tel": "zzz"
}]
};
//获取用户的信息：
alert(userName.first[1].name + ' \n ' + userName.first[1].sex + '\n '+ userName.first[1].tel);
alert(userName.second[3].name + ' \n ' + userName.second[3].sex +' \n '+ userName.second[3].tel);
alert(userName.third[0].name + ' \n ' + userName.third[0].sex + ' \n '+ userName.third[0].tel);ログイン後にコピー
说到 JSON，就不得不提一下 JSONP。JSONP (JSON with Padding) 是 JSON 的一种 "使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。可用于解决主流浏览器的跨域数据访问的问题。为什么我们从不同的域（网站）访问数据需要一个特殊的技术 (JSONP) 呢？这是因为同源策略。同源策略，它是由 Netscape 提出的一个著名的安全策略，现在所有支持 JavaScript 的浏览器都会使用这个策略。由于该策略，一般来说位于 server1 的 demo.com 的网页无法与不是 server1 的 demo.com 的网页的服务器沟通，而 HTML 的
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
