JavaScript中的20个小技巧

Posted 2023-04-06 我不是程序员~

1. 箭头函数可在没有参数时更简洁

箭头函数用于定义并创建函数的常用方式。如果没有参数，则可以使用下面的代码：

const logMessage = () => 
  console.log('Hello, World!');
;

2. 使用setInterval()实现计时器

setInterval()是一个用于重复调用函数的内置函数。下面是一个setInterval()计时器的例子：

let count = 0;
const intervalId = setInterval(() => 
  console.log(count);
  count++;
  if (count > 5) 
    clearInterval(intervalId);
  
, 1000);

3. 数组查找/搜索

使用Array.find()方法可以快速查找数组中的一个对象。下面是一个例子：

const users = [
   id: 1, name: 'John' ,
   id: 2, name: 'Jane' ,
   id: 3, name: 'Bob' ,
];
const user = users.find((user) => user.id === 2);
console.log(user); //  id: 2, name: 'Jane' 

4. 字符串重复

使用字符串重复技巧可以将某个字符串重复多次。下面是一个例子：

const message = 'Hello, World! ';
const repeatedMessage = message.repeat(3);
console.log(repeatedMessage); // "Hello, World! Hello, World! Hello, World! "

5. 数字格式化

通过使用Intl.NumberFormat可以格式化数字, 下面是一个例子：

const number = 12345.6;
const formatter = new Intl.NumberFormat('en-US', 
  style: 'currency',
  currency: 'USD',
);
console.log(formatter.format(number)); // "$12,345.60"

6. 将对象数组转换为对象

使用reduce()方法将对象数组转换为单个对象。这是一个例子：

const users = [
   id: 1, name: 'John' ,
   id: 2, name: 'Jane' ,
   id: 3, name: 'Bob' ,
];
const usersObject = users.reduce((obj, user) => 
  obj[user.id] = user;
  return obj;
, );
console.log(usersObject);
/*

  "1": 
    "id": 1,
    "name": "John"
  ,
  "2": 
    "id": 2,
    "name": "Jane"
  ,
  "3": 
    "id": 3,
    "name": "Bob"
  

*/

7. 空字符串检查

使用短路运算符进行空字符串检查，这是一个例子：

const name = '';
const displayName = name || 'Anonymous';
console.log(displayName); // "Anonymous"

8. 使用Object.values()获取对象值

使用Object.values()获取对象的值。这是一个例子：

const user = 
  id: 1,
  name: 'John',
  age: 30,
;
const values = Object.values(user);
console.log(values); // [1, "John", 30]

9. 解构对象元素

使用对象解构可以快速创建变量并设置其值。这是一个例子：

const user = 
  id: 1,
  name: 
    first: 'John',
    last: 'Doe',
  ,
;
const 
  id,
  name:  first, last ,
 = user;
console.log(`$first $last ($id)`); // "John Doe (1)"

10. Object.entries()函数

使用Entries()函数将对象转换成键-值对数组，这是一个例子：

const user = 
  id: 1,
  name: 'John',
  age: 30,
;
const entries = Object.entries(user);
console.log(entries); // [["id", 1], ["name", "John"], ["age", 30]]

11. Async/await

使用async/await来处理异步操作。这是一个例子：

async function getUser() 
  const response = await fetch('/api/user');
  const user = await response.json();
  return user;

12. 将图片转换为Base64格式

使用Canvas API可以将图片转换成Base64格式，这是一个例子：

const img = document.createElement('img');
img.src = 'example.png';
img.onload = () => 
  const canvas = document.createElement('canvas');
  canvas.width = img.width;
  canvas.height = img.height;
  const context = canvas.getContext('2d');
  context.drawImage(img, 0, 0);
  const base64 = canvas.toDataURL('image/png');
;

13. 数组中过滤空值

使用Boolean()函数过滤数组中的空值，这是一个例子：

const array = ['apple', null, 'banana', undefined, '', 'orange'];
const filteredArray = array.filter(Boolean);
console.log(filteredArray); // ["apple", "banana", "orange"]

14. 检查对象是否为空

使用Object.keys()检查对象是否为空，这是一个例子：

const obj = ;
const isEmpty = Object.keys(obj).length === 0;
console.log(isEmpty); // true

15. 使用reduce()合并数组中的值

使用reduce()合并数组中的值，这是一个例子：

const numbers = [10, 20, 30];
const sum = numbers.reduce((total, number) => total + number, 0);
console.log(sum); // 60

16. 数组去重

使用Set()和Array.from()方法实现数组去重，这是一个例子：

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

