JS补全日记

9.21

1、js的初衷是为了解决页面验证需要进行一次请求的痛点

eg:没填写密码点击登录需要请求返回之后告知用户密码为必填项，而如今可直接于前端做验证

2、ES6正式支持了类、模块、迭代器、生成器、箭头函数、期约、反射、代理、和众多新的数据类型

3、引入js模块时需要在<script>标签中添加type="module"属性，<script>标签内才能出现import、export关键字，代码会被当成ES6模块

4、若<script>同时出现src属性和内部代码，则浏览器只会下载并执行脚本，而忽略内码代码

5、<script>标签的src属性会向指定路径发送get请求，该get请求不受浏览器同源策略限制

6、使用let在全局作用域中声明的变量不会成为window对象的属性(var声明的变量则会)，不过let声明仍然是在全局作用域中发生的，相应变量会在页面的生命周期内存续

7、当使用var或let声明了变量但未赋值初始化时，则相当于给变量赋予了'undefined'

9.22

1、存储浮点值使用的内存空间是整数的两倍，在小数点后没有数字的情况下将按整数存储

2、浮点值的精确度最高可达17位小数，但在特定数值中运算中会失精(IEEE754特性)

3、NaN==NaN //false; 使用isNaN()，任何不能隐式转换为number类型的值传入该函数将返回true

4、parseInt()可以转换所有进制，且第二个形参可指定进制；parseFloat()只能转换十进制没有第二个形参

5、转义序列表示一个字符，只算作一个字符

6、技术上讲，模板字面量(模板字符串)不是字符串，而是一种特殊的JS语法表达式，只不过求知后得到的是字符串；所有插入的值都会使用toString()强制转型为字符串，任何JS表达式都可用于插值

eg：let foo = { toString: () => 'World' };

        console.log(`Hello ${foo}`) //Hello World

7、symbol类型的值需要使用Symbol()函数初始化，创建出来的symbol唯一且不可变

eg:  let foo=Symbol(),boo=Symbol();

       console.log(foo==boo) //false

8、Symbol.for()查找全局符号注册表，若存在则重用，反之则创建；全局注册表中的符号必须使用字符串创建，因此所有传入.for()的值都会被转为字符串

eg:   let foo=Symbol.for('sym'); //创建

        let boo=Symbol.for('sym'); //重用

        console.log(foo===boo) //true

9、object是派生其他对象的基类，Object类型的所有属性和方法也存在于派生对象上，包含如下：

        constructor，hasOwnProperty()，isPrototypeOf()，propertyIsEnumerable(),tolocaleString(),toString(),valueOf()

9.25

1、!!可用于把任意值转换为布尔值，相当于调用了转型函数()

2、逻辑与操作符可用于任何类型的操作数，不限于布尔值。如果有操作数不是布尔值，则逻辑与并不一定返回布尔值，规则如下：

        eg：Ⅰ 如果第一个操作数是对象，则返回第二个操作数

                Ⅱ 如果第二个操作数是对象，则只有第一个操作数求值为true才会返回该对象

                Ⅲ 如果两个操作数都是对象，则返回第二个操作数

                Ⅳ 如果有一个操作数是null，则返回null

                Ⅴ 如果有一个操作数是NaN，则返回NaN

                Ⅶ 如果有一个操作数是undefined，则返回undefined

        null/NaN/undefined && null/NaN/undefined 则返回第一个操作数

逻辑与操作符是一种短路操作符，意思就是如果第一个操作数决定了结果，那么永远不会对第二个操作数求值。

3、逻辑或和逻辑与类似，如果有一个操作数不是布尔值，那么逻辑或操作符也不一定返回布尔值，规则如下：

        eg：Ⅰ 如果第一个操作数是对象，则返回第一个操作数

                Ⅱ 如果第一个操作数求值为false，则返回第二个操作数

                Ⅲ 如果两个操作数都是对象，则返回第一个操作数

                Ⅳ 如果两个操作数都是null，则返回null

                Ⅴ 如果两个操作数都是NaN，则返回NaN

                Ⅶ 如果两个操作数都数是undefined，则返回undefined

逻辑或也具有短路特性，第一个操作数求值为true，第二个操作数就不会再被求值了

4、指数操作符 ** 相当于Math.pow()

5、用+执行运算时，若有一个操作数是字符串，另一个操作符为非字符串则调用toString()方法获取字符串后拼接

6、后测试循环语句：do{}while();

      先测试循环语句：while(){};

7、ECMAscript中的对象属性无序，因此for in返回的顺序也是无序的

8、switch语句在比较每个条件的值时会使用全等操作符，因此不会强制转换

9、Object是一种复杂类型数据，是JS中所有对象的基类

10、函数不需要指定返回值，不指定返回值的函数实际会返回特殊值undefined

11、typeof()判断变量的类型，对于对象类型包括null都返回object；instanceof()可以判断对象的类型；两者结合可判断除了null外的所有值

tips:typeof()检测function时返回function；在ECMA-262中规定，任何实现内部[[call]]方法的对象都应该在typeof()检测时返回function

12、全局通过var定义的变量都会成为window对象的属性和方法，使用let和const不会，但在作用域链解析上效果是一样的

9、26

强缓存

强缓存主要是由 Cache-control 和 Expires 两个 Header 决定的

