## js中的數組對象
**js中的一切均為對象數組本質上也是一種對象。**
var a = 'b';var j = {"c":1};j.a = 2;j
j的打印:Object {c: 1, a: 2}
怎么樣才能得到我們要的效果Object {c: 1, b: 2}呢?
分析:
j.a = 2;是設置一個對象,js中.是訪問對象的符號
我們可以這樣:
var a = 'b';var j = {"c":1};j[a] = 2;j
j的打印:Object {c: 1, b: 2}
中括號是對象的訪問方式,但是上面說了一切都為對象,所以中括號也能訪問對象。通過用中括號的方式設置才會將a當做變量,才能達到我們的目的。
總結:js中.專門用來訪問對象的成員的,[]一般用來訪問數組的,但是數組本身也是一種對象,所以[]也可以用來訪問對象。。。
比如:
var a = 's';
a.length // 1
a['length'] // 1
### 擴展
> 方括號這種寫法,屬于“屬性名表達式”(參見[《對象的擴展》](https://es6.ruanyifeng.com/#docs/object#屬性名表達式)一章)。
有一種簡單的方法可以更簡單,處理上面的問題:
~~~javascript
var a = 'b';var s = {a:1};s;
Object {a: 1}
var a = 'b';var s = {[a]:1};s;
Object {b: 1}
~~~
js訪問不存在的對象不會報錯而是undefined,但是訪問不存在的對象元素的元素就會報錯:
~~~
> var a = {};
undefined
> a.b;
undefined
> a.b.c
VM196:2 Uncaught TypeError: Cannot read property 'c' of undefined(…)
~~~
根據這個特性,所以有時候需要注意,在react中管理state時要經常注意這個問題,可以提前定義空數據數據,不然在數據返回前會報錯。
在store中定義:
~~~
data: {
userInfo: {
superiors: {},
},
userDingTalkInfo: {},
},
~~~
不然在render()中
~~~
let data = t.state.userInfo;
{data.nickname} 會報錯!
~~~
----
```javascript
const func = new Function();
const obj = new Object();
func.__proto__ === Function.prototype; // true
obj.__proto__ === Object.prototype; // true
Function.prototype.__proto__ === Object.prototype; // true
Object.prototype.__proto__ === null; // true
```
[為什么let Function = new Function() 這個等式不成立?? - 知乎](https://www.zhihu.com/question/481077850/answer/2072690405)
----
### 擴展
上面說到
>[info] js訪問不存在的對象不會報錯而是undefined,但是訪問不存在的對象元素的元素就會報錯
那么再JS中處理這些就會很麻煩了,比如我要確定a.b是否存在我得先確定a存在,不能給直接判斷。
即使是:
```javascript
if (a.b typeof == 'undefined'){}
```
也會報錯 Uncaught ReferenceError: a is not defined(…)
而在PHP雖然直接使用未定義未聲明的變量也會有提示報錯,但是這種并不像JS這樣,所以這個PHP會方便一些。
```php
if (empty($result[1])) {
echo "string";
}
```
這樣間接訪問不在變量并不會報錯
* * * * *
### 注意的問題
js對象沒有length 屬性,所以判斷非空對象時要特別注意,參考:[javascript中怎么判斷對象{}為空](http://www.cnblogs.com/exhuasted/p/6098437.html)
* * * * *
### 擴展
[JavaScript 創建對象的七種方式](https://mp.weixin.qq.com/s/F8UVqtkFQsxCDTZIroXWpg)
* * * * *
### 申明與定義
`var`只是申明,未申明的變量直接使用會報錯'Uncaught ReferenceError: b is not defined',申明了的變量,未賦值,使用不會報錯,但是值為`undefined(未定義)`,所以未申明直接會報錯,報錯為“未定義”,申明后,使用不會報錯,但是值還是為“未定義”。
如果輸出對象不存在的屬性,不會報錯,但是值未“undefined 未定義”。
* * * * *
update time : 2018-6-20 18:22:04
- 開始
- 微信小程序
- 獲取用戶信息
- 記錄
- HTML
- HTML5
- 文檔根節點
- 你真的了解script標簽嗎?
- 文檔結構
- 已經落后的技術
- form表單
- html實體
- CSS
- css優先級 & 設計模式
- 如何編寫高效的 CSS 選擇符
- 筆記
- 小計
- flex布局
- 細節體驗
- Flex
- Grid
- tailwindcss
- JavaScript
- javascript物語
- js函數定義
- js中的數組對象
- js的json解析
- js中數組的操作
- js事件冒泡
- js中的判斷
- js語句聲明會提前
- cookie操作
- 關于javascript你要知道的
- 關于innerHTML的試驗
- js引擎與GUI引擎是互斥的
- 如何安全的修改對象
- 當渲染引擎遇上強迫癥
- 不要使用連相等
- 修改數組-對象
- 算法-函數
- 事件探析
- 事件循環
- js事件循環中的上下文和作用域的經典問題
- Promise
- 最佳實踐
- 頁面遮罩加載效果
- 網站靜態文件之思考
- 圖片加載問題
- 路由及轉場解決方案
- web app
- 寫一個頁面路由轉場的管理工具
- 談編程
- 技術/思想的斗爭
- 前端技術選型分析
- 我想放點html模板代碼
- 開發自適應網頁
- 后臺前端項目的開發
- 網站PC版和移動版的模板方案
- 前后端分離
- 淘寶前后端分離
- 前后端分離的思考與實踐(一)
- 前后端分離的思考與實踐(二)
- 前后端分離的思考與實踐(三)
- 前后端分離的思考與實踐(四)
- 前后端分離的思考與實踐(五)
- 前后端分離的思考與實踐(六)
- 動畫
- 開發小技巧
- Axios
- 屏幕適配
- 理論基礎
- 思考
- flexible.js原理
- 實驗
- rem的坑,為什么要設置成百分比,為什么又是62.5%
- 為什么以一個標準適配的,其它寬度也能同等適配
- 自適應、響應式、彈性布局、屏幕適配
- 適配:都用百分比?
- 番外篇
- 給你看看0.5px長什么樣?
- 用事實證明viewport scale縮放不會改變rem元素的大小
- 為什么PC端頁面縮放不會影響rem元素
- 究竟以哪個為設備獨立像素
- PC到移動端初試
- 深入理解px
- 響應式之柵格系統
- 深入理解px(二)
- 一篇搞定移動端適配
- flex版柵格布局
- 其他
- 瀏覽器加載初探
- 警惕你的開發工具
- JS模塊化
- webpack
- 打包原理
- 異步加載
- gulp
- 命名規范
- 接口開發
- sea.js學習
- require.js學習
- react學習
- react筆記
- vue學習
- vue3
- 工具、技巧
- 臨時筆記
- 怎么維護好開源項目
- 待辦
- 對前端MVV*C框架的思考
- jquery問題
- 臨時
- 好文
- 節流防抖