給媳婦看的

1.1 json資料格式

json是資料交換格式，常用於前端與後端的資料互動，比如前端發起乙個網路請求，伺服器會返回乙份資料，這份資料的格式就是json格式的，例如：

,]
}

可以看到在標準的json資料格式中，json資料中的key（也就是屬性）是字串型別的，一定會有「」引號包裹

還有就是json資料格式的層級是不限制的,往下可以無限的拓展

1.2 json物件

js中就是用json資料格式來做為物件使用的，比如

let person =,]
}

從中你會發現json物件和json格式外觀看起來幾乎是一模一樣的，不同的是 json物件的 key（屬性）沒有加上「」雙引號。但是: 這個key同樣是字串型別，只是它無需用雙引號包裹起來而已，就算我們用雙引號包裹起來，也是一樣的不會報錯。例如：

// 不加 "" 的json物件
let person =,]
}          console.
log(person)
;// 加 "" 的json物件
let person2 =,]
}          console.
log(person2)
;<
/script>

列印：

可以看到，不管key（屬性）加不加「」雙引號，列印出來的物件資訊都是一樣的

**只要是取物件的屬性值，一定是用.**

2.1 獲取屬性值

// 不加 "" 的json物件
let person =,]
}         console.
log(person.name)
;// 列印輸出ding
console.
log(person.age)
;// 列印輸出24
<
/script>

2.2 獲取json陣列中的某個屬性值

記住，要想獲取屬性值，就一定要先拿到該屬性所屬的物件

比如這樣乙個json物件陣列

let fuits =[,
]<
/script>

現在我們要拿到蘋果，怎麼獲取呢？

let fruits =[,
]/* 這種寫法是錯誤的，因為fruits沒有name這個屬性；
name這個屬性是fruits裡面的物件的，不是fruits自己的 */
// console.log(fruits.name);
// 列印：undefine
// 正確的做法是
// 1 先取出fruits中包含 蘋果 的物件0]
;// 2 再取屬性值
console.
log;
// 列印：蘋果
<
/script>

如上的**演示了，我們要獲取 json陣列物件中的某個屬性時，一定要先先拿到該屬性所屬的物件，再通過該物件去取屬性值

2.3 對2.2的衍生操作

如果json物件是這樣的：最外層是乙個json物件，裡面有三個屬性「name」,「age」,「children」,其中children屬性又是乙個json物件陣列

let person =,]
}<
/script>

我們怎麼去列印出來 name==「zhang」的屬性值呢？

**分析：**name == 「zhang」的屬性值屬於childrent陣列中的第乙個物件，按照獲取 json陣列物件中的某個屬性時，一定要先先拿到該屬性所屬的物件，再通過該物件去取屬性值這條規則，我們分幾步走

1 先獲取children的第乙個物件

let first = children[
0]

誒，你會發現，children沒有定義，因為children也是person物件的屬性，ok，那麼我們是不是應該先取出children再說啊：

1 先取出children陣列

let children = person.children;

2 再取出children第乙個物件

let first = children[
0]

3 列印出 name屬性

console.
log(first.name)
// 列印：zhang

2.4 json的遍歷

記住，要想獲取屬性值，就一定要先拿到該屬性所屬的物件

案例1：純josn陣列物件下的遍歷

// 現在我們要把所有的 水果名稱列印出來
let fruits =[,
]for
(let i=
0;i)<
/script>

案例2：json物件下 json陣列的遍歷

let person =,]
}// 鐵一樣的原則：記住，要想獲取屬性值，就一定要先拿到該屬性所屬的物件
// 需求：把children裡面，每個name列印出來
// 分析：
// 1 先獲取children屬性
let children = person.children
// 2 遍歷children，要想拿屬性，一定要先拿到物件，而不是直接 children.name
for(
let i=
0; i< children.length; i++
)// jq版本
$(children)
.each
(function
(index,obj)
)<
/script>

給媳婦看的

給男人們看的。。。

雜記給自己看的

think js 詳解（給自己看的）

給媳婦看的

給男人們看的。。。

雜記 給自己看的

think js 詳解（給自己看的）

相關推薦

雜記給自己看的