什么是对象
JS 中的一种数据格式, 对象在 JS 中的数据类型数据为: 引用数据类型(也有喜欢叫 复杂数据类型)
如何向变量中 存储一个 叫做 对象的数据呢?
创建对象
1.字面量形式
语法1: var obj = {键值对}
键值对 -> key: value
如果对象内部有多个 键值对, 那么需要使用 逗号 间隔
<script>
var obj = {
a: 100,
b: 200,
c: 300,
q: 666
}
console.log(obj)
/**
* 什么是键值对 (拿 对象 obj 为例子)
* 在这个对象中, a 为 key, 100 为对应 value
* 另外一种叫法: a 为 键, 100 为 对应的 值
* 另外一种叫法: a 为 属性名, 100 为 对应的 属性值(可以为任意形式包括函数)
*
* b 为 key, 200 为对应的 value
* b 为 键, 200 为对应的 值
* b 为 属性名, 200 为对应的属性值
*/
</script>
2. 内置构造函数的创建
语法1: var obj1 = new Object() // 创建空对象
语法2: var obj1 = new Object({a: 1, b: 2}) // 创建一个具有属性或者说具有键值对的 对象
!注意: new Object 的 O 是大写的, 不是小写
语法1:
<script>
var obj1 = new Object() // 创建空对象
</script>
语法2:
<script>
// 2. 内置构造函数的方式
var obj1 = new Object({
a: 1,
q: 777,
w: 666,
e: 'qwer'
})
console.log(obj1)
</script>
对象的操作(增删改查)
换句话说, 就是对内部的属性的操作 分为两种方式
1.点语法
<script>
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'
3. 点语法---修改: 修改对象内部某一个属性对应的属性值
语法:对象名.修改的属性名 = 修改的属性值
obj.c = false
obj.b = 'QF001'
4. 点语法---删除: 删除对象内部的某一个属性
语法:对象名.删除的属性名
delete obj.a
</script>
2.中括号语法(数组语法)
<script>
1. 中括号语法---查询
语法:对象名['属性名']
console.log(obj['a']) // 1
console.log(obj['c']) // true
2. 中括号语法---新增
语法:对象名['新增属性名'] = 新增属性值
obj['r = 123']
obj['r'] = 123
obj['w'] = 456
3. 中括号语法---修改
语法:对象名['修改的属性名'] = 修改的属性值
obj['b'] = 'QF001'
obj['c'] = false
4. 中括号语法的删除
语法:对象名['删除的属性名']
delete obj['a']
</script>
**一般来说, 大部分场景使用点语法更简单, 有一些特殊场景只能使用 中括号语法 **
一般大部分情况下, 点语法与中括号语法, 作用相同, 怎么选择都可以 特殊情况下我们需要使用中括号语法
1. 对象的属性名, 有纯数字或者特殊符号, 这个时候, 就只能使用中括号语法
<script>
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['@'])
</script>
2. 如果涉及变量相关的时候, 也需要使用中括号
<script>
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 的属性名, 找到之后 打印在页面
*/
</script>
对象关于 key 的要求 或者说 对于属性名的要求 或者说 对于 键值对的键 的要求
- 推荐使用符合变量命名规则与规范的名字
- 对象的 key 也可以使用 纯数字 来当作键名(属性名/key)
- 可以使用任何特殊符号 (但是需要使用引号包裹)
for...in 循环遍历对象
for...in: 一个循环语句
对象: 一种数据格式
遍历: 一般我们会说 '遍历对象' / '遍历数组'
'遍历对象' 想办法拿到对象内部所有的 属性名与属性值
语法: for (var i in 要遍历的对象) { 循环要执行的代码 }
<script>
for (var i in obj) {
// console.log(1)
// console.log(i) // a q t u 这四个 是 对象 obj 的 所有 属性名 / 键名 / key
// 需求: 打印对象所有的属性值
// console.log(obj) // 此时打印的是完整的对象, 所以不合适
// console.log(obj.i) // undefined 点语法会将后边的字符当成字符串来使用, 而不是当成变量, 如果相当变量来使用, 那么应该使用中括号语法
console.log(obj[i]) // 该对象的所有属性值
}
</script>
认识 数组
数组 是一种数据类型, 他也是属于 引用数据类型(复杂数据类型) 根据字面意思来说, 存放数字的一个组合, 但这样说有点片面了 更完善的说法: 数组是存放一些数据的集合 换句话说: 我们把数据放在一个盒子中, 这个盒子就叫做数组,
注意! 数组内的数据是有顺序的
<script>
var arr = [2, 1, 3, 'q', 'w', 'e', true, false, undefined]
console.log(arr)//打印值为[2, 1, 3, 'q', 'w', 'e', true, false, undefined]
</script>
创建数组
1. 字面量的方式
<script>
// 语法: var 数组名 = [数据1,数据2,数据3, 数据4, 数据5,数据6,....]
var arr = [1, 2, 3, 'q', 'w', 'e']
</script>
2. 内置构造函数的方式
<script>
//语法1: var 数组名 = new Array() 创建一个空数组
var arr1 = new Array()
//语法2: var 数组名 = new Array(5) 创建一个有长度的数组
var arr2 = new Array(5)
//语法3: var 数组名 = new Array(数据1,数据2,数据3) 创建一个有内容的数组
var arr3 = new Array(1, 2, 3, 'q', 'w', 'e')
</script>
数组的 length 属性
length 翻译过来就是 长度的意思
代表 这个数组内, 有多少个成员
语法: 数组名.length
<script>
var arr1 = [1, 2, 3, 4, 5]
var arr2 = ['q', 'w', 'e', 'r']
var arr3 = new Array(1, 2, 3, 4, 5, 6)
// console.log(arr1.length) // 5
// console.log(arr2.length) // 4
</script>
数组的索引
索引 也有人叫做 下标
就是指一个数据, 在这个数组内排列在第几个 位置上
注意: 在 JS 中, 索引(下标) 是从 0 开始计算的 如果想要获取到数组指定位置的值, 可以通过下标来获取 语法: 数组名[下标] -> 能够获取到这个数组中对应下标的成员具体的值
<script>
var arr = ['b', 'a', 'c', 1, 2, 3]
// 0 1 2 3 4 5
console.log(arr[0]) // b
console.log(arr[3]) // 1
</script>
遍历数组
想办法 拿到 数组的每一个成员 想拿到数组的所有成员, 需要先想办法拿到数组的所有下标 规律: 所有数组的下标都是从 0 开始的, 然后到 数组.length - 1 结束
<script>
var arr = ['b', 'a', 'c', 1, 2, 3]
// 0 1 2 3 4 5
var arr1 = ['b', 'a', 'c', 1, 2]
// 0 1 2 3 4
for (var i = 0; i < arr.length; i++) {
// 需求, 就是根据 arr 这个数组, 拿到他的所有下标
console.log(i) // 0 1 2 3 4 5
// 需求: 拿到数组所有的值, 输出在控制台
console.log(arr[i])
}
</script>
