作为一个面向对象语言，Javascript也有对象，了解了基础语法后，这部分介绍Javascript对象。但是与其他面向对象语言不同，Javascript没有其他语言的类.
基本语法
JavaScript建立对象的方法, 看来看去都像是其他语言的字典, 不过使用起来和其他语言差不多
let book = {
title: 'wanwu.tech',
author: 'geng',
year: 2017
};
console.log(book);
console.log(book.title);
console.log(typeof book);
{ title: 'wanwu.tech', author: 'geng', year: 2017 }
wanwu.tech
object
添加与删除
不过因为JavaScript的对象是动态类型, 在建立完对象后,还可以添加或删除属性:
book.subTitle = 'tech and others';
console.log(book);
{ title: 'wanwu.tech',
author: 'geng',
year: 2017,
subTitle: 'tech and others' }
delete book.subTitle;
console.log(book);
{ title: 'wanwu.tech', author: 'geng', year: 2017 }
判断有无
可以使用in判断一个对象是否有某个属性:
'title' in book;
true
强大的[]
获取对象属性
我们已经使用过了.语法来获取某个属性的值。我们还可以使用[]来获取属性值。就如刚开始所说的，Javascript对象就像其他语言的字典一样：
book['title'];
'wanwu.tech'
那么这样做有什么好处呢？
- 我想添加一个属性’published date’怎么办？
如果使用点语法，那么没有办法做到，但是用
[]就简单了：
book['published date'] = 'future';
'future'
- 动态的使用函数添加属性（关于函数将在下一部分介绍）：
function getProperty(property) {
var code = book[property];
return code;
}
计算属性名
ES6开始, 支持了计算属性名. 这样, 属性名可以经计算得到:
var param = 'size';
var config = {
[param]: 12,
['mobile' + param.charAt(0).toUpperCase() + param.slice(1)]: 4
};
console.log(config); // {size: 12, mobileSize: 4}
{ size: 12, mobileSize: 4 }
可见, config的两个属性名都是基于其他属性得到的.
细节与杂项
还是, 有空就看, 或者当手册
属性值省写
先看代码:
function makeUser(name, age) {
return {
name: name,
age: age
};
}
let user = makeUser("John", 30);
console.log(user)
{ name: 'John', age: 30 }
属性名和变量名一样, 而且这种情况还常有, 那么作为作为一个合格的程序员, 你肯定是很懒得, 懒人就会有懒办法:
function makeUser(name, age) {
return {
name,
age
};
}
let user = makeUser("John", 30);
console.log(user)
{ name: 'John', age: 30 }
属性名和变量名一样, 可以省略书写变量
遍历对象所有属性
使用for in循环:
let user = {
name: "John",
age: 30,
isAdmin: true
};
for(let key in user) {
// keys
console.log( key ); // name, age, isAdmin
// values for the keys
console.log( user[key] ); // John, 30, true
}
name
John
age
30
isAdmin
true
因为对象可以看成一个字典, 这里使用key, 另一种命名方法也很常见: for(let prop in obj)
const object
const设置一个常量, 比如:
const noChange = 'Hi'
noChange = 'Hello'
evalmachine.<anonymous>:2
noChange = 'Hello'
^
TypeError: Assignment to constant variable.
at evalmachine.<anonymous>:2:10
at ContextifyScript.Script.runInThisContext (vm.js:44:33)
at Object.runInThisContext (vm.js:116:38)
at run ([eval]:617:19)
at onRunRequest ([eval]:388:22)
at onMessage ([eval]:356:17)
at emitTwo (events.js:125:13)
at process.emit (events.js:213:7)
at process.nextTick (internal/child_process.js:755:12)
at _combinedTickCallback (internal/process/next_tick.js:95:7)
但是, 如果const修饰对象呢:
const canIChange = {
name: 'wanwu.tech',
age: 1,
};
canIChange.name = '万物博客'
console.log(canIChange)
canIChange = {
name: '万物博客',
age: 1,
};
{ name: '万物博客', age: 1 }
evalmachine.<anonymous>:9
canIChange = {
^
TypeError: Assignment to constant variable.
at evalmachine.<anonymous>:9:12
at ContextifyScript.Script.runInThisContext (vm.js:44:33)
at Object.runInThisContext (vm.js:116:38)
at run ([eval]:617:19)
at onRunRequest ([eval]:388:22)
at onMessage ([eval]:356:17)
at emitTwo (events.js:125:13)
at process.emit (events.js:213:7)
at process.nextTick (internal/child_process.js:755:12)
at _combinedTickCallback (internal/process/next_tick.js:95:7)
根据上面的输出和错误提示, 可见:
- 常量对象的属性值可变
- 常量对象不可以更改引用地址
其实根据其他语言知识, 很明显对象是引用值, 那么其const只是规定其引用地址不变, 而且其中的值并没有说不能变.
那如果我想让其中的属性值不可变怎么办?
Object.defineProperty(canIChange, 'name', {
writable: false
});
canIChange.name = '我要'
canIChange.name
'万物博客'
具体方法不重要, 现在只是说可以这样做, 但是注意这里的改变失败悄声无息, 如果想让它报错, 可以: "use strict";
JSON基础
这里看下: Object <–> String
JSON.stringify: Object –> StringJSON.parse: String –> Object
let person = {
name: '万物',
age: 1,
isAdmin: true,
courses: ['html', 'css', 'js'],
};
let json = JSON.stringify(person);
console.log(typeof json);
console.log('JSON encoded object:')
console.log(json);
console.log('\n');
console.log('JSON parsed Object:')
let reborn = JSON.parse(json);
console.log(typeof reborn);
console.log(reborn);
string
JSON encoded object:
{"name":"万物","age":1,"isAdmin":true,"courses":["html","css","js"]}
JSON parsed Object:
object
{ name: '万物',
age: 1,
isAdmin: true,
courses: [ 'html', 'css', 'js' ] }
上面代码可见, 使用很简单, 但是有几个细节要注意:
JSON-encoded object有几个特点:
- 所有字符串都是双引号
- 对象属性名也用双引号
