HarmonyOS 鸿蒙Next ArkUI 中的 JavaScript 基础与高级特性

HarmonyOS 鸿蒙Next ArkUI 中的 JavaScript 基础与高级特性

HarmonyOS ArkUI 中的 JavaScript 基础与高级特性

目录

• 前言
• TypeScript 历史简介
• 为什么要有 JavaScript 基础
• TypeScript 和 JavaScript 主要区别
• JavaScript 基础知识
  • JavaScript 的单线程特性及异步处理机制
  • 现代浏览器中 JavaScript 引擎的运作机制
  • JavaScript 中的事件循环机制
  • 理解 var, let, 和 const 区别
  • JavaScript 中有哪些不同的数据类型？
  • 什么是回调函数和回调地狱？
  • JavaScript 中的 Promise 及其链式调用
  • 如何理解 Async/Await
  • == 与 === 有什么区别
  • 有哪些创建 JavaScript 对象的方法
  • 什么是 Rest 运算符 和 Spread 运算符？
  • 什么是高阶函数？
• 其他资源

前言

网络上介绍鸿蒙应用 TypeScript 语言学习的文章已经很多了，但唯独对 JavaScript 基础介绍偏少。这里补充介绍一下，觉得有帮助的小伙伴可以点击收藏。

ArkTS 是 TypeScript 的一种扩展版本，而 TypeScript 本身就是 JavaScript 的超集。这意味着 ArkTS 保留了大部分 JavaScript 的语法和编程范式。因此，JavaScript 不仅是前端开发的核心，还在鸿蒙应用中扮演着重要角色。

ArkTS 是 HarmonyOS 优选的主力应用开发语言。它在 TypeScript（简称 TS）的基础上，匹配 ArkUI 框架，扩展了声明式 UI、状态管理等相应的能力，让开发者以更简洁、更自然的方式开发跨端应用。

[ArkTS、TypeScript和JavaScript之间的关系]

相比于 JavaScript（JS），ArkTS 和 TypeScript（TS）的主要区别在于：

1. 类型系统：

   • JavaScript 是一种动态类型语言，变量在运行时可以改变其数据类型。
   • ArkTS/TypeScript 是 JavaScript 的超集，是一种静态类型语言，要求在编译阶段就确定变量的类型，这有助于在编码阶段发现潜在的类型错误，提高代码质量和可维护性。

2. 接口和类型注解：

   • ArkTS/TypeScript 提供了接口、类型注解等特性，允许开发者明确声明函数参数、对象属性以及组件 Props 的类型，使得 IDE 和编译器能够提供智能提示和类型检查。

3. 面向对象增强：

   • TypeScript 具有更多的面向对象编程特性，如类、接口、枚举等，这些在 ArkTS 中同样适用，可以帮助开发者更好地组织大型应用的结构。

4. 工具链支持：

   • ArkTS 针对 HarmonyOS 平台进行了定制化，提供了相应的编译工具链，将 ArkTS 代码编译成可以在 HarmonyOS 上运行的 JavaScript 代码。

TypeScript 历史简介

TypeScript 起源于使用 JavaScript 开发的大型项目。由于 JavaScript 语言本身的局限性，难以胜任和维护大型项目开发，因此微软开发了 TypeScript，使得其能够胜任开发大型项目。

TypeScript 是微软开发的一个开源编程语言，通过在 JavaScript 的基础上添加静态类型定义构建而成。通过 TypeScript 编译器或 Babel 转译为 JavaScript 代码，可运行于任何浏览器和操作系统。

2012 年 10 月，微软发布了首个公开版本的 TypeScript。2013 年 6 月 19 日，在经历了一个预览版之后，微软发布了正式版的 TypeScript。

TypeScript 的作者是安德斯·海尔斯伯格，他也是 C# 的首席架构师。TypeScript 是一种给 JavaScript 添加特性的语言扩展，是 JavaScript 的一个超集。具体特性包括：类型批注、接口、装饰器、模块、类、泛型等。

为什么要有 JavaScript 基础

学习鸿蒙 ArkTS 应用开发，需要具备 JavaScript 基础。

原因如下：

