前端从0单排之JS------Day4-Day5笔记

栈内存
本身就是一个供JS代码执行的环境
所有的基本类型值都会直接的在栈内存中开辟一个位置进行存储

堆内存
用来存储引用类型中的信息值的对象
存储的是键值对
函数存储的是代码字符串

练习题

/*
* 1.形成一个全局作用域（栈内存）
* 2.代码自上而下执行
*    1. 首先开辟一个新的堆内存（AAAFFF111），把键值对存储到堆内存中 n:10
*      m:obj.n*10  => obj.n 此时堆内存信息还没存储完成，控件的地址还没有给obj，此时 
*       的obj是undefined，obj.n <=> undefined.n
*
*/


var obj = {
    n: 10,
    m: obj.n * 10
};

typeof

在JS中用来检测数据类型的方式之一，除了它以外，还有：

• instanceof
• constructor
• Object.prototype.toString.call()

 // 语法：typeof [value] => 检测value的数据类型

/*

返回值：使用typeof检测出来的结果是一个字符串，字符串中包含着对应的数据类型，例如："number"/"string"/"boolean"/"undefined"/"object"/"function"

typeof null => "object"  因为null代表空对象指针（没有指向任何的内存空间）

typeof 检测数组/正则/对象 ，最后返回的都是"object" ,也就是基于这种方式无法细分对象

typeof 12
"number"
typeof NaN
"number"
typeof 'tail'
"string"
typeof true
boolean
typeof null
"object"
typeof undefined
"undefined"
typeof  {}
"object"
typeof []
"object"
typeof /^/
"object"
typeof function(){}
"function"
*/

三元运算符

语法：条件？成立做的事情：不成立做的事情；<=>想当于简单的if/else判断

  var num  = 12;
    if(num>10){
        num++;
    }else{
        num--;
    }
    // => 改写成三元运算符
    num>10?num++:num--;

// 如果三元运算符中的某一部分不需要做任何的处理 我们用null/undefined/void 0  占位即可
 var num = 12;
    num>10?num++:null;
    num>10?num++:void 0;
    num>10?num++:undefined;
    // 如果需要执行多项操作，我们把其用小括号包裹起来，每条操作语句用逗号分隔
    num  = 10;
    num>=10?(num++,num*=10):null;
    
    num>0?(num<10?num++:num--):(num==0?(num++,num=num/10):null)

switch case

JS中的一种判断方式

var num = 12;
if(num == 10) {
    num++;
}else if(num==5) {
    num--;
}else {
    num=0
}

// 改成switch case

switch (num) {
   case 10:
    num++;
    break;
   case 5:
    num--;
    break;
   default:
    num=0;
}

// switch case 应用于变量（或者表达式等）在不同值情况下的不同操作，每一种 case 结束后都要加break（结束整个判断）

switch case 中每一种case情况的比较都是基于“===”绝对相等来完成的

'10' == 10
=> true 相等比较，如果等号左右两边的类型不一样，首先会转换为一样的数据类型，然后再进行比较=> 当前案例中，就是把字符串'10'转换为数字了，然后再进行比较

'10' === 10 绝对比较，如果两边的数据类型不一样，则直接不相等，它要求类型和值都完全一样才会相等（真实项目中为了保证代码的严谨性，我们应该更多使用绝对比较）

var num = 9;
switch (num) {
    case 10:
    case 5:
        num--;
        break;
    default:
        num = 0;
  
}
// => 不加break，后来的条件不管是否成立，都会被执行，利用此机制，我们可以完成一些特殊的处理，例如：如果num等于10和等于5都要做同一件事情，那么我们写一起，不用加break即可

for循环

作用：按照一定的规律，重复去做某件事情，此时我们就需要使用循环来处理了

var ary = [12,23,34];
/*
    {
        0:12,
        1:23,
        2:34,
        length:3
    }
    
    输出数组中的每一项内容
*/
for(var i = 0; i < ary.length; i++) {
  console.log(ary[i]);
}

