JS 中 数据类型,流程控制与 json
1.数据类型
1.1 原始类型
| 类型名 | 描述 |
|---|---|
number |
数值 |
string |
字符串 |
boolean |
布尔型 |
var age = 25;var username = "admin";var ismarry = false;// 检测变量类型使用关键字 typeofconsole.log(typeof age, typeof username, typeof ismarry);//输出 number string boolean
1.2 特殊类型
| 类型名 | 描述 |
|---|---|
undefined |
专用于表示非对象类型变量的空/无 |
null |
表示空对象 |
undefined 与 null 都有空/无的意义
// 比较console.log(undefined == null); //输出 true// 但是 检查类型会不一样console.log(typeof undefined); //输出 undefinedconsole.log(typeof null); // 输出 object// 测试与数值相加console.log(undefined + 100); //输出 NaN(Not a Number) 不是一个数值console.log(null + 100); // 输出 100
1.3 对象类型
| 类型 | 描述 |
|---|---|
array |
数组 |
object |
对象 |
function |
函数 |
1.3.1 数组
- js 数组与 php 索引数组类似
// 声明一个数组var arr = ["apple", "orange", "banana", "peach", "pear"];// 获取数组属性个数console.log(arr.length); //输出 5// 获取数组中的第一个值console.log(arr[0]); // 输出 apple// 查看数组是不是arrayconsole.log(typeof arr); //输出 object// 错! 正确方式 判断是不是的数组console.log(Array.isArray(arr)); //输出 true// 遍历这个数组 for循环for (var i = 0; i < arr.length; i++) {console.log(arr[i]);}//输出 apple// orange// banana// peach// pear// 使用 foreach 遍历 js中foreach是数组对象上的方法arr.forEach(function (item) {console.log(item);});//输出 apple// orange// banana// peach// pearconsole.log("---------------");// 获取数组中的部分元素// .slice(起始位置, 结束位置)console.log(arr.slice(3, 5));// 输出 0: "peach"// 1: "pear"// 插入 替换与删除 .splice(插入位置 , 删除个数 , 将要要替换的元素)// 实现插入arr.splice(3, 0, "桃子", "梨子");console.log(arr);// 输出 ["apple", "orange", "banana", "桃子", "梨子", "peach", "pear"]// 实现删除 有返回值返回被删除的元素var sarr = arr.splice(3, 2);console.log(sarr); //输出 ["桃子", "梨子"]console.log(arr); //输出 ["apple", "orange", "banana", "peach", "pear"]// 实现替换arr.splice(3, 2, "桃子", "梨子");console.log(arr);//输出 ["apple", "orange", "banana", "桃子", "梨子"]
1.3.2 对象
- js 对象类似于 php 的关联数组
// 声明一个对象var obj = {id: 1,name: "peter",email: "123@php.cn","test scroe": {php: 80,js: 65,css: 70,},};// 输出console.log(obj);// 以表格形式输出console.table(obj);
// 访问对象成员使用 '.' 操作符 php使用 '->'console.log(obj.email); //输出123@php.cn// 当然也可以,以数组形式访问console.log(obj["email"]); //输出 123@php.cnconsole.log("-------------");// 循环输出 for(对象键名 in 对象){ 对象[键名]}for (key in obj) {console.log(obj[key]);}
// 借助foreach进行遍历// 获取键名数组var keys = Object.keys(obj);console.log(keys); //输出 ["id", "name", "email", "test scroe"]// 遍历keys.forEach(function (item) {console.log(this[item]);}, obj);
1.3.3 函数
- 与 php 相同 使用 function
// 声明一个函数function f1(a, b) {console.log(a + "+" + b + "=" + (a + b));}// 调用f1(19, 46); //输出 19+46=65// 匿名函数 函数表达式var f2 = function (a, b) {console.log(a + "+" + b + "=" + (a + b));};// 调用f2(10, 56); //输出 10+56=66// 立即调用函数(function (a, b) {console.log(a + "+" + b + "=" + (a + b));})(15, 23); // 输出 15+23=38
2. 流程控制
2.1 if 语句
// 声明一个变量var girlAge = 30;// 单分支if (girlAge > 20 && girlAge <= 30) {console.log("咱们结婚吧");}// 输出 咱们结婚吧// 双分支if (girlAge < 20) {console.log("你还小");} else {console.log("我可以追你吗");}// 输出 我可以追你吗// 多分支if (girlAge < 18) {console.log("做我干女儿吧");} else if (girlAge < 25) {console.log("我可以追你吗");} else {console.log("我还小 ");}// 输出 我还小
2.2 swich 语句
// 声明一个变量var girlAge = 30;switch (true) {case girlAge > 18 && girlAge < 30:console.log("哥没车没房,愿意不?");break;case girlAge >= 30 && girlAge < 50:console.log("我想有个家");break;default:console.log("姐才" + girlAge + "岁, 认你当干爹吧");break;}//输出 我想有个家
2.3 for 循环 与 while 循环
<ul><li>1</li><li>2</li><li>3</li></ul><ul><li>1</li><li>2</li><li>3</li></ul><script>// for 循环var items = document.querySelectorAll("ul:first-of-type");for (var i = 0; i < items.length; i++) {items[i].style.color = "red";}// whilevar items = document.querySelectorAll("ul:last-of-type");var i = 0;while (i < items.length) {items[i].style.color = "blue";i++;}</script>
3. JSON 基础
3.1 JSON 是什么
- JSON ：JavaScript Object Notation (Js 对象表示法)
- JSON ： 2006 年成为国际标准，并成为表示结构化数据的通用格式
- JSON ：借用了JS 对象字面量的语法规则，但并非 JS 对象，也并非只是 JS 采用 JSON
- JSON ：独立于任何编程语言，几乎所有语言都提供了访问 JSON 数据的接口 API
- 尽管 JSON 与 JS 并无直接关系，但 JSON 在 JS 代码中应用最广泛
3.2 JSON 语法
JSON 支持三种数据类型：简单值，对象，数组
3.2.1 简单值
- 数字
100,3.14 - 字符串：
"hello word", 必须使用双引号作为定界符 - 布尔值：
true,false - 空值 ：
null
注意 不支持
undefined
3.2.2 对象
- 原生 JS 对象字面量
// 原生JS对象字面量var username = {name:'peter',age:30};// 等价语法var username = {"name":'peter',"age":30};// JSON对象与他相比有二处不同// 1.没有变量声明：JSON 没有变量概念// 2.没有分号：JSON不是JS语句// 3.属性名：任何时候都必须添加双引号，且必须是双引号// 以上内容用JSON对象表示{"name":'peter',"age":30}// JSON属性值也支持复杂类型，如对象{"name":"peter","age":29,"course":{"name":"michael""age":80}}
3.2.3 数组
- JSON 数组采用了原生 JS 中数组字面量语法
// 原生JS数组var arr = [101, "电脑", 9800];// JSON 表示 无变量和分号[101, "电脑", 9800];// 常见场景时将数组与对象组合表示更加复杂的数据类型;[({id: 101,name: "电脑",price: 9800,},{id: 102,name: "手机",price: 4500,},{id: 103,name: "相机",price: 16800,}),];// 许多软件的配置文件都是采用这种数据格式,如VSCODE
3.3 JSON 解析与序列化
3.3.1 JSON 对象
- ES5 t 提供了内置全局对象JSON，对 JSON 数据提供了全面支持
JSON.stringify():将原生 JS 对象，序列化为 JSON 字符串，用于存储和传输JSON.parse():将 JSON 字符串 解析为原生 JS 对象
3.3.1.1 对象序列化为 JSON
JSON.stringify(js对象,允许序列化的属性,缩进字符数量)
// 创建一个准备JSON序列化的对象var person = {name: "Peter Zhu",age: 29,isMarried: true,course: {name: "JavaScript",grade: 99,},getName: function () {return this.name;},hobby: undefined,toString: function () {return "继承属性";},};// 进行JSON序列化并保存到一个变量中var jsonstr = JSON.stringify(person);console.log(jsonstr);// 输出{"name":"Peter Zhu","age":29,"isMarried":true,"course":{"name":"JavaScript","grade":99}}// undefined 的变量 和 函数 将不会被JSON 序列化// 第二参数 传值数组 将限制允许序列化的属性，也就是只会将数组中的值被JSON序列化var jsonstr = JSON.stringify(person, ["name", "age"]);console.log(jsonstr);// 输出 {"name":"Peter Zhu","age":29}// 第二参数 传值函数 可以改变原对象中的值再进行JSON序列化var jsonstr = JSON.stringify(person, function (key, value) {// 条件执行判断switch (key) {case "age":return "年龄是秘密";case "grade":return 85;case "isMarried":return undefined; // 也就是不输出default:return value;}});console.log(jsonstr);//输出 {"name":"Peter Zhu","age":"年龄是秘密","course":{"name":"JavaScript","grade":85}}
4. 总结
PHP 中使用 json_encode() json_decode() 进行编码解码，JS 中使用JSON.stringify() JSON.parse() 进行编码解码， 有一处不完美 如果只想改变 person.name 的值 不改变 parson.course['name'] 值 该如何操作呢？
