读书笔记：ES5-basics(上)

Posted on

所有方法

-typeof
-Boolean
-isFinite
-isNaN
-Number
-parseInt
-parseFloat
-hasOwnProperty
-isPrototypeOf
-propertyIsEnumerable
-toLocaleString
-toString
-valueOf

前提基础

javaScript

javaScript = ECMAScript(核心) + DOM(文档对象模型) + BOM(浏览器对象模型)

ECMAScript与浏览器没有任何依赖关系，Web浏览器只是ECMAScript实现可能的宿主环境之一

DOM内容很多，后面章节详细学习记录。。。

BOM => 处理浏览器窗口和框架，但是习惯性针对浏览器的javaScript扩展算作BOM的一部分，包括以下内容：
弹出新浏览器窗口功能；
移动／缩放／关闭浏览器窗口功能；
navigator；
location；
screen；
cookies；
XMLHttpRequest/ActiveXObject

script标签

javaScript代码从上至下依次解释

解析器对元素内的所有代码(外部脚本文件／内部嵌入代码)求值完毕之前，页面中的其余内容都不会被浏览器加载或显示，所以把脚本放在页面底部(</body>之前)减少页面空白时间，是最好的选择

内部嵌入代码中有'</script>'字符串，需要’\’转义 => '<\/script>'

script标签引入外部文件不存在跨域限制，同img标签一样都可以引入不同域下的文件

同时引入外部文件和嵌入代码，只对外部文件有效，嵌入代码被忽略

属性：

说async和defer之前，先说明下DOMContentLoaded是 => the browser fully loaded HTML, and the DOM tree is built, but external resources like pictures <img> and stylesheets may be not yet loaded.在document上的事件，而正常下（无async或defer）内部嵌套脚本／外部引入脚本在加载和执行时会阻塞DOM构建，所以DOMContentLoaded may only happen after all such scripts are executed。参考链接

⚠️DOMContentLoaded其它点，正常是不用等待外部样式表资源的加载和执行的，但是有个陷阱就是如果在<link type="text/css" rel="stylesheet" href="style.css">后紧跟着<script>，那么<script>脚本会等待style脚本加载和执行后再执行，原因是脚本可能希望获得元素的坐标和其他样式依赖属性，所以DOMContentLoaded因为要等待script脚本所以也就等待了这样的style样式表

⚠️Page lifeCycle events:

  1. DOMContentLoaded event triggers on document when DOM is ready. We can apply JavaScript to elements at this stage.
    * All scripts are executed except those that are external with async or defer
    * Images and other resources may still continue loading.
  2. load event on window triggers when the page and all resources are loaded. We rarely use it, because there’s usually no need to wait for so long.
  3. beforeunload event on window triggers when the user wants to leave the page. If it returns a string, the browser shows a question whether the user really wants to leave or not.
  4. unload event on window triggers when the user is finally leaving, in the handler we can only do simple things that do not involve delays or asking a user. Because of that limitation, it’s rarely used.
  5. document.readyState is the current state of the document, changes can be tracked in the readystatechange event:
    * loading – the document is loading.
    * interactive – the document is parsed, happens at about the same time as DOMContentLoaded, but before it.
    * complete – the document and resources are loaded, happens at about the same time as window.onload, but before it.

-async => 可选，立即下载和执行（in background），但是不影响其他页面中的其他操作(下载其他资源／等待加载其他脚本)，仅对外部文件有效 ，不保证按照先后顺序执行，当document过长且脚本很小时会出现脚本执行在DOM构建完成之前，所以建议异步脚本不要在加载期间改变DOM，所以不一定在DOMContentLoaded事件之前／之后执行，一定会在load事件之前执行

-defer => 可选，立即下载，但是延迟到文档完全被解析和显示之后再执行，仅对外部文件有效，理论上先后有两个延迟脚本，会按照先后顺序执行，同时会先于DOMContentLoaded事件执行，但是实际上不一定按照先后顺序，也不一定先于DOMContentLoaded事件执行，所以最好只设置一个延迟脚本

⚠️One of minor benefits in using async and defer for external scripts – they don’t block DOMContentLoaded and don’t delay browser autofill.

-src => 链接外部js文件的URL

-type => 已经是非必需的啦，选项很多，不选默认是text/javascript
还有其他的属性不重要

只要不存在async，defer属性，都会按照<script>出现顺序依次解析

浏览器不支持js／浏览器禁用了js脚本，可用<noscript>

