1. Hello, World!
console.log("Hello, World!");
用于在控制台打印”Hello, World!”。
2. 变量和数据类型
var x = 5; var y = "Hello"; var z = true;
JavaScript中的变量和数据类型：数字、字符串和布尔值。
3. 条件语句
var age = 18; if (age >= 18) { console.log("You are an adult."); } else { console.log("You are a minor."); }
条件语句用于根据条件执行不同的代码块。
4. 循环
for (var i = 0; i < 5; i++) { console.log("Count: " + i); }
重复执行代码块，直到满足特定条件。
5. 函数
function greet(name) { console.log("Hello, " + name + "!"); } greet("Alice");
将代码组织成可重用的模块。
6. 数组
var fruits = ["Apple", "Banana", "Orange"]; console.log(fruits[0]); // 输出: "Apple"
数组是一组按顺序排列的值，可以通过索引访问。
7. 对象
var person = { name: "John", age: 30, city: "New York" }; console.log(person.name); // 输出: "John"
对象是具有属性和方法的数据结构。
8. DOM操作
document.getElementById("myElement").innerHTML = "New content";
通过JavaScript修改HTML元素。
9. 事件监听器
document.getElementById("myButton").addEventListener("click", function() { console.log("Button clicked!"); });
事件监听器用于捕获和处理用户操作，比如点击按钮。
10. AJAX请求
var xhr = new XMLHttpRequest(); xhr.open("GET", "接口链接", true); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { console.log(xhr.responseText); } }; xhr.send();
在不刷新整个页面的情况下向服务器发送和接收数据。
11. 正则表达式
var str = "Hello World"; var pattern = /hello/i; console.log(pattern.test(str)); // 输出: true
正则表达式用于匹配和搜索文本模式。
12. 防抖函数
function debounce(func, delay) { let timer; return function() { clearTimeout(timer); timer = setTimeout(() => { func.apply(this, arguments); }, delay); }; }
防抖函数用于延迟执行函数，直到过了一定的间隔时间。
13. 节流函数
function throttle(func, delay) { let last = 0; return function() { const now = Date.now(); if (now - last > delay) { func.apply(this, arguments); last = now; } }; }
节流函数用于限制函数的执行频率，确保它在一定时间内最多只执行一次。
14. 深拷贝对象
function deepClone(obj) { return JSON.parse(JSON.stringify(obj)); }
深拷贝函数用于创建对象的完全独立副本，避免原始对象的修改影响到副本。
15. 排序算法：冒泡排序
function bubbleSort(arr) { const len = arr.length; for (let i = 0; i < len - 1; i++) { for (let j = 0; j < len - 1 - i; j++) { if (arr[j] > arr[j + 1]) { [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]]; } } } return arr; }
冒泡排序是一种简单的排序算法，用于将数组中的元素按升序排列。
16. 搜索算法：二分搜索
function binarySearch(arr, target) { let left = 0; let right = arr.length - 1; while (left <= right) { const mid = Math.floor((left + right) / 2); if (arr[mid] === target) { return mid; } else if (arr[mid] < target) { left = mid + 1; } else { right = mid - 1; } } return -1; }
二分搜索是一种高效的搜索算法，用于在有序数组中查找特定值的位置。
17. 动画效果：淡入淡出
function fadeIn(element, duration) { var op = 0; var timer = setInterval(function() { if (op >= 1) { clearInterval(timer); } element.style.opacity = op; element.style.filter = "alpha(opacity=" + op * 100 + ")"; op += 1 / (duration / 10); }, 10); }
淡入淡出效果可以通过改变元素的透明度来实现平滑的过渡动画。
18. 图片预加载
function preloadImages(images) { for (var i = 0; i < images.length; i++) { var img = new Image(); img.src = images[i]; } }
图片预加载是一种在页面加载时提前加载图片资源的技术，以确保在它们需要显示时能够立即呈现，而不会出现延迟。
19. 日期时间操作
var now = new Date(); console.log(now.getFullYear()); // 获取当前年份 console.log(now.getMonth()); // 获取当前月份 console.log(now.getDate()); // 获取当前日期 console.log(now.getHours()); // 获取当前小时数 console.log(now.getMinutes()); // 获取当前分钟数 console.log(now.getSeconds()); // 获取当前秒数
JavaScript中的Date对象提供了丰富的日期和时间操作方法，可以获取当前日期时间的各个部分。
20. localStorage操作
localStorage.setItem("username", "John"); console.log(localStorage.getItem("username")); // 输出: "John" localStorage.removeItem("username");
localStorage是浏览器提供的本地存储机制，可以用来在浏览器中保存数据，以便在页面刷新或关闭后仍然保留。
