第二章 引用数据类型及Js运行机制

白色板块
117 阅读4分钟

一. 引用数据类型

1.Object（普通对象）

  • 对象通俗理解就是说在这里边把多个信息整合起来

  • 用大括号包裹，里边是成对出现，俗称：键值对（key value），如果要多对就用逗号隔开{"属性名":"属性值"}，对象属性名一般是字符串或者是数字

  • 对象的增删改查

    • 查：
      • 第一种用法：对象.属性名（点语法）
      • 第二种用法：对象["属性名"]（中括号语法）
        • 中括号里边必须有引号，否则就会认为是未定义变量（数字除外）
      • 注意：属性名如果是数字，不能用点语法，只能用中括号语法
    • 新增和修改
      • 对象.属性名 = "属性值"
      • 如果属性名和属性值已经存在，就是修改，没有存在，就是增加
      • 有则修改，无则增加。
      • 如果添加的属性名不是字符串或者数字，那会转换为字符串
    • 删除
      • delate 对象.属性名//真删除
      • 对象.属性名 = null//假删除

2.数组

  1. 用中括号包含以逗号分隔的元素列表
  2. 数组（Array）是特殊对象：有顺序的
  • 它的属性名是数字：从左往右，从0开始递增，叫下标（索引）
  • 数组里面可以放任意数据类型的元素
  • 数组里边会默认有一个length的属性，值是数组长度
var ary = [100, 200, 300, "chengxiaohui", { age: 1 }, "wushihao", [1, 2, 3]];
    var res1 = ary[0];
    var res2 = ary[3];
    var res3 = ary[6];
    console.log(res3);

3.数据类型之间转换

  1. String() : 把其他类型转换为string类型
    1. 只要是普通对象{}，转换为字符串就是'[object Object]'
    2. 数组 [内容] 转换为字符串为 '内容，内容' 若有多个内容用逗号隔开。
    1. String({name:"lily"})===>'[object Object]'

String({})==>'[object Object]'

  1. Number() ：把其他数据类型转换为number类型

注意：要先转换为字符串在转换为数字类型

4.数据类型检测：

1.检测方式：typeof、instanceof、constructor、Object.prototype.toString.call()

  1. typeof

此类型使用时有缺陷：

    1. 不能识别出null
      1. 原因：所有代码在计算机中都是以二进制储存的，当你储存的前三位是000的时候，就会被识别为对象，因为null储存是全部为0，所以会被识别为对象
    1. 不能细分对象
  1. instanceof
  2. constructor
  1. Object.prototype.toString.call()
 var res1 = typeof 100;
    var res2 = typeof "今天天气还不错";
    var res3 = typeof true;
    var res4 = typeof null;
    var res5 = typeof undefined;
    var res6 = typeof Symbol();
    var res7 = typeof 10n;
    var res8 = typeof {};
    var res9 = typeof [];
    // var res10 = typeof function fn() { };
    console.log(res1, res2, res3, res4, res5, res6, res7, res8, res9);
    //"数据类型"  number string boolean object undefined symbol bigint object object

5.调试代码的输出方式

1.打印：

  • 代码：console.log（111）；
  • 特点：如果要输出多个，用逗号隔开，

2.详细输出：

  • 代码：console.dir（fn）；
  • 特点：输出一个对象或者一个值的详细信息，不可以输出多个值

3.弹框：

  • 代码：alert（值）
  • 特点：如果弹窗的内容不是字符串，会转换为字符串，还会阻塞代码的执行

4.提示框：

  • 代码：console.log（confirm（“你想删除这条数据吗？”））；
  • 特点：会有返回值ture/false，点击确定就是true，点击取消就是false

5.带输入框的提示框：

  • 代码：console.log（prompt（“你是男孩还是女孩？”））；
  • 特点：有返回值，点击确定就是你输入的内容，点击取消返回null

二. 浅谈js运行机制

1.堆栈内存和不同数据类型的操作方式

  • 定义：浏览器加载页面时，就会从计算机的内存条中分配出两快内存：堆内存（heap）和栈内存（stack）
  • 堆内存（heap）
    • 作用：主要存放引用数据类型的值
    • 值类型：值为对象的时候贮存键值对，如果是函数，就会把整个函数当成字符串进行储存
  • 栈内存（stack）
    • 给代码提供可执行的环境
    • 贮存基本数据类型的值

2.代码执行顺序

  • 代码是从上往下执行
  • 代码从右往左读取
  • 引用数据类型==》放入堆（heap）中，按引用地址操作
  • 基本数据类型==》放入栈（stack）中，按值操作

3.赋值操作三部曲

  • 创建值
  • 创建变量
  • 创建的值和变量关联在一起

avatar
文章
阅读
粉丝