JavaScript的使用误区和表单验证:json，json.parse()方法和json.stringify()
发布时间：2020-09-21编辑：dyy阅读（1922）
赋值运算符应用错误：
在 程序中如果你在 if 条件语句中使用赋值运算符的等号 (=) 将会产生一个错误结果, 正确的方法是使用比较运算符的两个等号 (==)，if 条件语句返回 false (是我们预期的)因为 x 不等于 10 var x = 0;//变量赋值 document.getElementById("demo").innerHTML = Boolean(x == 10); //这里的x是等于10所有结果为false；
var x = 0; document.getElementById("demo").innerHTML = Boolean(x = 10); 语句返回 true 因为条件语句执行为 x 赋值 10，10 为 true
var x = 0; document.getElementById("demo").innerHTML = Boolean(x = 0); 语句返回 false因为条件语句执行为 x 赋值 0，0 为 false //赋值语句返回变量的值
比较运算符的常见错误：var x = 10; var y = "10"
document.getElementById("demo").innerHTML = Boolean(x == y);
运行结果为true，y是一个字符串x是一个数组并不会相等
”===“为恒等计算符，同时检查表达式的值与类型，var x = 10;var y = "10";
if (x === y)返回false
在 switch 语句中出现：switch(x) { case 10: alert("Hello");}
switch(x) {case "10": alert("Hello");}//前者会执行alert弹窗，后者由于类型不一直并不会执行alert弹窗；
加法与连接：加法是两个数字相加，连接是两个字符串连接，加法和连接都使用 + 运算符 var x = 10 + 5; //15 var x = 10 + "5"; //105；
字符串的分行：可以在字符串中使用断行语句 
字符串中直接使用回车换行是会报错的
如果需要的话可以使用“\”
在定义数组元素的时候后面不能添加逗号，在不同的浏览器可能得到不同的结果
var colors=[5,6,7];
定义对象，最后不能添加逗号：
websites = {site:"菜鸟教程", url:"www.runoob.com", like:460}
Undefined 不是 Null，null 用于对象, undefined 用于变量，属性和方法，对象只有被定义才有可能为 null，否则为 undefined需要先使用 typeof 来检测对象是否已定义：
if (typeof myObj !== "undefined" && myObj !== null)
表单验证：HTML 表单验证可以通过js来完成
判断表单字段(fname)值是否存在，如果不存在，就阻止表单提交：
必填（或必选）项目
检查用户是否已填写表单中的必填（或必选）项目。假如必填或必选项为空，那么警告框会弹出，并且函数的返回值为 false，否则函数的返回值则为 true
function validateForm() { var x = document.forms["myForm"]["fname"].value;
if (x == null || x == "") { alert("需要输入名字。");
return false;
}
}
再写一个表单：
<form name="myForm" action="demo_form.php"
on\="return validateForm()" method="post">
名字: <input type="text" name="fname">
<input type="submit" value="提交">
</form>
对输入数字的验证：
<h1> 验证输入</h1>
<p>请输入 1 到 10 之间的数字：</p>
<input id="numb">
<button type="button" on\="myFunction()">提交</button>
<p id="demo"></p>
<script>
function myFunction() {
var x, text;
// 获取 id="numb" 的值
x = document.getElementById("numb").value;
// 如果输入的值 x 不是数字或者小于 1 或者大于 10，则提示错误 Not a Number or less than one or greater than 10
if (isNaN(x) || x < 1 || x > 10) {
text = "输入错误";
} else {
text = "输入正确";
}
document.getElementById("demo").innerHTML = text;
}
</script>
<form action="demo_form.php" method="post">
<input type="text" name="fname" required="required">
<input type="submit" value="提交">
</form>
点击提交按钮，如果输入框是空的，浏览器会提示错误信息，点击提交将会跳转页面
数据验证：数据验证用于确保用户输入的数据是有效的，验证必需字段是否有输入，
用户是否输入了合法的数据，在数字字段是否输入了文本? 服务端数据验证是在数据提交到服务器上后再验证，而客户端数据验证是在数据发送到服务器前，在浏览器上完成验证
json
JSON 是用于存储和传输数据的格式，通常用于服务端向网页传递数据，是一种轻量级的数据交换格式，独立的语言
JSON 使用 语法，但是 JSON 格式仅仅是一个文本可以被任何编程语言读取及作为数据格式传递
使用 JSON 语法定义了 employees 对象：定义三个人（对象）记录的数组
{"employees":[
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]}
Json格式转化后为对象，在语法上与创建 对象代码是相同的， 程序可以将 JSON 数据转换为 对象
json语法规则:数据为 键/值 对,数据由逗号分隔,大括号保存对象,方括号保存数组json一个数据一个名称对应一个值 "name":"Runoob"
json对象:保存在大括号中，对象可以保存多个 键/值 对：访问对象值使用（.）
var myObj, x;
myObj ={"name":"Runoob","alexa":1000,"site":null};
x = myObj.name
document.getElementById("demo").innerHTML = x; x的值为：Runoob
还可以使用中括号（[ ]）l来访问对象的值 x = myObj["name"]；
json循环对象:使用for-in来循环对象属性
<script>
var myObj = { "name":"runoob", "alexa":10000, "site":null };
for (x in myObj) {
document.getElementById("demo").innerHTML += x + "<br>";
}
</script>
在 for-in 循环对象的属性时，使用中括号（[]）来访问属性的值：
document.getElementById("demo").innerHTML += myObj[x] + "<br>";
嵌套json对象，json对象中可以包含另外一个json对象
<script>
myObj = {
"name":"runoob",
"alexa":10000,
"sites": {
"site1":"www.runoob.com",
"site2":"m.runoob.com",
"site3":"c.runoob.com"
}
}
document.getElementById("demo").innerHTML += myObj.sites.site1 + "<br>";或者document.getElementById("demo").innerHTML +=myObj.sites["site1"];
json修改值：可以使用点号（.）来修改json对象的值和使用中括号（[]）来修改json值
<script>
var myObj,j, x = ""; //定义变量
myObj = { //创建ison嵌套对象
"name":"runoob",
"alexa":10000,
"sites": {
"site1":"www.runoob.com",
"site2":"m.runoob.com",
"site3":"c.runoob.com"
}
}
myObj.sites.site2 = "www.google.com" //使用号(.)来修改 "site2"的值
或者myObj.sites["site2"] ="www.google.com";使用括号[]来修改"site2"值
for (j in myObj.sites) { //用for-in 循环对象，使用中括号（[]）来访问属性的值
x += myObj.sites[j] + "<br>"; }
document.getElementById("demo").innerHTML = x;
</script>
json删除对象属性：使用 delete 关键字来删除 JSON 对象的属性或者使用中括号([])来删除 JSON 对象的属性：
<script>
myObj = {
var myObj, i, x = "";
"name":"runoob",
"alexa":10000,
"sites": {
"site1":"www.runoob.com",
"site2":"m.runoob.com",
"site3":"c.runoob.com"
}
}
delete myObj.sites.site1; //用delete关键字来删除"site1"
或者delete myObj.sites["site1"] //用中括号（[]）删除"sitel"
for (i in myObj.sites) {
x += myObj.sites[i] + "<br>";
}
document.getElementById("demo").innerHTML = x;
</script>
运行结果为：
json数组
数组作为json对象，数组在中括号中书写，JSON 中数组值必须是合法的 JSON 数据类型（字符串, 数字, 对象, 数组, 布尔值或 null），数组值可以是以上的 JSON 数据类型，也可以是 的表达式，包括函数，日期，及undefined
json对象中的数组：对象属性的值可以是一个数组
<script>
var myObj, x;
myObj = {
"name":"网站",
"num":3,
"sites":[ "Google", "Runoob", "Taobao" ] //定义数组
}
x = myObj.sites[0]; //使用索引值来访问数组
document.getElementById("demo").innerHTML = x;
</script>
循环数组使用for-in来访问数组：或者使用for循环
<script>
var myObj, i, x = "";
myObj = {
"name":"网站",
"num":3,
"sites":[ "Google", "Runoob", "Taobao" ]
};
for (i in myObj.sites) { //使用for循环for (i = 0; i < myObj.sites.length; i++){
x += myObj.sites[i] + "<br>";
}
document.getElementById("demo").innerHTML = x;
</script>
嵌套json对象中的数组，数组可以包含另外一个数组，或者另外一个 JSON 对象
<script>
var myObj, i, j, x = "";
myObj = {
"name":"网站",
"num":3,
"sites": [ //数组嵌套
{ "name":"Google", "info":[ "Android", "Google 搜索", "Google 翻译" ] },
{ "name":"Runoob", "info":[ "菜鸟教程", "菜鸟工具", "菜鸟微信" ] },
{ "name":"Taobao", "info":[ "淘宝", "网购" ] }
]
}
for (i in myObj.sites) { //使用 for-in 来循环访问每个数组的name
x += "<h2>" + myObj.sites[i].name + "</h2>";
for (j in myObj.sites[i].info) {
x += myObj.sites[i].info[j] + "<br>";//使用 for-in 来循环访问每个数组info
}
}
document.getElementById("demo").innerHTML = x;
</script>
修改数组值，使用索引值来修改数组值：
<script>
var myObj, i, x = "";
myObj = {
"name":"网站",
"num":3,
"sites":[ "Google", "Runoob", "Taobao" ]
};
myObj.sites[2] = "Github"; //修改数组sites中Runoob的值为Github
for (i in myObj.sites) {
x += myObj.sites[i] + "<br>";
}
document.getElementById("demo").innerHTML = x;</script>
使用 delete 关键字来删除数组元素：
<script>
var myObj, i, x = "";
myObj = {
"name":"网站",
"num":3,
"sites":[ "Google", "Runoob", "Taobao" ]
};
delete myObj.sites[1]; //使用 delete 关键字来删除数组sites中的第一个元素
for (i in myObj.sites) {
x += myObj.sites[i] + "<br>";
}
document.getElementById("demo").innerHTML = x;
</script>
json.parse(),JSON 通常用于与服务端交换数据,在接收服务器数据时一般是字符串,使用 JSON.parse() 方法将数据转换为 对象
语法：JSON.parse（text[,reviver]）
text:必需， 一个有效的 JSON 字符串，reviver: 可选，一个转换结果的函数，将为对象的每个成员调用此函数
例如我们从服务器接收了以下数据：{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }可以使用JSON.parse() 方法处理以上数据，将其转换为 对象：
var obj = JSON.parse('{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }');
在网页上使用json数据
<script>
var obj = JSON.parse('{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }');
document.getElementById("demo").innerHTML = obj.name + "：" + obj.site;
</script>
运行结果为：runoob：www.runoob.com
JSON.stringify() 方法将 对象转换为字符串:
语法：JSON.stringify(value[,replacer[,space]])
value:必需， 要转换的 值（通常为对象或数组）
replacer:用于转换结果的函数或数组
space:文本添加缩进、空格和换行符，如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格，如果 space 大于 10，则文本缩进 10 个空格。space 也可以使用非数字，如：\t
对象转换
向服务器发送以下数据：
var obj = { "name":"runoob", "alexa":10000, "site":"www.runoob.com"};
使用 JSON.stringify() 方法处理以上数据，将其转换为字符串:
var myJSON = JSON.stringify(obj);
myJSON 为字符串,将 myJSON 发送到服务器
运行结果为:{"name":"runoob","alexa":10000,"site":"www.runoob.com"}
数组转化， 数组转换为 JSON 字符串
var arr = [ "Google", "Runoob", "Taobao", "Facebook" ];
var myJSON = JSON.stringify(arr);
document.getElementById("demo").innerHTML = myJSON;
运行结果：["Google","Runoob","Taobao","Facebook"]
异常处理解析数据，JSON 不能存储 Date 对象，可以使用SON.stringify()将所有日期转换为字符串
var obj = { "name":"Runoob", "initDate":new Date(), "site":"www.runoob.com"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
运行结果：{"name":"Runoob","initDate":"2020-09-24T10:31:08.752Z","site":"www.runoob.com"}
JSON 不允许包含函数，JSON.stringify() 会删除 对象的函数
var obj = { "name":"Runoob", "alexa":function () {return 10000;}, "site":"www.runoob.com"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
运行结果：{"name":"Runoob","site":"www.runoob.com"}
或者可以在执行 JSON.stringify() 函数前将函数转换为字符串来避免删除 对象的函数
<script>
var obj = { "name":"Runoob", "alexa":function () {return 10000;}, "site":"www.runoob.com"};
obj.alexa = obj.alexa.toString();
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
</script>
运行结果： {"name":"Runoob","alexa":"function () {return
10000;}","site":"www.runoob.com"}
标签：
上一篇：Java数组，