1. 语法基础：

   • ArkTS 是 TypeScript 的一种扩展版本，而 TypeScript 本身就是 JavaScript 的超集。这意味着 ArkTS 保留了大部分 JavaScript 的语法和编程范式，例如变量声明、函数定义、流程控制结构等。
   • 掌握 JavaScript 的基础语法是理解 ArkTS 语言特性的前提。

2. 运行机制：

   • 虽然 ArkTS 在编译阶段进行了类型检查和转换，但它最终会被编译成能够在 HarmonyOS 平台上运行的 JavaScript 代码。
   • 理解 JavaScript 的运行机制有助于开发者更好地调试和优化 ArkTS 应用程序。

3. 异步编程与事件处理：

   • JavaScript 在前端开发中广泛用于实现异步编程模型和事件驱动编程，这些概念和技术同样适用于 ArkTS 开发环境中的 UI 渲染和用户交互处理。

4. 类库和生态兼容性：

   • 鸿蒙 ArkTS 虽然针对鸿蒙系统进行了特定优化，但依然保持了对现有 JavaScript 生态系统的兼容性。
   • 许多现有的 JavaScript 工具、框架、API 设计思路都可以迁移到 ArkTS 开发过程中。

5. 渐进式增强：

   • 开发者可以利用已有的 JavaScript 知识，在原有项目的基础上逐步引入 TypeScript（包括 ArkTS）的特性，进行更加安全和高效的开发。

由于 ArkTS 基于 JavaScript 并对其进行增强以适应 HarmonyOS 操作系统的要求，所以拥有扎实的 JavaScript 基础对于快速掌握 ArkTS 开发技巧至关重要。

TypeScript 和 JavaScript 主要区别

类型系统

• TypeScript 引入了静态类型系统，允许开发者在编译阶段就检查变量的数据类型，这有助于提前发现潜在的类型错误，并且通过 IDE 智能提示和自动补全提高编码效率。
• JavaScript 是动态类型的语言，变量类型可以在运行时改变。

工具支持

• TypeScript 提供了丰富的编译器工具，可以进行类型检查、转换以及一些其他代码优化操作，产出可被浏览器识别的纯 JavaScript 代码。

面向对象增强

• TypeScript 支持更多的面向对象编程特性，如接口、泛型、枚举、类成员修饰符等，这些在 JavaScript ES6 及更高版本中虽有所实现，但在 TypeScript 中更加全面和严格。

工程化能力

• TypeScript 更适合构建大型、复杂的应用程序，其提供的模块系统、命名空间等功能增强了代码组织能力和团队协作效率。

总结来说，虽然 TypeScript 在许多方面增强了 JavaScript 的能力，但其核心仍然是建立在 JavaScript 之上的。因此，具备扎实的 JavaScript 基础对于学习和使用 TypeScript 非常重要。

JavaScript 基础知识

1. JavaScript 的单线程特性及异步处理机制

JavaScript 确实是一种单线程编程语言。这意味着它只有一个调用栈和一个内存堆。在任何时候，只能执行一组指令。

同步和阻塞的本质

JavaScript 本质上是同步和阻塞的。这意味着代码会按行执行，一个任务必须完成后才能开始下一个任务。这种特性在处理复杂或耗时的操作时可能导致用户界面的响应缓慢或冻结。

JavaScript 的异步能力

尽管 JavaScript 是单线程的，但它也具有异步处理能力。这允许某些操作独立于主执行线程进行。这通常通过回调函数、Promise、async/await 和事件监听器等机制实现。这些异步特性使 JavaScript 能够处理诸如数据获取、用户输入处理和 I/O 操作等任务，而不会阻塞主线程。这对于构建响应性强和交互性强的 Web 应用程序非常重要。

回调函数

回调函数是异步编程中最基本的方法。它是在某个任务完成后才被调用的函数。

