Web全栈-JavaScript-笔记2-判断操作语句
JS中的判断操作语句
1、if / else if / else
var num = -6;
if(num>10){
num++; //=>num=num+1 num+=1 在自身的基础上累加1
}else if(num>=0 && num<=10){
num--;
}else{
num+=2;
}
console.log(num);
只要有一个条件成立，后面不管是否还有成立的条件，都不在判断执行了
var num = 10;
if(num>5){
num+=2;
}else if(num>8){
num+=3;
}else{
num+=4;
}
console.log(num); //=>12
关于条件可以怎么写？
// >= 、 <= 、 == 常规比较
if(0){
//不管你在条件判断中写什么，最后总要把其计算出TRUE/FALSE来判断条件是否成立
//（把其它类型的值转换为布尔类型，只有 0/NaN/''/null/undefined 是false，其余都是true）
}
if('3px'+3){
//在JS中，+ - * / % 都是数学运算，除 + 以外，其余运算符在运算的时候，
//如果遇到了非数字类型的值，首先会转换为数字类型（Number），然后再进行运算
//+ 在JS中除了数学相加，还有字符串拼接的作用（如果运算中遇到了字符串，则为字符串拼接，而不是数学相加）
//'3px'+3 =>'3px3'
}
if('3px'-3){
//'3px'-3 =>NaN
}
NaN > 3 // false，NaN就是数值类型
NaN < 3 // false
({}) > 5 // false
'str' > 5 // false
//只要是 < 、> 就是数学的比较，都要转为数字才能比较
//数学运算都要转化为数字，才能计算，除了字符串的+号。
BAT面试题：
var num = parseInt('width:35.5px');
if(num==35.5){
alert(0);
}else if(num==35){
alert(1);
}else if(num==NaN){ //NaN==NaN 是false，NaN和任何值都不相等的。
alert(2);
}else if(typeof num=='number'){
//=>先算typeof num
//=>在做比较
alert(3);//=>alert输出的都是字符串格式的 '3'
}else{
alert(4);
}
typeof
在JS中用来检测数据类型的方式之一，除了它以外，还有：
- instanceof
- constructor
- Object.prototype.toString.call()
语法：typeof [value] =>检测value的数据类型
返回值：使用typeof检测出来的结果是一个字符串，字符串中包含着对应的数据类型，
例如："number"/"string"/"boolen"/"undefined"/"object"/"function"
typeof null =>"object" 因为null代表空对象指针（没有指向任何的内存空间）
typeof 检测数组/正则/对象，最后返回的都是"object"，也就是基于这种方式无法细分对象
面试题：
console.log(typeof []);
//=>"object"
console.log(typeof typeof []);
//=>typeof "object"
//=>"string"
2、三元运算符
语法：条件?成立做的事情:不成立做的事情; <=>相当于简单的if/else判断
var num=12;
if(num>10){
num++;
}else{
num--;
}
//=>改写成三元运算符
num>10 ? num++ : num--;
特殊情况
//=>如果三元运算符中的某一部分不需要做任何的处理，我们用 null/undeifned/void 0... 占位即可
var num = 12;
num>10 ? num++ : null;
//=>如果需要执行多项操作，我们把其用小括号包裹起来，每条操作语句用逗号分隔
num=10;
num>=10?(num++,num*=10):null;
思考题
var num = 12;
if(num>0){
if(num<10){
num++;
}else{
num--;
}
}else{
if(num==0){
num++;
num=num/10;
}
}
改写成三元运算符！
3、switch case
JS中的一种判断方式
var num = 12;
if(num==10){
num++;
}else if(num==5){
num--;
}else{
num=0;
}
//如果上面 var num = '12'; 由于是 == 比较，所以还是会转为数字，再比较，结果是一样的。
//=>改成switch case
switch(num){
case 10:
num++;
break;
case 5:
num--;
break;
default:
num=0;
}
//如果num='12' 比较，由于是 === 比较，所以结果是 0
//=>switch case 应用于变量（或者表达式等）在不同值情况下的不同操作，每一种case结束后都要加break（结束整个判断）
var n = '10';
// n = n + 1; //属于字符串拼接，结果是 '101'
n++; // '11'，此时这种写法才是数学运算，不是字符串拼接
console.log(n);
switch case中每一种case情况的比较都是基于"==="绝对相等来完成的
'10'==10
//=>true 相等比较(因为是数学运算),如果等号左右两边的类型不一样，首先会转换为一样的数据类型，然后再进行比较
//=>当前案例中，就是把字符串'10'转换为数字了，然后再比较的
'10'===10
//绝对比较，如果两边的数据类型不一样，则直接不相等，它要求类型和值都完全一样才会相等（真实项目中为了保证代码的严谨性，我们应该更多使用绝对比较）
FOR循环
作用：按照一定的规律，重复去做某件事情，此时我们就需要使用循环来处理了
var ary = [12, 23, 34];
/*
{
0: 12
1: 23
2: 34
length: 3
}
输出数组中每一项内容
console.log(ary[0]、ary[1]、ary[2]);
webstorm 中 itar TAB 自动补全 for 数组遍历
for (var i = 0; i < ary.length; i++) {
var aryElement = ary[i];
}
*/
/*
* FOR循环的语法组成
* 1. 定义初始值 var i = 0
* 2. 设定循环成立的条件（条件成立循环继续,不成立循环结束） i < ary.length
* 3. 条件成立会执行循环体中的内容（大括号包裹的就是循环体）
* 4. 执行步长累加的操作
*/
/*
* 在FOR循环的循环体中，经常出现两个常用的关键字：
* 1. continue：继续
* 2. break：中断或者结束
*/
获取页面中的DOM元素
DOM元素也是引用类型。
DOM就是描述整个html页面中节点关系的图谱。
document.getElementById
在整个文档中，同过元素的ID属性值，获取到这个元素对象
getElementById是获取元素的方法，而document限定了获取元素的范围，我们把这个范围称之为：“上下文 [context]”
var oBox = document.getElementById('box');
1、 同过getElementById获取的元素是一个对象数据类型(object)的值（里面包含很多内置的属性）
console.log(typeof oBox) =>"object"
console.dir(document.getElementById('box'))
2、 分析包含的属性
className：存储的是一个字符串，代表当前元素的样式类名
id：存储的是当前元素ID值（字符串）
innerHTML：存储当前元素中所有的内容（包含HTML标签）
innerText：存储当前元素中所有的文本内容（没有元素标签）
onclick：元素的一个事件属性，基于这个属性，可以给当前元素绑定点击事件
onmouseover：鼠标滑过事件
onmouseout：鼠标离开事件
style：存储当前元素所有的 "行内样式" 值
（获取和操作的都只能是写在标签上的行内样式，写在样式表中的样式，无法基于这个属性获取到）
oBox.style.width // => ""
获取扩展，如何获取当前元素的所有样式（不管是写在哪？）
...
怎么通过js获取样式并修改：
//=>1、获取BOX中所有的li(我们需要先获取BOX)
var oBox = document.getElementById('box');
//=>想要修改box的样式
//1.通过style修改行内样式
oBox.style.backgroundColor = 'pink';
//2.基于CLASS-NAME属性修改BOX的样式类，从而改变样式
oBox['className'] = 'box bgColor'; //这样可以通过2个样式表来设置样式
// 或
oBox['className'] += ' bgColor';
[context].getElementsByTagName
在指定的上下文中，通过元素的标签名获取一组元素集合
上下文是我们自己来指定的
var boxList = oBox.getElementsByTagName('li');
1、获取的结果是一个元素集合（HTMLCollection）,首先它也是对象数据类型的，结构和数组非常相似（数字作为索引，length代表长度），但是不是数组，我们把它叫做“类数组”
boxList[0] 获取当前集合中的第一个LI（通过索引获取到具体的某一个LI即可）
boxList.length 获取集合中LI的数量
2、集合中的每一项存储的值又是一个元素对象（对象数据类型，包含很多的内置属性，例如：id/className...）
boxList[1].style.color='red'; // 修改集合中第二个LI的文字颜色
隔行变色一种是利用CSS3中
.box li:nth-of-type(even) {
background-color: lightcyan;
}
.box li:hover { /*鼠标滑过有样式，鼠标离开回归原有的样式*/
background-color: lightcoral
}
二就是利用js中dom
// 获得标签li，用var boxList 赋值后，用循环遍历
for (var i = 0; i < boxList.length; i++) {
//索引是奇数代表偶数行
if (i % 2 !== 0) { //i是奇数时
// boxList[i].style.backgroundColor = 'pink';
boxList[i].className+= ' bgColor';
}
}
//或者这么写for循环
for (var i = 1; i < boxList.length; i += 2) {
boxList[i].style.backgroundColor = 'lightblue';
}
函数
在JS中，函数就是一个方法（一个功能体），基于函数一般都是为了实现某个功能
var total=10;
total+=10;
total=total/2;
total=total.toFixed(2);//=>保留小数点后边两位（数字由一个方法toFixed用来保留小数点后面的位数）
....
在后续的代码中，我们依然想实现相同的操作（加10除以2），我们需要重新编写代码
var total=10;
total+=10;
total=total/2;
total=total.toFixed(2);
...
这样的方式会导致页面中存在大量冗余的代码，也降低了开发的效率，如果我们能把实现这个功能的代码进行“封装”，后期需要这个功能执行即可，这样就好了！
函数诞生的目的就是为了实现封装：把实现一个功能的代码封装到一个函数中，后期想要实现这个功能，只需要把函数执行即可，不必要再次编写重复的代码，起到了 低耦合高内聚(减少页面中的冗余代码，提高代码的重复使用率) 的作用
function fn(){
var total=10;
total+=10;
total/=2;
total=total.toFixed(2);
console.log(total);
}
fn();
fn();
...
想用多少次，我们就执行多少次函数即可
=====
ES3标准中：
//=>创建函数
function 函数名([参数]){
函数体：实现功能的JS代码
}
//=>函数执行
函数名();
=====
ES6标准中创建箭头函数：
let 函数名(变量名)=([参数])=>{
函数体
}
函数名();
let fn=()=>{
let total=10;
...
};
fn();
函数作为引用数据类型中的一种，它也是按照引用地址来操作的，接下来我们学习一下函数的运行机制
function fn(){
var total=10;
total+=10;
total=total.toFixed(2);
console.log(total);
}
fn();
【创建函数】
1、 函数也是引用类型，首先会开辟一个新的堆内存，把函数体中的代码当做“字符串”存储到内存中（对象向内存中存储的是键值对）
2、 把开辟的堆内存地址赋值给函数名(变量名)
此时我们输出fn（切记不是fn()）代表当前函数本身
如果我们执行fn()，这是把函数执行
所以是否加小括号是两种不同本质的操作
【函数执行】
目的：把之前存储到堆内存中的代码字符串变为真正的JS代码自上而下执行，从而实现应有的功能
1、函数执行，首先会形成一个私有的作用域（一个供代码执行的环境，也是一个栈内存）
2、把之前在堆内存中存储的字符串复制一份过来，变为真正的JS代码，在新开辟的作用域中自上而下执行
函数中的参数
参数是函数的入口：当我们在函数中封装一个功能，发现一些原材料不确定，需要执行函数的时候用户传递进来才可以，此时我们就基于参数的机制，提供出入口即可
//=>此处的参数叫做形参：入口，形参是变量（n/m就是变量）
function sum(n,m){
//=>n和m分别对应要求和的两个数字
var total = 0;
total = n + m;
console.log(total);
}
//=>此处函数执行传递的值是实参：实参是具体的数据值
sum(10,20); //=>n=10 m=20
sum(10); //=>n=10 m=undefined
sum(); //=>n和m都是undefined
sum(10,20,30); //=>n=10 m=20 30没有形参变量接收
