面向开发人员的 50 个实用 JavaScript 技巧-得设创意

JavaScript 是一种动态且不断发展的语言，掌握它的怪癖可以显着提高您的编码效率。无论您是初学者还是高级开发人员，这 50 个实用技巧都将提高您的 JavaScript 技能并帮助您编写更简洁、更高效的代码。

在 JavaScript 中反转字符串可以使用单行代码来实现：

const reversedString = str.split('').reverse().join('');

这会将字符串分解为字符数组，将其反转，然后将其联接回来。

2. 对数组求和

使用reduce():

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, curr) => acc + curr, 0);

3. 在数组中查找最大值和最小值

将 spread 运算符与和一起使用可查找最大值和最小值：Math.max()Math.min()

const numbers = [3, 7, 1, 9];
const max = Math.max(...numbers);
const min = Math.min(...numbers);

4. 从数组中删除重复项

使用：创建不重复的新数组 Set

const uniqueArray = [...new Set([1, 2, 2, 3])];

5. 展平多维数组

该方法展平嵌套数组：flat()

const nestedArray = [1, [2, [3, 4]]];
const flatArray = nestedArray.flat(2);

6. 将文本复制到剪贴板

您可以使用 Clipboard API 将文本复制到剪贴板：

function copyText(text) {
  navigator.clipboard.writeText(text);
}

7. 检查 Value 是否为数字

要检查值是否为有效数字，请使用和的组合：typeof!isNaN()

const isNumber = value => typeof value === 'number' && !isNaN(value);

8. 生成一个范围内的随机数

下面是一个在两个值之间生成随机数的函数：

const getRandom = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;

9. 将字符串转换为数字

使用运算符将字符串快速转换为数字：+

const num = +"42"; // 42

或者，您也可以使用：parseInt()

const number = parseInt("42", 10);

10. 函数中的默认参数

在函数中设置默认参数值以避免未定义的值：

function greet(name = 'Guest') {
  console.log(`Hello, ${name}`);
}

11. 将 Arguments 对象转换为数组

在 JavaScript 函数中，是一个可以转换为实际数组的类似数组的对象：arguments

function myFunc() {
  const argsArray = Array.from(arguments);
}

12. 去抖函数

去抖动可确保函数不会快速连续重复调用。下面是一个示例：

function debounce(func, delay) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), delay);
  };
}

13. 限制函数

限制可确保在指定时间范围内最多调用一次函数：

function throttle(func, limit) {
  let lastFunc;
  let lastRan;
  return function(...args) {
    if (!lastRan) {
      func.apply(this, args);
      lastRan = Date.now();
    } else {
      clearTimeout(lastFunc);
      lastFunc = setTimeout(() => {
        if (Date.now() - lastRan >= limit) {
          func.apply(this, args);
          lastRan = Date.now();
        }
      }, limit - (Date.now() - lastRan));
    }
  };
}

14. 检查对象是否为空

使用： Object.keys()

const isEmpty = obj => Object.keys(obj).length === 0;

15. 短路评估

使用 short-circuiting 有条件地赋值：

const message = user.isLoggedIn && "Welcome back!";

如果为，则为字符串值分配。user.isLoggedIntruemessage

16. 对象属性速记

当属性名称与变量名称匹配时，您可以使用速记语法：

const name = "John";
const age = 25;
const person = { name, age };

17. 解构数组

解构数组以将值分配给变量：

const [first, second] = [10, 20];

18. Destructure 对象

从对象中提取属性并将其分配给变量：

const {name, age} = {name: "Jane", age: 30};

19. 模板字面量

使用模板文字轻松进行字符串插值：

const name = 'John';
const greeting = `Hello, ${name}!`;

20. 将 NodeList 转换为数组

您可以使用： NodeListArray.from()

const nodeList = document.querySelectorAll('div');
const nodeArray = Array.from(nodeList);

21. 检查 Array 是否包含元素

用于检查数组是否包含值：includes()

const fruits = ['apple', 'banana', 'orange'];
console.log(fruits.includes('banana')); // true

22. 从数组中获取唯一值

您可以使用：Set

const uniqueValues = Array.from(new Set([1, 2, 2, 3, 3]));

23. 查找对象属性

使用和检索对象的键和值：Object.keys()Object.values()

const obj = { name: 'Alice', age: 30 };
console.log(Object.keys(obj)); // ['name', 'age']
console.log(Object.values(obj)); // ['Alice', 30]

24. 合并对象

使用展开运算符合并对象：

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const mergedObj = { ...obj1, ...obj2 };

25. 映射数组

