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_36685875/article/details/78886368

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
> 两种短路运算都有一个共同的特点：如果第一个操作数能够决定结果，那么就不会再对第二个操作数求值