那些常用的JavaScript代码留档

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是浏览器提供的本地存储机制,可以用来在浏览器中保存数据,以便在页面刷新或关闭后仍然保留。

THE END