Expires 的值和头里面的 Date 属性的值来判断是否缓存还有效。Expires 是 Web 服务器响应消息头字段，在响应 http 请求时告诉浏览器在过期时间前浏览器可以直接从浏览器缓存取数据，而无需再次请求。Expires 的一个缺点就是，返回的到期时间是服务器端的时间，这是一个绝对的时间，这样存在一个问题，如果客户端的时间与服务器的时间相差很大（比如时钟不同步，或者跨时区），那么误差就很大。

Cache-Control 指明当前资源的有效期，控制浏览器是否直接从浏览器缓存取数据还是重新发请求到服务器取数据。但是其设置的是一个相对时间。

指定过期时间：max-age 是距离请求发起的时间的秒数，比如下面指的是距离发起请求 31536000S 内都可以命中强缓存

Cache-Control: max-age=31536000

表示没有缓存

Cache-Control: no-store

有缓存但要重新验证

Cache-Control: no-cache

私有和公共缓存

public 表示响应可以被任何中间人（比如中间代理、CDN 等缓存） 而 private 则表示该响应是专用于某单个用户的，中间人不能缓存此响应，该响应只能应用于浏览器私有缓存中。

Cache-Control: private
Cache-Control: public

验证方式：以下表示一旦资源过期（比如已经超过 max-age），在成功向原始服务器验证之前，缓存不能用该资源响应后续请求

Cache-Control: must-revalidate

Cache-control 优先级比 Expires 优先级高

以下是一个 Cache-Control 强缓存的过程：

• 首次请求，直接从 server 中获取。其中会设置 max-age=100

• 第二次请求，age=10，小于 100，则命中 Cache，直接返回

• 第三次请求，age=110，大于 110。强缓存失效，就需要再次请求 Server

协商缓存

• If-Modified-Since——Last-Modified

Last-Modified 表示本地文件最后修改日期，浏览器会在 request header 加上 If-Modified-Since（上次返回的 Last-Modified 的值），询问服务器在该日期后资源是否有更新，有更新的话就会将新的资源发送回来

但是如果在本地打开缓存文件，就会造成 Last-Modified 被修改，所以在 HTTP / 1.1 出现了 ETag

• If-none-match——ETags

Etag 就像一个指纹，资源变化都会导致 ETag 变化，跟最后修改时间没有关系，ETag 可以保证每一个资源是唯一的。If-None-Match 的 header 会将上次返回的 Etag 发送给服务器，询问该资源的 Etag 是否有更新，有变动就会发送新的资源回来

If-none-match、ETags 优先级高于 If-Modified-Since、Last-Modified

第一次请求：

第二次请求相同网页：

协商缓存，假如没有改动的话，返回 304 ，改动了返回 200 资源

• 200：强缓存 Expires/Cache-Control 失效时，返回新的资源文件

• 200 (from cache): 强缓 Expires/Cache-Control 两者都存在，未过期，Cache-Control 优先 Expires 时，浏览器从本地获取资源成功

• 304 (Not Modified)：协商缓存 Last-modified/Etag 没有过期时，服务端返回状态码304 

强缓存：直接从本地副本比对读取，不去请求服务器，返回的状态码是 200。

协商缓存：会去服务器比对，若没改变才直接读取本地缓存，返回的状态码是 304。

 Cookie

分为持久性cookie和绘画期cookie；持久性cookie指定有效期或过期时间；会话期cookie不需要指定过期时间或有效期，浏览器关闭之后会自动删除，而有些浏览器提供了会话恢复功能，会话期的cookie会被保存下来，如同浏览器未被关闭过

3、let也存在变量提升，但由于暂时性死区的缘故，实际上不能在声明之前使用let变量；

暂时性死区的本质就是，只要一进入当前作用域，所要使用的变量就已经存在了，但是不可获取，只有等到声明变量的那一行代码出现，才可以获取和使用该变量。

4、标识符查找并非没有代价，访问局部变量比访问全局变量要快，因为不用切换作用域，不过JS引擎在优化标识符查找上做了很多工作，将来这个差异可能就微不足道了 (p94，变量、作用域与内存)

9、30

1、Number/Boolean/String的实例都各自重写了valueOf()和toString()let

Number实例valueOf()返回原始数值；toString()返回数值字符串，并且可传入一个表示基数进制的参数

Boolean实例valueOf()返回原始值true或false；toString()返回字符串形式的'true'或'false'

String实例valueOf()和toString()都返回字符串

2、toFixed可表示0~20位小数并且是四舍五入；(安全数-2^53+1~2^53-1)

3、String类型的方法大多数不会改变原始值，需要变量存储新值

4、两个单例内置对象：Global和Math

Global

        事实上并不存在全局函数和全局变量，所有定义在全局的变量和函数都会成为global对象的属性和方法，但浏览器将window对象实现为global对象的代理；

        一种获取global对象的方法

        当一个函数在没有明确指定this值的情况下执行时，this值等于global对象

let global = function() {
    console.log(this)
}()

Math

        Math对象作为保存数学公式、信息和计算的地方

let arrNum = [3,54,32,16]
Math.max(...arrNum)//54

Math.ceil()向上舍入最接近的整数

Math.floor()向下舍入最接近的整数

Math.round()四舍五入

Math.fround()返回数值最接近的单精度(32位)浮点值

Math.random()返回一个[0,1)的随机数

一次运算中解决失精问题可将参与运算的数全部转为整数运算结束后再转为浮点数

5、在使用对象字面量表示法定义对象时，并不会实际调用Object构造函数

11、29

1、如果要调用一个不确定存在的属性或方法，若属性或方法不存在则会报错，而以下语法若属性或方法不存在将会忽略

eg:

obj.props?.name

obj.fn?.()