1
2
3
4
5
<body>
  <noscript>
	<p>本页面需要浏览器支持（启用）js</p>
  </noscript>
</body>>

基本概念

标识符

概念：变量，函数，属性的名字

规则：首个字符是 $／字母／下划线，其余字符可以是 $／字母／下划线／数字，建议驼峰格式，与ECMAScript内置函数和对象命名格式保持一致

注意⚠️：不要用关键字和保留字做标识符

关键字

概念：表示控制语句的开始或结束，或者执行特定操作

break,do,instanceOf,typeof,case,else,finally,void,debugger,delete,in,new,var,continue,for,switch,while,this,with,function,try,catch,if,default等等等

保留字

概念：暂时没有用途，可能在将来做为关键字

let,const,export,extends,import,class,abstract,enum,int,short,boolean,interface,static,byte,long,super,char,final,native,synchronized,float,package,throws,goto,private,transient,implements,protected,volatile,double,public,yield等等等
其实前面几个在ES6中已经成为关键字了！！！！

变量

松散类型 => 每个变量仅仅是一个用来保存值的占位符而已

var声明变量，使其是在当前作用域的局部变量，没有var声明则是全局变量

可以同时声明多个变量：

1
2
3
var name = 'hemiao',
  age = 24,
  sex = 'woman';

数据类型

5种简单基本数据类型： Undefined,Null,Number,String,Boolean

1种复杂数据类型： Object

typeof ：
未定义的值 => undefined
null/对象 => object
布尔 => boolean
字符串 => string
数值 => number
函数 => function

tyoeof是操作符，所以后面可以跟括号也可以不跟

typeof针对对象的情况不能细分出是数组还是其他，instanceof可以

从技术上讲，函数也是对象，但是函数会有一些特殊的属性，所以能够判断出是函数还是对象很有必要的

补充正则的情况：

Undefined类型

该数据类型只有一个值：undefined

表示var声明但未初始化

对于未声明的变量只能执行一个方法typeof，执行其他操作会报错，但是！！对未声明的变量执行该方法与对声明未初始化的变量执行该方法返回值一样都是undefined

所以严格做到用到的变量都声明，这样返回undefined就可以代表未初始化而不是未声明

Null类型

该数据类型只有一个值：null

表示空对象指针

undefined派生自null，所以==返回true，===不等

对于意在存储对象的变量，在未存储对象之前，先存储null，方便清楚分辨该变量是否已经存储了对象，同时也与undefined区分

Boolean类型

该数据类型有两个值： true和false

Boolean()方法将其他数据类型转换成布尔值

Boolean true false
Number 非0 0/NaN
String 非”” “”
Object 任何对象 null
Undefined n/a undefined

所以要注意对于没有数据的空对象，[]/{}也会转换成true，只有null才会转换成false，所以在if语句中会自动执行Boolean要仔细⚠️

Number类型

该数据类型使用IEEE754格式表示整数和浮点数，数值字面量格式包含十进制／八进制（前置0后跟0-7，严格模式下会报错，ES6整体提升到严格模式了哟）／十六进制（前置0x后跟0-9和A-F，A-F大小写都可以），计算时最终都会转变成十进制数值

-浮点数
1
2
3
var floatNum = 1.1;
//可以识别但是不推荐小数点前面没有整数的写法
var floatNum = .1;

保存浮点数占用的内存空间是整数的两倍，所以ECMAScript会不失时机的把浮点数转换成整数，类似1.0/1.的情况

e表示法：0.4e7 => 0.4*10^7，e大小写均可以

对于极小数值，默认当小数点后面0超过6个就自动转变成e表示法

浮点数值计算时精准度不够，例0.1+0.2会等于0.30000000000000004，这是IEEE754的问题，所以不要做这样的判断

-数值范围

Number.MIN_VALUE - Number.MAX_VALUE

超过范围的值用Infinity表示，具体到-Infinity和+Infinity，分别在Number.NEGATIVE_INFINITY和Nnmber.POSITIVE_INFINITY中存储

isFinite()判断是否在有效数值内

-NaN

Not a Number，本应返回数值但是未返回数值

不会存在像其他编程语言那样任何数值除以0都会导致错误，在ECMAScript中0/0=NaN，整数／0=+Infinity，负数／0=-Infinity

特点： 任何涉及NaN的操作都会返回NaN；NaN与任何值都不相等，包括自己本身

isNaN()，参数可以是任何类型数据，对参数进行转换数值操作，不能转换成数值的情况返回true

