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()方法将含有对应前缀的字符串数值转为十进制
  1. Number('0b111')  // 7
  2. 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。

1. isFinite(25) // true
2. isFinite("25") // true
3. Number.isFinite(25) // true
4. Number.isFinite("25") // false
6. isNaN(NaN) // true
7. isNaN("NaN") // true
8. Number.isNaN(NaN) // true
9. Number.isNaN("NaN") // false
10. 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 位存储。因此，可能存储的是“近似值”。

1. // 尾部的 "n" 表示这是一个 BigInt 类型
2. const bigInt = 1234567890123456789012345678901234567890n;

复制代码

String 类型

三种包含字符串的方式：

• 双引号："Hello"
  
• 单引号：'Hello'
  
• 反引号：`Hello`
  

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

  
  

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