1. 空对象检查
if (!Object.keys(obj).length){ // 当对象为空时执行 }
如果您想检查一个对象是否为空,您可以使用Object.keys()方法,然后使用length属性来确定对象中是否有任何键。如果对象的长度为零,则它是空的。
2. 数组转换
var arr = Array.prototype.slice.call(arguments);
如果您想转换一个类似数组的对象为一个真正的数组,您可以使用call()方法调用Array.prototype.slice()方法,这样您就可以便利的使用数组的方法了。
3. 多项对比
if (a === (b === c)){ // 是否等于a == b && b == c }
如果您有同一值的多个变量需要比较,这个技巧将非常实用,因为它可以将多余的比较符省略。它和 (a == b && b == c)相等。
4. 使用默认值
function myFunction(param){ param = param|| "默认值"; return param; }
如果您需要一个可选参数并想要使用一个默认值,这个技巧将派上用场。如果参数为false或undefined,则默认值将被覆盖。
5. 检查类
function isClass(classObj){ return typeof classObj === "function" && /^class\s/.test(Function.prototype.toString.call(classObj)); }
检查对象是否为类的大型问题就到了!该技巧使用Function.prototype.toString()方法来检查对象是否具有字符串“class”作为头。如果是,它就是一个类。
6. 函数柯里化
function multiply(a, b) { return a * b; } function createCurriedMultiply(a) { return function(b) { return multiply(a, b); }; } var double = createCurriedMultiply(2); double(5); // -> 10
柯里化是一种常见的函数变换,其中一个函数接收一些参数并返回一个接收任意数量参数的函数。当我们为其提供了足够的参数时,它将返回计算结果。
7. 引用类型
const a = [1, 2]; const b = [...a]; b.push(3); console.log(a); // [1, 2] console.log(b); // [1, 2, 3]
对象是通过引用传递的,所以它们可以被轻松地更改。如果您需要复制一个对象而不是引用它,使用...spread符号和数组字面量。
8. 数组去重
const arr = [1, 2, 2, 3, 3, 3]; const uniqueArr = [...new Set(arr)]; console.log(uniqueArr); // [1, 2, 3]
使用Set包装器和spread操作符将角括号张开并传递给Array构造函数来消除重复的元素。
9. 对象合并
const obj1 = { a: 1, b: 1, c: 1 }; const obj2 = { b: 2, c: 2 }; const mergedObj = { ...obj1, ...obj2 }; console.log(mergedObj); // { a: 1, b: 2, c: 2 }
使用spread操作符将两个对象合并到一个新对象中。如果对象有相同的属性,则后一个对象将覆盖前一个对象。
10. 字符串反转
const str = "abc"; const reversedStr = str.split("").reverse().join(""); console.log(reversedStr); // cba
字符串反转很容易,只需将字符串转换为数组,反转数组并将其连接起来。
11. 函数参数默认值
function myFunction(param = "默认值") { return param; } console.log(myFunction()) // 默认值 console.log(myFunction("其他值")) // 其他值
在函数定义中使用默认参数值。
12. 数组中最大最小值
const arr = [1, 2, 3, 4, 5]; const max = Math.max(...arr); const min = Math.min(...arr); console.log(max); // 5 console.log(min); // 1
使用Math对象的最大和最小方法来找到数组中的最大值和最小值。
13. 数组平均值
const arr = [1, 2, 3, 4, 5]; const avg = arr.reduce((a, b) => a + b, 0) / arr.length; console.log(avg); // 3
使用reduce()方法将所有元素相加,然后将结果除以数组的长度以找到平均值。
14. 类型检查
const arr = [1, 2, 3]; const obj = { a: 1, b: 2, c: 3 }; console.log(Array.isArray(arr)); // true console.log(typeof obj === "object" && !Array.isArray(obj) && obj !== null); // true
使用Array.isArray()来检查数组类型,使用typeof和Array.isArray()来检查非数组对象。
15. 匿名函数调用
(function() { // 执行一些代码 })();
使用匿名函数来执行代码并隔离变量。
16. 字符串拼接
const name = "John"; const age = 25; const str = <code>My name is ${name} and I'm ${age} years old.</code>; console.log(str); // My name is John and I'm 25 years old.
使用字符串模板和${}符号来拼接字符串和变量。
17. 函数声明
(function() { function myFunction() { // 执行一些代码 } })();
在函数声明前使用一个匿名函数来隔离代码和变量。
18. 数组遍历
const arr = [1, 2, 3]; for (let i = 0; i < arr.length; i++) { console.log(arr[i]); }
使用for循环来遍历数组。
这就是我们所介绍的18个JavaScript技巧。它们可以帮助您变得更有效率,更能利用语言的各种功能。祝您编写愉快的代码!