龙空技术网

JavaScript中处理JSON的全面指南

Crazylei 72

前言:

目前各位老铁们对“js循环输出json数据”大概比较珍视,同学们都需要分析一些“js循环输出json数据”的相关知识。那么小编也在网摘上收集了一些关于“js循环输出json数据””的相关资讯,希望姐妹们能喜欢,我们一起来学习一下吧!

JSON对象是什么?

JSON代表JavaScript对象表示法,是一种基于JavaScript对象语法的结构化数据的标准文本格式。JSON仅定义了两种数据结构:对象和数组。JSON对象是由花括号括起来的键/值对组成的数据类型。JSON数组是值的列表。当数据从服务器发送到网页或在文件或数据库中存储数据时,通常会使用JSON对象。JSON与JavaScript对象文字语法非常相似,但可以独立于JavaScript使用。许多编程环境支持读取和生成JSON。

JSON对象的特点

它们以逗号分隔的键/值对形式编写。键是用双引号括起来的字符串,值必须是以下JSON数据类型字符串数字对象数组布尔值空值它们由花括号{}括起来。花括号也可以用于在对象内部嵌套对象,从而创建分层结构。数组用方括号[]括起来,它们的值用逗号(,)分隔。数组中的每个值可以是不同的类型,包括另一个数组或对象。它们区分大小写,这意味着键和值在拼写和大小写上必须完全匹配。它们不允许尾随逗号。简单来说,花括号外部或双引号内部不应该有任何不属于键/值对的文本。它们不允许注释。

JSON提供了几个优点,使其成为表示结构化数据的热门选择:

简单易读:JSON简单直观,易于理解。与XML等更冗长的格式不同,JSON相对容易阅读。其简洁的语法允许高效的数据表示。解析简便:JSON的解析比XML更简单快速。灵活性:JSON支持各种数据类型和对象层次结构,并且关系可以在传输过程中保持并在接收端适当地重新组装。广泛应用:大多数现代API接受JSON请求并发出JSON响应,使其成为系统之间数据交换的通用格式。

JSON对象示例

基本JSON对象:{"name": "Natalie", "married": false, "age": 21, "city": "New York", "zip" : "10001", "awards": null}

嵌套JSON对象:这是一种由名称/值对列表组成的数据类型,其中一个或多个值是另一个JSON对象。{"person": {"name": "Natalie", "age": 21}, "address": {"street": "123 XYZ Street", "City": "New York", "State" : "NY", "zip": "10001"}}

JSON对象数组:[ { "name": "Natalie", "age": 21 }, { "name": "David", "age": 37 }, { "name": "Mark", "age": 43 } ]

解析JSON对象

解析是将JSON对象转换为本机JavaScript对象的方法。

JSON.parse()方法:JSON.parse()方法解析字符串并返回一个JavaScript对象。字符串必须是JSON格式。

语法:JSON.parse(string, function)

参数

必需/可选

描述

字符串

必需

以JSON格式编写的字符串

Reviver函数

可选

一个接受键和值作为参数并返回修改后的值或undefined以删除属性的函数。对每个项目调用该函数。任何嵌套对象在父对象之前转换。

示例

var text = '{"name": "Natalie", "married": false, "age": 21, "city": "New York", "zip" : "10001", "awards": null}';var obj = JSON.parse(text, function (key, value) {     if (key === "name") {       return value.toUpperCase();     } else {       return value;     }});console.log(obj);

输出

{     name: 'NATALIE',     married: false,     age: 21,     city: 'New York',     zip: '10001',     awards: null}

JSON.stringify()方法

该方法将JavaScript对象转换为字符串。在将数据发送到Web服务器时,数据必须是字符串。JSON.stringify()也适用于数组。

语法:JSON.stringify(obj, replacer, space)

参数

必需/可选

描述

Obj

必需

要转换为字符串的值

Replacer

可选

用于转换结果的函数或数组。对每个项目调用replacer。

Space

可选

用作空格的字符串(最多10个字符)或数字,从0到10,表示要用作空格的空格字符数。

示例

var obj = {"name": "Natalie", "married": false, "age": 21, "city": "New York", "zip" : "10001", "awards": null};var text = JSON.stringify(obj, function (key, value) {     if (key === "name") {       return value.toUpperCase();     } else {       return value;     }});console.log(text);

输出

{"name":"NATALIE","married":false,"age":21,"city":"New York","zip":"10001","awards":null}

/*为每个空格插入单词SPACE:*/var newText = JSON.stringify(obj, null, "space");console.log(“Text with the word space “+ newText);

输出

Text with the word space {space"name": "Natalie",space"married": false,space"age": 21,space"city": "New York",space"zip": "10001",space"awards": null}

JSON对象导航

可以使用点(.)或方括号([])表示法导航到其属性并访问它们的值。

// 使用点表示法访问名称var obj = {"name": "Natalie", "married": false, "age": 21, "city": "New York", "zip" : "10001", "awards": null};console.log(obj.name);                      输出:Natalie
// 使用点表示法访问城市console.log(obj["city"];                      输出:New York
var obj_array = [ { "name": "Natalie", "age": 21 }, { "name": "David", "age": 37 }, { "name": "Mark", "age": 43 } ]
// 使用点和方括号表示法访问第一个成员的名称console.log(obj_array[0].name);       输出:Natalie
// 使用点和方括号表示法访问第二个成员的年龄console.log(obj_array[1][ "age"]);     输出:37

