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

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

    原文作者:15815407241
    原文地址: https://segmentfault.com/a/1190000016656889
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