javascript 的奇技巧淫二

---

1 、标记模板文字

// 使用模板文字进行函数调用，以进行自定义字符串处理。
let price = 10;
console.log(highlight`The price is ${price} dollars.`);

2、使用 Object.entries() 和 Object.fromEntries()

// 将对象转换为数组并转换回来，以便于操作。
let person = {name: "Alice", age: 25};
let entries = Object.entries(person);
let newPerson = Object.fromEntries(entries);

3、用于唯一元素的 Set 对象

// 使用 Set 存储任何类型的唯一值。
let numbers = [1, 1, 2, 3, 4, 4];
let uniqueNumbers = [...new Set(numbers)];

4、对象中的动态属性名称

// 在对象文字表示法中使用方括号来创建动态属性名称。
let dynamicKey = 'name';
let person = {[dynamicKey]: "Alice"};

5、使用 bind() 进行函数柯里化

// 创建一个新函数，当调用该函数时，将其this关键字设置为提供的值。
function multiply(a, b) {
 return a * b;
}
let double = multiply.bind(null, 2);
console.log(double(5)); // 10

6、使用 Array.from() 从类似数组的对象创建数组

// 将类似数组或可迭代的对象转换为真正的数组。
let nodeList = document.querySelectorAll('div');
let nodeArray = Array.from(nodeList);

7、可迭代对象的 for…of 循环

// 直接迭代可迭代对象（包括数组、映射、集合等）。
for (let value of ['a', 'b', 'c']) {
 console.log(value);
}

8、使用 Promise.all() 实现并发 Promise

// 同时运行多个 Promise 并等待所有 Promise 完成。
let promises = [fetch(url1), fetch(url2)];
Promise.all(promises)
.then(responses => console.log('All done'));

9、函数参数的 Rest 参数

// 将任意数量的参数捕获到数组中。
function sum(...nums) {
   return nums.reduce((acc, current) => acc + current, 0);
}

10、用于性能优化的记忆化

// 存储函数结果以避免冗余处理。
const memoize = (fn) => {
    const cache = {};
    return (...args) => {
        let n = args[0]; // assuming single argument for simplicity
        if (n in cache) {
            console.log('Fetching from cache');
            return cache[n];
        } else {
            console.log('Calculating result');
            let result = fn(n);
            cache[n] = result;
            return result;
        }
    };
};

11、使用 ^ 交换值

// 使用 XOR 按位运算符交换两个变量的值，无需临时变量。
let a = 1, b = 2;
a ^= b; b ^= a; a ^= b; // a = 2, b = 1

12、使用 flat() 展平数组

// 使用 flat() 方法轻松展平嵌套数组，展平深度作为可选参数。
let nestedArray = [1, [2, [3, [4]]]];
let flatArray = nestedArray.flat(Infinity);

13、使用一元加法转换为数字

// 使用一元加法运算符快速将字符串或其他值转换为数字。
let str = "123";
let num = +str; // 123 as a number

14、HTML 片段的模板字符串

// 使用模板字符串创建 HTML 片段，使动态 HTML 生成更清晰。
let items = ['apple', 'orange', 'banana'];
let html = `<ul>${items.map(item => `<li>${item}</li>`).join('')}</ul>`;

15、使用 Object.assign() 合并对象

// 将多个源对象合并为目标对象，有效地组合它们的属性。
let items = ['apple', 'orange', 'banana'];
let html = `<ul>${items.map(item => `<li>${item}</li>`).join('')}</ul>`;

16、短路默认值

// 处理可能未定义或为空的变量时，利用逻辑运算符分配默认值。
let options = userOptions || defaultOptions;

17、使用括号表示法动态访问对象属性

// 使用括号表示法动态访问对象的属性，当属性名称存储在变量中时很有用。
let book = "name";
let value = book[property]; // Equivalent to person.name

18、使用 Array.includes() 进行存在性检查

// 使用 includes() 检查数组是否包含某个值，这是 indexOf 的更清晰的替代方案。
if (myArray.includes("value")) {
   // Do something
}

19、Function.prototype.bind() 的强大功能

// 将函数绑定到上下文（此值）并部分应用参数，创建更可重用和模块化的代码。
const greet = function(greeting, punctuation) {
 return `${greeting}, ${this.name}${punctuation}`;
};
const greetJohn = greet.bind({name: 'John'}, 'Hello');
console.log(greetJohn('!')); // "Hello, John!"

20、防止对象修改

// 使用 Object.freeze() 防止对对象的修改，使其不可变。为了实现更深层次的不变性，请考虑更彻底地实施不变性的库。
let obj = { name: "Immutable" };
Object.freeze(obj);
obj.name = "Mutable"; // Fails silently in non-strict mod