JS编程中的神奇技巧

原创

用户8703799

发布于 2024-03-25 17:23:32

690

发布于 2024-03-25 17:23:32

文章被收录于专栏：javascript技术javascript技术

在JavaScript编程中，除了基本的语法和结构，还有许多“神奇”或高级的用法，这些用法可以帮助你写出更简洁、更高效或更具创意的代码。以下是一些JavaScript编程中的神奇用法：

1. 利用闭包实现私有变量和方法 闭包是JavaScript中一个非常重要的概念，它允许你创建私有变量和方法，只能通过特定的公开方法进行访问和修改。

function createCounter() {  
    let count = 0;  
    return {  
        increment: function() {  
            count++;  
        },  
        getCount: function() {  
            return count;  
        }  
    };  
}  
const counter = createCounter();  
counter.increment();  
console.log(counter.getCount()); // 输出 1

2. 利用Array的扩展运算符实现数组去重

const array = [1, 2, 2, 3, 4, 4, 5];  
const uniqueArray = [...new Set(array)];  
console.log(uniqueArray); // 输出 [1, 2, 3, 4, 5]

3. 使用Proxy实现对象拦截

Proxy是ES6中新增的功能，它允许你定义基本操作的自定义行为（如属性查找、赋值、枚举、函数调用等）。

const handler = {  
    get(target, key, receiver) {  
        console.log(`Getting ${key}!`);  
        return Reflect.get(target, key, receiver);  
    }  
};  
const proxy = new Proxy({ name: 'John' }, handler);  
console.log(proxy.name); // 输出 "Getting name!" 和 "John"

4. 利用reduce实现数组的各种操作

Array.prototype.reduce通常用于累加数组的元素，但它实际上是一个通用性很强的方法，可以实现数组的各种转换和操作。

const numbers = [1, 2, 3, 4, 5];  
const sum = numbers.reduce((acc, cur) => acc + cur, 0); // 求和  
const product = numbers.reduce((acc, cur) => acc * cur, 1); // 求积  
const avg = numbers.reduce((acc, cur) => acc + cur, 0) / numbers.length; // 求平均值

5. 使用异步函数和await处理异步操作

异步函数和await使得异步代码的编写和同步代码一样直观，示例：

async function fetchData() {  
    const response = await fetch('https://api.example.com/data');  
    const data = await response.json();  
    return data;  
}  
fetchData().then(data => {  
    console.log(data);  
});

6. 利用Map和Set实现数据结构操作

Map和Set是ES6中新增的数据结构，它们提供了比传统对象更强大的键值对存储和集合操作功能。

const map = new Map();  
map.set('key', 'value');  
console.log(map.get('key')); // 输出 "value"  
 
const set = new Set();  
set.add(1);  
set.add(2);  
set.add(2); // Set中不会有重复元素  
console.log(set.size); // 输出 2

7. 利用生成器函数实现懒加载和迭代控制

生成器函数可以返回一个迭代器对象，该对象可以按需生成值，实现懒加载和迭代控制。

function* numberGenerator() {  
    let i = 0;  
    while (true) {  
        yield i++;  
    }  
}  
const gen = numberGenerator();  
console.log(gen.next().value); // 输出 0  
console.log(gen.next().value); // 输出 1

8.JavaScript代码混淆加密

JShaman是一个提供JavaScript混淆加密服务的平台，它在国内享有较高的知名度和声誉，被认为是最为优秀的JavaScript混淆工具之一。

JShaman能够在不影响代码功能和性能的前提下，将JavaScript代码转化为难以阅读和理解的形式。使得代码难以被破解和反编译，从而有效地防止恶意用户的窃取和滥用。

例如上述第7例中的代码：

function* numberGenerator() {  
    let i = 0;  
    while (true) {  
        yield i++;  
    }  
}  
const gen = numberGenerator();  
console.log(gen.next().value); // 输出 0  
console.log(gen.next().value); // 输出 1

经JShaman进行JS混淆加密后，可以成为难以理解的加密代码：

