一、JS中的数据类型检测

  • typeof [val]：用来检测数据类型的运算符
  • instanceof ：用来检测当前实例是否率属于某个类
  • constructor ： 基于构造函数检测数据类型（也是基于类的方式）
  • Object.prototype.toString.call() ：检测数据类型最好的办法

typeof的特点

  1. /*
  2.  * 基于 typeof 检测出来的结果
  3.  *   1. 首先是一个字符串
  4.  *   2. 字符串中包含对应的类型 
  5.  * 局限性
  6.  *   1. typeof null => "object"  但是 null 并不是对象
  7.  *   2. 基于 typeof 无法细分出当前值是普通对象还是数组对象等，因为只要是对象数据类型，返回的结果都是"object"
  8.  */
  9. console.log(typeof 1);
  10. let a = NaN;
  11. console.log(typeof a); // 'number' 
  13. // console.log(typeof typeof typeof []);
  14. // typeof [] => "object"
  15. // typeof "object" => "string"
  16. // 因为 typeof 检测的结果都是字符串，所以只要两个及以上同时检测，最后结果必然是 "string"

二、JS中的操作语句：判断、循环

判断

条件成立做什么?不成立做什么?

  • if / else if / else
  • 三元运算符
  • switch case
  1. if / else
  1. if(条件) {
  2.     条件成立执行
  3. }else if (条件2) {
  4.     条件2成立执行
  5. }
  6. // A && B：A和B都成立才为 TRUE
  7. // A || B：A或者B只有一个成立就为 TRUE
  8. // 它们是有返回值的：
  9. // || 如果第一个时 true，就返回第一个，如果第一个 false 就返回第二个
  10. // && 如果第一个是 false，就返回第一个，如果第一个 true 就返回第二个
  11. // 条件可以多样性：等于、大于、小于的比较/一个值或者取反等  => 最后都是要计算出是 TRUE 还是 FALSE
  12. ...
  13. else{
  14.     以上条件都不成立
  15. }
  • 三元运算符：简单 IF / ELSE 的特殊处理方式
    条件?条件成立处理的事情:不成立处理的事情;
    1.如果处理的事情比较多，我们用括号包起来，每一件事情用逗号分隔
    2.如果不需要处理事情，可以使用 null / undefined 占位
  1. let a = 10;
  2. // if / else
  3. if (a > 0) {
  4.     if (a < 10) {
  5.         a++;
  6.     } else {
  7.         a--;
  8.     }
  9. } else {
  10.     if (a > -10) {
  11.         a += 2;
  12.     }
  13. }
  14. // 改写成三元运算符
  15. a > 0 ? (a < 10 ? a++ : a--) : (a > -10 ? a += 2 : null);

  • switch case：一个变量在不同值情况下的不同操作
    1.每一种 case 情况结束后最好都加上 break
    2.default等价于 else，以上都不成立干的事情
    3.每一种 case 情况的比较用的都是 === “绝对相等”

  • == VS ===
    ==：相等（如果左右两边数据值类型不同，是默认先转换为相同的类型，然后比较）
    ‘5’==5 // TRUE

  • ===：绝对相等（如果类型不一样，肯定不相等，不会默认转换数据类型）
    ‘5’===5 // FALSE

项目中为了保证业务的严谨，推荐使用 ===

  1. let a = '5';
  2. switch (a) {
  3.     case 1:
  4.         console.log('呵呵');
  5.         break;
  6.     case 5: // 此处 '5' case 5 => FALSE
  7.         console.log('哈哈');
  8.         break;
  9.     default:
  10.         console.log('嘻嘻');
  11. }
  12. // 如果不加 break，当前条件成立执行完成后，后面条件不论是否成立都要执行，直到遇到 break 为止（不加 break 可以实现变量在某些值的情况下做相同的事情  => 编程开发人员要具备探索尝试之心）

循环

重复做某些事情就是循环

  • for 循环
  • for in 循环
  • for of 循环（ES6新增）
  • while 循环
  • do while 循环
  1. /*
  2.  * 1.创建循环初始值 
  3.  * 2.设置（验证）循环执行的条件
  4.  * 3.条件成立执行循环体中的内容
  5.  * 4.当前循环结束执行步长累计操作
  6.  */
  7. for (var i = 0; i < 5; i++) {
  8.     // console.log(i); // 0 1 2 3 4
  9. }
  10. console.log(i); // 5 
  12. for (var i = 10; i > 4; i -= 2) {
  13.     if (i < 7) {
  14.         i++;
  15.     } else {
  16.         i--
  17.     }
  18. }
  19. console.log(i); 
  21. // 循环体中的两个关键词
  22. // continue：结束当前这轮循环（continue 后面的代码不再执行），继续执行下一轮循环
  23. // break: 强制结束整个循环（break 后面代码也不再执行），而且整个循环啥也不干直接结束
  25. for (var i = 0; i < 10; i++) {
  26.     if (i >= 2) {
  27.         i += 2;
  28.         continue;
  29.     }
  30.     if (i >= 6) {
  31.         i--;
  32.         break;
  33.     }
  34.     i++;
  35.     console.log(i);
  36. }
  37. console.log(i);
  39. // while 和 do while
  40. while (/* 循环条件*/) {
  41.     // 内容
  42. }
  44. do {
  45.     // 先执行 后判断
  46. } while (/* 循环条件*/) {
  47.     // 内容
  48. }

