邢志 发表于 2023-7-20 07:12:24

JavaScript学习笔记01(包含ES6语法)

Js 简介

什么是 Js?

Js 最初被创建的目的是“使网页更生动”。
Js 写出来的程序被称为 脚本,Js 是一门脚本语言。

[*]被直接写在网页的 HTML 中,在页面加载的时候自动执行
[*]脚本被以纯文本的形式提供和执行,不需要特殊的准备或编译即可运行(JIN compiler)
Js 不仅可以在浏览器中执行,也可以在服务端执行,本质上是它可以在任意搭载了Js 引擎的设备中执行。
浏览器中嵌入了 Js 引擎,有时也称作“JavaScript 虚拟机”,不同的引擎有不同的“代号”,例如:

[*]V8 —— Chrome、Opera 和 Edge 中的 Js 引擎。
[*]SpiderMonkey —— Firefox 中的 Js 引擎。
[*]Chakra —— IE
[*]JavaScriptCore、Nitro 、 SquirrelFish —— Safari
eg:如果 “V8 支持某个功能” ,那么我们可以认为这个功能大概能在 Chrome、Opera 和 Edge 中正常运行。
引擎是如何工作的?

引擎很复杂,但是基本原理很简单。

[*]引擎(如果是浏览器,则引擎被嵌入在其中)读取(“解析”)脚本。
[*]然后,引擎将脚本转化(“编译”)为机器语言。
[*]然后,机器代码快速地执行。
引擎会对流程中的每个阶段都进行优化。它甚至可以在编译的脚本运行时监视它,分析流经该脚本的数据,并根据获得的信息进一步优化机器代码。
浏览器中的 Js

能做什么?

现代的 Js 是一种“安全的”编程语言。它不提供对内存或 CPU 的底层访问,因为它最初是为浏览器创建的,不需要这些功能。
Js 的能力很大程度上取决于它运行的环境。例如,Node.js 支持允许 Js 读取/写入任意文件,执行网络请求等。
浏览器中的 Js 可以做下面这些事:

[*]在网页中添加新的 HTML,修改网页已有内容和网页的样式。
[*]响应用户的行为,响应鼠标的点击,按键的按动。
[*]向远程服务器发送网络请求,下载和上传文件(所谓的 AJAX 和 COMET 技术)。
[*]获取或设置 cookie,向访问者提出问题或发送消息。
[*]记住客户端的数据(“本地存储”)。
不能做什么?

为了用户的(信息)安全,在浏览器中的 Js 的能力是受限的。
目的是防止恶意网页获取用户私人信息或损害用户数据。
此类限制的例子包括:

[*]网页中的 Js 不能读、写、复制和执行硬盘上的任意文件。它没有直接访问操作系统的功能。
现代浏览器允许 Js 做一些文件相关的操作,但是这个操作是受到限制的。
仅当用户做出特定的行为,Js 才能操作这个文件。eg:用户把文件“拖放”到浏览器中,或者通过标签选择了文件。
有很多与相机/麦克风和其它设备进行交互的方式,但是这些都需要获得用户的明确许可。

[*]不同的标签页/窗口之间通常互不了解。
有时候,也会有一些联系,例如一个标签页通过 Js 打开的另外一个标签页。
但即使在这种情况下,如果两个标签页打开的不是同一个网站(域名、协议或者端口任一不相同的网站),它们都不能相互通信。这就是所谓的“同源策略”。
为了解决“同源策略”问题,两个标签页必须都包含一些处理这个问题的特定的 Js 代码,并均允许数据交换。

[*]Js 可以轻松地通过互联网与当前页面所在的服务器进行通信。但是从其他网站/域的服务器中接收数据的能力被削弱了。尽管可以,但是需要来自远程服务器的明确协议(在 HTTP header 中)。这也是为了用户的信息安全。
数据类型

在 Js 中有 8 种基本的数据类型(7 种原始类型和 1 种引用类型)
Number 类型

代表整数和浮点数,可以有很多操作,eg:乘法 *、除法 /、加法 +、减法 - 等等。
除了常规的数字,还包括所谓的“特殊数值”:Infinity、-Infinity 和 NaN。
科学计数法


[*]将 "e" 和 0 的数量附加到数字后。就像:123e6 与 123 后面接 6 个 0 相同。
[*]"e" 后面的负数将使数字除以 1 后面接着给定数量的零的数字。例如 123e-6 表示 0.000123(123 的百万分之一)。
多种进制


[*]可以直接在十六进制(0x),八进制(0oor00)和二进制(0bor0B)系统中写入数字。
[*]使用Number()方法将含有对应前缀的字符串数值转为十进制
Number('0b111')// 7
Number('0o10')// 8
[*]parseInt(str, base) 将字符串 str 解析为在给定的 base 数字系统中的整数,2 ≤ base ≤ 36。
[*]num.toString(base) 将数字转换为在给定的 base 数字系统中的字符串。
常规数字检测

全局方法


[*]isNaN(value) —— 将其参数转换为数字,然后检测它是否为 NaN
[*]isFinite(value)—— 将其参数转换为数字,如果它是常规数字,则返回 true( NaN/Infinity/-Infinity返回false)
定义在Number上的方法 (ES6)