/*
    在for循环的循环体中，经常出现两个常用的关键字：
    1.continue:继续
    2.break: 中断或者结束
*/

    for(var i = 0; i < 10; i++) {
       if(i<5) {
           i++;
           continue; // 结束本轮循环(循环体中continue后面代码将不再执行，继续执行下一轮循环）
        }
        if(i>7) {
            i += 2;
            break;   // 强制结束整个循环，不做任何的处理
        }
        i += 3;
    }

获取页面中的DOM元素

document.getElementById

在整个文档中，通过元素的ID属性值，获取到这个元素对象

getElementById是获取元素的方法，而document限定了获取元素的范围，我们把这个范围称之为：“上下文[context]”

var oBox = document.getElementById('box');
/*
1. 通过getElementById获取的元素是一个对象数据类型的值（里面包含很多内置的属性）
typeof oBox => "object"

2. 分析包含的属性
className: 存储的是一个字符串，代表当前元素的样式类名
id: 存储的是当前元素的ID值（字符串）

innerHTML: 存储当前元素中所有的内容（包含HTML标签）

onclick: 元素德 一个事件属性，基于这个属性，可以给当前元素绑定点击事件
onmouseover: 鼠标滑过事件
onmouseout: 鼠标离开事件

style: 存储当前元素所有的"行内样式"值(获取和操作的都只能是写在标签上的行内样式，写在样式表中的样式，无法基于这个属性获取到)


*/

[context].getElementByTagName

在制定的上下文中，通过元素的表掐你名获取一组元素集合
上下文是我们自己来指定的

var oBox = document.getElementById('box');
var boxList = oBox.getElementsByTagName('li');

1. 获取的结果是一个元素集合（HTMLCollection）,首先它也是对象数据类型的，结构和数组非常相似（数字作为索引，length代表长度），但是不是数组，我们把它叫做“类数组

boxList[0] 获取当前集合中的第一个LI（通过索引获取到具体的某一个LI即可）
boxList.length 获取集合中LI的数量

2. 集合中的每一项存储的值又是一个元素对象（对象数据类型，包含很多的内置属性，例如：id/className...） 

boxList[1].style.color = 'red' ; 修改集合中第二个LI的文字颜色

函数

在JS中，函数就是一个方法（一个功能体），基于函数一般都是为了实现某个功能

var total = 10;
total +=10;
total = total/2;

total = total.toFixed(2); // => 保留小数点后边两位(数字由一个方法toFixed用来保留小数点后面的位数)

为了不导致页面存在大量冗余的代码，也降低了开发的效率，如果我们能把实现这个功能的代码进行"封装"，后期需要这个功能执行即可，这样就好了！

函数诞生的目的就是为了实现封装：把实现一个功能的代码封装到一个函数中，后期想要实现这个功能，只需要把函数执行即可，不必要再次编写重复的代码，起到了**低耦合高内聚（减少页面中的冗余代码，提高代码的重复使用率）**的作用

function fn() {
  var total = 10;
  total +=10;
  total = total/2;
  total = total.toFixed(2);
  console.log(total);
}
fn();

---

ES3标准中：
创建函数：=>
function 函数名([参数]){
函数体，实现功能的JS代码
};

=> 函数执行
函数名();

---

ES6标准中创建箭头函数：
let 函数名（变量名） = ([参数]) => {
函数体
};

函数名();

let fn = () => {
let total = 10;
…
}

fn();

函数作为引用数据类型中的一种，它也是安卓引用地址来操作的，接下来我们学习一下函数的运行机制

function fn() {
  var total = 10;
  total +=10;
  total = total/2;
  total = total.toFixed(2);
  console.log(total);
}
fn();

1. 函数也是引用类型，首先会开辟一个新的堆内存，把函数体中的代码当做“字符串”存储到内存中（对象向内存中存储的是键值对）
2. 把开辟的堆内存地址赋值给函数名（变量名）