用于通过对每个元素应用函数来转换数组：map()

const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2); // [2, 4, 6]

26. 过滤数组

过滤数组以删除不需要的元素：

const numbers = [1, 2, 3, 4];
const evens = numbers.filter(num => num % 2 === 0); // [2, 4]

27. 承诺.all（）

用于并发处理多个异步任务：Promise.all()

Promise.all([fetch('/data1'), fetch('/data2')])
  .then(responses => {
    // Handle responses
  })
  .catch(error => console.error(error));

28. 将集合转换为数组

您可以使用 spread 运算符将 a 转换为数组：Set

const set = new Set([1, 2, 3]);
const array = [...set];

29. 对数组进行排序

按升序或降序对数字数组进行排序：

const numbers = [4, 2, 7];
numbers.sort((a, b) => a - b); // ascending
numbers.sort((a, b) => b - a); // descending

30. 填充字符串

填充字符串的开头或结尾以达到一定长度：

const str = '5';
const paddedStr = str.padStart(3, '0'); // "005"

31. 修剪空格

使用、和删除空格：trim()trimStart()trimEnd()

const text = "  Hello  ";
console.log(text.trim()); // "Hello"

32. 检查字符串是否包含子字符串

用于检查字符串是否包含特定子字符串：includes()

const sentence = "JavaScript is awesome";
console.log(sentence.includes("awesome")); // true

33. 查找子字符串的索引

用于查找子字符串的位置：indexOf()

const sentence = "JavaScript is fun";
console.log(sentence.indexOf("fun")); // 14

34. 重复字符串

用于重复字符串：repeat()

const str = "ha";
console.log(str.repeat(3)); // "hahaha"

35. 替换子字符串

用于替换子字符串：replace()

const text = "JavaScript is fun";
const newText = text.replace("fun", "awesome");

36. 使用可选链接

可选的链接（）有助于安全地访问深度嵌套的属性：?.

const user = { name: 'John' };
console.log(user?.address?.city); // undefined, no error

37. 将日期转换为区域设置字符串

使用：设置日期格式 toLocaleDateString()

const date = new Date();
console.log(date.toLocaleDateString('en-US')); // MM/DD/YYYY format

38. 检查 Value 是否为 Array

用于检查值是否为数组：Array.isArray()

console.log(Array.isArray([1, 2, 3])); // true

39. 检查 DOM 中是否存在元素

用于检查元素是否存在：document.querySelector()

const elementExists = !!document.querySelector('.my-element');

40. 获取当前时间戳

用于获取当前时间戳：Date.now()

const timestamp = Date.now();

41. 用逗号格式化数字

用于使用逗号设置数字格式：toLocaleString()

const number = 1234567;
console.log(number.toLocaleString()); // "1,234,567"

42. 将数字四舍五入到小数点后 2 位

用于舍入数字：toFixed()

const number = 5.6789;
console.log(number.toFixed(2)); // "5.68"

43. 检查变量是否为 Undefined

检查变量是否为：undefined

if (typeof variable === 'undefined') {
  // Handle undefined
}

44. 从数组中获取随机项

用于从数组中检索随机项：Math.random()

const items = ['apple', 'banana', 'orange'];
const randomItem = items[Math.floor(Math.random() * items.length)];

45. 将箭头函数用于短函数

箭头函数提供简洁的语法：

const add = (a, b) => a + b;

46. 使用 Object.assign（）进行浅拷贝

用于复制对象：Object.assign()

const original = { a: 1 };
const copy = Object.assign({}, original);

47. 使用 typeof 进行类型检查

用于检查变量的类型：typeof

console.log(typeof 'Hello'); // "string"
console.log(typeof 42); // "number"

48. 动态属性名称

您可以使用方括号设置动态属性名称：

const key = 'name';
const obj = { [key]: 'John' };

49. 检查 nullish 值

使用 nullish 合并运算符（）处理或值：??nullundefined

const value = user.age ?? 'Unknown';

50. 使用 console.table（）进行更轻松的调试

在控制台中显示表格数据：console.table()

const users = [{ name: 'Alice', age: 25 }, { name: 'Bob', age: 30 }];
console.table(users);

结论

掌握这 50 个实用的 JavaScript 技巧将帮助您编写更好的代码并提高您解决问题的能力。在处理各种项目时将它们放在手边，您会发现您的工作效率得到了显着提高！祝您编码愉快！

免责声明：得设创意所发布的一切资源及软件的文章仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络和用户自行分享，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版，得到更好的正版服务。如有侵权请邮件与我们联系处理。

THE END