JSON 使用

上文提到过，JSON 语法是 Javascript 语法的子集，所以我们能直接在 Javascript 中操作 JSON。

那具体又该如何使用呢？

对象访问

使用属性访问器。

属性访问器提供了2种方式来访问一个对象的属性，它们分别是点号（.）和方括号([])。

语法

object.property
object['property']

1
2

使用点号

const people = {
  "name": "devcursor",
  "cat": null,
  "site": "http://www.devcursor.com"
}
let name = people.name

1
2
3
4
5
6

使用方括号

const people = {
  "name": "devcursor",
  "cat": null,
  "site": "http://www.devcursor.com"
}
let name = people["name"]

1
2
3
4
5
6

修改对象值

通过属性访问器，可以修改 JSON 对象的值。

people.cat = 'xiaohui'
people["name"] = "xiaobai"

1
2

删除对象属性

可以使用 delete 关键字来删除 JSON 对象的属性。

delete people.cat
// 或者
delete people["cat"]

1
2
3

注意

谨慎使用 delete 来删除对象属性。

循环对象

有多种方式来循环访问对象属性。

使用 for-in。

const people = {
  "name": "devcursor",
  "cat": null,
  "site": "http://www.devcursor.com"
}
for (key in people) {
  console.log('key:', key)
  console.log('value:', people[key])
}

1
2
3
4
5
6
7
8
9

提示

使用方括号访问对象属性时，支持变量。上面的例子中，key 就是一个变量。

使用 Object.keys()、Object.values()、Object.entries()。

var obj = { "foo": 'bar', "baz": 42 };
Object.keys(obj)
// ["foo", "baz"]
const obj = { "foo": 'bar', "baz": 42 };
Object.values(obj)
// ["bar", 42]
const obj = { foo: 'bar', baz: 42 };
Object.entries(obj)
// [ ["foo", "bar"], ["baz", 42] ]

// 因为这3个方法返回的都是数组，也可以使用 for-of 来遍历数组
for (let key of Object.keys(obj)) {
  console.log(key); // foo, baz
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

数组访问

{
  "name": ["devcursor", "good"]
}

1
2
3

可以通过数组索引值来访问数组元素。

const x = people.name[0]

修改数组值

可以使用索引值来访问并且修改数组元素值。

people.name[1] = 'very good'

删除数组元素

对于数组的删除操作方式有很多，这里仅列举其中一种，更多的使用方法请查阅 Javascript 数组 API。

const people = {
  "name": ["devcursor", "good"]
}
people.name.splice(1, 1)
console.log(people)
// { name: ['devcursor'] }

1
2
3
4
5
6

循环数组

循环访问数组除了有 for-in、for-of 等语句外，还有很多数组本身的 API 可以实现。

const people = {
  "name": ["devcursor", "good"]
}
for (let item of people.name) {
  console.log(item); // devcursor, good
}

1
2
3
4
5
6

JSON 使用 #

对象访问 #

数组访问 #

JSON 使用

对象访问

数组访问