for in循环

for in 循环是专门用来遍历对象的，可以把对象里面的属性一个一个的遍历出来。 注意：for in 只能遍历对象的可枚举属性。一般浏览器默认添加的都是不可枚举的属性。例如proto****

  1. var obj = {
  2.   name: '珠峰',
  3.   age: 10
  4. };
  6. for (var k in obj) {
  7.   // k 代表每次遍历时的属性名
  8.   console.log('k ', k);
  9.   console.log('obj[k]', obj[k]);
  10. }

三、fucntion

函数就是一个方法，或者一个功能体，函数就是把实现某个功能的代码放到一起进行封装，以后想要操作实现这个功能，只需要把函数执行即可，“封装”。 封装：减少页面中的冗余代码，提高代码的重复使用率（低耦合高内聚）

创建函数：形参，返回值
执行函数：实参
argrments：实参集合

1. 创建函数

  1. // es5 老方式
  2. function[函数名]（[形参变量1]，...）{
  3.     // 函数体：基于 js 完成需要实现的功能
  4.     return[处理后的结果]；
  5. }
  6. [函数名]([实参1]，...)

2. 形参的细节

创建函数的时候，我们设置了形参变量。但如果执行的时候并没有给传递对应的实参，那么形参变量默认的值是undefined

null == undefined // true

3. return细节问题

函数执行时，函数体内部创建的变量 ，我们是无法获取和操作的。如果想要获取内部的信息，我们需要基于return 返回值机制，把信息返回才可以

  1. return 用于指定函数返回值，那么 return 啥函数返回值是啥
  2. 如果函数内部没有 return 或者 return 后面啥也没写，那么函数的返回值是 undefined
    1. return 关键字还有一个重要作用————强制结束 return 后面的代码。（return 后面的代码不执行）
  3. return 永远返回一个值，如果是一个表达式，return 会等着表达式求值完成，然后再把值返回。

    4. 匿名函数

  1. document.body.onclick = function () {
  2.  // 匿名函数之函数表达式，把一个匿名函数本身作为值赋值给其他东西，这种函数一般不是手动触发执行，而且靠其他程序驱动触发执行（例如：触发某个事件的时候把它执行等）
  3. }
  5.  // 自执行函数
  6.  (fucntion () {
  7.      // n = 100; 
  8.  })(100)
  10.  // 创建完一个匿名函数，紧接着就把当前加小括号执行
  1. // 自执行函数：前面加的（）或者！、-、~、+只有一个目的，让语法符合而已
  2. // 自执行函数本身不进行变量提升（没名字）
  3. (function(n){})(10);
  4. ~function(n){}(10);
  5. -function(n){}(10);
  6. !function(n){}(10);
  7. +function(n){}(10);

函数的深入理解.png

四、对象的操作

let obj = new Object() // new 一个对象出来

如何遍历对象？

  1. let obja = {
  2.         name: 'aa',
  3.         age: 16,
  4.         hobby: '唱跳 rap 篮球'
  5. }
  6. for (let obj in obja) {
  7.     console.log(obj);
  8. }
  9. Object.getOwnPropertyNames() // 可以遍历不可枚举属性
  10. object.keys()
  11. // 删除属性：delete obj.marry;
  12. // 当一个对象的属性名为变量或者数字的时候，对象就不能通过对象点属性名获取它的值；需要通过 obj[属性名] 获取

如果想操作对象？

  1. {
  2.         value: 123; // value 是属性的属性值，默认为 undefined
  3.         writable: false; // 表示属性值是否可改变（即是否可写），默认为 true
  4.         enumerable: true; // 表示该属性是否可遍历 默认为 true
  5.         configurable: false; // 表示可配置性，默认为 true 如果是 flase 表示无法删除该属性
  6.         get: undefined; // 一个函数，代表 getter
  7.         set: undefined; // 一个函数，代表 setter
  8.         Object.getOwnPropertyDesctiptor(obj, 'p') // 获取属性描述对象
  9.         Object.getOwnPropertyNames() // 返回一个数组，成员是参数对象自身的全部属性名，不管该属性是否可遍历
  11.         // 注意：一旦定义了取值函数 get 或 set 就不能设置 writable 或者同时定义 vlaue 属性，否则报错
  13.         Object.preventExtensions(obj) // 使对象无法添加新属性
  14.         Object.isExtensible(obj) // 检查一个对象是否用了 Object.preventExensions 方法
  15.         Object.seal(obj) // 让一个对象不能添加新属性且不能删除旧属性
  16.         Object.isSealed(obj) // 检查一个对象有没有用 Object.seal 方法
  17.         Object.freeze(obj) // 使一个对象不能添加不能删除不能改变属性的值，相当于常量
  18.         Object.isFrozen(obj) // 检查一个对象有没有用 Object.freeze 方法
  19.         obj.hasOwnProperty('p') // 检查对象里是否包含该属性
  20. }