了解对象
什么是对象?
就是一个数据的集合(复杂数据)
JS 的数据类型? 1. 基本数据 2. 复杂数据
对象属于复杂数据类型(引用数据类型)
说起来是复杂数据,但也不复杂
引用数据类型:object function array
var obj = {
// 内部存放键值对 (还有人叫 key/value; 属性名: 属性值)
name: 'QF', // 逗号间隔
age: 18 // 冒号左边: 健; 冒号右边: 值;
}
创建对象
1. 字面量的形式
var obj = {
name: 'QF',
age: 18
}
console.log(obj)
2. 通过内置构造函数
var obj = new Object() //创建一个空对象
console.log(obj)
对象对于 key 的要求
1. 推荐使用 符合变量命名规范和规则的
2. 可以使用数字作为 key
3. 可以使用特殊符号
var obj = {
123: '112233',
'@': '特殊符号@',
'#': '特殊符号#'
}
#对象的操作 (增删改查) 1. 点语法 var obj = { name: 'wy' }
// 1.1 查 (对象.key)
console.log(obj.name)
// 1.2 修改 (对象.key = 新值)
obj.name = 'QF666'
console.log(obj)
// 1.3 增加 (对象.新key = 值)
obj.age = 18 // 向 对象 obj 中 新增一个 key --> age 对应的值为 18
console.log(obj)
// 1.4 删除 (delete obj.key)
delete obj.name
console.log(obj)
2. 中括号语法(数组语法)
// 2.1 查 (对象['key'])
console.log(obj['name'])
// 2.2 修改 (对象['key'] = 新值)
obj['name'] = 'QF999'
console.log(obj)
// 2.3 增加 (对象['新key'] = 值)
obj['age'] = 18
console.log(obj)
// 2.4 删除 delete 对象['key']
delete obj['name']
console.log(obj)
3.如何选择两种方式
1. 对象 的 key 符合命名规范的时候 都可以
2. 出现纯数字 为 key 或者 特殊符号 @#,我们需要使用 中括号语法
3. 当出现变量的时候(想用变量作为 key) 也需要使用 中括号语法
遍历对象
就是拿到对象的所有的键值对
var obj = {
a: 123,
b: 456,
c: 789
}
// for...in 循环
for (var key in obj) {
// console.log(key) // 每一轮循环拿到的都是 对象 的 key
console.log(key, obj[key])
}
数组数据类型
- 什么是数组 是存放一些数据的集合
创建数组数据类型
使用字面量的方式创建数组
var arr = [1, 2, 3, 4, 5]
console.log(arr)
内置构造函数创建数组
var arr1 = new Array() // 空数组
console.log(arr1)
var arr2 = new Array(5) // 创建一个长度为 5 的数组(虽然有长度, 但是实际的值为 空)
console.log(arr2)
var arr3 = new Array(5, 10) // 创建一个有内容的数组, 第一个值为 5 第二个值为 10
console.log(arr3)
数组的 length 属性
数组的 length,代表了 数组的 成员数量
语法: 数组.length
var arr = [1, 2, 3, 4, 5, undefined]
console.log(arr.length)
数组的索引概念
数组的索引就代表了当前数据在数组的第几个位置(注意!!! 下标 从 0开始)
// 通过 下标获取数组对应的成员
console.log(arr[0]) // 1 获取数组的第一个成员
console.log(arr[4]) // 5
console.log(arr[arr.length - 1]) // 相当于 arr[4] ---> 5
for 循环遍历数组
var arr = [1, 2, 3, 4, 5]
for (var i = 0; i < arr.length; i++) {
// console.log(i)
console.log(arr[i])
}
数据类型之间的区别
存储的区别
1. 基本数据类型: 存储在栈内存中, 变量内部就是实际的值
2. 引用数据类型: 变量存储在栈内存中, 变量内部存储的是 指向堆内存的地址(对象实际的值, 存储在堆内存中)
赋值的区别
1. 基本数据类型: 是值的传递
可以理解为, 将我自身的值复制一份 给到另一个变量, 后续修改另一个变量时,与我自身没有任何关系
2. 引用数据类型:是地址的传递
可以理解为, 将自身的地址复制一份给到另一个变量, 后续修改互相会有影响
var a = 100
var b = a
b = b * 2
console.log(a) // 100
console.log(b) // 200
var a = {
name: 'wy'
}
var b = a
b.name = '修改后的name'
console.log(a)
console.log(b)
比较的区别
1. 基本数据类型
比较时, 是拿变量实际的值, 去做对比
2. 引用数据类型
比较时, 是拿引用地址做对比, 判断是不是执行一个地址
var a = 100
var b = 200
console.log(a === b) // false
var c = {
name: 'wy'
}
var d = c
var e = {
name: 'wy'
}
console.log(c === d) // true
console.log(c === e) // false
传参的区别
1. 基本数据类型
是值的传递, 将自身的值复制一份传递给函数的形参
2. 引用数据类型
是地址的传递, 将自身的地址复制一份传递给函数的形参
var a = 100
var b = {
name: 'wy'
}
function fn(x, y) {
x = 500
y.name = 'wwwww'
}
fn(a, b)
console.log(a) // 100
console.log(b.name) // wwwww