(function(_0x4cefc9,_0x3d20dc){const _0x301a22=_0x4cefc9();function _0x17ca86(_0x4a685e,_0x1e68b9,_0x16202d,_0x4222ad,_0x5f29de){return _0x5f05(_0x16202d-0xf3,_0x5f29de);}function _0x59eb6a(_0x203e3e,_0x13d583,_0x48562d,_0x4c10d4,_0x43927f){return _0x5f05(_0x48562d-0x346,_0x4c10d4);}function _0x4b5e2c(_0x5bdcac,_0x55e56d,_0x29a4dd,_0x5830e4,_0x2bc950){return _0x5f05(_0x55e56d-0x50,_0x29a4dd);}function _0x5eb937(_0x54b44e,_0x35278c,_0x1fa698,_0x3d6e90,_0x165c15){return _0x5f05(_0x54b44e-0x346,_0x35278c);}function _0x425b1d(_0x5bdd66,_0x5dd9dc,_0x520ac4,_0x92818c,_0x22ba8c){return _0x5f05(_0x5dd9dc- -0x344,_0x5bdd66);}while(!![]){try{const _0x299845=-parseInt(_0x425b1d(-0x344,-0x340,-0x33e,-0x33f,-0x346))/0x1*(-parseInt(_0x17ca86(0xfd,0x101,0xfc,0xfd,0x100))/0x2)+parseInt(_0x425b1d(-0x340,-0x33a,-0x337,-0x333,-0x33d))/0x3*(-parseInt(_0x425b1d(-0x34a,-0x342,-0x345,-0x347,-0x33e))/0x4)+-parseInt(_0x5eb937(0x347,0x347,0x344,0x34e,0x347))/0x5*(-parseInt(_0x59eb6a(0x34a,0x348,0x34e,0x352,0x348))/0x6)+parseInt(_0x425b1d(-0x341,-0x344,-0x341,-0x348,-0x34b))/0x7*(parseInt(_0x4b5e2c(0x5f,0x5d,0x5c,0x60,0x56))/0x8)+-parseInt(_0x59eb6a(0x348,0x350,0x349,0x34c,0x34a))/0x9*(parseInt(_0x4b5e2c(0x65,0x5e,0x5a,0x5d,0x59))/0xa)+parseInt(_0x425b1d(-0x33d,-0x339,-0x334,-0x339,-0x33d))/0xb+parseInt(_0x5eb937(0x352,0x359,0x355,0x358,0x351))/0xc;if(_0x299845===_0x3d20dc){break;}else{_0x301a22["\u0070\u0075\u0073\u0068"](_0x301a22["\u0073\u0068\u0069\u0066\u0074"]());}}catch(_0x41723e){_0x301a22["\u0070\u0075\u0073\u0068"](_0x301a22["\u0073\u0068\u0069\u0066\u0074"]());}}})(_0x34d3,0x2a578);function _0x34d3(){const _0x277728=["jJGIdo89302".split("").reverse().join(""),"\u0076\u0061\u006c\u0075\u0065","gol".split("").reverse().join(""),"txen".split("").reverse().join(""),"\u0033\u0032\u0039\u0035\u0038\u0077\u0042\u0050\u0051\u006e\u006a","JFDZyp22".split("").reverse().join(""),"ZUkaZf758424".split("").reverse().join(""),'505296CcnUEO','2187360QNEIUh','24fkZSik',"\u0037\u0030\u0064\u006d\u006d\u004b\u0062\u0072","cyBVTj73231".split("").reverse().join(""),"\u0039\u0035\u004c\u004b\u0052\u0074\u005a\u0044",'4noPDTM','318321GlDJsC'];_0x34d3=function(){return _0x277728;};return _0x34d3();}function _0x5f05(_0xf1f57d,_0x34d3a3){const _0x5f053d=_0x34d3();_0x5f05=function(_0x7cb03b,_0x4cc1b6){_0x7cb03b=_0x7cb03b-0x0;let _0x565cd2=_0x5f053d[_0x7cb03b];return _0x565cd2;};return _0x5f05(_0xf1f57d,_0x34d3a3);}function*_0x18486f(){let _0x4cd896=0xc08fd^0xc08fd;while(!![]){yield _0x4cd896++;}}const _0xad5070=_0x18486f();console['log'](_0xad5070['next']()["\u0076\u0061\u006c\u0075\u0065"]);console['log'](_0xad5070['next']()['value']);

9.用Eval解析和执行 JSON 数据

以下是一个使用 eval() 解析 JSON 数据的例程：

// 假设我们有一个 JSON 格式的字符串  
var jsonString = '{"name": "John", "age": 30, "city": "New York"}';  
  
// 使用 eval() 来解析 JSON 字符串（不推荐）  
try {  
    var jsonData = eval("(" + jsonString + ")");  
    console.log(jsonData); // 输出解析后的对象  
    console.log(jsonData.name); // 输出 "John"  
    console.log(jsonData.age); // 输出 30  
    console.log(jsonData.city); // 输出 "New York"  
} catch (error) {  
    console.error("解析 JSON 时发生错误:", error);  
}

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

javascript