一些JS超级基础的知识梳理（二）

一、JS中的数据类型检测

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

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

1. if / else if / else
2. 三元运算符
   (1)如果处理的事情比较多，我们用括号包起来，每一件事情用逗号分隔
   (2)如果不需要处理事情，可以使用 null / undefined 占位

let a = 10;
// if / else
if (a > 0) {
  if (a < 10) {
    a++;
  } else {
    a--;
  }
} else {
  if (a > -10) {
    a += 2;
  }
}
// 改写成三元运算符
a > 0 ? (a < 10 ? a++ : a--) : (a > -10 ? a += 2 : null);

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

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

三、循环

重复做某些事情就是循环

• for 循环
• for in 循环
• for of 循环（ES6新增,for in 循环是专门用来遍历对象的，可以把对象里面的属性一个一个的遍历出来。)
• while 循环
• do while 循环

/*
 * 1.创建循环初始值 
 * 2.设置（验证）循环执行的条件
 * 3.条件成立执行循环体中的内容
 * 4.当前循环结束执行步长累计操作
 */
for (var i = 0; i < 5; i++) {
  // console.log(i); // 0 1 2 3 4
}
console.log(i); // 5 

for (var i = 10; i > 4; i -= 2) {
  if (i < 7) {
    i++;
  } else {
    i--
  }
}
console.log(i); 

// 循环体中的两个关键词
// continue：结束当前这轮循环（continue 后面的代码不再执行），继续执行下一轮循环
// break: 强制结束整个循环（break 后面代码也不再执行），而且整个循环啥也不干直接结束

for (var i = 0; i < 10; i++) {
  if (i >= 2) {
    i += 2;
    continue;
  }
  if (i >= 6) {
    i--;
    break;
  }
  i++;
  console.log(i);
}
console.log(i);

// while 和 do while
while (/* 循环条件*/) {
    // 内容
}

do {
    // 先执行 后判断
} while (/* 循环条件*/) {
    // 内容
}

四、fucntion

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

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

2. 形参的细节
   创建函数的时候，我们设置了形参变量。但如果执行的时候并没有给传递对应的实参，那么形参变量默认的值是undefined
   null == undefined // true
3. return细节问题
   函数执行时，函数体内部创建的变量 ，我们是无法获取和操作的。如果想要获取内部的信息，我们需要基于return 返回值机制，把信息返回才可以
4. return 用于指定函数返回值，那么 return 啥函数返回值是啥
5. 如果函数内部没有 return 或者 return 后面啥也没写，那么函数的返回值是 undefined
6. return 关键字还有一个重要作用————强制结束 return 后面的代码。（return 后面的代码不执行）
7. return 永远返回一个值，如果是一个表达式，return 会等着表达式求值完成，然后再把值返回。
8. 匿名函数

document.body.onclick = function () {
 // 匿名函数之函数表达式，把一个匿名函数本身作为值赋值给其他东西，这种函数一般不是手动触发执行，而且靠其他程序驱动触发执行（例如：触发某个事件的时候把它执行等）
}
 // 自执行函数
 (fucntion () {
     // n = 100; 
 })(100)
 // 创建完一个匿名函数，紧接着就把当前加小括号执行
 // 自执行函数本身不进行变量提升（没名字）

五、 获取&操作元素、输出方式

   基于操作DOM的方式
   1. 想操作谁就先获取谁
   2. 给某元素绑定某事件
   3. 事件触发时修改元素的样式
   给元素绑定事件：元素对象 .xxx = fucntion() {}  事件绑定：xxx 事件类型（click mouseover mousedown keydown）
   元素对象 .style.xxx = xxx; 修改元素的某一个样式值这种方式操作的是元素行内样式
   元素 .style.xxx 就是获取某一个样式，如果我们没有把样式写在行内上，在 js 中基于 .style.xxx 的方式是无法获取到样式的
   
   操作元素
   • id: 操作元素的 id 值
   • className：操作元素的 class 样式类的值
   • innerHTML: 操作的元素的内容（可以识别标签）
   • innerText：和 innerHTML 的区别就是不能识别标签
   • tagName: 获取元素的标签名（一般大写）
   • style：操作元素的行内样式 属性值是一个新的对象

常用输出方式
1.console.log / dir / table… 在控制台输出
• .dir：输出一个对象的详细键值对信息
• .table：把一个多维 JSON 数组在控制台按照表格的方式呈现出来
• console.log(a);
• console.dir(document.body);
• console.table(b);

2.浏览器窗口弹窗 alert / confirm / prompt
三种方式输出的结果都必先经过 toString 转换为字符串
alert(1); // ‘1’
三种方式会阻断 JS 代码的执行，只有当窗口关掉，JS 才会继续运行

for (let i = 0; i < 5; i++) {
        alert(i);
    console.log('哈哈');
};

• 确定和取消：选择型弹框
• confirm (‘确定要干啥吗？’);
• 在 confirm 的基础上多了一个输入框
• prompt (‘确定要干啥吗？写出原因！’);
3.document.write 在页面中写入信息
• 和alert一样，输出的结果都是字符串

如何操作类名？
classList 返回所选元素的类名 是一个数组，一个类名就是一个索引
classList.add 添加一个类名
classList.remove 移除一个类名
classList.toggle 用来切换类名，有就删除，没有就添加
classList.contains 判断一个类型是不是存在，返回 true 或者 false