对于字符串的转换情况，可以看出用的方法应该是Number()，比如"1bule"都没有转换成数值

对于对象转换情况，先调用valueOf()，若不能返回数值再调用toString()，这是参考高级程序设计这本书中说的，但是在实际情况中执行时发现有valueOf()时，不管能不能转换成数值都不会执行toString()，没有valueOf()时才会取toString()的值为基准
⚠️⚠️⚠️对以上内容更改，对象调用Number()时，先调用valueOf()方法，如果此方法返回的是基本类型值则依照基本类型转换规则转换，如果返回的是复杂类型，则调用toString()方法，如此方法返回的是基本类型值则依照基本类型转换规则转换，如返回的是复杂类型则报错
补充的例子图在下面数值转换中…

-数值转换

Number(): 将任何数据类型转换成数值类型

⚠️ 布尔值true=>1，false=>0
⚠️ null=>0
⚠️ undefined=>NaN
⚠️ 字符串，""=>0，字符串内是正常的数值即转成此数值，不识别八进制，识别十六进制，除此外包含其他非数值的返回NaN
⚠️ 对象，先调用valueOf()方法，如果此方法返回的是基本类型值则依照基本类型转换规则转换，如果返回的是复杂类型，则调用toString()方法，如此方法返回的是基本类型值则依照基本类型转换规则转换，如返回的是复杂类型则报错



parseInt(): 将字符串转换成整数数值

⚠️ 从第一个字符开始解析，一直解析到非数值为止，所以空字符返回NaN
⚠️ ES5开始不能识别八进制，即忽略前导0，能识别十六进制，建议始终传入第二个参数指定几进制解析（只有parseInt有第二个参数，Number和parseFloat都没有）

parseFloat: 将字符串转换成浮点数

⚠️ 从第一个字符开始解析，知道解析到无效的浮点数值，第二个小数点无效
⚠️ 只解析十进制，始终忽略前导0，没有第二个参数代表几进制基数
⚠️ 可被解析为整数的情况，解析为整数

String类型

用法：""或''，不能混用

字符字面量 => 转义序列 => 非打印字符或具有其他用途的字符

字符字面量 含义
\n 换行
\f 进纸
\b 空格
\r 回车
\t 制表
\ 斜杠
\’ 单引号
\” 双引号
\xnn 十六进制nn表示一个字符（n为A-F）,例\x41是A
\unnnn 十六进制nnnn表示一个unicode字符（n为A-F），例\u03a3是希腊字符Σ

包含双字节字符，length会不准确

特点：字符串不可变，即一旦创建不能改变，改变是销毁原字符串，再用包含新值的字符串填充该变量

1
2
var str = 'java';
str = str + 'script'

上面的过程创建个能包含’javascript’的新字符串，填充’java’和’script’，最后要销毁’java’和’script’

字符串转换：toString()和String()，前者是各数值类型方法(XXX.toString())，后者是静态方法(String(XXX))

除null和undefined都有toString()方法，注意对于数值类型不能直接调用，要用变量调用，NaN.toString()是NaN

String()方法，有toString()方法的调用该方法，否则调用String()，所以null和undefined调用不会报错

⚠️⚠️⚠️对于对象调用String()方法做以说明：首先调用toString()方法，默认的返回值是'[object Object]'，如果重写了toString()会依据重写函数返回值，如果返回值是基本类型则按照基本类型的转换规则转换，如返回复杂类型则调用valueOf()方法，如果返回值是基本类型则按照基本类型转换，如果返回值是复杂类型则报错


补充对象调用String()方法的例子

用的最多的方式是加号操作符！！！！并且调用的是String()方法，如下图

Object类型

1
2
3
4
var obj = new Object();
//有效，但不推荐省略括号
var obj = new Object;
//还有字面量方式，后面更详细总结

Object是所有对象的基础，Object每个实例都具有的方法从和属性如下：

object.constructor： 保存用于创建这个对象的函数，上面的例子就是Object()

object.hasOwnProperty(propertyName)：给定的属性在此对象实例（非原型）中存在，propertyName参数是字符串形式

prototypeObj.isPrototypeOf(object)：xx是不是object的原型

object.propertyIsEnumerable(propertyName)：给定的属性是否可以for-in枚举，propertyName参数是字符串形式

toLocaleString()：返回字符串表示，与执行环境的地区对应

toString()：返回字符串表示，不重写函数的情况下返回[object Object]

valueOf()：返回对象的字符串、布尔值或数值的表示，通常与toString()返回值一样

太多了，会有下篇