📅  最后修改于: 2023-12-03 15:07:17.629000             🧑  作者: Mango
JavaScript 是一种广泛应用于 Web 上的脚本语言,也可以用于其它环境(如 Node.js 等)。JS 基于 ECMAScript 标准,并且具有面向对象、函数式和事件驱动等特性。下面是 JS 的一些主要功能介绍。
DOM(文档对象模型)是 Web 页面中的节点树形结构。JS 可以通过 DOM 操作修改或者创建节点、修改节点属性或者文本内容,还能够监听节点事件等,如下代码:
// 获取节点
const node = document.getElementById('myId');
// 修改节点文本内容
node.innerHTML = 'Hello World!';
// 创建节点
const newNode = document.createElement('div');
newNode.innerHTML = 'New Node';
node.appendChild(newNode);
// 监听节点事件
node.addEventListener('click', event => { console.log(event)});
AJAX(异步 JavaScript 和 XML)指的是通过浏览器异步地发送 HTTP 请求和接收响应的技术。在 JS 中,我们可以通过 XMLHttpRequest 对象实现 AJAX 功能,如下代码:
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.com/data', true);
xhr.onload = function() {
if (xhr.status === 200) {
console.log(xhr.responseText);
} else {
console.error(xhr.statusText);
}
};
xhr.onerror = function() {
console.error('Network Error');
};
xhr.send();
JS 将函数作为一等公民,允许函数存在变量中,且函数可以接收和返回其他函数。因此,JS 还可以使用函数作为参数来实现函数式编程,如下代码:
// 函数作为参数
function myFunc(a, b, func) {
return func(a, b);
}
console.log(myFunc(2, 3, (x, y) => x + y)); // 5
// 函数作为返回值
function myFunc2() {
return function() {
console.log('Hello World!');
}
}
const f = myFunc2();
f(); // 'Hello World!'
JS 支持使用类和面向对象编程,其中 ES6 提供了更好的语法支持,如下代码:
class Animal {
constructor(name) {
this.name = name;
}
walk() {
console.log(this.name + ' is walking');
}
}
class Dog extends Animal {
constructor(name, breed) {
super(name);
this.breed = breed;
}
bark() {
console.log(this.name + ' is barking');
}
}
const myDog = new Dog('Puppy', 'Golden Retriever');
myDog.walk(); // 'Puppy is walking'
myDog.bark(); // 'Puppy is barking'
JS 可以通过 ES6 的模块化机制,实现模块化开发和导入,如下代码:
// 在 math.js 中定义函数
export function sum(a, b) {
return a + b;
}
// 在 main.js 中导入模块并调用函数
import { sum } from './math.js';
console.log(sum(2, 3)); // 5
以上是 JS 的一些常用功能介绍,但实际上 JS 还有很多其它特性值得探究。