红宝书初步研读随手笔记

红宝书初步研读系列–第一二三章

红宝书第一遍研读，知识点整理–随手笔记

第一章 什么是JavaScriptS

1.1. JavaScript包括：

	ECMAScript （核心）
	DOM（文档对象模型）：DOM是一个应用编程接口（API）。
	BOM（浏览器对象模型）：BOM是用于支持访问和操作浏览器的接口。

1.2. BOM对象

navigation对象：提供谷歌那与浏览器的详尽信息
location对象： 提供浏览器加载页面的详尽信息
screen对象： 提供关于用户屏幕分辨率的详尽信息
performance对象： 提供浏览器内存占用、导航行为和时间统计的详细信息

第二章 HTML中的JavaScript

2.1 <script>元素

JS代码是通过`<script>`标签插入到HTML中

2.1.1 <script>元素H5新增属性 defer和async

1、普通script标签：浏览器解析到script时，会停止对当前文档的处理，知道script标签内的资源解析加载完毕，才会对后面的文档进行加载。原因是script元素的src属性，就是当浏览器解析到src时，浏览器就会停止对当前文档的处理，而且下载并且执行脚本，脚本执行完毕之后，才会继续解析HTML文档。
2、defer 推迟执行脚本：defer属性规定当页面已完成加载后，才会执行脚本。
当浏览器解析到<script defer>时，浏览器会立即下载脚本，在下载的过程中，浏览器并不会停止对当前文档的处理，直到当前文档解析完毕之后才会执行script。推迟执行的脚本不一定总会按照顺序执行或者唉DOMContentLoaded事件前执行，因此最好只包含一个这样的脚本
3、async 异步执行脚本：async规定一旦脚本可用，则会异步执行
异步脚本保证会在页面的load事件前执行，但可能会在DOMContentLoaded之前或者之后。
注意：defer和async都只针对外部不脚本

第三章 语言基础

3.1 语法

3.1.1 标识符

标识符：标识符就是变量、函数、属性、函数参数的名称
标识符命名规则
1、第一个字符必须是字母、下划线（_)、美元符号（$）
2、剩下的字符可以是字母、下划线、美元符号、数字
3、惯例：驼峰命名：第一个单词的首字母小写、后面每个单词的首字母大写

3.1.2 var

1. var 作用域
   var可以定义全局变量也可以定义局部变量

function test1() {
	var a = '局部变量a';
	console.log(a);
	//此时的a就是局部变量
}
test1(); // 调用函数test() 执行完毕之后，变量销毁
console.log(a);  //报错 
-------------------
var b = '全局变量b';
function test2() {
	c = '全局变量c'; //在函数体中定义的变量  去掉var  也是全局变量
	console.log(c); 
}
test2();//输出全局变量c
console.log(b); //输出全局变量b

2. var变量提升
   var 声明的变量存在变量提升

function test() {
	console.log(a); //输出 undefined
	var a = 10;
	--------------
	/*  函数体代码就相当于
	var a;
	console.log(a);
	a = 10; */
}

3. var声明的变量会成为window对象的属性

var a = 'window对象的属性a';
console.log(window.a); //输出 window对象的属性a

3.1.3 let

1.let声明的变量 只在块级作用域内有效，而var声明的变量是函数作用域。
块级作用域是函数作用域的子集
2.let声明的变量 在同一个块级作用域内，变量名不允许重复（声明冗余）

var name = 'zs';
console.log(name); //zs
let age = 18;
if (true) {
	var name = 'ls';
	console.log(name); //ls
	let age = 20;
	console.log(age); //20
}
var sex = 'boy';
let sex = 'boy'; //报错 ，在同一作用域内，声明冗余 不会因为let 和var 混用 而受影响

3.let 不存在变量提升
4. let声明的变量不会成为window的属性

let a = 'a不是window对象的属性';
console.log(window.a); // 输出undefined

3.1.4 const声明

1. const和let唯一重要的区别就是 let定义的变量不是必须初始化，而const定义的变量必须初始化，并且给const声明的变量重新赋值会报错。
2. const也不允许重复声明。
   如不能用const声明迭代变量。
   for（const i = 0; i < 10; i++) {} //报错， 因为迭代变量会自增。
