JavaScript高级程序设计（第4版）读书笔记_javascript高级程序设计(第四版) 学习后的提升

第1章 什么是 Javascript

1. .Javascipt是一门用来与网页交互的脚本语言，由三个部分组成：
   ①ECMAScript:由ECMA-262定义并提供核心功能（语法等）；
   ②DOM:文档对象模型，提供与网页内容相关接口和方法；
   ③BOM:测览器对象模型，提供与测览器交互的接口和方法。

第2章：html中的JS

1.Script标签特殊属性：
①async:表示应立即开始下载脚本，但不能阻止其他页面动作，如下载资源或等待其他脚本加载。只对外部脚本文件有效；
②defer:表示脚本可延迟到文档完全被解析和显示之后再执行。只对外部脚本有效。
注：script放在head星，会导致页面渲染有明显延迟，由于页面在浏览器解析到＜body>的起始标签时开始渲染。

2.文档模式：
①混杂模式：以省略文档开头的doctype声明作为开关；（向后兼容）
②标准模式：加了＜！DOCTYPE html>；
主要区别只体现在通过CSS渲染的内容方面。

3.元素：针对早期浏览器不支持js的问题；一个页面优雅降级的方案。
使因场景：
①浏览器不支持脚本；
②测览器对脚本的支持被关闭。
注：如果浏览器支持并启用脚本，则该元素中内容都不会被渲染。

第3章 语言基础

1.标识符：是变量、函数、属性或函数参数的名称。可由一个或多个下列字符组成：
①首字符必须是一个字母、下划线（一）或美元符号（$);
②剩下的其他字符可以是字母、下划线、美元符号或数字。

2.var:①存在变量提升；
②函数作用域。③能同名；
④可以；
let ①x;②块作用域；③不能同名；④在铜声明
变量不会挂在window上，
const ①x;②块作用域；③不能同名；④不可以；
⑤写let不同点：声明变量时需初始化，且不能更改。不能用
来声明选代变量。

注：let和const不同，const 声明变量需初始化，且不能修改，不能用来声明迭代变量。

3.数据类型：
①基本（6个）：Undefined,Null,Number,string,Boolean,Symbol（es6 符号)
②复杂：Object。

• typeof:“undefind”字借串。
• NUll， Object ->(typeof) "object"
• function ->(typeof) "function"

注：

• let message; 变量被声明，值为undefined ①
• let message ,没有声明 ②

4.NaN: 不是数值（Not a Number),用来表示本来要返回的数值失败了。
NaN不写任何包含本身在内的任何值相等。NaN == NaN 错误

5.数据转换：
将非数值→数值，规则：
①Number():

• Boolean,true→1,false→0;
• 数值：直接返回；
• nulll→0; undefined→NaN;
• 字符串：
• 1）包含数字，转换为十进制数值；
  2）浮点：转换为对应浮点值；
  3）包含十六进制格式，转换为对应十进制；
  4）空字符串，→ 0;
  5）其他，→ NaN;
• 对象；调用valueof(),换上述规则，若结果为NaN,则调用tostring(),再按字符串规则；
  ②parseInt():得到整数；
  参数2:指定底数：10,16进制。
  ③parsefloat():得浮点数，解析到第一个 “.” 为止；
  →只解析10进制数，16进制为0。

注：Null,undefined 没有tostring)方法。
String() 始终会返回表示相应类型值的字符串。
null，undefined -> “xxx”

6.操作符

• Infinity 属性用于存放表示正无穷大的数值
• es7新增了指数操作符 Math.pow() -> **
  Math.pow(3,2) 3x3 -> 3**2
• 指数赋值操作符，
  let a =3 ;
a ** = 2; // 9
• == , != 等于和不等于，会先进行类型转换

null == undefined;  // true
NaN == 	NaN;     // false
null == 0;        // false
undefined == 0;     // false
1
2
3
4

7.for… in 和 for …of的区别

• for…in 遍历的是对象的属性名称(key：键名)，一个Array对象也是一个对象，数组中的每个元素的索引被视为属性名称，即在遍历数组时，拿到的是索引；
• for…of 遍历Array时，拿到的是每个元素的值

第4章 变量、作用域与内存

1.instanceof

