PHP大牛成长之路：JavaScript常用类型、流程控制与json字符串

1、JavaScript的数据类型与访问方式

• 原始类型

No	数据类型	说明
1	number	数值
2	string	字符串
3	bool	布尔

    // 1、number 数值
    var grade = 88;
    // 2、string 字符串
    var username = "peter";
    // 3、boolean: 布尔
    var flag = false;
    // 类型检查 typeof
      console.log(typeof grade, typeof username, typeof flag);
    // 输出结果：number string boolean

• 特殊类型

No	数据类型	说明
4	null	空对象
5	undefined	未定义
6	boolean	对象(包含函数function/数组array)

      // 4、null 空对象
      var title = null;
      // 5、undefined 未定义
      var role = undefined;
      // 6、对象 object (包含函数`function`/数组`array`)
      var student = { id: 1, name: "admin", email: "admin@php.cn",course :[88,98,85]};

---

JavaScript数组的定义与访问

• 数组的定义（索引数组）

    var arr1 = new Array(1,2,3,4);
    console.log(arr1);
    var arr2 = Array(1,2,3,4);
    console.log(arr2);
    var arr3 = [1,2,3,4];
    console.log(arr3);
    var arr4 = new Array();
    arr4[0]=1;
    arr4[1]=2;
    arr4[2]=3;
    arr4[3]=4;
    console.log(arr4);
    var arr5 = Array();
    arr5[0]=1;
    arr5[1]=2;
    arr5[2]=3;
    arr5[3]=4;
    console.log(arr5);
    var arr6 = [];
    arr6[0]=1;
    arr6[1]=2;
    arr6[2]=3;
    arr6[3]=4;
    console.log(arr6);

• 数组的定义（关联数组）

js不能直接定义关联数组（这点比较奇葩）

      var k = ["name", "age", "sex"];
      var v = ["peter", 38, "男"];
      var arr = new Array();
      for (var i = 0; i < k.length; i++) {
        arr[k[i]] = v[i];
      }
      console.log(Array.isArray(arr)); //输出:true
      console.log(arr);  //输出关联数组

• 判断数组类型方法

        //定义一个数组；
        var arr = ["苹果","香蕉","雪梨","西瓜"];
        //js中数组也属于对象，判断类型不能使用typeof
        console.log(typeof arr);  //输出:object
        //Array.isArray()可以正确判断是否数组类型
        console.log(Array.isArray(arr)); //输出:true

• 数组的访问

  按索引位置及键名访问

 var arr = [1,2,3,4];
console.log(arr[2]); 输出：3
var arr1 = [];
arr1["name"] = "admin";
arr1["mail"] = "admin@php.cn";
console.log(arr["name"]); //输出：admin
console.log(arr["mail"]); //输出：admin@php.cn

• 数组的遍历

        var arr = ["小明","小李","小美","小丽","小黑","小文"]
        //for
        for (let i = 0; i < arr.length; i++) {
            document.write(i  + "=>" + arr[i])
            document.write("<br>")
        }
        document.write("<hr>")
        //forEach (匿名函数)
        arr.forEach(function (item,key) {
            document.write(key + "=>" + item);
            document.write("<br>")
        });
        document.write("<hr>")
        //forEach (匿名函数简写)
        arr.forEach((item,key) => {
            document.write(key + "=>" + item);
            document.write("<br>")
        });
        document.write("<hr>")
        //for..in..
        for (key in arr) {
            document.write(key + "=>" + arr[key]);
            document.write("<br>")
        }

遍历的方法有很多，还有（for…of…)这里这是做了入门了解,具体使用方法区别需要在后期实战中去理解。

使用 splice() 实现对数组元素的新增,删除,替换

    var arr = ["小明","小李","小美","小丽","小黑","小文"]
    // splice(索引位置,删除几个) -返回被删除的元素
    //删除(删除小丽)
    document.write(arr.splice(3,1));  //输出:小丽
    document.write("<br>"); 
    document.write(arr);  //输出:小明,小李,小美,小黑,小文
    document.write("<Hr>"); 
    //更新(更新小明和小李)
    document.write(arr.splice(0,2,"明明","老李"));  //输出:小明,小李
    document.write("<br>");
    document.write(arr);  //输出:明明,老李,小美,小黑,小文
    document.write("<Hr>"); 
    //添加(小明和小李)
    document.write(arr.splice(0,0,"xiaomin","xiaoli"));  //输出:""
    document.write("<br>");
    document.write(arr);  //输出:xiaomin,xiaoli,明明,老李,小美,小黑,小文

