首页
技术小册
AIGC
面试刷题
技术文章
MAGENTO
云计算
视频课程
源码下载
PDF书籍
「涨薪秘籍」
登录
注册
第 1 章 准备知识
1.1 前端技术简介
1.2 HTML入门
1.2.1 准备开发工具
1.2.2 HTML中的基础标签
1.3 CSS入门
1.3.1 CSS选择器入门
1.3.2 CSS样式入门
1.4 JavaScript入门
1.4.1 我们为什么需要JavaScript
1.4.2 JavaScript语法简介
1.4.3 从JavaScript到TypeScript
1.5 渐进式开发框架Vue
1.5.1 第一个Vue应用
1.5.2 范例：一个简单的用户登录页面
1.5.3 Vue 3的新特性
1.5.4 我们为什么要使用Vue框架
第 2 章 TypeScript基础
2.1 重新认识TypeScript
2.1.1 安装TypeScript
2.1.2 TypeScript语言版本的HelloWorld程序
2.1.3 使用高级IDE工具
2.2 TypeScript中的基本类型
2.2.1 布尔、数值与字符串
2.2.2 特殊的空值类型
2.2.3 数组与元组
2.3 TypeScript中有关类型的高级内容
2.3.1 枚举类型
2.3.2 枚举的编译原理
2.3.3 any、never与object类型
2.3.4 关于类型断言
2.4 函数的声明和定义
2.4.1 函数的类型
2.4.2 可选参数、默认参数和不定个数参数
2.4.3 函数的重载
第 3 章 TypeScript中的面向对象编程
3.1 理解与应用“类”
3.1.1 类的定义与继承
3.1.2 类的访问权限控制
3.1.3 只读属性与存取器
3.1.4 关于静态属性与抽象类
3.1.5 类的实现原理
3.2 接口的应用
3.2.1 接口的定义
3.2.2 使用接口约定函数和可索引类型
3.2.3 使用接口来约束类
3.2.4 接口的继承
3.3 TypeScript中的类型推断与高级类型
3.3.1 关于类型推断
3.3.2 联合类型与交叉类型
3.3.3 TypeScript的类型区分能力
3.3.4 字面量类型与类型别名
当前位置:
首页>>
技术小册>>
TypeScript和Vue从入门到精通(一)
小册名称：TypeScript和Vue从入门到精通(一)
### 1.4 JavaScript入门 在深入探讨TypeScript与Vue.js的集成之前，掌握JavaScript这一基石语言是必不可少的。JavaScript，简称JS，是一种轻量级的、解释型的或即时编译型的编程语言，它运行在用户的浏览器上，是Web开发中最为核心的技术之一。本章节将带领你从零开始，逐步了解JavaScript的基本概念、语法、数据类型、控制结构以及函数等核心知识，为后续的TypeScript和Vue.js学习打下坚实的基础。 #### 1.4.1 JavaScript简介 JavaScript诞生于1995年，最初的设计目的是为网页提供交互性，比如响应用户的操作（点击按钮、填写表单等）。随着时间的推移，JavaScript的能力不断扩展，现在它不仅限于浏览器端，还可以运行在服务器端（通过Node.js）、桌面应用（如Electron）甚至移动应用（通过React Native等框架）中。JavaScript的灵活性、动态性和广泛的生态系统使其成为全栈开发的重要工具。 #### 1.4.2 JavaScript基本语法 JavaScript代码可以嵌入到HTML中，通常放在`<script>`标签内。你也可以将JavaScript代码写在外部文件中，然后通过`<script src="...">`的方式引入到HTML中。 ##### 1.4.2.1 注释 JavaScript支持两种注释方式： - 单行注释：以`//`开头，直到行尾的所有内容都被视为注释。 - 多行注释：以`/*`开始，以`*/`结束，中间的内容都是注释。 ##### 1.4.2.2 语句 JavaScript中的语句以分号（`;`）结束，但在某些情况下（如语句的末尾）可以省略。良好的编程习惯是始终使用分号，以提高代码的可读性和可维护性。 #### 1.4.3 数据类型 JavaScript是一种动态类型语言，变量的类型在运行时确定。JavaScript中有以下几种基本数据类型： - **字符串（String）**：文本数据类型，用引号（单引号`'`或双引号`"`）括起来。 - **数字（Number）**：整数或浮点数，JavaScript不区分整数和浮点数，统一用Number类型表示。 - **布尔值（Boolean）**：表示逻辑上的真（`true`）或假（`false`）。 - **Undefined**：当一个变量被声明了但没有被赋值时，它的值就是`undefined`。 - **Null**：表示一个空值或空对象。 - **Symbol**（ES6新增）：用于创建唯一的标识符。 此外，JavaScript还有复杂数据类型，如对象（Object）、数组（Array）、函数（Function）等。 #### 1.4.4 变量和常量 在JavaScript中，你可以使用`var`、`let`或`const`来声明变量或常量。 - **var**：函数作用域或全局作用域，存在变量提升（hoisting）现象。 - **let**：块级作用域，不存在变量提升，更推荐使用。 - **const**：声明一个只读的常量，必须在声明时初始化，且之后不可更改其值。 #### 1.4.5 控制结构 JavaScript提供了多种控制结构来执行条件判断、循环等操作。 ##### 1.4.5.1 条件判断 - **if...else**：基于条件执行不同的代码块。 - **switch**：多路分支结构，用于根据表达式的不同值执行不同的代码块。 ##### 1.4.5.2 循环 - **for**：最常用的循环结构，可控制循环的初始条件、循环条件和循环后的操作。 - **while**：当指定的条件为真时，循环执行代码块。 - **do...while**：与while类似，但不管条件是否为真，循环体至少执行一次。 #### 1.4.6 函数 函数是JavaScript中的一等公民，它们可以像变量一样被传递和赋值。函数可以接收参数，执行一系列操作，并返回结果。 ##### 1.4.6.1 定义函数 - **函数声明**：使用`function`关键字后跟函数名和圆括号（参数列表），大括号内是函数体。 - **函数表达式**：将函数赋值给变量，称为匿名函数（如果没有函数名）或命名函数表达式（如果有函数名）。 - **箭头函数**（ES6新增）：更简洁的函数写法，特别适用于非方法函数，并且不绑定自己的`this`、`arguments`、`super`或`new.target`。 ##### 1.4.6.2 调用函数 通过函数名（如果是变量存储的函数，则是变量名）加圆括号（可选地包含参数）来调用函数。 #### 1.4.7 对象和数组 JavaScript是一种面向对象的语言，尽管它使用的是基于原型的继承机制，而非传统的类继承。对象由属性和方法组成，属性是对象的数据成员，方法是对象能够执行的操作。 ##### 1.4.7.1 对象字面量 使用花括号`{}`定义对象，对象内的属性以键值对的形式出现，键和值之间用冒号`:`分隔。 ##### 1.4.7.2 数组 数组是一种特殊的对象，用于存储一系列有序的值。数组的值可以是任意类型，包括其他数组。使用方括号`[]`定义数组。 #### 1.4.8 错误处理 在JavaScript中，错误处理是通过`try...catch`语句来实现的。当`try`代码块中的代码发生错误时，控制流会立即转移到`catch`代码块，其中可以处理这个错误。 #### 1.4.9 异步编程 JavaScript是单线程的，但它提供了多种处理异步操作的方式，如回调函数、Promises（ES6新增）、async/await（ES8新增）等。这些机制使得JavaScript能够执行非阻塞的I/O操作，如网络请求、文件读写等，而不会冻结用户界面。 - **回调函数**：将函数作为参数传递给另一个函数，并在某个操作完成时调用该函数。 - **Promises**：代表了一个异步操作的最终完成（或失败）及其结果值。 - **async/await**：建立在Promises之上，使得异步代码看起来更像是同步代码，提高了代码的可读性和可维护性。 #### 结语 至此，你已经对JavaScript有了初步的了解，掌握了JavaScript的基本语法、数据类型、控制结构、函数、对象、数组以及错误处理和异步编程的基本概念。这些知识是深入学习TypeScript和Vue.js的重要基础。在接下来的章节中，我们将逐步探讨TypeScript的特性及其在Vue.js项目中的应用，帮助你实现从JavaScript到TypeScript的平滑过渡，以及掌握Vue.js框架的核心技术和最佳实践。
上一篇：
1.3.2 CSS样式入门
下一篇：
1.4.1 我们为什么需要JavaScript
该分类下的相关小册推荐：
Vue.js从入门到精通(二)
VUE组件基础与实战
Vue3技术解密
Vue原理与源码解析
TypeScript和Vue从入门到精通(四)
Vue源码完全解析
Vue面试指南
vue项目构建基础入门与实战
TypeScript和Vue从入门到精通(五)
Vue.js从入门到精通(三)
TypeScript和Vue从入门到精通(二)
vuejs组件实例与底层原理精讲
