寻技术

JavaScript学习笔记01（包含ES6语法）

寻技术 JS脚本 / JAVA编程 2023年07月29日 70

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 中正常运行。

引擎是如何工作的？

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

  1. 引擎（如果是浏览器，则引擎被嵌入在其中）读取（“解析”）脚本。
  2. 然后，引擎将脚本转化（“编译”）为机器语言。
  3. 然后，机器代码快速地执行。

引擎会对流程中的每个阶段都进行优化。它甚至可以在编译的脚本运行时监视它，分析流经该脚本的数据，并根据获得的信息进一步优化机器代码。

浏览器中的 Js

能做什么？

现代的 Js 是一种“安全的”编程语言。它不提供对内存或 CPU 的底层访问，因为它最初是为浏览器创建的，不需要这些功能。

Js 的能力很大程度上取决于它运行的环境。例如，Node.js 支持允许 Js 读取/写入任意文件，执行网络请求等。

浏览器中的 Js 可以做下面这些事：

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

不能做什么？

为了用户的（信息）安全，在浏览器中的 Js 的能力是受限的。

目的是防止恶意网页获取用户私人信息或损害用户数据。

此类限制的例子包括：

  • 网页中的 Js 不能读、写、复制和执行硬盘上的任意文件。它没有直接访问操作系统的功能。

    现代浏览器允许 Js 做一些文件相关的操作，但是这个操作是受到限制的。

    仅当用户做出特定的行为，Js 才能操作这个文件。eg：用户把文件“拖放”到浏览器中，或者通过 <input type='file'> 标签选择了文件。

    有很多与相机/麦克风和其它设备进行交互的方式，但是这些都需要获得用户的明确许可。

  • 不同的标签页/窗口之间通常互不了解。

    有时候，也会有一些联系，例如一个标签页通过 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 类型

三种包含字符串的方式：

  1. 双引号："Hello"

  2. 单引号：'Hello'

  3. 反引号：`Hello`

    反引号是 功能扩展 引号，称为模板字符串。

    它允许我们通过将变量和表达式包装在 ${…} 中，来将它们嵌入到字符串中，并且可以在里面直接换行。

  • Js 中的字符串使用的是 UTF-16 编码。

  • Js 中字符串不可以被改变

  • length 属性表示字符串长度

  • 可以使用像 \n 这样的特殊字符或通过使用 \u... 来操作它们的 Unicode 进行字符插入。

    其中\uxxxx是字符的Unicode表示法，这种表示法只限于码点在\u0000~\uFFFF之间的字符。超出这个范围的字符，必须用两个双字节的形式表示。ES6 对这一点做出了改进，只要将码点放入大括号，就能正确解读该字符。

    "\uD842\uDFB7" 	// "        
    
          
          
    版权声明：除特别声明外，本站所有文章皆是本站原创，转载请以超链接形式注明出处！
相关推荐
关闭

用微信“扫一扫”