小试牛刀：18 个基础 JavaScript 代码段

18 个 JavaScript 代码段：基础篇

作为一名初学者，刚开始学习 JavaScript 时可能会感到不知所措。毕竟，JavaScript 作为一种高级编程语言，具有非常广泛的应用，涉及前端、后端、Web 应用程序、桌面应用程序、移动应用程序等各个方面。

但是，只要你掌握了 JavaScript 的基本语法和一些常用的代码片断，就可以轻松地编写出各种各样的应用程序。本篇文章中，我将向你展示 18 个常用的 JavaScript 代码段，这些代码段涵盖了 JavaScript 的基础知识，可以帮助你快速入门 JavaScript 编程。

1. 输出文本

console.log("你好，世界！");

2. 定义变量

let name = "John Doe";

3. 使用变量

console.log("我的名字是 " + name);

4. 定义函数

function sayHello(name) {
  console.log("你好，" + name + "！");
}

5. 调用函数

sayHello("John Doe");

6. 使用条件语句

if (name === "John Doe") {
  console.log("欢迎，John Doe！");
} else {
  console.log("你一定不是John Doe！");
}

7. 使用循环语句

for (let i = 0; i < 10; i++) {
  console.log(i);
}

8. 使用数组

let numbers = [1, 2, 3, 4, 5];

for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}

9. 使用对象

let person = {
  name: "John Doe",
  age: 30
};

console.log(person.name); // "John Doe"
console.log(person.age); // 30

10. 使用事件监听器

document.getElementById("button").addEventListener("click", function() {
  console.log("按钮被点击了！");
});

11. 使用 AJAX

let xhr = new XMLHttpRequest();

xhr.open("GET", "data.json");

xhr.onload = function() {
  if (xhr.status === 200) {
    let data = JSON.parse(xhr.responseText);

    console.log(data);
  }
};

xhr.send();

12. 使用正则表达式

let regex = /^(?:[a-z0-9]+(?:[-_.]?[a-z0-9]+)?)+(?<![-_.])$/;

if (regex.test("john.doe@example.com")) {
  console.log("电子邮箱格式正确");
} else {
  console.log("电子邮箱格式不正确");
}

13. 使用 JSON

let data = {
  name: "John Doe",
  age: 30
};

let json = JSON.stringify(data);

console.log(json); // "{\"name\":\"John Doe\",\"age\":30}"

14. 使用 WebSockets

let socket = new WebSocket("ws://localhost:8080");

socket.onopen = function() {
  console.log("WebSocket 已连接");
};

socket.onmessage = function(event) {
  console.log("收到消息：" + event.data);
};

socket.onclose = function() {
  console.log("WebSocket 已断开连接");
};

socket.send("你好，世界！");

15. 使用 WebRTC

let peerConnection = new RTCPeerConnection();

peerConnection.onicecandidate = function(event) {
  console.log("ICE 候选者：" + event.candidate);
};

peerConnection.ondatachannel = function(event) {
  let dataChannel = event.channel;

  dataChannel.onopen = function() {
    console.log("数据通道已打开");
  };

  dataChannel.onmessage = function(event) {
    console.log("收到消息：" + event.data);
  };

  dataChannel.onclose = function() {
    console.log("数据通道已关闭");
  };
};

peerConnection.createOffer().then(function(offer) {
  peerConnection.setLocalDescription(offer);
});

16. 使用 Service Worker

self.addEventListener("install", function(event) {
  event.waitUntil(
    caches.open("my-cache").then(function(cache) {
      return cache.addAll([
        "/",
        "/index.html",
        "/main.js"
      ]);
    })
  );
});

self.addEventListener("fetch", function(event) {
  event.respondWith(
    caches.match(event.request).then(function(response) {
      return response || fetch(event.request);
    })
  );
});

17. 使用 PWA

if ("serviceWorker" in navigator) {
  window.addEventListener("load", function() {
    navigator.serviceWorker.register("service-worker.js").then(function() {
      console.log("Service Worker 已注册");
    }).catch(function(error) {
      console.log("Service Worker 注册失败：" + error);
    });
  });
}

18. 使用 Node.js

let http = require("http");

http.createServer(function(request, response) {
  response.writeHead(200, {"Content-Type": "text/plain"});
  response.end("你好，世界！");
}).listen(8080);

希望这些代码片断能够帮助你快速入门 JavaScript 编程。如果你有兴趣了解更多关于 JavaScript 的知识，可以访问我的博客或阅读更多的 JavaScript 书籍。