javascript基礎系列：堆棧內存（stack&heap）(二)

忙了一段時間，很容易忘記更新博客文章，拖延症很嚴重，今天晚上趁着有時間，繼續系統溫習，希望對大家有所幫助。本文章僅代表前端嵐楓的個人觀點，有不正確還望指出。

瀏覽器運行機制及基本類型與引用類型的區別

/*
 * 1. 創建變量a,放到當前棧內存變量存儲區域中
 * 2. 創建一個值12，把它存儲到當前棧內存值區域中（簡單的基本類型值是這樣存儲的，複雜的引用類型值不是這樣的）
 * 3. = 爲賦值，其實賦值是讓變量和值相互關聯的過程
*/
let a = 12; //，
let b = a;
b = 13
console.log(a)

/*
 * 複雜值（引用類型值）的存儲，分三個步驟
 * 1. 在內存中分配出一塊新內存，用來存儲引用類型值（堆內存=> heap）=》 內存有一個16進制地址
 * 2. 把對象中的鍵值對（屬性名：屬性值）依次存儲到堆內存中
 * 3. 把堆內存地址和變量關聯起來
*/

let n = {
    name: '嵐楓'
};
let m = n;
m.name = '秋秋'
console.log(n.name)

解析如下圖：<br />

<br />瀏覽器想要執行代碼：

1. 從電腦內存中分配一塊內存，用來執行代碼（棧內存=》stack）
2. 分配一個主線程用來自上而下執行js代碼

基本類型： 按值操作（直接操作的是值），所以也叫作值類型<br />引用類型：操作的是堆內存的地址（按引用地址操作的）

堆棧內存

let n = [10, 20]
let m = n;
m[0] = 20;
x = [30, 40]
x[0] = 200;
m = x
m[1] = 200;
n[2] = 400;
console.log(n, m, x)// [20,20, 400] [200, 200] [200, 200]

解析如下圖：<br />

let a = {
    n: 1
}
let b = a
a.x = a= {
    n:2
}
console.log(a.x) //undefined
console.log(b) // {n:1,x: {n:2}}

解析如下圖：<br />

js中數據類型檢測

1. typeof

tppeof [val]: 用來檢測數據類型的運算符<br />基於typeof檢測出來的結果

• 首先是一個字符串
• 字符串中包含對應的類型

侷限性：

• typeof null => "object", 但是null並不是對象
• 基於typeof無法細分當前值是普通對象還是數組對象，因爲只要對象數據類型，返回的結果都是“object”

console.log(typeof typeof typeof [])
//=> typeof [] => "object"
//=> typeof "object" => "string"
//typeof檢測的結果都是字符串，所以只要兩個及以上同時檢測，最後結果必然是"string"

console.log(alert(1)) //undefined

• alert(1): 執行瀏覽器內置的alert方法，執行方法的時候彈出一個"1"（方法的功能），此方法沒有返回值，默認的返回值爲undefined

<br />把其它類型轉換成數字<br />(1) Number()它是按照瀏覽器從底層機制，把其它數據類型轉換爲數字

• 字符串： 看是否包含非有效數字字符，包含結果就是NaN
• 布爾： true => 1 false =>0
• null: 0
• undefined: NaN
• 引用類型值： 都要先轉換爲字符串再轉換爲數字

{}/正則/函數等 => NaN<br />[]=> 0<br />['12'] => '12' => 12<br />[12, 23] => '12,23' NaN<br />(2) parseInt/parseFloat([val])遵循按照字符串從左到右查找的機制找有效數字字符（所以傳遞的值一定是字符串，不是也要轉換爲字符串然後再查找）<br />parseInt(undefined) => parseInt('undefined') => NaN<br />parseInt('') => NaN 沒找到有效字符串

2. instanceof

用來檢測當前實例是否率屬於某個類

3. constructor

基於構造函數檢測數據類型（也是基於類的方式）

4. Object.prototype.toString.call()

Object.prototype.toString.call()：檢測類型最好的辦法

js中的操作語句： 判斷、循環

1. 條件成立做什麼？ 不成立做什麼

• if/else if/ else

條件多樣性；等於、大於、小於的比較/一個值或者取反等，最後都是要計算出是true或者false

if(條件) {
    條件成立執行
} else if(條件2){
    條件2成立執行
}
...
else {
    以上條件都不成立
}

• 三元運算符

三元運算符：簡單if/else 的特殊處理方式<br />(1) 如果處理的事情比較多，我們要用括號包起來，每一件用逗號分隔<br />(2) 如果不需要處理事情，可以使用null/undefined佔位

let a = 10
if(a>0 && a< 20) {
    a++; //  => a+=1 a= a+1 => 自身累加1
  console.log(a)
}

//三元運算符表示
a>0 && a< 20 ? (a++, console.log(a)) : null

• switch case

(1) 每一種case情況結束最好都加上break<br />(2) default等價於else,以上都不成立的事情<br />(3) 不加break，當前條件成立執行完成後，後面條件不論是否成立都要執行，直到遇到break爲止（不加break可 以實現變量在某些值的情況下做相同的是激情）<br />(4) 每一種case情況的比較用的都是===“絕對相等”

let a = 10;

循環

重複做某些事情就是循環

1. for循環

(1) 創建循環初始值<br />(2) 設置（驗證）循環執行條件<br />(3) 條件成立執行循環體中的內容<br />(4) 當前循環結束執行步長累計操作<br />循環體中的兩個關鍵詞：<br />continue:結束當前這輪循環（continue後面的代碼不再執行），繼續執行下一輪循環<br />break: 強制結束整個循環（break後面代碼也不再執行），而且整個循環啥也不幹直接結束

for(var i = 0; i< 5; i++) {
    console.log(i)
}

2. for in 循環

for in 在遍歷的時候，優先循環數字屬性名（從小到大）

 var obj = {
    name: 'lanfeng',
   age: 23
 }
for (var key in obj) {
// 每一次循環key 變量存儲的值： 當前對象的屬性名
// 獲取屬性值：obj[屬性名]=》 obj[key] obj.key /obj[key]
}

3. for of 循環
4. while
5. do while

<div id="app"></div>
<script>
 let  box = document.getElementById('app') 

let AA = box.style
AA.color = 'red'

let BB = box.style.color
BB = 'red'

console.dir(box)
 </script>

解析：<br />id: 操作元素的id值<br />className: 操作元素的class樣式類的值<br />innerHTML: 操作的元素的內容（可以識別標籤）<br />innerText: 和innerHTML的區別是不能識別標籤<br />tagName:獲取元素的標籤名（一般大寫）<br />style: 操作元素的行內樣式，屬性值是一個新的對象（CSSStyleDeclaration）<br />

<br />js中的加減乘除本應該是進行數學運算（如果遇到值不是數字類型也需要基於Number()方法把其轉換爲數字，再進行運算），但是js中加法有特殊情況：相加過程中遇到字符串直接變爲字符串拼接

let i = '10'
i = i + 1 => '10' + 1 => '101'
i+=1 => '101'
i++ => 11
// i++ 和以上兩種不完全一樣，它是純粹的數學運算