javascript函数

  // 命名函数
  function sum1(a, b) {
    document.write(a + b);
  }
  sum1(11, 2);  //输出:13
  document.write("<hr>");
  // 匿名函数
  var sum2 = function (a, b) {
    document.write(a + b);
  };
  sum2(12, 18);//输出:30
  document.write("<hr>");
  // IIFE:立即调用函数
  // 将函数的声明与调用合并
  (function (a, b) {
    document.write(a + b);
  })(100, 80); //输出:190

2、javascript流程控制

  let age = 21;
  //if单分支
  if (age < 30) {
    document.write("努力学习吧骚年！");
  }
  document.write("<hr>");
  //if..else..双分支
  if (age < 30) {
    document.write("努力学习吧骚年！");
  } else {
    document.write("努力赚钱吧大叔！");
  }
  document.write("<hr>");
  //if...else if...else多分支
  if (age < 30) {
    document.write("努力学习吧骚年！");
  } else if (age >= 30 && age < 50) {
    document.write("努力赚钱吧大叔！");
  } else {
    document.write("能养老了吗大爷！");
  }
  document.write("<hr>");
  //switch多分支
  switch (age!==null) {
    case age < 30:
      document.write("努力学习吧骚年！");
      break;
    case age >= 30 && age < 50:
      document.write("努力赚钱吧大叔！");
      break;
    default:
      document.write("能养老了吗大爷！");
      break;
  }

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 语法

JOSN 支持三种数据类型: 简单值, 对象, 数组

3.3 简单值

• 数值: 150, 3.24

• 字符串: "Hello World!",必须使用双引号做为定界符

• 布尔值: true, false

• 空值: null

注意: 不支持undefined

示例（js对象转为json字符串及过滤）

    var users = {
        id:       23,
        name:     "admin",
        email:    "admin@php.cn",
        isadmin:  true,
        class1:    function(){return 'php:12期'},
        like:     ["踢球","游泳"],
        contacts: {father:"ad",mom:"min"},
    }
    //JSON.stringify()将js对象转为json格式的字符串
    var jsonStr = JSON.stringify(users);
    document.write(jsonStr) ;
    document.write("<hr>") ;
    // 可以传入第二个参数（数组），对输出的结果进行过滤（例如只输出name和email)
    jsonStr = JSON.stringify(users, ["name", "email"]);
    document.write(jsonStr) ;
    document.write("<hr>") ;
    // 第二个参数也可以是一个回调，可以进行动态过滤
    // 比如将isadmin的值为true时，过滤为管理员
    jsonStr = JSON.stringify(users, function (key, value) {
        if(key=='isadmin' && value==true){
            return  '管理员';            
        }
       return value;
    });
    document.write(jsonStr) ;

示例（json字符串转为js对象及过滤）

      // 1、json字符串如下
      var jsonStr = '{"id": "23","name": "admin","email": "admin@php.cn","isadmin": "true"}';
      // 2、将json字符串转为js对象
      // var obj = JSON.parse(jsonStr)
      //也可以使用匿名函数进行过滤输出（将isadmin为true输出为管理员）
      var obj = JSON.parse(jsonStr, function (key, value) {
        if(key=="isadmin" && value=="true"){
            return '管理员';            
        }
        //必须加下以下语句,否则无输出
       return value;
      });
       // 3、创建HTML元素<ul>
        var ul = document.createElement("ul");
       // 4、循环obj对象得到数据放到HTML元素<li>中并保存到res变量
        var res = "";
        for (var key in obj) {
            res += "<li>" + obj[key] + "</li>";
        }
        // 5、在HTML元素<ul>中添加列表项目
        ul.innerHTML = res;
        document.body.appendChild(ul);

总结：

• javascript对象与json字符串相似，区别于json字符串变量也为字符串，不知道这样理解对不对。