JS数组与对象的常用方法 & JSON.stringify() 的用法

一、js的数据类型

• 1、原始类型: number, string, boolean

  typeof: 查看js数据类型

• 2、特殊类型: null, undefined

  null 表示空对象; undefined 专用于表示非对象类型变量的空/无
  转化为布尔值：null、undefined===>false
  转化为数值：null===0, undefined===>NaN

• 3、js的数组: 与PHP索引数组类似

  Array.isArray('数组')：判断js数组类型
  for、forEach：遍历数组
  slice(): 获取数组部分元素
  splice(): 可以实现数组的插入, 替换, 删除

• 4、js对象: 与PHP关联数组类似

  .：点操作符,访问对象成员/属性
  for (key in '对象')：遍历对象
  forEach()：遍历对象

• 5、js函数: 函数、函数表达式、立即调用函数、回调函数

演示代码

<script>
    // 1、原始类型: number, string, boolean
    var salary = 8900000;
    var name = "nguyen van dong";
    var marry = false;
    console.log(typeof salary, typeof name, typeof marry);

    // 2、特殊类型: null, undefined
    // js 变量要先声明才调用
    // 声明
    var phan;
    // 声明+初始化
    // var phan; 等价于 var phan = undefined;
    var phan = undefined;
    console.log(phan);

    var xuong = null;
    console.log(xuong);

    // null, undefined 都有空/无的意义
    // null 表示空对象；undefined 专用于表非对象类型变量的空/无
    // typeof null 等于 undefined
    console.log(null == undefined);

    // null 和 undefined 转为布尔值：false
    if (!null) console.log(null + "是无");
    if (!undefined) console.log(undefined + "是无");

    // null 和 undefined 转为数值：null ===> 0; undefined ===> NaN
    console.log(null + 100);
    console.log(undefined + 100);

    // 3、js的数组: 与PHP索引数组类似
    // 声明js数组
    var staffs = ["dung", "van", "tien", "bich", "dien", "vay"];
    // 访问数组成员
    console.log(staffs.length);
    console.log(staffs[1]);

    // 正确判断数组类型:Array.isArray()
    console.log(typeof staffs);
    console.log(Array.isArray(staffs));

    // 遍历js数组
    // for
    for (var i = 0; i < staffs.length; i++) {
        console.log(staffs[i]);
    }

    console.log("---------forEach()遍历-----------");

    // forEach
    // forEach是数组对象上的方法
    staffs.forEach(function (item, index, array) {
        console.log(item);
    });

    // slice()获取数组部分元素
    // slice('开始索引', '结束索引')：不包含结束索引
    console.log(staffs.slice(1, 3));
    // 获取全部
    console.log(staffs.slice(0));

    // splice()实现数组的插入, 替换, 删除
    staffs.splice(1, 0, "thuy", "quynh");
    console.log(staffs);
    staffs.splice(1, 2, "bao", "minh");
    console.log(staffs);
    // 删除，返回被删除的元素
    var res = staffs.splice(1, 2);
    console.log(res);
    console.log(staffs);

    console.log("---------------js对象----------------");

    // 4、js对象: 与PHP关联数组类似
    var congnhan = {
        id: 1,
        name: "hieu",
        email: "[e-mail]",
        "cac salary": {
            coban: 5100000,
            hieuqua: 4000000,
            chucv: 2000000,
            chuyencan: 300000,
        },
    };
    console.log(congnhan);
    console.table(congnhan);
    // 访问对象成员/属性, 使用点操作符'.'
    console.log(congnhan["email"]);
    console.table(congnhan["cac salary"]["coban"]);

    console.log("-----------for in 遍历对象--------------");
    // for (对象的键名 in 对象) {
    //     对象[键名]
    // }

    for (key in congnhan) {
        console.log(congnhan[key]);
    }

    console.log("-----------借助数组的forEach()进行遍历对象--------------");

    // 第一步获取键名数组
    var keys = Object.keys(congnhan);
    console.log(keys);
    keys.forEach(function (item, index, arr) {
        console.log(this[item]);
    }, congnhan);

    // 5、js函数: 函数、函数表达式、立即调用函数、回调函数
    // 函数
    function sum(x, y) {
        console.log(x + " + " + y + " = ", x + y);
    }
    sum(80, 80);

    // 匿名函数, 函数表达式
    var sum1 = function (x, y) {
        console.log(x + " + " + y + " = ", x + y);
    }
    sum1(90, 90);

    // 立即调用函数
    (function sum2(x, y) {
        console.log(x + " + " + y + " = ", x + y);
    })(80, 80);

    (function sum2(x, y) {
        console.log(x + " + " + y + " = ", x + y);
    }(80, 80));

</script>

演示效果：

二、Js 对象与 JSON

1、JSON类型

1.1 简单值

• 数值: 150, 3.24
• 字符串: "Hello World!",必须使用双引号做为定界符
• 布尔值: true, false
• 空值: null

注意: 不支持undefined

1.2 JSON对象

• 1. 没有变量声明: JSON中没有变量概念
• 1. 没有分号: 因为JSON不是JS语句
• 1. 属性名: 任何时候都必须添加双引号, 且必须是双引号
• 1. JSON属性值也支持复杂类型,如对象

{
   "name": "dashu",
    "age": 29,
    "course": {
        "name": "JavaScript",
        "grade": 99
    }
}

1.3 JSON数组

无变量和分号

[101, "电脑", 9800][
  // 最常见场景是将数组与对象组合表示更加复杂的数据类型
  ({
    id: 101,
    name: "电脑",
    price: 9800,
  },
  {
    id: 102,
    name: "手机",
    price: 4500,
  },
  {
    id: 103,
    name: "相机",
    price: 16800,
  })
];

2、JSON.stringify()用法

• JSON.stringify(): 将原生 JS 对象,序列化为 JSON 字符串,用于存储与传输

<script>
        // 1, 方法, 2,值为undefined的成员, 3, 原型对象成员不会被序列化
        var congnhan = {
            name: "ho nhat tien",
            age: 29,
            isMarried: false,
            "cac salary": {
                coban: 5100000,
                hieuqua: 4000000,
                chucv: 2000000,
                chuyencan: 300000,
            },
            getName: function () {
                return this.name;
            },
            hobby: undefined,
            toString: function () {
                return "继承属性";
            },
        };

        // 将js对象序列化为json字符串
        var jsonStr = JSON.stringify(congnhan);
        console.log(jsonStr);

        // 第二参数如果是数组,可以限制允许序列化的属性
        var jsonStr = JSON.stringify(congnhan, ["name", "age"]);
        console.log(jsonStr);

        // 第二参数是函数，支持第三参数："----"
        var jsonStr = JSON.stringify(congnhan, function (key, value) {
            switch (key) {
                case "age":
                    return "年龄保密";

                case "isMarried":
                    return undefined;
                // 必须要有default, 才可以输出其它未被处理的属性
                default:
                    return value;
                }
            }, "----");
        console.log(jsonStr);
    </script>

演示效果：

本节课堂小结：js数据类型与PHP大同小异，主要是对象和数组的方法有些多；js流程控制与php一样；JSON.stringify()方法参数用法。