Javascrip 数组和对象及 json 的序列化

Javascrip 数组和对象及 json 的序列化

1.JavaScript 数据类型

• 值类型(原始类型)：字符串（String）、数字(Number)、布尔(Boolean)
• 值类型(特殊类型)：对空（Null）、未定义（Undefined）、Symbol
• 引用数据类型：对象(Object)、数组(Array)、函数(Function)

1.1 javascript 数组

• 创建数组，具体语法和 php 中创建数组一致
  var cars = ["BMW", "Volvo", "GEELY"];
  上面这个数组就是一个关于汽车品牌的数组，包括宝马，沃尔沃，吉利，他是一个索引数组
• 访问数组元素
  cars[0]，获取的就是 BMW 这个值，访问方法和 php 类似
• 数组属性和方法
  JavaScript 数组的真实力量隐藏在数组的属性和方法中：
  cars.length;结果自然是 3，因为数组只有三个元素
• 遍历数组元素
  方法一：for 循环

<script>
var cars, text, Length, i;
cars = ["BMW", "Volvo", "GEELY"];
Length = cars.length;
text = "<ul>";
for (i = 0; i < Length; i++) {
  text += "<li>" + cars[i] + "</li>";
}
text += "</ul>";
</script>

方法二 forEach 遍历（运行结果是一样的）

var cars, text;
cars = ["BMW", "Volvo", "GEELY"];
text = "<ul>";
cars.forEach(myFunction);
text += "</ul>";
function myFunction(value) {
  text += "<li>" + value + "</li>";
}

• 如何识别数组
  ECMAScript 5 定义了新方法 Array.isArray()：
Array.isArray(cars); // 返回 true
• 获取数组中的部分元素 slice
  cars.slice(起始索引,结束索引)
  例如cars.slice(0,2)//返回的是BMW和VOLVO

  不包括结束索引所对应的元素

• 如何在数组中插入，替换，删除 splice
  插入
  splice(起始位置,长度,插入的内容);
  替换：
  splice(1,2,"沃尔沃","吉利");//已经被替换位中文了
  删除：
  splice(1,2);

1.2 javascript 对象

值以名称:值对的方式来书写（名称和值由冒号分隔）。

var person = {
  firstName: "Nicola",
  lastName: "Guo",
  age: 50,
  eyeColor: "black",
};

• 访问对象属性,访问对象成员使用.点操作符
  方式一：objectName.propertyName
  方式二：objectName["propertyName"]
• 如何遍历对象
  方法一：JavaScript for...in 循环
  语法：

for (对象的键名 in 对象) {
  要执行的代码;
}

var person = { a: "尼古拉", b: "小郭", c: 88888888 };
for (key in person) {
  txt += person[key];
}

方法二，把对象转为数组
第一步，获取键名数组
var keys = Object.keys(需要遍历的对象);
第二部，把新的键名组成的数组遍历出来

keys.forEach(function (value, index, arr) {
  console.log(this[value]);
}, 需要遍历的对象);

1.3 javascript 函数

• JavaScript 函数是被设计为执行特定任务的代码块。
• JavaScript 函数会在某代码调用它时被执行

function myFunction(p1, p2) {
  return p1 * p2; // 该函数返回 p1 和 p2 的乘积
}

2.JavaScript JSON

• JSON 是存储和传输数据的格式。
• JSON 经常在数据从服务器发送到网页时使用。

2.1 JSON 语法

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

简单值

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

注意: 不支持undefined

2.2 对象

原生 JS 对象字面量

js语法
var person = {
    "name": "Nicola",
    "age": 18
};
// 以上内容用JSON对象表示
{
   "name": "Nicola",
    "age": 18
}
// JSON属性值也支持复杂类型,如对象
{
   "name": "尼古拉",
    "age": 18,
    "course": {
        "name": "JavaScript",
        "grade": 100
    }
}

1. 没有变量声明: JSON 中没有变量概念
2. 没有分号: 因为 JSON 不是 JS 语句
3. 属性名: 任何时候都必须添加双引号, 且必须是双引号

2.3 JSON 序列化

• ES5 提供了内置全局对象JSON,对 JSON 数据提供了全面支持
• JSON.stringify(): 将原生 JS 对象,序列化为 JSON 字符串,用于存储与传输

<script>
      var person = {
        name: "Peter Zhu",
        age: 29,
        isMarried: true,
        course: {
          name: "JavaScript",
          grade: 99,
        },
        getName: function () {
          return this.name;
        },
        hobby: undefined,
        toString: function () {
          return "继承属性";
        },
      };
      var jsonStr = JSON.stringify(person);
      console.log(jsonStr);
</script>

序列化后的结果为：

{
  "name": "Peter Zhu",
  "age": 29,
  "isMarried": true,
  "course": {
    "name": "JavaScript",
    "grade": 99
  }
}

序列化后，1.方法，2.值为 undefined 的成员，3.原型对象成员会消失

JSON.stringify()用法

• JSON.stringify()括号内直接引入需要格式化的 js 对象即可
• JSON.stringify(js对象,["需要格式的属性"])，只会序列化指定的属性
• JSON.stringify(js对象,["函数"])，依据方法内的指定流程序列化相应的内容

var jsonStr = JSON.stringify(person, function (key, value) {
  switch (key) {
    case "age":
      return "年龄是我的小秘密";
    case "isMarried":
      return undefined;
    // 必须要有default, 才可以输出其它未被处理的属性
    default:
      return value;
  }
});

3. 总结

JavaScript 是一个完备的编程语言，用其他的语言能够做的事情用 Javascript 同样能够做到，甚至还能做得更多，因为我们就在 Web 页面进行编程！