JS - 数据类型/流程控制及JSON基础

JS 中 数据类型,流程控制与 json

1.数据类型

1.1 原始类型

类型名	描述
number	数值
string	字符串
boolean	布尔型

var age = 25;
var username = "admin";
var ismarry = false;
// 检测变量类型使用关键字 typeof
console.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); //输出 undefined
console.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
//   查看数组是不是array
console.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
// pear
console.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.cn
console.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";
  }
  //   while
  var 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'] 值 该如何操作呢？