蓝桉云顶

在Web开发中，JavaScript（简称JS）是一种非常流行的编程语言，它被广泛用于客户端脚本编写，以实现网页的动态功能和交互效果，下面我将分享一些常用的JavaScript代码片段，这些代码可以帮助开发者更高效地构建网站和应用。

变量声明与数据类型

JavaScript支持多种数据类型，包括数字、字符串、布尔值、数组、对象等，变量可以使用var,let, 或const关键字进行声明。

var: 函数作用域

let: 块级作用域

const: 常量，一旦赋值不可更改

// var 声明变量
var name = "John";
// let 声明变量
let age = 30;
// const 声明常量
const PI = 3.14159;

条件语句

使用if...else语句可以根据条件执行不同的代码块。

let score = 85;
if (score >= 90) {
    console.log("Grade: A");
} else if (score >= 80) {
    console.log("Grade: B");
} else if (score >= 70) {
    console.log("Grade: C");
} else {
    console.log("Grade: D");
}

循环结构

JavaScript支持几种循环结构，如for循环、while循环和do...while循环。

// for 循环
for (let i = 0; i < 5; i++) {
    console.log(i);
}
// while 循环
let j = 0;
while (j < 5) {
    console.log(j);
    j++;
}
// do...while 循环
let k = 0;
do {
    console.log(k);
    k++;
} while (k < 5);

函数

函数是组织好的、可重复使用的、用来实现单一或相关联功能的代码段。

// 函数声明
function greet() {
    console.log("Hello, world!");
}
greet(); // 调用函数
// 箭头函数
const add = (a, b) => a + b;
console.log(add(5, 3)); // 输出 8

数组与对象

数组是有序的元素集合，而对象是无序的属性集合。

// 数组
let fruits = ["apple", "banana", "cherry"];
fruits.push("date"); // 添加元素
console.log(fruits);
// 对象
let person = {
    firstName: "John",
    lastName: "Doe",
    age: 30,
    greet: function() {
        console.log("Hello, my name is " + this.firstName + " " + this.lastName);
    }
};
person.greet(); // 调用方法

DOM操作

Document Object Model (DOM) 允许访问和操作HTML文档。

// 选择元素
let para = document.querySelector("p");
para.textContent = "This is a new paragraph."; // 修改文本内容
// 创建新元素并添加到页面上
let newDiv = document.createElement("div");
newDiv.innerText = "I am a new div element";
document.body.appendChild(newDiv);

事件监听器

事件监听器用于响应用户的操作，如点击按钮。

let button = document.getElementById("myButton");
button.addEventListener("click", function() {
    alert("Button was clicked!");
});

AJAX请求

AJAX (Asynchronous JavaScript and XML) 允许在不重新加载整个页面的情况下，与服务器交换数据。

let xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", true);
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
    }
};
xhr.send();

9. Promises与async/await

Promises提供了一种更好的异步编程方式，而async/await是基于Promises的语法糖，使得异步代码看起来更像是同步代码。

// Promise示例
let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("Success!"), 1000);
});
promise.then(result => console.log(result));
// async/await示例
async function fetchData() {
    try {
        let response = await fetch("https://api.example.com/data");
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.error("Error fetching data:", error);
    }
}
fetchData();

FAQs

Q1: 如何在JavaScript中创建一个立即执行的函数表达式（IIFE）？

A1: IIFE是一种常见的模式，用于创建一个函数并在定义后立即执行它，这有助于避免污染全局命名空间，以下是一个例子：

(function() {
    console.log("This code runs immediately!");
})();

Q2: 如何检查一个变量是否是数组？

A2: 你可以使用Array.isArray()方法来检查一个变量是否是数组，这是一个内置的方法，专门用来进行这种类型的检查。

let arr = [1, 2, 3];
console.log(Array.isArray(arr)); // true
console.log(Array.isArray("not an array")); // false