一、null和undefined的区别

  • null表示“没有对象”，即该处不应该有值（未声明—没坑），undefined表示“缺少值”，就是此处应该有一个值，但是还没有定义（声明但未赋值—占坑不用）；
  • null指的是null对象指针
  1. // null 和undefined的区别
  2. // null是意料之内的空（未声明--没坑），undefined是意料之外的空（声明未赋值--占坑不用）
  3. // null指的是null对象指针
  4. typeof null; ==>"object"
  6. // 1、变量只是声明了，但没定义(赋值)  undefined
  7. var name; 
  8. console.log(name); 
  10. // 2、想要获取对象中的属性值，里面没有对应的属性   undefined
  11. var obj = {name:"lili"}; 
  12. console.log(obj.name); 
  13. console.log(obj.age); 
  15. // 3、函数里面设置了形参，在调用的时候没有传实参， 在函数中打印形参  undefined
  16. function fn (x, y) {
  18.     console.log(x,y);
  20. }
  21. fn(); 
  23. // 4、函数没有return返回值，函数返回值结果就是undefined
  24. function fn1(x, y) {
  26.     return x + y;
  28. }
  29. var res1 = fn1(1, 2); 
  30. console.log(res1); 
  32. function fn2(x, y) {
  34.     var total = x + y;
  36. }
  37. var res = fn2(1, 2); 
  38. console.log(res);

二、js文件的三种引入方式

  1. <! DOCTYPE html>
  2. <html lang="en">
  3. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <script>
  9.         // 第一种
  10.         // window.onload 当页面中所有资源都加载完毕之后再加载
  11.         window.onload = function () {
  12.             var box = document.getElementById("box"); //!!写引号！！
  13.             console.log(box);
  14.         }
  15.     </script>
  17. </head>
  18. <body>
  20.     <div id="box"></div>
  22. </body>
  23. </html>
  24. <script>
  26.     // 第二种
  27.     var box = document.getElementById("box"); //!!写引号！！
  28.     console.log(box);
  30. </script>
  31. // 第三种
  32. <script src="./1null和undefined区别.js"></script>

三、常用的调试方法

  1. 打印
  2. 详细输出！！
  3. alert弹框（弹框的时候，会默认把数据转换为字符串类型）
  4. confirm提示框（有返回值）
  5. prompt带输入框的提示框
  1. // 调试方法
  2. // 1、打印
  3. var name = 0; 
  4. console.log(name); 
  6. // 2、详细输出
  7. var obj = {name:"gggg"}
  8. console.dir(obj); 
  10. // 3、弹出框（默认toString()转换数据为字符串类型）
  11. alert(name); 
  12. alert(obj); 
  14. // 4、confirm提示框
  15. // 返回值：点击确认，返回true；
  16. //        点击取消，返回false。
  17. var res = confirm("你准备好了嘛??"); 
  18. console.log(res); 
  20. // 5、prompt带输入框的提示框
  21. // 返回值：点击确认，返回输入的内容；
  22. //        点击取消，返回null。
  23. var res2 = prompt("你是girl还是boy??"); 
  24. console.log(res2);

四、获取对象中 属性名对应的属性值

  1. 对象.属性名
  2. 对象[“属性名”]

注意： 在获取的时候，如果对象中没有这个属性，得到的值就是undefined；

  1. 如果属性名是数字的话，不能用第一种（会报语法错误），要用第二种。
  1. var obj = {
  3.     name:"aaa",
  4.     age:"12",
  5.     100:"hehe"
  7. }
  8. var name = "zhufeng"; 
  9. // 获取对象 属性名对应的属性值：
  10. // 1、对象. 属性名
  11. // 2、对象["属性名"]
  12. // 如果属性名是数字的话，不能用第一种（会报语法错误），要用第二种。
  13. // 在获取的时候，如果对象中没有这个属性，得到的值就是undefined。。
  14. console.log(obj.name); 
  15. console.log(obj["name"]); // 引号！！！
  17. // console.log(obj.100); 会有语法错误.
  18. console.log(obj[100]); 
  19. // 在获取的时候，如果对象中没有这个属性，得到的值就是undefined。。
  20. console.log(obj.job); 
  21. console.log(obj[name]); // ==>console.log(obj["zhufeng"])==> undefined

五、对象属性的增删改

  1. // 如果里面没有，我直接赋值就是添加，如果原来有，又赋值就是更改
  2. var obj={name:"li", age:13, 100:"he"}; 
  3. // 更改
  4. obj.age=100; 
  5. //===>添加
  6. obj.job="前端开发攻城狮"
  8. //===>删除  属性名还在，只是值变成了null
  9. obj.name=null; 
  10. // 彻底的删除
  11.  delete obj.age; 
  12.  console.log(obj);

