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