• 如果变量是给定引用类型（由其原型决定）的实例，则instanceof返回true
• 例：

var obj = new Object();
console.log(obj instanceof Object);    // true 
1
2

• proto: 任何对象都具备的属性，指向它的原型对象（原型链）
• prototype：构造函数的属性，指向它的原型对象
• constructor: 指向该对象的构造函数

function Foo(){}
var f1 = new function();
f1.__proto__  == Foo.prototype.
Foo.prototype.constructor = Foo
1
2
3
4

2.执行上下文

• 简称上下文，变量和函数的上下文决定他们可以访问哪些数据，以及他们的行为，每个上下文都有一个关联的变量对象，全局 --》 window；
• 上下文在其所有代码执行完毕后都会被销毁，包括定义在它上面的所有变量和函数（全局上下文在应用程序退出前才会被销毁，比如网页关闭或者退出浏览器）；
• 没有声明的变量，为全局window所有；
• 提升：var 声明被拿到函数或者全局作用域的顶部，位于作用域中所有代码之前；

3.垃圾回收

• 垃圾回收程序每隔一定时间（或者说在代码执行过程中某个预定的收集时间）就会自动运行；垃圾回收程序必须跟踪记录哪个变量还会使用，以及哪个变量不会使用，以便回收内存，如何标记未使用的变量主要的两种标记策略：
  1）标记清理：垃圾回收程序运作的时候，会标记内存中储存的所有变量，然后将所有在上下文中的变量，以及被在上下文中引用的变量的标记去掉，再次之后再被加上标记的变量就是待删除的，因为任何在上下文中的变量都访问不到他们，随后垃圾回收程序做一次内存清理，销毁带标记的所有值并回收他们的内存；
  2）引用计数：对每个值都记录它引用的次数，为0时
  就会释放它的内存。

第5章 基本引用类型

1. Date()

• Date 类型将日期保存为自协调世界时（UTC, Universal Time Coordinated）
• 日期格式化方法（都会返回字符串）：
  1）toDateString() 显示日期中的 周，月，日，年；
  2）toTimesString() 显示日期中的 时，分，秒和时区；
  3）toLocaleDateString() 显示日期中的 周，月，日，年；
  4）toLocaleTimeString() 显示日期中的 时，分，秒；
  5）toUTCString() 显示完整的UTC日期。

2. Math()

• min() 和 max() 用于确定一组数据中的最大值和最小值；

let max = Math.max(1,2,3,4);   // 4
1

• 舍入方法
  1）Math.ceil() 方法始终向上舍入为最接近的整数；
  2）Math.floor() 方法始终向下舍入为最接近的整数；
  3）Math.round() 方法执行四舍五入；
  4）Math.fround() 方法返回数值最近的单精度（32位）浮点值表示；
• random(): 返回一个0-1 范围内的随机数，其中包含0但不包含1

3. 三种原始值包装类型：Boolean， Number，String，公共的特点：

• 每种包装类型都映射到同名的原始类型；
• 以读模式（就是要从内存中读取变量保存的值），后台会实例化一个原始值包装类型的对象，借助这个对象可以操作相应的数据；
• 涉及原始值的语句执行完毕后，包装对象就会被销毁。
  注：
  (1)在以读模式访问字符串的时候，后台都会执行以下三步：
  1）创建一个String 类型的对象；
  2）调用实例上的特定方法；
  3）销毁实例。

let str = new String('aaa');
let str2 = str.substring(2);
str = null
1
2
3

(2) 引用类型和原始值包装类型的主要区别是对象的生命周期

• 在通过new实例化引用类型后，得到的实例会在离开作用域时被销毁，
• 而主动创建的原始值包装类型 对象只存在于访问它的那行代码执行期间。这意味着不能在运行时给原始值添加属性和方法。

let a1 = 'aadad';
a1.color = 'red';
console.log(a1.color); // undefined
1
2
3

第6章 集合引用类型

1. Object
   1）创建Object的两种方式：

• 使用new操作符和Object构造函数；
• 使用对象字面量；

 let person = new Object();
 person.name = 'Job';

let person = {
name = 'Job';
}
1
2
3
4
5
6

• 注意：在使用对象字面量表示法定义对象时，并不会实际调用 Object 构造函数。
  2） 存取对象属性方法;
  ① 点语法；
  ② 中括号语法。