3. const声明的作用域也是块级作用域
4. const变量引用的是一个对象，那么修改对象内部的属性并不违反const的限制

3.2 数据类型

基本数据类型：Number， String， Boolean， Undefined， Null， Symbol（符号）
复杂数据类型：Object，Function，Array，Date, RexExp

3.2.1 typeof操作符

typeof null // object
Js远古bug，null就是个空对象指针，在定义将来要保存对象值的变量时，建议使用null来初始化，不要使用其他值。

3.2.2 Null类型

console.log(null == undefined);  //true 

3.2.3 Number类型 0.1+0.2 不等于0.3问题

0.1和0.2转化位二进制后会无限循环，由于标准位数的限制，后面多余的位数会被截掉，此时就出现了精度的损失，相加后因为浮点数小数位的限制，而截断的二进制数字在转换位十进制后就变成了0.300 000 000 000 000 04.
解决办法( 0.1 * 10000 + 0.2 * 10000 ) / 10000

3.2.4 NAN （not a number） 不是数值

用于表示本来要返回数值的操作失败了。
如 在js中 数字 / 0 会返回NAN

consol.log( 0 / 0); //NAN
console.log ( 任意数字 / 0 ); //Infinity 或者-Infinity

3.2.5 String

转换成字符串的方法

1. toString()
   null undefined 没有toString() 方法
2. String()
3. +’ ’ 加一个空字符串
4. 字符串插值 ${}
5. 非空和非数字字符串 通过Number（） 转换 都是NAN

let value = 5;
let exponent = 'second';
let res = `${value} to the ${exponent} power is ${value * value}`; //输出 5 to the second power is 25

3.3 操作符

3.3.1 一元操作符

只操作一个值的操作符叫做一元操作符
前缀递增/前缀递减： 先自增/减 后返回
后缀递增/后缀递减： 先返回 后自增/减

let a = 2;
let b = 20;
let res1 = --a + b;
let res2 = a + b; //此时的a也是递减之后的值
console.log(res1); // 21
console.log(res2); // 21

let c = 2;
let d = 20;
let res3 = c++ + d; // 先返回 再自增1
let res4 = c + d; //此时的c是递增之后的c
console.log(res3); // 22
console.log(res4); // 23

3.3.2 等于和不等于

null和undefined相等
null和undefined 不能转化为其他类型的值再进行比较
如： null == undefined； // true
null == 0； // false
undefined == 0； // false
如果有任一操作数都是NaN，则相等操作符返回false，不相等操作符也返回false

3.4 语句

3.4.1 三种循环结构

for、 while、do…while
while ： 先测试循环语句，循环体可能不会执行
do…while： 后测试循环语句，至少保证执行一次

3.4.2 for in 和for of

for in 和for of 都用来遍历属性
最大区别 ：
for in 取 key（可以理解为 属性名）
for of 取value （属性值）

let obj1 = {
	age : 18,
	sex : '男',
	name: 'zs'
}
for ( item in obj) {
	console.log(item);
	// age
	// sex
	// name
}
// 使用Object.keys() 获取对象的key值集合 才可以用for of 遍历对象
for (item of Object.keys(obj)) {
	console.log(item);
	// 18
	// 男
	// zs
}

// 遍历数组 
let arr = ['a', 'b', 'c']

for ( item in arr) {
	console.log(item);
	// 0
	// 1
	// 2
}
for ( item of arr) {
	console.log(item);
	// a
	// b
	// c
}

3.4.3 break 和 continue

break ： 跳出循环
continue： 跳出本次循环 执行下一次循环

for ( let i = 1; i < 5; i++) {
	if ( i == 2) {
		console.log('跳出循环');
		break;
	}
	console.log('本demo我就执行一次');
}
// 本demo我就执行一次
// 跳出循环

for ( let i = 1; i < 5; i++) {
	if (i == 2) {
		continue;
	}
	console.log('i等于2的时候我不会输出')
}
// i等于2的时候我不会输出       (i = 1)
// i等于2的时候我不会输出       (i = 3)
// i等于2的时候我不会输出       (i = 4)

我是前端小菜鸡，有错还请指出来~~