六、栈、堆内存

1、栈内存

  • 供js代码运行
  • 存储基本数据类型的值
  1. var a =  12; 
  2. var b = a; 
  3. console.log(b); //12

2、堆内存

  • 主要用来存储引用数据类型的值；
  • 如果是对象，存储的是属性名和属性值；
  • 如果是函数，把函数当成字符串存起来。

栈堆内存2.png

  1. var obj1 = {name:"aaa", age:"12"}; 
  2. var obj2 = obj1; 
  3. obj2.age = 18; 
  4. console.log( `obj1.age ${obj1.age}` ); // 18
  1. var obj = {
  3.     name:"aaa",
  4.     a:"10",
  5.     b:obj.a*10
  7. }; 
  8. // 报错：obj里边未找到a （obj在栈内存中，其键值对在堆内存中）
  9. console.log(obj.b); 
  11.     b:obj.a*10
  12.           ^
  14. TypeError: Cannot read property 'a' of undefined

栈和堆内存.png

七、if语句

  • 逻辑运算符号
    • 且：&& 符号左右两边的表达式都必须成立；
    • 或：|| 只要符号左右两边有一个条件成立。
    • 如果是单独的一个值，先把它转换成布尔类型，如果是真，条件 成立，如果假，条件不成立。
  1. var num=3; 
  2. // 单独的一个if
  3. // if(num>0){
  4. //   alert("你们真棒！")
  5. // }
  6. // if else
  8. // if(num>5){
  9. //     alert("棒棒哒")
  10. // }else{
  11. //    alert("萌萌哒") 
  12. // }
  14. // if(num<0){
  15. //   alert("负数")
  16. // }else if(num==0){
  17. //   alert(0)
  18. // }else if(num>0 && num<5){
  19. //    alert("休息一下吧")
  20. // }else{
  21. //     alert("哈哈")
  22. // }
  23. /* 
  24.   逻辑运算符号：
  25.   表示且：&&  也就是符号左右两边的表达式都必须成立
  26.   表示或：||  只要这个符号左右两边只要有一个成立就可以进入执行体里面
  28. */
  30. if([]){
  31.   console.log(111); 
  32. }
  34. // if(num>0){
  35. //   if(num<5){
  36. //     alert("0-5"); 
  37. //   }
  38. // }
  39. // var score=60; 
  40. // if(score>=60 && scrore<=80){
  41. //   alert("有效")
  42. // }
  44. var flag=2; 
  45. if(flag==0 || flag==2){
  47.     console.log("heheh")
  49.    alert("heihei"); 
  50. }
  52. if(2==2){
  53.    alert(1); 
  54. }

八、三元运算符

语法：条件 ？ 成立的执行语句 ： 不成立的执行语句
注意：如果执行体里面有多条语句，用小括号包起来，并且语句和语句之间用逗号隔开

  1. var num = 2; 
  2. num>5 ? num++ : num--; 
  3. num>5 ? num++ : (num--, console.log(num)); 
  4. // console.log(num); 
  6. var num1 = 1; 
  7. if (num1<2) {
  9.     num1 += 2;
  11. }
  12. // 如果只有一个if判断，写三元运算语句时，有三种写法：
  13. num1<2 ? num1 += 2 : void 0; 
  14. num1>2 ? num1 += 2 : null; 
  15. num1>2 ? num1 += 2 : undefined; 
  16. console.log(num1);

九、switch case 语句

switch case 语句的语法：

  1. switch (表达式) {
  2.     case n:
  3.         代码块；
  4.         break；
  5.     case n：
  6.         代码块；
  7.         break；
  8.     default：
  9.         默认执行的代码块；
  10. }
  • == 如果数据类型不同，会先转换为相同的数据类型，再进行比较
  • === 绝对比较，数据类型和值都必须相等
  • switch case语句里边就是绝对比较（===）
  • if else 语句里边（==）
  • if条件语句里边只要有一个符合条件就会执行这个，剩下的不会再执行（即使符合条件）
  1. // 举个栗子
  2. var num = 5;
  3. switch (num) {
  4.     case 5:
  5.         num ++;
  6.         break;
  7.     case 6:
  8.         num --;
  9.         break;
  10.     // 上边的几种情况都不成立，就走默认的这个语句
  11.     default:
  12.         num = 0;
  13. }
  14. console.log(num);

十、检测数据类型的方法

  1. typeof 返回值一定是字符串类型
    • “string”
    • “number”
    • “boolean”
    • “undefined”
    • “object”
    • “function”
      特殊记忆：typeof null；==>”object”
  2. instanceof
  3. constructor
  4. Object.prototype.toString.call();