1.认识对象
* 什么是对象
* JS 中的一种数据格式, 对象在 JS 中的数据类型数据为: 引用数据类型(也有喜欢叫 复杂数据类型)
*
* 如何向变量中 存储一个 叫做 对象的数据呢?
* 语法1: var obj = {键值对}
*
* 键值对 -> key: value
* 如果对象内部有多个 键值对, 那么需要使用 逗号 间隔
* 什么是键值对 (拿 对象 obj 为例子)
* 在这个对象中, a 为 key, 100 为对应 value
* 另外一种叫法: a 为 键, 100 为 对应的 值
* 另外一种叫法: a 为 属性名, 100 为 对应的 属性值
*
* b 为 key, 200 为对应的 value
* b 为 键, 200 为对应的 值
* b 为 属性名, 200 为对应的属性值
2.创建对象
* 创建对象
*
* 创建对象 分为两种方式:
* 1. 字面量的形式 (使用频率比较高)
* 语法: var obj = {键值对}
* 2. 内置构造函数的创建
* 语法1: var obj1 = new Object() // 创建空对象
*
* 语法2: var obj1 = new Object({a: 1, b: 2}) // 创建一个具有属性或者说具有键值对的 对象
*
* 注意: new Object 的 O 是大写的, 不是小写
*
* 面试官: JS 中创建对象的方式有哪些?
* 目前暂时是 两种
* 1. 字面量的方式
* 2. 内置构造函数的方式
// 1. 字面量的方式
var obj = {
b: 2,
a: 1,
c: 0,
e: true,
d: 'abc',
q: undefined,
w: null,
r: function () {
console.log('我是 obj 对象 内 r 这个属性 的 属性值, 我是一个函数')
}
}
// console.log(obj)
// 2. 内置构造函数的方式
var obj1 = new Object({
a: 1,
q: 777,
w: 666,
e: 'qwer'
})
console.log(obj1)
3.对象的操作
* 对象的操作(增删改查)
*
* 换句话说, 就是对内部的属性的操作
*
* 分为两种方式
* 1. 点语法
* 2. 中括号语法(数组语法)
*
* 一般来说, 大部分场景使用点语法更简单, 有一些特殊场景只能使用 中括号语法 (下个视频讲)
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. 对象的属性名, 有纯数字或者特殊符号, 这个时候, 就只能使用中括号语法
* 2. 如果涉及变量相关的时候, 也需要使用中括号
// 特殊情况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)
/**
* obj.myName 我们猜想他这个 myName 是一个变量, 所以实际的应该是 obj.'name', 所以应该打印 obj 的name属性
*
* 但实际的输出结果是 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 要遍历的对象) { 循环要执行的代码 }
6.认识数组数据类型
* 认识 数组
*
* 数组 是一种数据类型, 他也是属于 引用数据类型(复杂数据类型)
*
* 根据字面意思来说, 存放数字的一个组合, 但这样说有点片面了
*
* 更完善的说法: 数组是存放一些数据的集合
*
* 换句话说: 我们把数据放在一个盒子中, 这个盒子就叫做数组, 注意! 数组内的数据是有顺序的
7.创建数组
* 创建数组
*
* 分两种方式
* 1. 字面量的方式
* 语法: var arr = [1, 2, 3, 'q', 'w', 'e']
* 2. 内置构造函数的方式
* 语法1: var arr = new Array() 创建一个空数组
* 语法2: var arr = new Array(5) 创建一个有长度的数组
* 语法3: var arr = new Array(1, 2, 3) 创建一个有内容的数组
*/
// 1. 字面量的方式
var arr = [1, 2, 3, 'q', 'w', 'e']
console.log(arr)
// 2. 内置构造函数的方式
// 2.1 创建一个空数组
var arr1 = new Array()
console.log(arr1)
// 2.2 创建一个有长度的数组
var arr2 = new Array(5)
console.log(arr2)
// 2.3 创建一个有内容的数组
var arr3 = new Array(1, 2, 3, 'q', 'w', 'e')
console.log(arr3)
8.数组的length
* 数组的 length 属性
* length 翻译过来就是 长度的意思
* 代表 这个数组内, 有多少个成员
*
* 语法: 数组名.length
9.数组的索引
* 数组的索引
*
* 索引 也有人叫做 下标
* 就是指一个数据, 在这个数组内排列在第几个 位置上
*
* 注意: 在 JS 中, 索引(下标) 是从 0 开始计算的
*
*
* 如果想要获取到数组指定位置的值, 可以通过下标来获取
*
* 语法: 数组名[下标] -> 能够获取到这个数组中对应下标的成员具体的值
10.遍历数组
* 遍历数组
* 想办法 拿到 数组的每一个成员
*
* 想拿到数组的所有成员, 需要先想办法拿到数组的所有下标
*
* 规律: 所有数组的下标都是从 0 开始的, 然后到 数组.length - 1 结束
11.