五、对象

1.认识对象

什么是对象

JS 中的一种数据格式, 对象在 JS 中的数据类型数据为: 引用数据类型(也有喜欢叫复杂数据类型)
如何向变量中存储一个叫做对象的数据呢?
- 语法1: var obj = {键值对}
- 键值对 -> key: value
- 如果对象内部有多个键值对, 那么需要使用逗号间隔

什么是键值对 (拿对象 obj 为例子)

var obj = {
    a: 100,
    b: 200,
    c: 300,
    q: 666
}
console.log(obj)

复制代码

在这个对象中, a 为 key, 100 为对应 value
另外一种叫法: a 为键, 100 为对应的值
另外一种叫法: a 为属性名, 100 为对应的属性值

2. 创建对象

创建对象分为两种方式: (面试官: JS 中创建对象的方式有哪些?)

字面量的形式 (使用频率比较高)
- 语法: var obj = {键值对}
内置构造函数的创建
- 语法1: var obj1 = new Object() // 创建空对象
- 语法2: var obj1 = new Object({a: 1, b: 2}) // 创建一个具有属性或者说具有键值对的对象
- 注意: new Object的 O 是大写的, 不是小写

3. 对象的操作(增删改查)

换句话说, 就是对内部的属性的操作

分为两种方式

点语法
中括号语法(数组语法)

一般来说, 大部分场景使用点语法更简单, 有一些特殊场景只能使用中括号语法

var obj = {
    a: 1,
    b: 'qwe',
    c: true
}
console.log('原始对象: ', obj)

//1. 点语法---查询:    获取到 对象内部 某一个属性对应的属性值
console.log(obj.a)  // 1
console.log(obj.b)  // 'qwe'

//2. 点语法---新增:    向对象内部新增一个属性
obj.q = 'QF001'
obj.w = 'QF666'
console.log('最新的对象: ', obj)

//3. 点语法---修改:        修改对象内部某一个属性对应的属性值
obj.c = false
obj.b = 'QF001'
console.log('修改属性后的对象: ', obj)

//4. 点语法---删除:        删除对象内部的某一个属性
delete obj.a
console.log('删除属性后的 obj: ', obj)


//5. 中括号语法---查询
console.log(obj['a'])   // 1
console.log(obj['c'])   // true

//6. 中括号语法---新增 
//obj['r = 123']
//obj['r'] = 123
obj['w'] = 456
console.log('新增后的 obj: ', obj)

//7. 中括号语法---修改
obj['b'] = 'QF001'
obj['c'] = false
console.log('修改后的 obj: ', obj)

//8. 中括号语法的删除
delete obj['a']
console.log('删除属性后的 obj: ', obj)
复制代码

4.两种操作语法的差别

一般大部分情况下, 点语法与中括号语法, 作用相同, 怎么选择都可以, 特殊情况下我们需要使用中括号语法

对象的属性名, 有纯数字或者特殊符号, 这个时候, 就只能使用中括号语法
如果涉及变量相关的时候, 也需要使用中括号

//特殊情况1
var obj = {
    100: '我的属性名是 纯数字 100',
    '!': '我的属性名是 特殊符号 !',
    '@': '我的属性名是 特殊符号 @'
}

// 此时不能使用点语法, 可以使用中括号语法
// console.log(obj.100)
// console.log(obj.!)
// console.log(obj.@)
console.log(obj[100])
console.log(obj['100'])
// console.log(obj[!]) // 有问题, 需要将 特殊符号用引号包裹
console.log(obj['!'])
console.log(obj['@'])
复制代码

// 特殊情况2
var obj = {
    a: 1,
    b: 2,
    name: 'QF001'
}

var myName = 'name'
//console.log(obj.myName)
//实际的输出结果是 undefined
//因为 对象的 点语法, 会将 点 后边的 字符 当成一个 字符串去使用, 而不会当成变量
//拿 obj.myName 举例他会将 myName 当成一个 字符串 去 对象中查找, 有没有一个叫做 myName 的属性名
//找完之后 发现对象中没有这个属性名, 所以打印的值 为 undefined


console.log(obj[myName])    // 'QF001'
//中括号语法, 内部书写的字符, 如果不加引号, 会把它当成变量去使用, 所以找到实际的值之后, myName 这个变量对应的值为'name'
//所以 obj[myName]  相当于 写了 obj['name']
//所以会去 对象 obj 中 找一个 叫做 name 的属性名, 找到之后 打印在页面
复制代码

5. for...in遍历对象

for...in 循环遍历对象

for...in: 一个循环语句
对象: 一种数据格式
遍历: 一般我们会说 '遍历对象' / '遍历数组'
- '遍历对象' 想办法拿到对象内部所有的属性名与属性值
语法: for (var i in 要遍历的对象) { 循环要执行的代码 }

var obj = {
    a: 1,
    q: 'qwe',
    t: true,
    u: undefined
}
 for (var i in obj) {
     console.log(obj[i]) // 该对象的所有属性值

笔记五、JavaScript——对象

五、对象

1.认识对象

2. 创建对象

3. 对象的操作(增删改查)

4.两种操作语法的差别

5. for...in遍历对象