## 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问题
- 临时
- 好文
- 节流防抖