17. 字符串在数组中搜索

使用字符串的indexOf()方法在数组中搜索字符串，这是一个例子：

const array = ['apple', 'banana', 'orange'];
const searchString = 'banana';
const index = array.indexOf(searchString);
console.log(index); // 1

18. 使用rest参数传递变量

使用rest参数传递变量可以将函数定义更加灵活，这是一个例子：

function sum(...numbers) 
  return numbers.reduce((total, number) => total + number, 0);

console.log(sum(1, 2, 3)); // 6
console.log(sum(4, 5, 6, 7)); // 22

19. 筛选数组

使用Array.filter()方法筛选数组，这是一个例子：

const users = [
   id: 1, name: 'John' ,
   id: 2, name: 'Jane' ,
   id: 3, name: 'Bob' ,
];
const filteredUsers = users.filter((user) => user.id !== 2);
console.log(filteredUsers);
/*
[
  
    "id": 1,
    "name": "John"
  ,
  
    "id": 3,
    "name": "Bob"
  
]
*/

20. 正则表达式搜索

使用正则表达式搜索字符串，这是一个例子：

const text = 'The quick brown fox jumps over the lazy dog.';
const pattern = /q[a-z]+/g;
const matches = text.match(pattern);
console.log(matches); // ["quick"]

写出干净的 JavaScript 5 个小技巧

降低阅读负担，启发创作心智，轻松学习 JavaScript 技巧，日拱一卒，jym，冲~

1. 将数字定义为常量

我们常常会用到数字，比如以下代码：

const isOldEnough = (person) => 
  return person.getAge() >= 100;

谁知道这个 100 具体指的是什么？我们通常需要结合函数上下文再推测、判断这个 100 它可能是具体代表一个什么值。

如果这样的数字有多个的话，一定会很容易造成更大的困惑。

写出干净的 JavaScript：将数字定义为常量

即可清晰的解决这个问题：

const AGE_REQUIREMENT = 100;
const isOldEnough = (person) => 
  return person.getAge() >= AGE_REQUIREMENT;

现在，我们通过声明常量的名字，即可立马读懂 100 是“年龄要求”的意思。修改时也能迅速定位、一处修改、多处生效。

2. 避免将布尔值作为函数参数

将布尔值作为参数传入函数中是一种常见的容易造成代码混乱的写法。

const validateCreature = (creature, isHuman) => 
  if (isHuman) 
    // ...
   else 
    // ...
  

布尔值作为参数传入函数不能表示出明确的意义，只能告诉读者，这个函数将会有判断发生，产生两种或多种情况。

然而，我们提倡函数的单一职责原则，所以：

写出干净的 JavaScript：避免将布尔值作为函数参数

const validatePerson = (person) => 
  // ...

const validateCreature = (creature) => 
  // ...

3. 将多个条件封装

我们经常会写出这样的代码：

if (
  person.getAge() > 30 &&
  person.getName() === "simon" &&
  person.getOrigin() === "sweden"
) 
  // ...

不是不行，只是隔久了会一下子看不懂这些判断到底是要干嘛的，所以建议把这些条件用变量或函数进行封装。

写出干净的 JavaScript：将多个条件封装

const isSimon =
  person.getAge() > 30 &&
  person.getName() === "simon" &&
  person.getOrigin() === "sweden";
if (isSimon) 
  // ...

或者

const isSimon = (person) => 
  return (
    person.getAge() > 30 &&
    person.getName() === "simon" &&
    person.getOrigin() === "sweden"
  );
;
if (isSimon(person)) 
  // ...

噢，原来这些条件是为了判断这个人是不是 Simon ~

这样的代码是声明式风格的代码，更易读。

4. 避免否定的判断条件

条件判断中，使用否定判断，会额外造成一种思考负担。

比如下面的代码，条件 ​​!isCreatureNotHuman(creature)​​ 双重否定，读起来就会觉得有点费劲。

const isCreatureNotHuman = (creature) => 
  // ...


if (!isCreatureNotHuman(creature)) 
  // ...

写出干净的 JavaScript：避免否定的判断条件

改写成以下写法则读起来更轻松，虽然这只是一个很小的技巧，但是在大量的代码逻辑中，多处去遵循这个原则，肯定会很有帮助。

很多时候读代码就是读着读着，看到一个“很烂”的写法，就忍不了了，细节会叠加，千里之堤溃于蚁穴。

const isCreatureHuman = (creature) => 
  // ...

if (isCreatureHuman(creature)) 
  // ...

5. 避免大量 if...else...

这一点，本瓜一直就有强调：