1. JavaScript 基础

  2. 深入数据和类型

  3. 函数进阶

  4. 运算符

  5. 浏览器存储

  6. Document

  7. Web API

  8. 事件

  9. 工具与规范

  10. 实例

  11. 练习

JSON 对象

JSON 对象仅包含两个方法, stringify 方法将对象转成 JSON 格式的字符串, parse 方法将 JSON 格式的字符串解析成对象。

JSON 格式

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。

JSON 是使用字符串表示数据结构的一种规范标准, 已经被很多语言所采用,用来作为数据传输或保存的规范。像前后端交互中, RESTful API 的交互标准就是基于 JSON 格式的。

$$tip

使用统一的标准可以使得不同语言开发的程序能进行数据交互,在 JSON 之前流行的是使用 XML 格式, 但 JSON 出现后随之简单易懂和轻量的原因逐渐取代了 XML 成为最流行的格式。

$$

stringify

stringify 被称为序列化,可以将值转成 JSON 格式字符串。

$$tip

序列化指的是将值转成可以存储或传输的数据形式的过程。

$$

let person = {
    name: "鸣人",
    age: 20,
}
let result = JSON.stringify(person)
alert(typeof result) // string,序列化后数据为字符串类型

$$tip

序列化与转成字符串( toString )是两个概念,序列化是为了能够方便地存储或传输数据,最终数据还能够被反序列化成内存中的值使用。因此序列化与反序列化必须遵守一套严格的规则。

而转成字符串( toString )大部分的场景是为了展示给用户看,并且不要求能再转回数据。

$$

$$jsdemo$$
$$edit$$
alert(JSON.stringify(123)) // 123

alert(JSON.stringify([1, 2, 3])) // [1,2,3]

alert(
    JSON.stringify({
        name: "鸣人",
        age: 18,
    })
) // {"name":"鸣人","age":18}

$$tip

有关序列化的规则请看 stringify 描述 - MDN

$$

parse

parse 被称为反序列化,可以将 JSON 格式字符串转成内存中的值。

$$jsdemo$$
$$edit$$
let str = '{"name":"鸣人","age":18}'

let person = JSON.parse(str)

console.log(typeof person) // object
console.log(person) // {name: '鸣人', age: 18}

实战:保存数据的表格

改进了实战项目成绩管理表 , 使得数据能实时保存在浏览器中,额外使用到了本章 JSON 对象的知识点与 Storage 章节知识点。

$$demo

<body>

<button id="showBtn" onclick="showBox()">显示添加框</button>

<div id="box"></div>

<table id="students"></table>

</body>

<script>

students = [

{

name: "小明",

score: "56",

},

{

name: "鸣人",

score: "80",

},

{

name: "路飞",

score: "70",

},

]

// 增加:数据的读取

database = localStorage.getItem("database")

if (database) {

students = JSON.parse(database)

}

function showBox() {

// 显示添加框

let box = document.getElementById("box")

let showBtn = document.getElementById("showBtn")

if (showBtn.innerText == "显示添加框") {

box.innerHTML =

'<input id="name" type="text" placeholder="姓名" /><input id="score" type="text" placeholder="分数" /><button onclick="add()">确认添加</button>'

showBtn.innerText = "隐藏添加框"

} else {

box.innerHTML = ""

showBtn.innerText = "显示添加框"

}

}

function add() {

// 添加数据

let nameEl = document.getElementById("name")

let scoreEl = document.getElementById("score")

// 先判断数据是否存在

if (nameEl.value && scoreEl.value) {

students.push({

name: nameEl.value,

score: scoreEl.value,

})

nameEl.value = ""

scoreEl.value = ""

// 刷新表格

fresh()

} else {

alert("请完善数据。")

}

}

function fresh() {

// 刷新表格的显示

let table = document.getElementById("students")

table.innerHTML = "<tr><th>姓名</th><th>分数</th><th>操作</th></tr>"

for (let index in students) {

let student = students[index]

table.innerHTML += <tr><td>${student.name}</td><td>${student.score}</td><td><button onclick="remove(${index})">删除</button></td></tr>

}

// 增加:数据的保存

localStorage.setItem("database", JSON.stringify(students))

}

// 通过下标去删除元素

function removeByIndex(array, index) {

// 思路:

// 1. 循环把下标之后的元素往前移动

// 2. 弹出最后一个元素

for (let i = index; i < array.length - 1; i++) {

array[i] = array[i + 1]

}

array.pop()

return array

}

function remove(index) {

students = removeByIndex(students, index)

fresh()

}

// 在一开始显示表格

fresh()

</script>

<style>

table {

border-collapse: collapse;

margin: 10px 0;

}

table,

th,

td {

border: 1px solid;

}

td {

padding: 5px 10px;

}

</style>

$$

<body>
    <button id="showBtn" onclick="showBox()">显示添加框</button>
    <div id="box"></div>
    <table id="students"></table>
</body>
<script>
    let students = [
        {
            name: "小明",
            score: "56",
        },
        {
            name: "鸣人",
            score: "80",
        },
        {
            name: "路飞",
            score: "70",
        },
    ]

    // 增加:数据的读取
    let database = localStorage.getItem("database")
    if (database) {
        students = JSON.parse(database)
    }

    function showBox() {
        // 显示添加框
        let box = document.getElementById("box")
        let showBtn = document.getElementById("showBtn")

        if (showBtn.innerText == "显示添加框") {
            box.innerHTML =
                '<input id="name" type="text" placeholder="姓名" /><input id="score" type="text" placeholder="分数" /><button onclick="add()">确认添加</button>'
            showBtn.innerText = "隐藏添加框"
        } else {
            box.innerHTML = ""
            showBtn.innerText = "显示添加框"
        }
    }

    function add() {
        // 添加数据
        let nameEl = document.getElementById("name")
        let scoreEl = document.getElementById("score")

        // 先判断数据是否存在
        if (nameEl.value && scoreEl.value) {
            students.push({
                name: nameEl.value,
                score: scoreEl.value,
            })

            nameEl.value = ""
            scoreEl.value = ""

            // 刷新表格
            fresh()
        } else {
            alert("请完善数据。")
        }
    }

    function fresh() {
        // 刷新表格的显示
        let table = document.getElementById("students")
        table.innerHTML = "<tr><th>姓名</th><th>分数</th><th>操作</th></tr>"
        for (let index in students) {
            let student = students[index]
            table.innerHTML += `<tr><td>${student.name}</td><td>${student.score}</td><td><button onclick="remove(${index})">删除</button></td></tr>`
        }

        // 增加:数据的保存
        localStorage.setItem("database", JSON.stringify(students))
    }

    // 通过下标去删除元素
    function removeByIndex(array, index) {
        // 思路:
        // 1. 循环把下标之后的元素往前移动
        // 2. 弹出最后一个元素
        for (let i = index; i < array.length - 1; i++) {
            array[i] = array[i + 1]
        }
        array.pop()
        return array
    }

    function remove(index) {
        students = removeByIndex(students, index)
        fresh()
    }

    // 在一开始显示表格
    fresh()
</script>
<style>
    table {
        border-collapse: collapse;
        margin: 10px 0;
    }

    table,
    th,
    td {
        border: 1px solid;
    }
    td {
        padding: 5px 10px;
    }
</style>