function fetchData(url, callback) {
  // 模拟从服务器获取数据
  setTimeout(() => {
    const data = 'Some data from the server';
    callback(data);
  }, 1000);
}
function processData(data) {
console.log(‘Processing data:’, data);
}
fetchData(‘https://example.com/data’, processData);

在这个例子中，fetchData 函数接受一个 URL 和一个回调函数作为参数。在模拟获取服务器数据之后（使用 setTimeout），它调用回调函数并传递检索到的数据。

回调地狱（Callback Hell）

回调地狱，也称为“厄运金字塔”（Pyramid of Doom），是 JavaScript 编程中用来描述多个嵌套回调函数在异步函数中使用的情况。

fs.readFile('file1.txt', 'utf8', function (err, data) {
  if (err) {
    console.error(err);
  } else {
    fs.readFile('file2.txt', 'utf8', function (err, data) {
      if (err) {
        console.error(err);
      } else {
        fs.readFile('file3.txt', 'utf8', function (err, data) {
          if (err) {
            console.error(err);
          } else {
            // 继续更多的嵌套回调...
          }
        });
      }
    });
  }
});

在这个例子中，我们使用 fs.readFile 函数顺序读取三个文件，每个文件读取操作都是异步的。结果是，我们不得不将回调函数嵌套在彼此之内，创建了一个回调函数的金字塔结构。

避免回调地狱

为了避免回调地狱，现代 JavaScript 提供了如 Promise 和 async/await 等替代方案。下面是使用 Promise 重写上述代码的例子：

const readFile = (file) => {
  return new Promise((resolve, reject) => {
    fs.readFile(file, 'utf8', (err, data) => {
      if (err) {
        reject(err);
      } else {
        resolve(data);
      }
    });
  });
};
readFile(‘file1.txt’)
.then((data1) => {
console.log(‘Read file1.txt successfully’);
return readFile(‘file2.txt’);
})
.then((data2) => {
console.log(‘Read file2.txt successfully’);
return readFile(‘file3.txt’);
})
.then((data3) => {
console.log(‘Read file3.txt successfully’);
// 继续使用基于 Promise 的代码…
})
.catch((err) => {
console.error(err);
});

在这个改进后的例子中，我们通过链式调用 .then() 方法来顺序处理异步读取文件的操作，并通过 .catch() 方法捕获任何可能发生的错误。这样的代码结构更加清晰，也更容易理解和维护。

2. 现代浏览器中 JavaScript 引擎的运作机制

在探索网页和网络应用的世界时，JavaScript 引擎扮演着不可或缺的角色。

当你在浏览器中输入一个网址，背后其实发生了一连串复杂的过程。这其中，JavaScript 代码从输入到执行，经历了以下几个阶段：

1. 解析阶段（Parser）：浏览器首先将 JavaScript 代码读入，并转换成一个称为“抽象语法树（AST）”的结构，这个过程就像是将句子分解成词汇和语法结构。
2. 解释执行（Interpreter）：有了 AST，解释器开始工作，将其转换成计算机能理解的字节码。这个过程有点像翻译工作，将一种语言转换为另一种。
3. 性能分析（Profiler）：在代码执行的同时，性能分析器监视着哪些部分被频繁使用，以便进行优化。
4. 优化编译（Optimizing Compiler）：通过“即时编译（JIT）”技术，根据分析数据对代码进行优化，使其运行更快。
5. 去优化（Deoptimization）：如果优化假设错误，系统将撤销该优化，返回到未优化的状态，虽然这会造成一定的性能损耗，但可以确保代码正确执行。
6. 热函数和内联缓存：引擎会对“热函数”即频繁执行的函数进行优化，并使用内联缓存技术来提升性能。
7. 内存管理：调用栈负责跟踪当前执行的函数，而内存堆用于分配内存。最后，垃圾回收器负责清理不再使用的对象，释放内存空间。

谷歌 Chrome 的 V8 引擎

在谷歌 Chrome 浏览器中，它使用的 JavaScript 引擎名为 V8，具有一些特殊的组件：

• Ignition：解释器的名字。
• TurboFan：优化编译器的名字。

在解析器之外，还有一个“预解析器”，用于检查语法和符号。

• Sparkplug：位于“Ignition”和“TurboFan”之间，它是一个快速编译器，可以加快代码执行。

通过这些组件的协同工作，V8 能够在浏览器中快速、高效地执行 JavaScript 代码。

JavaScript 引擎的运作是现代网络体验的核心。它确保了我们浏览的网页不仅仅是静态的文档，而是充满了互动性和动态内容的生动世界。在这个过程中，从解析器到优化编译器的每一个环节都至关重要。它们合作确保了代码不仅能够被执行，而且能以最优化的方式执行，使得用户体验流畅且高效。无论是初学者还是资深开发者，理解这些过程都是掌握前端技术的重要一环。

3. JavaScript 中的事件循环机制

事件循环（Event Loop）是 JavaScript 运行时环境中的核心组件。在介绍这个概念之前，我们需要了解 JavaScript 是单线程执行的，这意味着它一次只能执行一个任务。然而，这并不意味着它不能执行异步操作——这正是事件循环发挥作用的地方。

事件循环的角色

事件循环的主要职责是监控调用栈（Call Stack）和任务队列（Task Queue），并安排异步任务的执行。它确保主线程上的代码执行流畅，同时也能处理那些需要一些时间才能完成的任务。

事件循环的工作流程

1. 调用栈（Call Stack）：

   • 这是一个后进先出（LIFO）的数据结构，用来存储当前正在执行的函数。一旦一个函数执行完成，它就会被从栈中弹出。

2. Web API：

   • 当执行到异步操作（如 setTimeout、fetch 请求、Promise）时，这些操作会被移至 Web API 环境中，并且在那里等待操作完成。完成后，回调函数会被推入任务队列（Task Queue）或微任务队列（Microtask Queue）中，等待执行。

3. 任务队列（Task Queue/Macrotasks）：

   • 这是一个先进先出（FIFO）的结构，用来存储准备好执行的回调函数，比如 setTimeout 和 setInterval 的回调。

4. 微任务队列（Job Queue/Microtasks）：

   • 与任务队列类似，这也是一个 FIFO 结构，但它专门用于处理如 Promise 的 resolve 或 reject 回调、async/await 等微任务。

5. 事件循环（Event Loop）：

   • 当调用栈为空时，事件循环会首先检查微任务队列。如果微任务队列中有任务，它会优先执行这些任务。只有当微任务队列为空时，事件循环才会检查任务队列。任务队列中的任务会一个接一个地被执行，但在每个宏任务之间，事件循环都会再次检查微任务队列，以确保新的微任务可以被及时处理。

执行顺序的重要性

在 JavaScript 中，微任务总是优先于宏任务执行。这意味着 Promise 的回调会在 setTimeout 的回调之前执行。理解这一点对于编写高效且无错误的异步代码至关重要。

示例

想象下面的情况：

console.log('1');
setTimeout(function() {
    console.log('2');
}, 0);
Promise.resolve().then(function() {
    console.log('3');
});
console.log('4');

输出的顺序会是：

1
4
3
2

这是因为即使 setTimeout 的延迟时间设置为 0，它的回调也会被放入任务队列中，而 Promise.then 的回调则会被放入微任务队列中，而且微任务队列的执行总是在当前宏任务（包括调用栈中所有的同步任务）执行完毕后，下一个宏任务开始之前。

事件循环机制是理解 JavaScript 异步编程的核心。它不仅确保了同步代码的顺利执行，还管理着异步操作的调度，这使得 JavaScript 能够处理复杂的场景，如用户交互、脚本加载、网络请求等，而不会造成界面的冻结。

掌握事件循环的工作原理，对于编写高性能的 JavaScript 代码是至关重要的。这不仅能帮助你避免常见的陷阱，比如“阻塞主线程”的问题，还能让你更好地利用 JavaScript 的异步特性，编写出响应迅速、用户体验良好的网页应用。

4. 理解 var, let, 和 const 区别

var

• 作用域：var 声明的变量拥有函数作用域，如果在函数外部声明，它将具有全局作用域。在全局作用域下使用 var 声明的变量会被附加到 window 对象上。
• 变量提升：var 声明的变量会发生变量提升（hoisting），意味着无论在函数的哪个部分声明，它们都会被移动到函数的顶部。
• 重复声明：使用 var 可以重复声明同一个变量。
• 重新赋值：使用 var 声明的变量可以被重新赋值。

let

• 作用域：let 声明的变量具有块级作用域（block scope），仅在声明它的代码块内有效。
• 变量提升：let 声明的变量也会提升，但它们不会被初始化。在代码执行到声明之前，它们是不可访问的，这个区间被称为“暂时性死区”（Temporal Dead Zone, TDZ）。
• 重复声明：在同一个作用域中，let 不允许重新声明已经存在的变量。
• 重新赋值：使用 let 声明的变量可以被重新赋值，但不能重复声明。

const

• 作用域：与 let 相同，const 声明的变量也具有块级作用域。
• 变量提升：const 同样会提升到块的顶部，但是在声明语句之前它们也是不可访问的，存在于“暂时性死区”中。
• 重复声明：const 不允许在相同作用域内重复声明变量。
• 重新赋值：const 声明的变量不能被重新赋值，它们必须在声明时初始化，并且声明后值是固定的。但是，如果 const 变量指向的是一个对象或数组，那么对象或数组的内容是可以被修改的。

附加在 window 对象上

在浏览器环境中，全局作用域下使用 var 声明的变量会成为 window 对象的属性。

var dog = 'bowser';
console.log(window.dog); // 输出 'bowser'

相比之下，let 和 const 声明的变量则不会被添加到 window 对象。这有助于避免全局命名空间的污染，也让变量的控制范围更加严格。

5. JavaScript 中有哪些不同的数据类型？

JavaScript 中的数据类型主要分为两大类：原始数据类型（Primitive Data Types）和引用数据类型（Reference Data Types）。每种类型有其特定的特性和用途，理解它们对于编写高质量的代码至关重要。

原始数据类型

原始数据类型是基础的数据类型，直接存储值，它们是不可变的。JavaScript 提供了以下几种原始数据类型：

• 数值（Numbers）：用于表示整数和浮点数。例如：42、3.14。
• 字符串（Strings）：由字符组成，用单引号、双引号或模板字面量包围。例如：'hello'、"world"、hello world。
• 布尔值（Booleans）：只有两个值 true 和 false，用于逻辑判断。
• 空值（Null）：表示一个明确的空值。
• 未定义（Undefined）：变量已声明但未初始化时的状态。
• 符号（Symbols）：ES6 中新增，每个符号值都是全局唯一的，即便创建多个相同描述的 Symbol，它们也代表不同的值。
• BigInt：ES2020 中新增的原始数据类型，用于表示大于 2^53 - 1 的整数。

引用数据类型

引用数据类型可以包含多个值或复杂的实体，它们存储的是对数据的引用，而非数据本身。在 JavaScript 中，引用数据类型主要包括：

• 对象（Objects）：键值对的集合，值可以是任何类型，包括其他对象或函数。
• 数组（Arrays）：有序的数据集合，数组中的每个元素都可以是不同的数据类型。

特殊的原始数据类型

在许多讨论中，null 和 undefined 通常被特别对待，有时被视为特殊的原始类型：

• Null：在逻辑上表示“无值”，通常用来表示一个变量应该有值，但不是任何其他数据类型。
• Undefined：表示变量已声明，但尚未赋值。

Symbol 的独特性

• 唯一性：每个 Symbol 的值都是全局唯一的，即便创建多个相同描述的 Symbol，它们也代表不同的值。
• 使用场景：主要用于对象属性名，以保证属性名的唯一性，防止属性名的冲突。
• 属性隐藏：Symbol 作为属性键的对象属性不会出现在传统的遍历中，如 for...in 循环。

6. 什么是回调函数和回调地狱？

在 JavaScript 中，回调函数是异步操作中常用的概念。一个回调函数是传递给另一个函数的函数，通常在特定任务完成后或在预定时间执行。

回调函数的例子

function fetchData(url, callback) {
  // 模拟从服务器获取数据
  setTimeout(() => {
    const data = 'Some data from the server';
    callback(data);
  }, 1000);
}
function processData(data) {
console.log(‘Processing data:’, data);
}
fetchData(‘https://example.com/data’, processData);

在这个例子中，fetchData 函数接受一个 URL 和一个回调函数作为参数。在模拟获取服务器数据之后（使用 setTimeout），它调用回调函数并传递检索到的数据。

回调地狱（Callback Hell）

回调地狱，也称为“厄运金字塔”（Pyramid of Doom），是 JavaScript 编程中用来描述多个嵌套回调函数在异步函数中使用的情况。

fs.readFile('file1.txt', 'utf8', function (err, data) {
  if (err) {
    console.error(err);
  } else {
    fs.readFile('file2.txt', 'utf8', function (err, data) {
      if (err) {
        console.error(err);
      } else {
        fs.readFile('file3.txt', 'utf8', function (err, data) {
          if (err) {
            console.error(err);
          } else {
            // 继续更多的嵌套回调...
          }
        });
      }
    });
  }
});

在这个例子中，我们使用 fs.readFile 函数顺序读取三个文件，每个文件读取操作都是异步的。结果是，我们不得不将回调函数嵌套在彼此之内，创建了一个回调函数的金字塔结构。

避免回调地狱

为了避免回调地狱，现代 JavaScript 提供了如 Promise 和 async/await 等替代方案。下面是使用 Promise 重写上述代码的例子：

const readFile = (file) => {
  return new Promise((resolve, reject) => {
    fs.readFile(file, 'utf8', (err, data) => {
      if (err) {
        reject(err);
      } else {
        resolve(data);
      }
    });
  });
};
readFile(‘file1.txt’)
.then((data1) => {
console.log(‘Read file1.txt successfully’);
return readFile(‘file2.txt’);
})
.then((data2) => {
console.log(‘Read file2.txt successfully’);
return readFile(‘file3.txt’);
})
.then((data3) => {
console.log(‘Read file3.txt successfully’);
// 继续使用基于 Promise 的代码…
})
.catch((err) => {
console.error(err);
});

在这个改进后的例子中，我们通过链式调用 .then() 方法来顺序处理异步读取文件的操作，并通过 .catch() 方法捕获任何可能发生的错误。这样的代码结构更加清晰，也更容易理解和维护。

7. JavaScript 中的 Promise 及其链式调用

Promise 简介

在 JavaScript 异步编程中，Promise 是一个非常关键的概念。它代表了一个异步操作的最终完成（或失败）及其结果值。

Promise 的状态

一个 Promise 对象有以下三种状态：

• Pending（等待）：这是 Promise 的初始状态，意味着异步操作尚未完成。
• Fulfilled（已解决）：当异步操作成功完成，Promise 被解决，并且有一个可用的最终结果值时的状态。
• Rejected（已拒绝）：当异步操作失败或 Promise 被拒绝，没有可用的结果值时的状态。

Promise 构造器

Promise 构造器接受一个执行器函数作为参数，这个函数有两个参数：resolve 和 reject，它们都是函数。

• resolve：当异步操作成功时，将调用此函数，并传递结果值。
• reject：当异步操作失败时，将调用此函数，并传递错误或拒绝的原因。

使用 Promise

我们可以通过 .then() 方法来访问 Promise 的结果，通过 .catch() 方法来捕获可能出现的错误。

// 创建一个 Promise
const fetchData = new Promise((resolve, reject) => {
  // 模拟从服务器获取数据
  setTimeout(() => {
    const data = 'Some data from the server';
    // 使用获取的数据解决 Promise
    resolve(data);
    // 也可以用一个错误拒绝 Promise
    // reject(new Error('Failed to fetch data'));
  }, 1000);
});
// 消费 Promise
fetchData
.then((data) => {
console.log(‘Data fetched:’, data);
})
.catch((error) => {
console.error(‘Error fetching data:’, error);
});

Promise 链式调用

当我们需要按顺序执行一系列异步任务时，可以使用 Promise 链式调用。这涉及到将多个 .then() 方法链接到一个 Promise 上，以便按特定顺序执行一系列任务。

new Promise(function (resolve, reject) {
  setTimeout(() => resolve(1), 1000);
})
  .then(function (result) {
    console.log(result); // 1
    return result * 2;
  })
  .then(function (result) {
    console.log(result); // 2
    return result * 3;
  })
  .then(function (result) {
    console.log(result); // 6
    return result * 4;
  });

在这个链式调用中，每个 .then() 处理函数都会顺序执行，并将其结果传递给下一个 .then()。如果任何一个 .then() 中发生异常或返回一个拒绝的 Promise，链式调用将会中断，并跳到最近的 .catch() 处理程序。