这边文章将提供给你30个javascript的实用小技巧，帮助您优化代码，使其更具可读性并节省您的时间。
1.使用！！转换为 Boolean
使用双重否定快速将任何值转换为布尔值。
let truthyValue = !!1; // true
let falsyValue = !!0; // false
2. 默认函数参数
设置函数参数的默认值以避免未定义的错误。
function greet(name = "Guest") {
return `Hello, ${name}!`;
}
3. 简称 if-else 的三元运算符
if-else 语句的简写。
let price = 100;
let message = price > 50 ? "Expensive" : "Cheap";
4. 动态字符串的模板文字
使用模板文本在字符串中嵌入表达式。
let item = "coffee";
let price = 15;
console.log(`One ${item} costs $${price}.`);
5. 解构转让
轻松从对象或数组中提取属性。
let [x, y] = [1, 2];
let {name, age} = {name: "Alice", age: 30};
6. 数组和对象克隆的扩展运算
克隆数组或对象而不引用原始数组或对象。
let originalArray = [1, 2, 3];
let clonedArray = [...originalArray];
7. 短路评估
使用逻辑运算符进行条件执行。
let isValid = true;
isValid && console.log("Valid!");
8. 可选链接 （？.）
如果引用为 nullish ，则安全地访问嵌套对象属性而不会出现错误。
let user = {name: "John", address: {city: "New York"}};
console.log(user?.address?.city); // "New York"
9. 无效合并运算符 （？？）
用于 ?? 提供 null 或 undefined 的默认值。
let username = null;
console.log(username ?? "Guest"); // "Guest"
10. 使用 map 和 filter reduce 进行数组操作
无需传统循环即可处理数组的优雅方法。
// Map
let numbers = [1, 2, 3, 4];
let doubled = numbers.map(x => x * 2);
// Filter
const evens = numbers.filter(x => x % 2 === 0);
// Reduce
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
11. 标记模板文字
使用模板文本进行自定义字符串处理的函数调用。
function highlight(strings, ...values) {
return strings.reduce((prev, current, i) => `${prev}${current}${values[i] || ''}`, '');
}
let price = 10;
console.log(highlight`The price is ${price} dollars.`);
12.使用 Object.entries（） 和 Object.fromEntries（）
将对象转换为数组并返回，以便于操作。
let person = {name: "Alice", age: 25};
let entries = Object.entries(person);
let newPerson = Object.fromEntries(entries);
13. 唯一元素的设置对象
使用 Set 可存储任何类型的唯一值。
let numbers = [1, 1, 2, 3, 4, 4];
let uniqueNumbers = [...new Set(numbers)];
14. 对象中的动态属性名称
在对象文本表示法中使用方括号创建动态属性名称。
let dynamicKey = 'name';
let person = {[dynamicKey]: "Alice"};
15. 使用 bind（） 进行函数柯里化
创建一个新函数，该函数在调用时将其 this 关键字设置为提供的值。
function multiply(a, b) {
return a * b;
}
let double = multiply.bind(null, 2);
console.log(double(5)); // 10
16.使用 Array.from（） 从类数组对象创建数组
将类似数组或可迭代的对象转换为真正的数组。
let nodeList = document.querySelectorAll('div');
let nodeArray = Array.from(nodeList);
17. 为了...of 可迭代对象的循环
直接迭代可迭代对象（包括数组、映射、集合等）。
for (let value of ['a', 'b', 'c']) {
console.log(value);
}
18. 使用 Promise.all（） 进行并发 Promise
同时运行多个承诺，并等待所有承诺解决。
let promises = [fetch(url1), fetch(url2)];
Promise.all(promises)
.then(responses => console.log('All done'));
19. 函数参数的 rest 参数
将任意数量的参数捕获到数组中。
function sum(...nums) {
return nums.reduce((acc, current) => acc + current, 0);
}
20. 性能优化的记忆
存储函数结果以避免冗余处理。
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;
}
};
};
21. 使用 ^ 交换值
使用异或按位运算符交换两个没有临时变量的变量的值。
let a = 1, b = 2;
a ^= b; b ^= a; a ^= b; // a = 2, b = 1
22. 使用 flat（） 扁平化数组
使用该 flat() 方法轻松展平嵌套数组，并将展平深度作为可选参数。
let nestedArray = [1, [2, [3, [4]]]];
let flatArray = nestedArray.flat(Infinity);
23. 使用 Oneary Plus 转换为数字
使用一元加号运算符快速将字符串或其他值转换为数字。
let str = "123";
let num = +str; // 123 as a number
24. HTML 片段的模板字符串
使用模板字符串创建 HTML 片段，使动态 HTML 生成更简洁。
let items = ['apple', 'orange', 'banana'];
let html = `<ul>${items.map(item => `<li>${item}</li>`).join('')}</ul>`;
25. 使用 Object.assign（） 合并对象
将多个源对象合并到一个目标对象中，有效地组合它们的属性。
let obj1 = { a: 1 }, obj2 = { b: 2 };
let merged = Object.assign({}, obj1, obj2);
使用符合人体工程学的鼠标优化您的编程设置，专为舒适和长时间编码而量身定制。
26. 默认值短路
在处理可能未定义或 null 变量时，利用逻辑运算符来分配默认值。
let options = userOptions || defaultOptions;
27. 使用括号表示法动态访问对象属性
使用括号表示法动态访问对象的属性，这在属性名称存储在变量中时很有用。
let property = "name";
let value = person[property]; // Equivalent to person.name
28.使用 Array.includes（） 进行状态检查
使用 includes（） 检查数组是否包含某个值，这是 indexOf 的更清晰的替代方案。
if (myArray.includes("value")) {
// Do something
}
29. 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!"
30. 防止对象修改
使用 Object.freeze() 防止对对象进行修改，使其不可变。对于更深层次的不可变性，请考虑更彻底地强制执行不可变性的库。
let obj = { name: "Immutable" };
Object.freeze(obj);
obj.name = "Mutable"; // Fails silently in non-strict mode
我希望这些 JavaScript 技巧能为您提供有关如何进行 JavaScript 编程的新视角。
从利用模板文字的简洁力量到掌握 map 、 filter 和 的 reduce 效率，这些 JavaScript hack 将丰富您的开发工作流程并激发您的下一个项目。
让这些 JavaScript 技巧不仅完善您当前的项目，还激发您未来编码之旅中创新的灵感。