[*]Number.isNaN() ——检查一个值是否为NaN。如果参数类型不是NaN,Number.isNaN一律返回false
[*]Number.isFinite() —— 检查一个数值是否为有限的。如果参数类型不是数值,Number.isFinite一律返回false。
区别

传统的全局方法isFinite()和isNaN()先调用Number()将非数值的值转为数值,再进行判断,而这两个新方法只对数值有效,Number.isFinite()对于非数值一律返回false, Number.isNaN()只有对于NaN才返回true,非NaN一律返回false。
isFinite(25) // true
isFinite("25") // true
Number.isFinite(25) // true
Number.isFinite("25") // false

isNaN(NaN) // true
isNaN("NaN") // true
Number.isNaN(NaN) // true
Number.isNaN("NaN") // false
Number.isNaN(1) // false不规则字符串转换为数字

任务:将 12pt 和 100px 之类的值转换为数字
全局方法


[*]使用 parseInt/parseFloat 进行“软”转换,它从字符串中读取数字,然后返回在发生 error 前可以读取到的值。
定义在Number上的方法 (ES6)


[*]ES6 将全局方法parseInt()和parseFloat(),移植到Number对象上面,行为完全保持不变。这样做的目的,是逐步减少全局性方法,使得语言逐步模块化。
Math 对象的扩展


[*]使用 Math.floor,Math.ceil,Math.trunc,Math.round 或 num.toFixed(precision) 进行舍入。其中Math.trunc() —— 用于去除一个数的小数部分,返回整数部分(内部使用Number方法将其先转为数值)
[*]Math.sign() —— 用来判断一个数到底是正数、负数、还是零。对于非数值,会先将其转换为数值。

[*]参数为正数,返回+1;
[*]参数为负数,返回-1;
[*]参数为 0,返回0;
[*]参数为-0,返回-0;
[*]其他值,返回NaN。

[*]Math.cbrt() —— 计算一个数的立方根
[*]Math.clz32() —— 将参数转为 32 位无符号整数的形式,然后返回这个 32 位值里面有多少个前导 0
[*]Math.imul() —— 返回两个数以 32 位带符号整数形式相乘的结果,返回的也是一个 32 位的带符号整数。
[*]Math.fround() —— 返回一个数的32位单精度浮点数形式
[*]Math.hypot() —— 返回所有参数的平方和的平方根
使用两个点来调用一个方法

请注意 123456..toString(36) 中的两个点不是打错了。如果我们想直接在一个数字上调用一个方法,比如上面例子中的 toString,那么我们需要在它后面放置两个点 ..。
如果我们放置一个点:123456.toString(36),那么就会出现一个 error,因为 Js 语法隐含了第一个点之后的部分为小数部分。如果我们再放一个点,那么 JavaScript 就知道小数部分为空,现在使用该方法。
也可以写成 (123456).toString(36)。
如果是小数:可以直接写为0.13.toFixed(1)
数值分隔符

ES2021,允许 Js 的数值(所有进制)使用下划线(_)作为分隔符,这个数值分隔符没有指定间隔的位数。
使用注意点:

[*]不能放在数值的最前面或最后面。
[*]不能两个或两个以上的分隔符连在一起。
[*]小数点的前后不能有分隔符。
[*]科学计数法里面,表示指数的e或E前后不能有分隔符。
[*]分隔符不能紧跟着进制的前缀0b、0B、0o、0O、0x、0X(eg:0_b1100,0b_0100)
下面三个将字符串转成数值的函数,不支持数值分隔符:

[*]Number()
[*]parseInt()
[*]parseFloat()
BigInt 类型

number 类型无法安全地表示大于 (253-1),或小于 - (253-1)的整数。
更准确的说:
“number” 类型可以存储更大的整数,但超出安全整数范围 ±(253-1)会出现精度问题,因为并非所有数字都适合固定的 64 位存储。因此,可能存储的是“近似值”。
// 尾部的 "n" 表示这是一个 BigInt 类型
const bigInt = 1234567890123456789012345678901234567890n;String 类型

三种包含字符串的方式:

[*]双引号:"Hello"
[*]单引号:'Hello'
[*]反引号:`Hello`
反引号是 功能扩展 引号,称为模板字符串。
它允许我们通过将变量和表达式包装在 ${…} 中,来将它们嵌入到字符串中,并且可以在里面直接换行。

<ul>Js 中的字符串使用的是 UTF-16 编码。
Js 中字符串不可以被改变
length 属性表示字符串长度
可以使用像 \n 这样的特殊字符或通过使用 \u... 来操作它们的 Unicode 进行字符插入。
<blockquote>其中\uxxxx是字符的Unicode表示法,这种表示法只限于码点在\u0000~\uFFFF之间的字符。超出这个范围的字符,必须用两个双字节的形式表示。ES6 对这一点做出了改进,只要将码点放入大括号,就能正确解读该字符。
"\uD842\uDFB7"         // "
来源:https://www.cnblogs.com/Kiiakia/p/17566927.html
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作!
页: [1]
查看完整版本: JavaScript学习笔记01(包含ES6语法)