JavaScript 高级程序设计（第三版）笔记

leo108 发布于2019-08-02 11:41 / 673人阅读

摘要：以上是使用转换函数方法时会返回的值在用判断的时候，首先执行了，然后判断为真或假。对象的遍历返回一个数组，包括对象自身的不含继承的所有可枚举属性不含属性的键名。

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可以选择多个节点,以","分隔开,返回的是个数组；
// 获取文档中所有的

元素
var x = document.querySelectorAll("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");
为

元素添加 class:
document.getElementById("myDIV").classList.add("mystyle");
为

元素添加多个类:
document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");
为

元素移除一个类:
document.getElementById("myDIV").classList.remove("mystyle");
为

元素移除多个类:
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

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53051.html

JavaScript 高级程序设计（第三版）笔记

摘要：以上是使用转换函数方法时会返回的值在用判断的时候，首先执行了，然后判断为真或假。对象的遍历返回一个数组，包括对象自身的不含继承的所有可枚举属性不含属性的键名。 tip：本文含部分Es6语法 1.if(a)的自动转换数据类型转换为true的值转换为false的值 Boolean true false String 任何...

tulayang 2019-08-29 16:57 评论0 收藏0
JavaScript 高级程序设计（第三版）笔记

摘要：以上是使用转换函数方法时会返回的值在用判断的时候，首先执行了，然后判断为真或假。对象的遍历返回一个数组，包括对象自身的不含继承的所有可枚举属性不含属性的键名。 tip：本文含部分Es6语法 1.if(a)的自动转换数据类型转换为true的值转换为false的值 Boolean true false String 任何...

opengps 2019-08-23 12:18 评论0 收藏0
javascript高级程序设计（第三版）学习摘录上

摘要：在这种情况下，函数在停止执行后将返回值。这种用法一般用在需要提前停止函数执行而又不需要返回值的情况下严格模式对函数有一些限制不能把函数命名为或不能把参数命名为或不能出现两个命名参数同名的情况。把近期看高程这本书做的笔记摘录整理出来了，总归对原生javascript理论有了一个比较全面的的认识，这次把书中的一些知识要点摘录出来了，便于以后查阅的时候有方向，也更有效率！！第一章、jav...

leap_frog 2019-08-26 11:52 评论0 收藏0
javascript高级程序设计第三版笔记一

摘要：之间的项，但不包括结束位置。一个参数，返回从该参数指定位置到当前项末尾的所有项。传入的函数每一项都返回，才返回查询数组中的项是否满足条件。第五章引用类型 5.1 Object类型创建Object实例的方式有两种。第一种是使用new操作符 var person=new Object(); person=eve; person.age=29; 第二种是对象字面量 **推荐的写...

张宪坤 2019-08-19 17:20 评论0 收藏0
004-读书笔记-JavaScript高级程序设计 基本概念(下)

摘要：操作符，会将数值改变正数变成负数负数变成正数。同时，也说明了，使用两个逻辑非操作符和的操作结果相同。操作符得到的是余数。不相等操作符有两种。这篇笔记的内容对应的是《JavaScript高级程序设计(第三版)》中的第三章。 1.操作符 1-1 一元操作符递增和递减操作符递增和递减操作符有两个 ++ 和 --。一元操作符使用的时候，可以前置也可以后置。由于两个操作方式类似，先只说明 ...

nevermind 2019-08-22 11:13 评论0 收藏0