JavaScript 高級程序設計（第三版）筆記

tip：本文含部分Es6語法

1.if(a)的自動轉換

數據類型    轉換爲true的值       轉換爲false的值

  Boolean      true              false

  String  任何非空字符串         ""（空字符串）

  Number  任何非零數字值（包括無窮大）    0和NaN

  Object  任何對象                null

  Undefined  n/a                undefined

（① n/a（或N/A），是not applicable 的縮寫，意思是「不適用」。）

以上是使用Boolean()轉換函數方法時會返回的值

在用if(a)判斷的時候，首先執行了Boolean(a)，而後if判斷爲真或假。

2.遍歷

a.數組（Array）的遍歷
數組自帶forEach，filter，map等方法能夠進行遍歷,不一樣的是，map方法可能會返回undefined。
b.對象（Object）的遍歷
(1)for..in
var obj={snow:1,bran:2,king:3,nightking:4};
for(let i in obj){
console.log(i+','+obj[i])
}

(2)Object.keys(obj)

Object.keys返回一個數組，包括對象自身的（不含繼承的）全部可枚舉屬性（不含 Symbol 屬性）的鍵名。

var obj = {'a': 'Beijing', 'b': 'Haidian'};
console.log(Object.keys(obj)); //['a', 'b']

tip：補充在遍歷對象時能夠用的方法
hasOwnProperty：(判斷該對象是否包含某屬性)

for in (通常搭配hasOwnProperty來使用) 遍歷原型鏈上可枚舉的，
    for (let key in obj) {
            if (obj.hasOwnProperty(key)) {
                console.log('key: ' + key + ',' + 'value: ' + obj[key])
            }
     }

delete：(刪除該對象某屬性)

for(var key in student){
    delete student[key];
 }

其餘遍歷對象的方法：
https://blog.csdn.net/qq_3668...

3.DOM擴展

1.HTML DOM querySelector() 方法
querySelector只能選擇第一個匹配的節點；
該方法相似JQ：
獲取標籤:document.querySelector("body")
獲取ID:document.querySelector("#myDiv")
獲取類:document.querySelector(".myDiv")
獲取子元素:document.querySelector("img .myDiv")

2.HTML DOM querySelectorAll() 方法
querySelectorAll能夠選擇多個節點,以","分隔開,返回的是個數組；
// 獲取文檔中全部的 <p> 元素
var x = document.querySelectorAll("p");
// 設置第一個 <p> 元素的背景顏色
x[0].style.backgroundColor = "red";

4.DOM關於HTML5擴展

1.HTML DOM getElementsByClassName() 方法

該方法返回的是數組
var x = document.getElementsByClassName("example color");
x[0].style.backgroundColor = "red";

2.HTML DOM classList 屬性

從前DOM添加類的方法：
document.getElementById('test1').setAttribute('class','class1')

新方法：
document.getElementById("myDIV").classList.add("mystyle");
爲 <div> 元素添加 class:
document.getElementById("myDIV").classList.add("mystyle");
爲 <div> 元素添加多個類:
document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");
爲 <div> 元素移除一個類:
document.getElementById("myDIV").classList.remove("mystyle");
爲 <div> 元素移除多個類:
document.getElementById("myDIV").classList.remove("mystyle", "anotherClass", "thirdClass");

5.短路運算

|| 短路運算
僅當前者不成立時纔去執行後者
原理：||先計算第一個運算數，若是能夠被轉換成true，則返回左邊這個表達式的值，不然計算第二個運算數。即便||運算符的運算數不是布爾值，任然能夠將它看做布爾OR運算，由於不管它返回的值是什麼類型，均可以被轉換爲布爾值

let a = 0;
let url = a || '';
//url爲''

let b = 1
let url1 = b || '';
// url1爲1

&&短路運算
僅當前者成立時採起執行後者

原理：&&,它先計算第一個表達式，若爲假，就不會去處理第二個表達；不然繼續處理後繼表達式。從左到右選取表達式的第一個爲非true的表達式的值，若是一直未找到則返回最後一個表達式的值

let a = 1;
let url = a && '';
//url爲''

let b = 0
let url1 = b&&''
//url1爲0

> 兩種短路運算都有一個共同的特色：若是第一個操做數可以決定結果，那麼就不會再對第二個操做數求值