let person = new Object();
person.name = 'Job';
person['age'] = 18;
1
2
3

• 主要区别：
  • 使用中括号的主要优势是可以通过变量访问属性；
  • 如果属性中包含可能会导致语法错误的字符，或者包含关键字/保留字时，也可以使用中括号语法。

2. Array
   1）创建类似 Object；
   2）Array 构造函数 es6 新增两个 创建数组的静态方法；

① Array.from(类数组对象，可选的映射函数参数):

console.log(Array.from('Matt')); // ['M', 'a', 't', 't']
const a1 = [1, 2, 3];
const a2 = Array.from( a1, x => x**2 ); // [1, 4, 9]
1
2
3

② Array.of() 可以把一组参数转换为数组；

console.log(1,2,3); // [1, 2, 3]
console.log(undefined); // [undefined]
1
2

3） 数组空位
1）使用数组字面量初始化数组时，可以使用一串逗号来创建空位（hole）；

• Ecmascript 会将逗号之间相应索引位置的值当成空位；
• es6 重新规范，将这些空位当成存在的元素，只是 值为 undefined；

const options = [ 1, , , , 5];   // 遍历 1   undefined undefined undefined 5  
1

2）注意：由于行为不一致和存在性能隐患，因此实践中要避免使用数组空位。如果确实要需要空位，则可以显式地用 undefined 值代替。

4） length：非只读，修改length的值，可以从数组末尾删除或添加元素

• 设置为大于数组长度的值，则新添加的元素都以 undefined 填充。

let arr = [1, 2, 3];
arr.length = 4;
console.log(arr[3]); // undefined
1
2
3

5）检测数组：Array.isArray(xx);
6）方法：
- 填充：fill(要填充的数字，开始索引，结束索引) 。 ----> es6

var zero = [0, 0, 0];
zero.fill(2);  // [2,2,2]，没索引全部填充
zero.fill(0); // 重置

zero.fill(1, 1); // [0, 1, 1] 
1
2
3
4
5

• 复制：copWith(start, end) 按照范围浅复制数组中部分内容，然后将他们插入到指定索引开始的位置。 ----> es6
• contact()：在现有元素基础上创建一个新数组；

let arr = [1,2];
let arr1 = arr.concat(3, [4]);
// arr1   [1, 2, 3, 4]
1
2
3

• 截取 slice(start, end); （不改变原数组）

let arr = [1, 2, 3, 4]
arr.slice(1); // [2, 3, 4]
arr.slice(1, 2); // [2, 3]
1
2
3

注：如果参数有负值，就用数组的长度加上这个 负值即可。
eg：5个元素，slice(-2, -1) —> slice(3, 4) [0, 1, 2, 3, 4]

• splice()：
  1） 删除：splice(第一个元素的位置, 元素量)
  2）插入：splice(start, 0, 要插入元素)
  3）替换：在删除的同时，可在该位置插入新元素
• 搜索：
  1）indexOf()，从开头搜索，有就会返回索引，否则返回 -1
  2）lastIndexOf()，从结尾开始，同上（但是索引 0为最后一项
  3）includes() --> es7 ，true/false
  7）断言函数：find(元素，索引，数组本身)，函数返回值决定相应的索引的元素是否匹配， 返回第一个匹配的元素

const people = [
	{ name: 'Matt', age: 27 },
	{ name: 'Job', age: 29 },
]
alert( people.find(element, index, arr) =>{
	element.age < 28; // { name: 'Matt', age: 27 }
} ))
1
2
3
4
5
6
7

• findIndex()：返回第一个匹配的索引。
  8）迭代方法：
• every((item, index) =>{})：对数组每一项都运行传入的函数，如果每项运行都是true，则方法结果返回true；
• some(***)：同上，不同点 只要有一项为true，方法结果为 true；
• filter()：对数组每一项都运行传入的函数，为 true 的项，会组成数组之后返回；（新数组与原数组长度 不一致，元素仍是就数组里的）*
• map()：对数组每一项都运行传入函数，返回由每项运行函数之后的结果组成的数组；（新数组与原数组长度 一致，元素不是旧数组里的）*
• forEach(***)：同上，但是没有返回值，会改变原数组