JavaScript 的奇技淫巧

JavaScript 作为一门动态语言,拥有丰富的特性和灵活性。这使得开发者们能够编写出既强大又高效的代码。然而,在某些情况下,为了追求代码的精简或性能优化,开发者可能会采用一些非传统的技巧。接下来,我们一起探索一些这样的"奇技淫巧",一起感受JavaScript的独特魅力。

1. 三元运算符的简洁写法

js 复制代码
const age = 25;
const message = age > 18 ? 'Adult' : 'Minor'; // 更简洁的条件赋值

2. 立即执行函数表达式 (IIFE)

js 复制代码
(function() {
    console.log('Immediately executed!');
})();

3. 函数柯里化 (Currying)

js 复制代码
function add(x) {
    return function(y) {
        return x + y;
    };
}

const addFive = add(5);
console.log(addFive(10)); // 15

4. 闭包 (Closure)

js 复制代码
function counter() {
    let count = 0;
    return function() {
        return ++count;
    };
}

const increment = counter();
console.log(increment()); // 1
console.log(increment()); // 2

5. 位运算

js 复制代码
// 检查一个数是否为2的幂
function isPowerOfTwo(n) {
    return n > 0 && (n & (n - 1)) === 0;
}

console.log(isPowerOfTwo(16)); // true

6. 字符串模板

js 复制代码
const name = 'Alice';
console.log(`Hello, ${name}!`); // Hello, Alice!

7. 箭头函数

js 复制代码
const multiply = (a, b) => a * b;
console.log(multiply(3, 4)); // 12

8. 解构赋值

js 复制代码
const person = { firstName: 'John', lastName: 'Doe' };
const { firstName, lastName } = person;
console.log(firstName, lastName); // John Doe

9. 扩展运算符

js 复制代码
const arr1 = [1, 2];
const arr2 = [3, 4];
const combined = [...arr1, ...arr2];
console.log(combined); // [1, 2, 3, 4]

10. 短路求值

js 复制代码
const a = null;
const b = 42;
console.log(a || b); // 42

11. 空值合并运算符 (??)

js 复制代码
const value = null;
const defaultVal = value ?? 5;
console.log(defaultVal); // 5

12. 可选链操作符 (?.)

js 复制代码
const obj = { nested: { value: 42 } };
console.log(obj.nested?.value); // 42
console.log(obj.missing?.value); // undefined

13. 递归

js 复制代码
function factorial(n) {
    return n <= 1 ? 1 : n * factorial(n - 1);
}
console.log(factorial(5)); // 120

14. 使用 Array.from 或 Array.of

js 复制代码
const arrayFromSet = Array.from(new Set([1, 2, 2, 3]));
console.log(arrayFromSet); // [1, 2, 3]

const arrayWithOneElement = Array.of(42);
console.log(arrayWithOneElement); // [42]

15. Promise 链式调用

js 复制代码
fetch('/api/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error(error));

总结一下

这些技巧展示了 JavaScript 的灵活性和强大功能。虽然它们可以使代码变得更加紧凑和高效,但在实际开发中应该根据具体情况谨慎使用。始终记得,清晰和可维护的代码通常是首选。当你考虑使用这些技巧时,请确保它们不会影响到代码的整体可读性和可维护性。

相关推荐
程序员大阳1 分钟前
副队长JavaScript教程(67)-Ajax初识:背景、历史与核心概念
javascript·ajax·同步·异步·概念·背景·来是
大黄说说3 分钟前
PHP 异步怎么实现?Swoole、Workerman 使用场景对比
开发语言·php·swoole
十二同学啊3 分钟前
Python 工程化详解:项目结构、依赖管理、代码质量、测试与部署
java·开发语言·python
程序员大阳6 分钟前
副队长JavaScript教程(70)-Ajax同源策略与跨域
javascript·ajax·同源策略·跨越·corp
乐橙开放平台10 分钟前
跨地域监控难管理?通过 GB28181 把各地海康大华乐橙摄像头注册到云端平台
开发语言·笔记·物联网·自动化·php·音视频·智能家居
广东融科数据服务有限公司11 分钟前
网络监控经常卡顿、掉线、画面模糊?一线排查问答实录
开发语言·网络·php
Sarvartha32 分钟前
Iterator 迭代器、ListIterator & foreach 循环
开发语言
樱花落木兰35 分钟前
Redis 消息队列的可靠性演进:从 List、Pub/Sub 到 Stream 消费者组,以及 8.x 版本改变了什么
java·开发语言·经验分享·redis·分布式·python·软件工程
普通人636 分钟前
Web端3D模型加载实战指南_Vue3_uni-app_HTML
前端·javascript·uni-app·html
志尊宝39 分钟前
AI原生前端开发(042):AI辅助的路由设计与优化
javascript·react.js·ai-native