Object.keys()方法

keys()方法返回给定对象的自身可枚举字符串键属性的数组。作为静态方法的keys()方法使用Object类名调用。

语法:Object.keys(obj)

参数

必需/可选

描述

obj

必需

要返回其可枚举属性的对象

Object.values()方法

values()方法返回给定对象的自身可枚举字符串键属性值的数组。作为静态方法的values()方法使用Object类名调用。

语法:Object.values(obj)

参数

必需/可选

描述

obj

必需

要返回其可枚举属性的对象

Object.entries()方法

该方法返回对象的可枚举属性的键值对数组。作为静态方法的entries()方法使用Object类名调用。

语法:Object.entries(obj)

参数

必需/可选

描述

obj

必需

要返回其可枚举属性的对象

示例

var obj = {"name": "Natalie", "married": false, "age": 21, "city": "New York", "zip" : "10001", "awards": null};var keys = Object.keys(obj);var values = Object.values(obj);var entries = Object.entries(obj);console.log("Array of keys :");console.log(keys);console.log("Array of values :");console.log(values);console.log("Array of entries :");console.log(entries);

输出

Array of keys :[ 'name', 'married', 'age', 'city', 'zip', 'awards' ]Array of values :[ 'Natalie', false, 21, 'New York', '10001', null ]Array of entries :[     [ 'name', 'Natalie' ],     [ 'married', false ],     [ 'age', 21 ],     [ 'city', 'New York' ],     [ 'zip', '10001' ],     [ 'awards', null ]]

for循环

for循环重复执行,直到指定的条件评估为false。

语法:for (初始化; 条件; 表达式) {要执行的代码块}

参数

必需/可选

描述

初始化

必需

在执行代码块之前执行一次

条件

必需

执行代码块的条件

表达式

必需

在执行代码块后每次执行

示例

var obj = [ { "name": "Natalie", "age": 21, "married": true }, { "name": "David", "age": 37, "married": false }, { "name": "Mark", "age": 43, "married": true } ];for(var i=0; i<obj.length; i++) {           console.log("Name:  " + obj[i]["name"]); //使用方括号表示法           console.log("Married Status:     " + obj[i].married); //使用点表示法}

输出

输出Name:     NatalieMarried Status:  trueName:     DavidMarried Status:  falseName:     MarkMarried Status:  true

for…in循环

for...in语句遍历对象的所有可枚举字符串非符号属性,包括继承的可枚举属性。循环内部的代码块对每个属性执行一次。

语法:for (item in object) {要执行的代码块}

参数

必需/可选

描述

item

必需

用于迭代属性的变量

object

必需

要迭代的对象

示例

var obj = [ { "name": "Natalie", "age": 21, "married": true }, { "name": "David", "age": 37, "married": false }, { "name": "Mark", "age": 43, "married": true } ];for(item in obj) {           console.log("Name:  " + obj[item]["name"]); //使用方括号表示法           console.log("Married Status:     " + obj[item].married); //使用点表示法}

输出

Name:     NatalieMarried Status:  trueName:     DavidMarried Status:  falseName:     MarkMarried Status:  true

for…of循环

for..of循环按顺序操作来自可迭代对象的值。

语法:array.forEach(iterable object) {statement}

参数

必需/可选

描述

Variable

必需

对于每次迭代,下一个属性的值被赋给变量。变量可以使用const、let或var声明。

Iterable object

必需

循环操作的值来源。

Name: Natalie

Married Status: true

Name: David

Married Status: false

Name: Mark

Married Status: true

## `forEach()`**方法** `forEach()`方法对数组中的每个元素调用一个函数。它必须至少接受一个参数,该参数表示数组的元素。*语法:*`array.forEach(function(currentValue, index, array), thisValue)`|  |  |  || --- | --- | --- || **参数**  | **必需/可选**  | **描述**  || Function  | 必需 | 用于对数组每个元素运行的函数 || currentvalue | 必需 | 当前元素的值 || index | 可选 | 当前元素的索引 || Array | 可选 | 当前元素的数组 || Thisvalue | 可选 | 作为this值传递给函数的值。默认为undefined。 |### 示例```jsonvar obj = [ { "name": "Natalie", "age": 21, "married": true }, { "name": "David", "age": 37, "married": false }, { "name": "Mark", "age": 43, "married": true } ];obj.forEach((item, index, arr) => {       console.log("元素详情:     " +index);       console.log("姓名:      "+arr[index]["name"]);       console.log("年龄:      "+item.age);});
输出
元素详情:  0姓名:      Natalie年龄:      21元素详情:  1姓名:      David年龄:      37元素详情:  2姓名:      Mark年龄:      43
结论

JSON通常用于在服务器和Web应用程序之间传输数据。JSON的灵活性、易解析性和简单性使软件开发人员能够在各种编程环境中高效地处理结构化数据。

标签: #js循环输出json数据 #在js中json循环取值