前端学习路线02

02_引用数据类型思维导图，包括：调试的方法、加法、引用数据类型、堆栈内存「浅谈js运行机制」(重中之重)、操作语句。

js

• 调试的方法
  • console.log();
    • 在控制台打印
  • alert();
    • 弹框：会隐式调用toString()这个方法，把数据转为字符串(无论{}里面是否有内容，都会转为"[object Object]")
  • console.dir();
    • 详细输出
  • confirm(“提示文字”)
    • 返回值若是true说明点的是确定按钮,若是false点的是取消
  • prompt(“请输入你的名字”);
    • 若点击的是确定,返回值就是输入的内容，（若用户没输入，就是”“），若点击的是取消，返回值就是null
• 加法
  • 加法里面遇到引用数据类型（特殊的）
    • 若加法里面遇到引用数据类型，会把它转为number,因为是引用数据类型，所以会隐式调用toSring这个方法，还没来得及转为number，直接就字符串拼接。
• 引用数据类型
  • 对象
    • 概念：把多组键值对用大括号包起来 ,并且属性与属性之间用“逗号”进行分割
    • 基本操作：增、删、改、查
      • 获取对象的方法
        • obj.属性名
          • 若对象的属性名是数字，不能用点的形式获取（会报错）
        • obj[属性名]
          • 除了数字，若中括号里面没加引号，说明是变量
      • 增和改一样
        • 如果原来的对象中没有那个属性名，就是新增，如果有就是修改「若对象里面原本就有此属性，进行赋值操作就是修改，若没有，就是添加」
      • 删除
        • ● 只是让对象中的属性值为空， obj【”属性名”】=null；只是让属性值为null，属性名还在 ● 彻底删除 delete 对象[“属性名”]；返回值是true，说明就彻底删除了，对象中就不会有此属性名和属性值了
• 堆栈内存「浅谈js运行机制」（重中之重）
  • 堆栈内存
    • 栈（stack）内存
      • ● 栈内存（stack）的作用： ○ 给代码提供可执行的环境「让js代码可以运行」 ○ 存储基本数据类型的值
    • 堆（heap）内存
      • ● 堆内存（heap）的作用： ○ 主要存放引用数据类型的值 ○ 对象：存的键值对 ○ 函数：代码字符串
    • 基本数据类型和引用数据类型的区别？
      • 基本数据类型按值操作 引用数据类型是按空间地址操作
    • 赋值三步曲
      • ● 先创建值 ● 创建变量 ● 值和变量相关联
• 操作语句
  • if判断语句
    • 如果...否则...剩余... if(){ }else if(){ }else{ }
      • 只要满足其中一个条件，后面的条件就不再执行
    • 判断条件
      • 逻辑运算符
        • && 并且，左右两边的条件必须同时满足
        • || 或，左右两边的条件只要满足其一即可
  • 三元运算符
    • ● 1.【语法】：条件？成立执行的语句：条件不成立的语句; ● 2.【多条语句】：（如果条件成立之后，想同时执行多条语句，）需用“小括号”把执行语句包起来，并且语句和语句之间用“逗号”分割; ● 3.【特殊情况】:若只有一个if，改为三元的时候，可以用下面的任意一个占位： ○ void 0 ○ null ○ undefined
  • switch case 操作语句
    • 语法 switch(表达式) { case n: 代码块 break; case n: 代码块 break; default: 默认代码块 }
    • ● switch case 里面的比较是绝对比较「是三个等于号的比较」 ○ “6”==6 true (会进行数据转换) ○ “6”===6; false(绝对比较)
  • for循环
    • ● 1.先看初始值，初始值满足条件 ● 2.然后开始走执行语句 ● 3.然后再进行累计操作 ● 4.然后再看是否符合条件，符合条件继续走执行语句，不符合直接跳出
  • 循环
    • for循环
    • for in循环
    • while(){}
      • while 只要条件成立，就可以执行循环
    • do{}whlie()
      • do while 无论while里面条件是否成立，都会执行一次do里面的内容；之后再看while里面的条件
• 案例
  • 开关灯案例
  • 隔行变色
• 函数
  • 作用
    • 封装功能性代码
  • 调用
    • fn()
  • 形参和实参
    • ● 形参：形式上的参数 ● 实参：真正调用传进来的参数
  • 实名函数和匿名函数
    • 实名就是有名字
      • function total(){ }
    • 匿名函数包括函数表达式、事件和自执行函数
      • ---函数表达式：把函数执行的结果给了前面声明的变量 var total = function () { }
      • ---事件 btn.onclick = function () { }
      • ---自执行函数:的特点，一上来就执行了 (function() { } )() +function() { } () -function() { } () !function() { } () ~function() { } ()
  • 箭头函数
    • // 只有一个参数的时候，小括号也可以省去不写 var total = x => { return x + 1; }
    • // 如果return只有一句代码，花括号和return都可以省去不写 var total = x => x + 1;
    • /* * 箭头函数里面需要注意两点： * 1 没有arguments； * 2 没有this，this是指的上一级作用域中的this */
  • ...
    • var total = (x, y, ...arg) => { // 剩余运算符 console.log(arg); return x + y; }; total(1, 2, 3, 4); // 展开运算符 var ary1 = [1, 2, 3]; var ary2 = [4, 5, 6]; var ary3 = [...ary1, ...ary2]; console.log(ary3);//[1, 2, 3, 4, 5, 6] var obj1 = { name: "lili", age: 18 }; var obj2 = { job: "前端", age: 20 }; var obj3 = { ...obj1, ...obj2 } console.log(obj3);//{name: 'lili', age: 20, job: '前端'}
  • // 需求：任意数求和 /* * 思路： * 1 在外边要拿到函数里面的值 * 2 所以先在函数里面声明一个变量来接返回结果 * 3 之后返回这个变量 */ // function total() { // // 目的：最终和的结果 // var result = 0; // for (var i = 0; i < arguments.length; i++) { // console.log(arguments[i]); // result += arguments[i]; // } // return result; // }; // var res = total(1, 2, 3); // console.log(res); // function total() { // // 目的：最终和的结果 // var result = 0; // for (var i = 0; i < arguments.length; i++) { // var item = Number(arguments[i]); // // 如果是有效数字，再累加 isNaN(item) == false // if (!isNaN(item) ) { // result += item; // } // } // return result; // }; // var res = total("1", "2px", 3); // console.log(res);
• 如果是单独的一个值，先把它转换成布尔类型，如果是真，条件 成立，如果假，条件不成立。 ● 用”且”进行赋值的时候： ○ 先看第一个值，转为布尔如果是true 就等于第二个值； ○ 如果第一个值转为布尔是false，就是第一个值 ● 用”或”进行赋值的时候: ○ 先看第一个值转为布尔，如果是true，就是第一个值， ○ 如果第一个值转为布尔是false，就是第二个值