JS基础语法
1. 变量
声明变量:使用var
、let
或const
关键字。
var name = "Alice";
let age = 25;
const country = "USA";
var
声明的变量具有函数作用域或全局作用域。let
声明的变量具有块级作用域({}内有效)。const
声明的变量必须在声明时赋值,且之后不能再重新赋值,也具有块级作用域。
变量命名:
可以使用字母、数字、下划线(_)和美元符号($)。
变量名不能以数字开头。
变量名是区分大小写的。
保留字(如
let
、class
等)不能用作变量名。
2. 数据类型
基本数据类型:
Number:整数和浮点数,如
42
、3.14
。String:字符序列,用单引号(')、双引号(")或反引号(
`
)括起来,如"Hello"
、'World'
、`Hello, World!`
。Boolean:
true
或false
。Undefined:未定义的值。
Null:空值,表示一个空对象指针。
Symbol(ES6引入):表示唯一的标识符。
BigInt(ES11引入):任意精度的整数。
引用数据类型:
Object:对象的集合,可以是数组、函数等。
3. 运算符
算术运算符:
+
、-
、*
、/
、%
、++
、--
。赋值运算符:
=
、+=
、-=
、*=
、/=
、%=
。比较运算符:
==
、!=
、===
、!==
、>
、<
、>=
、<=
。逻辑运算符:
&&
、||
、!
。位运算符:
&
、|
、^
、~
、<<
、>>
、>>>
。
4. 流程控制
条件语句:
if (condition) { // 当condition为true时执行的代码 } else if (otherCondition) { // 当otherCondition为true时执行的代码 } else { // 当以上条件都不满足时执行的代码 }
循环语句:
for循环:
for (let i = 0; i < 10; i++) { console.log(i); }
while循环:
let i = 0; while (i < 10) { console.log(i); i++; }
do...while循环:
let i = 0; do { console.log(i); i++; } while (i < 10);码
switch语句:
let fruit = "apple"; switch (fruit) { case "banana": console.log("Banana"); break; case "apple": console.log("Apple"); break; default: console.log("Unknown fruit"); }
5. 函数
函数声明:
function sayHello(name) { console.log("Hello, " + name); }
函数表达式:
const sayHello = function(name) { console.log("Hello, " + name); };
箭头函数(ES6引入):
const sayHello = (name) => { console.log("Hello, " + name); }; // 简写形式(当函数体只有一个表达式时) const add = (a, b) => a + b;
6. 数组
数组声明:
let fruits = ["Apple", "Banana", "Cherry"]; let numbers = [1, 2, 3, 4, 5];
数组方法:
push()
:向数组末尾添加一个或多个元素。pop()
:移除数组末尾的元素。shift()
:移除数组开头的元素。unshift()
:向数组开头添加一个或多个元素。concat()
:合并两个或多个数组。slice()
:返回数组的一部分。splice()
:添加/删除数组的元素。indexOf()
:返回数组中某个元素的索引。forEach()
:遍历数组。
7. 对象
对象声明:
let person = { name: "Alice", age: 25, greet: function() { console.log("Hello, " + this.name); } };
对象方法:
可以通过
.
操作符访问对象的属性和方法。this
关键字用于引用当前对象。
构造函数:
function Person(name, age) { this.name = name; this.age = age; this.greet = function() { console.log("Hello, " + this.name); }; } let alice = new Person("Alice", 25);
8. ES6新特性
模板字符串:
let name = "Alice"; let greeting = `Hello, ${name}!`;
解构赋值:
let person = { name: "Alice", age: 25 }; let { name, age } = person;
默认参数:
function greet(name = "Guest") { console.log("Hello, " + name); }
扩展运算符:
let arr1 = [1, 2, 3]; let arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]
JavaScript应用
1. 客户端交互
表单验证
使用JavaScript可以在用户提交表单之前验证输入数据,如检查电子邮件格式、确保必填字段不为空等。
动态内容更新
通过AJAX(Asynchronous JavaScript and XML)技术,JavaScript可以从服务器获取数据并动态更新网页内容,而无需重新加载整个页面。
动画和效果
JavaScript可以与CSS结合使用,创建各种动画效果,如滑动、淡入淡出、缩放等,提升用户体验。
事件处理
JavaScript可以监听用户与网页的交互事件,如点击、悬停、键盘输入等,并根据事件执行相应的逻辑。
2. 服务器端开发(Node.js)
构建Web服务器
使用Node.js和Express等框架,可以构建高性能的Web服务器,处理HTTP请求和响应。
文件操作
Node.js提供了强大的文件系统模块,允许JavaScript代码读取、写入、删除和移动服务器上的文件。
数据库操作
通过Mongoose等ORM(对象关系映射)工具,JavaScript可以方便地操作MongoDB等NoSQL数据库,以及MySQL等关系型数据库。
API开发
Node.js非常适合构建RESTful API,为前端或其他服务提供数据接口。
3. 移动应用开发
React Native
使用React Native框架,JavaScript开发者可以构建跨平台的移动应用,这些应用可以在iOS和Android设备上运行,并且具有接近原生应用的性能和用户体验。
Ionic
Ionic是另一个流行的框架,它允许使用HTML、CSS和JavaScript构建移动应用,并通过Apache Cordova等技术将应用打包为原生应用。
4. 游戏开发
Phaser
Phaser是一个开源的HTML5游戏框架,它提供了丰富的API和工具,使JavaScript开发者能够轻松创建2D游戏。
Three.js
Three.js是一个基于WebGL的JavaScript库,它允许开发者在浏览器中创建和显示3D图形,非常适合用于游戏开发、数据可视化等领域。
5. 桌面应用开发
Electron
Electron是一个使用Web技术(HTML、CSS和JavaScript)构建跨平台桌面应用的框架。通过Electron,开发者可以将Web应用打包为可在Windows、macOS和Linux上运行的桌面应用。
6. 物联网(IoT)
Node-RED
Node-RED是一个基于浏览器的可视化编程工具,它使用JavaScript(以及Node.js)来连接、处理和可视化物联网设备的数据。
MQTT协议
JavaScript可以通过MQTT协议与物联网设备进行通信,实现数据的实时传输和处理。