JavaScript 的 12 个实用函数，助你轻松驾驭编程世界
2023-11-02 03:15:34
前言
JavaScript 是当今最流行的编程语言之一，其用途广泛，从前端开发到后端服务。作为一名前端工程师，拥有熟练掌握 JavaScript 函数的能力至关重要，它们可以极大地简化开发过程并提高效率。本文精心挑选了 12 个在日常开发中非常常用的函数，从简单到复杂，应有尽有。深入了解这些函数，必将为你开启编程世界的大门，使你游刃有余。
1. console.log()
控制台日志函数 console.log() 是 JavaScript 中最基本、最常用的函数之一。它用于在浏览器的控制台中输出信息，便于调试和故障排除。
语法：
console.log(value1, value2, ..., valueN);
参数：
value1,value2, ...,valueN: 要打印的一系列值。
示例：
console.log("Hello, world!");
输出：
Hello, world!
2. Math.round()
Math.round() 函数将给定的数字四舍五入到最接近的整数。
语法：
Math.round(number);
参数：
number: 要四舍五入的数字。
示例：
console.log(Math.round(3.14)); // 输出：3
console.log(Math.round(3.7)); // 输出：4
3. String.prototype.toUpperCase()
String.prototype.toUpperCase() 方法将字符串中的所有字符转换为大写。
语法：
string.toUpperCase();
参数：
string: 要转换为大写的字符串。
示例：
const str = "hello, world!";
console.log(str.toUpperCase()); // 输出：HELLO, WORLD!
4. Array.prototype.push()
Array.prototype.push() 方法将一个或多个元素添加到数组的末尾。
语法：
array.push(element1, element2, ..., elementN);
参数：
element1,element2, ...,elementN: 要添加到数组的元素。
示例：
const arr = [1, 2, 3];
arr.push(4, 5, 6);
console.log(arr); // 输出： [1, 2, 3, 4, 5, 6]
5. Object.keys()
Object.keys() 方法返回一个包含对象所有可枚举属性名称的数组。
语法：
Object.keys(object);
参数：
object: 要获取其属性名称的的对象。
示例：
const person = { name: "John Doe", age: 30 };
console.log(Object.keys(person)); // 输出： ["name", "age"]
6. JSON.stringify()
JSON.stringify() 方法将 JavaScript 对象或值转换为 JSON 字符串。
语法：
JSON.stringify(value);
参数：
value: 要转换为 JSON 字符串的值。
示例：
const obj = { name: "John Doe", age: 30 };
console.log(JSON.stringify(obj)); // 输出： "{\"name\":\"John Doe\",\"age\":30}"
7. fetch()
fetch() 方法用于从服务器异步获取资源，常用于发出 HTTP 请求。
语法：
fetch(input, init);
参数：
input: 请求的资源的 URL 或请求对象。init: 可选的请求初始化对象。
示例：
fetch("https://example.com/api/users")
.then(response => response.json())
.then(data => console.log(data));
8. async/await
async/await 语法允许你编写异步代码，就像它是在同步执行一样。
语法：
async function myAsyncFunction() {
// 异步代码
await somePromise;
// 更多代码
}
示例：
async function main() {
const data = await fetch("https://example.com/api/users");
console.log(data);
}
main();
9. Promise.all()
Promise.all() 方法返回一个 Promise，它在给定的 Promise 数组都解决或拒绝后才解决或拒绝。
语法：
Promise.all(promises);
参数：
promises: 要等待的 Promise 数组。
示例：
const promises = [
fetch("https://example.com/api/users"),
fetch("https://example.com/api/posts"),
];
Promise.all(promises)
.then(responses => {
const users = responses[0].json();
const posts = responses[1].json();
return Promise.all([users, posts]);
})
.then(([users, posts]) => {
// 处理用户和帖子数据
});
10. document.querySelector()
document.querySelector() 方法返回匹配给定 CSS 选择器的第一个元素。
语法：
document.querySelector(selector);
参数：
selector: 要匹配的 CSS 选择器。
示例：
const element = document.querySelector("body");
console.log(element); // 输出：<body>...</body>
11. document.addEventListener()
document.addEventListener() 方法为指定的元素添加事件监听器。
语法：
document.addEventListener(event, listener, options);
参数：
event: 要监听的事件类型。listener: 要执行的回调函数。options: 可选的监听器选项。
示例：
document.addEventListener("click", (event) => {
console.log("The document was clicked!");
});
12. setInterval()
setInterval() 方法以给定的时间间隔重复调用给定的函数或执行代码块。
语法：
setInterval(callback, delay);
参数：
callback: 要重复调用的函数或要执行的代码块。delay: 以毫秒为单位的调用间隔。
示例：
setInterval(() => {
console.log("Hello, world!");
}, 1000);
结论
掌握 JavaScript 函数是任何 JavaScript 开发人员的基本技能。本文介绍的 12 个函数只是 JavaScript 函数库中众多有用函数的一小部分。通过熟练掌握这些函数，你可以显着提高你的编码效率并创建更强大、更复杂的应用程序。请记住，练习是提高编程技能的关键，因此不妨尝试这些函数，探索它们的可能性，并将其应用到你的下一个项目中。
