1.4 JS 常用数据类型
1.4.2 引用数据类型
1.4.2.1 object 对象数据类型 - 普通对象
-
语法 : {[key]:[value],...}
任何一个对象都是由零到多组键值对(属性名:属性值)组成的
属性名不能重复
属性名都是字符串(可不写引号,默认转换为字符串)
-
操作
- 查: 获取属性名及属性值
- 对象.属性名
- 对象['属性名'] 属性名是数字或者字符串格式
- 如果当前属性名不存在,默认的属性值是 undefined
- 如果属性名是数字,则不能用点的方式获取属性值
let person = { name :'小明', age : 40 , height : '185cm', 1: 100 } console.log(person.name); // => '小明' console.log(person['age']); // => 40 console.log(person.sex); // => undefined console.log(person[1]); // => 100 console.log(person.1); // => 语法错误 SyntaxError: missing ) after argument list - 增: 设置属性名属性值
let person = {
name :'小明',
age : 40 ,
height : '185cm',
1 : 100
}
person.GF = '圆圆';
console.log(person['GF']); // '圆圆'
console.log(person.GF); // '圆圆'
- 改:
- 属性名不能重复
- 如果属性名已经存在,不属于新增,属于修改
let person = {
name :'小明',
age : 40 ,
height : '185cm',
1 : 100
}
person.name = '小刚';
console.log(person['name']); // '小刚'
console.log(person.name); // '小刚'
- 删:删除属性
- 真删除delete: 把属性彻底删掉
- 假删除null/undefined: 属性还在,值为空
delete person[1];
person.age = null;
console.log(person);
// {name: '小明', age: null, height: '185cm', GF: '圆圆'}
console.log(age);
// 报错 age is not defined
-
变量和属性名的区别
1.4.2.2 数组对象
- 数组是特殊的对象数据类型,基本结构:
- 我们中括号中设置的是属性值,数组的属性名是默认生成的数字,从 0 开始递增,而且这个数字代表每一项的位置,我们把其称为'索引' 即
- 从 0 开始,连续递增,代表每一项位置的数字属性名
- 天生默认一个属性名 length , 存储数组的长度,等于元素的个数
- 增删改查与上面普通对象一致,同时数字只能使用[]
- 获取第一项 ary[0]
- 获取最后一项 ary[ary.length -1]
- 向数组末尾追加一项 ary[ary.length] = xxx
let ary = [12, '哈哈' , true , 13];
console.log(ary.length); // 4
console.log(ary['length']); // 4
1.4.2.3 数据类型的区别 - 浅图解堆栈底层机制
结论
-
基本类型: 按值操作(直接操作的是值),所以也叫值类型
- a 和 b 无关 ,修改其中一个不影响另一个(见下)
-
引用类型: 操作的是堆内存的地址(按引用地址操作的),所以也叫引用类型
- m 和 n 有关,修改 n 的对象属性 m 也会联动改变(见下)
浏览器想要执行 JS 代码:
-
从电脑内存中分配出一块内存,用来执行代码(栈内存 Stack)(图中的上半部分)
-
变量存储空间
-
值存储空间
-
-
浏览器分配一个主线程用来自上而下执行 JS代码 (想象磁头)(图中的下半部分)
let a = 12;
let b = a;
b = 13;
console.log(a); // 13
let n = { name: '可口可乐' }
let m = n;
m.name = '百事可乐';
console.log(n.name); // '百事可乐'
创建变量赋值过程:
let a = 12;
@step1 创建变量,放到当前栈内存变量存储区域中
@step2 创建一个值 12,把它存储到当前栈内存值区域当中(仅基本类型值,引用类型值不是这样,见下)
@step3 =为赋值,其实赋值是让变量和值相互关联的过程
-
代码进栈执行
-
执行完出栈,下一行代码才能进栈执行
@step4 创建变量 b
@step5 让 b 与 12 关联
@step6 创建一个值 13,把它存储到当前栈内存值存储空间
@step7 让变量 b 和值 13 相互关联,并把 b 与 12 的关联取消
=========================引用类型值的存储============================ 接 4.
复杂值(引用类型值)的存储分为三个步骤
-
在堆内存中分配出一块新内存,用来存储引用类型值(堆内存 Heap)
内存有一个 16 进制
地址AAAFFF000 -
把对象中的键值对依次存储到堆内存当中
变量存进变量存储区,地址存进值存储区
-
把堆内存
地址和变量关联起来 n 指向 AAAFFF000 -
进栈执行
-
出栈
-
创建一个变量 m,把它存储到当前栈内存变量存储空间
-
将 m 与刚才的对象地址相关联 m 指向 AAAFFF000
-
修改AAAFFF000对应对象的 name 值
本图摘自珠峰培训视频
练习
let n = [10, 20];
let m = n;
let x = m;
m[0] = 100;
x = [30, 40];
x[0] = 200;
m = x;
m[1] = 300;
n[2] = 400;
console.log(n, m, x);// [100,20,400][200,300][200,300]
