实例详解你不知道的十个 JS 小技巧

95 阅读 0 评论 63 点赞

我是靠谱客的博主清爽冷风，这篇文章主要介绍实例详解你不知道的十个 JS 小技巧，现在分享给大家，希望可以做个参考。

大厂技术高级前端 Node进阶

点击上方程序员成长指北，关注公众号

回复1，加入高级Node交流群

原文链接: https://juejin.cn/post/7021047385337888775

我是加菲猫???? ，如果你喜欢我的文章，欢迎点赞分享哦

总结了一些开发常用的 JS 小技巧，让你的代码更优雅！

1. 使用 const 定义

在开发中不要过度声明变量，尽量使用表达式和链式调用形式。然后一般能用 const 就不要用 let 。这种模式写多了之后，你会发现在项目中几乎找不到几个用 let 的地方：

复制代码

1
2
3
4
5
6
7
// bad
let result = false;
if (userInfo.age > 30) {
  result = true;
}
// good
const result = userInfo.age > 30;

在项目中很多同事都会这样写，

复制代码

1
2
3
4
5
6
7
8
handleFormChange(e) {
  let isUpload;
  if (e.target.value === 'upload') {
    isUpload = true;
  } else {
    isUpload = false;
  }
}

但实际上 == 和 === 的表达式可以直接给变量赋值：

复制代码

1
2
3
handleFormChange(e) {
  const isUpload = (e.target.value === 'upload');
}

如果要取反也很简单：

复制代码

1
2
3
handleFormChange(e) {
  const isManual = (e.target.value !== 'upload');
}

2. 有条件地向对象、数组添加属性

1) 向对象添加属性

可以使用展开运算符来有条件地向对象中添加属性：

复制代码

1
2
3
4
5
6
const condition = true;
const person = {
  id: 1,
  name: "dby",
  ...(condition && { age: 12 }),
};

如果 condition 为 true ，则 { age: 16 } 会被添加到对象中；如果 condition 为 false ，相当于展开 false ，不会对对象产生任何影响

2) 向数组添加属性

这是 CRA 中 Webpack 配置的源码：

复制代码

1
2
3
4
5
6
7
8
9
module.exports = {
  plugins: [
    new HtmlWebpackPlugin(),
    isEnvProduction &&
      new MiniCssExtractPlugin(),
    useTypeScript &&
      new ForkTsCheckerWebpackPlugin(),
  ].filter(Boolean),
}

上面代码中，只有 isEnvProduction 为 true 才会添加 MiniCssExtractPlugin 插件；当 isEnvProduction 为 false 则会添加 false 到数组中，所以最后使用了 filter 过滤

上面这样写，逻辑上是没有问题，但是在 TS 项目中使用的时候，类型推断会有点问题。因为存在一种布尔值添加到数组的中间状态，而 TS 只能静态分析，不能执行代码。

试问下面 arr 数组的类型：

复制代码

1
2
const arr = ['111', true && '222'].filter(Boolean); // string[]
const arr = ['111', false && '222'].filter(Boolean); // (string | boolean)[]

下面是一种类型安全的做法：

复制代码

1
2
3
4
5
6
7
module.exports = {
  plugins: [
    new HtmlWebpackPlugin(),
    ...(isEnvProduction ? [new MiniCssExtractPlugin()] : []),
    ...(useTypeScript ? [new ForkTsCheckerWebpackPlugin()] : []),
  ],
}

3. 数组小技巧

1) 访问数组最后一个元素

在开发中我们常常需要访问数组最后一个元素，常规的做法是这样：

复制代码

1
2
const rollbackUserList = [1, 2, 3, 4];
const lastUser = rollbackUserList[rollbackUserList.length - 1]; // 4

上面这样写逻辑上没问题，但是我们发现当数组的变量名很长的时候，整个表达式会变得非常长，影响代码可读性。一种方法是把上述逻辑封装一下：

复制代码

1
2
3
// 将获取数组最后一个元素的逻辑封装为一个函数
const getLastEle = (arr) => arr[arr.length - 1];
const lastUser = getLastEle(rollbackUserList); // 4

可以看到这样语义性就比较好了。还有一种是利用 Array.prototype.slice 方法，通过传递负索引，从右往左定位到最后一个元素：

复制代码

1
2
3
const lastUser = rollbackUserList.slice(-1)[0]; // 4
// 或者使用解构赋值
const [lastUser] = rollbackUserList.slice(-1); // 4

注意 slice 方法返回的是一个 新数组 而不是元素本身，需要手动从数组中取出元素，看起来不是很优雅。实际上 ES2022 专门提供了一个 Array.prototype.at 方法，用于根据给定索引获取数组元素：

复制代码

1
const lastUser = rollbackUserList.at(-1); // 4

at 方法传递索引为正时从左往右定位（这与直接通过下标访问的作用一致），索引为负时从右往左定位。在访问数组最后一个元素的场景中非常好用。从 Chrome 92 开始已经支持 at 方法，core-js 也提供了 polyfill。

developer.mozilla.org/en-US/docs/…^[1]

2) 异步函数组合（异步串行调用）

我们知道，在函数式编程中有一个函数组合 compose 的技巧，可以把多个函数组合为一个函数，创建一个从右到左的数据流，右边函数执行的结果作为参数传入左边。例如：

复制代码

1
2
3
4
5
6
7
8
/**
 * 给定参数：[A, B, C, D]
 * 调用顺序：A(B(C(D())))
 */
const compose = (middlewares) => (initialValue) => middlewares.reduceRight(
    (accu, cur) => cur(accu),
    initialValue
);

从上面的代码可以看出 compose 是不能用于 Promise，因为 compose 需要将上一次调用的返回值，作为参数传入下一次调用，但 Promise 本身是一个包装过的数据结构，只有通过 then 方法才能拿到返回值。所以如果是异步的情况，我们通常会把 reduce 改成普通 FOR 循环。

如果遇到异步的情况，例如想做一系列串行的请求，是否可以更优雅呢？本人在 Vite 源码中找到了答案，在 Vite 源码中有这么一段：

复制代码

1
2
3
4
await postBuildHooks.reduce(
  (queue, hook) => queue.then(() => hook(build as any)),
  Promise.resolve();
)

参考： github.com/vitejs/vite…^[2]

可以看出，这里对 reducer 函数进行了包装，将 hook 的执行放到 then 方法回调中，这样就可以保证调用顺序。按照这个思路，我们对上面 compose 方法稍微改动一下，就可以得到一个 asyncCompose：

复制代码

1
2
3
4
5
6
7
8
9
/**
 * 给定参数：[A, B, C, D]
 * 调用顺序：Promise.resolve().then(res => D(res)).then(res => C(res)).then(res => B(res)).then(res => A(res))
 * 以上只是为了让大家看清楚，简化之后如下：Promise.resolve().then(D).then(C).then(B).then(A)
 */
const asyncCompose = (middlewares) => (initialValue) => middlewares.reduceRight(
    (queue, hook) => queue.then(res => hook(res)),
    Promise.resolve(initialValue)
);

4. 解构赋值

解构赋值很方便，项目中经常会用到，可以分为以下两个场景：

对象/数组的解构；
函数参数解构；

这里介绍四种常用技巧。

1) 深度解构

大部分时候我们只会解构一层，但实际上解构赋值是可以深度解构的：

复制代码

1
2
3
4
5
6
7
8
let obj = {
  name: "dby",
  a: {
    b: 1
  }
}
const { a: { b } } = obj;
console.log(b); // 1

2) 解构时使用别名

假如后端返回的对象键名不是我们想要的，可以使用别名：

复制代码

1
2
3
4
5
6
7
8
9
10
const obj = {
  // 这个键名太长了，我们希望把它换掉
  aaa_bbb_ccc: {
    name: "dby",
    age: 12,
    sex: true
  }
}
const { aaa_bbb_ccc: user } = obj;
console.log(user); // { name: "dby", age: 12, sex: true }

3) 解构时使用默认值

对象的解构可以使用默认值，默认值生效的条件是，对象的属性值严格等于 undefined ：

复制代码

1
2
3
4
fetchUserInfo()
  .then(({ aaa_bbb_ccc: user = {} }) => {
    // ...
  })

以上三个特性可以结合使用

4) 使用短路避免报错

解构赋值虽然好用，但是要注意解构的对象不能为 undefined 、null ，否则会报错，故要给被解构的对象一个默认值：

复制代码

1
const {a,b,c,d,e} = obj || {};

5. 展开运算符

使用展开运算符合并两个数组或者两个对象：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
const a = [1,2,3];
const b = [1,5,6];
// bad
const c = a.concat(b);
// good
const c = [...new Set([...a,...b])];
const obj1 = { a:1 };
const obj2 = { b:1 };
// bad
const obj = Object.assign({}, obj1, obj2);
// good
const obj = { ...obj1, ...obj2 };

这里要注意一个问题，对象和数组合并虽然看上去都是 ... ，但是实际上是有区别的。

ES2015 扩展运算符只规定了在数组和函数参数中使用，但并没有规定可以在对象中使用，并且是基于 for...of 的，因此被展开的只能是数组、字符串、Set、Map 等可迭代对象，假如将普通对象展开到数组就会报错。

对象中的 ... 实际上是 ES2018 中的对象展开语法，相当于 Object.assign ：

babeljs.io/docs/en/bab…^[3]

6. 检查属性是否存在对象中

可以使用 in 关键字检查对象中是否存在某个属性：

复制代码

1
2
3
const person = { name: "dby", salary: 1000 };
console.log('salary' in person); // true
console.log('age' in person); // false

但是 in 关键字其实并不安全，会把原型上的属性也包括进去，例如：

复制代码

1
2
"hasOwnProperty" in {}; // true
"toString" in {}; // true

所以推荐使用下面的方法进行判断：

复制代码

1
Object.prototype.hasOwnProperty.call(person, "salary"); // true

不过上面这样的问题就是太长了，每次使用都要这样写很麻烦。ECMA 有一个新的提案 Object.hasOwn() ，相当于 Object.prototype.hasOwnProperty.call() 的别名：

复制代码

1
Object.hasOwn(person, "salary"); // true

developer.mozilla.org/en-US/docs/…^[4]

需要注意这个语法存在兼容性问题（Chrome > 92），不过只要正确配置 polyfill 就可以放心使用。

7. 对象的遍历

项目中很多同事都会这样写：

复制代码

1
2
3
4
5
for (let key in obj) {
  if (Object.prototype.hasOwnProperty.call(obj, key)) {
    // ...
  }
}

吐槽：用 Object.keys 或者 Object.entries 转成数组就可以用数组方法遍历了，而且遍历的是自身属性，不会遍历到原型上。

复制代码

1
2
3
4
5
6
Object.keys(obj).forEach(key => {
  // ...
})
Object.entries(obj).forEach(([key, val]) => {
  // ...
})

举个例子，将对象的 key、value 拼接为查询字符串：

复制代码

1
2
3
4
5
6
7
const _stringify = (obj) => Object.entries(obj).map(([key, val]) => `${key}=${val}`).join("&");
_stringify({
    a: 1,
    b: 2,
    c: "2333"
});
// 'a=1&b=2&c=2333'

反驳：有时候不想遍历整个对象，数组方法不能用 break 终止循环呀。

吐槽：看来你对数组方法掌握还是不够彻底，使用 find 方法找到符合条件的项就不会继续遍历。

复制代码

1
Object.keys(obj).find(key => key === "name");

总结：在开发中尽量不要写 for 循环，无论数组和对象。对象就通过 Object.keys 、Object.values 、Object.entries 转为数组进行遍历。这样可以写成 JS 表达式，充分利用函数式编程。

8. 使用 includes 简化 if 判断

在项目中经常看到这样的代码：

复制代码

1
2
3
if (a === 1 || a === 2 || a === 3 || a === 4) {
    // ...
}

可以使用 includes 简化代码：

复制代码

1
2
3
if ([1, 2, 3, 4].includes(a)) {
    // ...
}

9. Promise 三点总结

1) async/await 优雅异常处理

在 async 函数中，只要其中某个 Promise 报错，整个 async 函数的执行就中断了，因此异常处理非常重要。但实际上 async 函数的异常处理非常麻烦，很多同事都不愿意写。有没有一种简单的方法呢？看到一个 await-to-js 的 npm 包，可以优雅处理 async 函数的异常，不需要手动添加 try...catch 捕获异常：

复制代码

1
2
3
4
5
import to from 'await-to-js';
async function asyncFunctionWithThrow() {
  const [err, user] = await to(UserModel.findById(1));
  if (!user) throw new Error('User not found');
}

www.npmjs.com/package/awa…^[5]

实际上就是在 await 前面返回的 Promise 封装了一层，提前处理异常。源码非常简单，本人自己也实现了下：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function to(awaited) {
  // 不管是不是 Promise 一律转为 Promise
  const p = Promise.resolve(awaited);
  // await-to-js 采用 then...catch 的用法
  // 但实际上 then 方法第一个回调函数里面并不包含会抛出异常的代码
  // 因此使用 then 方法第二个回调函数捕获异常，不需要额外的 catch
  return p.then(
    res => {
      return [null, res];
    },
    err => {
      return [err, undefined];
    }
  )
}

2) Promise 作为状态机

看到有同事写过这样的代码：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function validateUserInfo(user) {
  if (!userList.find(({ id }) => id === user.id)) {
    return {
      code: -1,
      message: "用户未注册"
    }
  }
  if (
    !userList.find(
      ({ username, password }) =>
        username === user.username &&
        password === user.password
    )
  ) {
    return {
      code: -1,
      message: "用户名或密码错误"
    }
  }
  return {
    code: 0,
    message: "登录成功"
  }
}

观察发现这边其实就是两个状态，然后还需要一个字段提示操作结果。这种情况下我们可以使用 Promise 。有人说为啥咧，明明没有异步逻辑啊。我们知道，Promise 其实就是一个状态机，即使不需要处理异步逻辑，我们也可以使用状态机的特性：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function validateUserInfo(user) {
  if (!userList.find(({ id }) => id === user.id)) {
    return Promise.reject("用户未注册");
  }
  if (
    !userList.find(
      ({ username, password }) =>
        username === user.username &&
        password === user.password
    )
  ) {
    return Promise.reject("用户名或密码错误");
  }
  return Promise.resolve("登录成功");
}
// 使用如下
validateUserInfo(userInfo)
  .then(res => {
    message.success(res);
  })
  .catch(err => {
    message.error(err);
  })

明显这样代码就变得非常优雅了，但其实还可以更优雅。我们知道 async 函数返回值是一个 Promise 实例，因此下面两个函数是等价的：

复制代码

1
2
3
4
// 普通函数返回一个 Promsie.resolve 包裹的值
const request = (x) => Promise.resolve(x);
// async 函数返回一个值
const request = async (x) => x;

既然最后返回一个 Promise ，为何不直接在函数前面加 async 修饰符呢。这样成功的结果只要直接返回就行，不用 Promise.resolve 包裹：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
async function validateUserInfo(user) {
  if (!userList.find(({ id }) => id === user.id)) {
    return Promise.reject("用户未注册");
  }
  if (
    !userList.find(
      ({ username, password }) =>
        username === user.username &&
        password === user.password
    )
  ) {
    return Promise.reject("用户名或密码错误");
  }
  return "登录成功";
}

对 async 函数不熟悉的同学，可以参考阮一峰 ES6 教程^[6]

更进一步，由于在 Promise 内部抛出异常等同于被 reject ，因此我们可以使用 throw 语句替代 Promise.reject() ：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
async function validateUserInfo(user) {
  if (!userList.find(({ id }) => id === user.id)) {
    throw "用户未注册";
  }
  if (
    !userList.find(
      ({ username, password }) =>
        username === user.username &&
        password === user.password
    )
  ) {
    throw "用户名或密码错误";
  }
  return "登录成功";
}

throw 语句的用法可以参考 MDN 文档^[7]

3) Promise 两点使用误区

不建议在 Promise 里面使用 try...catch，这样即使 Promise 内部报错，状态仍然是 fullfilled，会进入 then 方法回调，不会进入 catch 方法回调。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function request() {
  return new Promise((resolve, reject) => {
    try {
      // ...
      resolve("ok");
    } catch(e) {
      console.log(e);
    }
  })
}
request()
  .then(res => {
    console.log("请求结果：", res);
  })
  .catch(err => {
    // 由于在 Promise 中使用了 try...catch
    // 因此即使 Promise 内部报错，也不会被 catch 捕捉到
    console.log(err);
  })

Promise 内部的异常，老老实实往外抛就行，让 catch 方法来处理，符合单一职责原则

不建议在 async 函数中，既不使用 await，也不使用 return，这样就算内部的 Promise reject 也无法捕捉到：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
async function handleFetchUser(userList) {
  // 这里既没有使用 await，也没有使用 return
  Promise.all(userList.map(u => request(u)));
}
handleFetchUser(userList)
  .then(res => {
    // 由于没有返回值，这里拿到的是 undefined
    console.log(res);
  })
  .catch(err => {
    // 即使 handleFetchUser 内部的 Promise reject
    // async 函数返回的 Promise 仍然是 fullfilled
    // 此时仍然会进入 then 方法回调，无法被 catch 捕捉到
    console.log(err);
  })

如果确实有这种需求，建议不要使用 async 函数，直接改用普通函数即可

10. 字符串小技巧

1) 字符串不满两位补零

这个需求在开发中挺常见。例如，调用 Date api 获取到日期可能只有一位：

复制代码

1
let date = new Date().getDate(); // 3

常规做法:

复制代码

1
2
3
if (data.toString().length == 1) {
    date = `0${date}`；
}

使用 String.prototype.slice ：

复制代码

1
2
// 不管几位，都在前面拼接一个 0 ，然后截取最后两位
date = `0${date}`.slice(-2);

使用 String.prototype.padStart ：

复制代码

1
2
// 当字符串长度小于第一个参数值，就在前面补第二个参数
date = `${date}`.padStart(2, 0);

2) 千分位分隔符

实现如下的需求：

从后往前每三个数字前加一个逗号
开头不能加逗号

这样看起来非常符合 (?=p) 的规律，p 可以表示每三个数字，要添加逗号所处的位置正好是 (?=p) 匹配出来的位置。

第一步，先尝试把最后一个逗号弄出来：

复制代码

1
2
"300000000".replace(/(?=d{3}$)/, ",")
// '300000,000'

第二步，把所有逗号都弄出来：

复制代码

1
2
"300000000".replace(/(?=(d{3})+$)/g, ",")
// ',300,000,000'

使用括号把一个 p 模式变成一个整体

第三步，去掉首位的逗号：

复制代码

1
2
"300000000".replace(/(?!^)(?=(d{3})+$)/g, ",")
// '300,000,000'

3) 借用数组拼接字符串

很多同学都知道 模板字符串 可以很方便地进行字符串拼接，但是需要拼接较多参数的时候，这样就显得比较麻烦：

复制代码

1
2
3
4
5
6
7
8
// HH -> 23
// mm -> 58
// ss -> 32
const timeString = `${HH}:${mm}:${ss}`;
// scheme -> https://
// host -> 10.3.71.108
// port -> :8080
const URLString = `${scheme}${host}${port}`

实际上，拼接字符串，除了使用模板字符串的方式，还可以使用数组：

复制代码

1
2
const timeString = [HH, mm, ss].join(":");
const URLString = [scheme, host, port].join("");

顺便一提，本人之前维护过一个 jQuery 项目，就使用这种方式拼接 html 模板：

复制代码

1
2
const dataSource = ["dby", "dm", "233"];
const template = dataSource.map(name => `<div>${name}</div>`).join("");

4) 判断字符串前缀、后缀

判断字符串前缀、后缀不要一言不合就使用正则表达式：

复制代码

1
2
3
4
const url = "https://bili98.cn";
const isHTTPS = /^https:///.test(url); // true
const fileName = "main.py";
const isPythonCode = /.py$/.test(fileName); // true

推荐使用 String.prototype.startsWith 和 String.prototype.endsWith，语义性更好：

复制代码

1
2
3
4
const url = "https://bili98.cn";
const isHTTPS = url.startsWith("https://") // true
const fileName = "main.py";
const isPythonCode = fileName.endsWith(".py"); // true

参考

我的代码简洁之道^[8]

你会用ES6，那倒是用啊！^[9]

有个开发者总结这 15 优雅的 JavaScript 个技巧^[10]

复制代码

1
2
3
4
5
Node 社群
我组建了一个氛围特别好的 Node.js 社群，里面有很多 Node.js小伙伴，如果你对Node.js学习感兴趣的话（后续有计划也可以），我们可以一起进行Node.js相关的交流、学习、共建。下方加 考拉 好友回复「Node」即可。
如果你觉得这篇内容对你有帮助，我想请你帮我2个小忙：
1. 点个「在看」，让更多人也能看到这篇文章2. 订阅官方博客 www.inode.club 让我们一起成长
点赞和在看就是最大的支持

最后

以上就是清爽冷风最近收集整理的关于实例详解你不知道的十个 JS 小技巧的全部内容，更多相关实例详解你不知道的十个内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

本文分类：字符串
浏览次数：95 次浏览
发布日期：2024-09-07 09:00:02
本文链接：https://www.kaopuke.com/article/k-p-k_13_u_7_o_14_f3_14_jg0.html

实例详解你不知道的十个 JS 小技巧

1. 使用 const 定义

2. 有条件地向对象、数组添加属性

1) 向对象添加属性

2) 向数组添加属性

3. 数组小技巧

1) 访问数组最后一个元素

2) 异步函数组合（异步串行调用）

4. 解构赋值

1) 深度解构

2) 解构时使用别名

3) 解构时使用默认值

4) 使用短路避免报错

5. 展开运算符

6. 检查属性是否存在对象中

7. 对象的遍历

8. 使用 includes 简化 if 判断

9. Promise 三点总结

1) async/await 优雅异常处理

2) Promise 作为状态机

3) Promise 两点使用误区

10. 字符串小技巧

1) 字符串不满两位补零

2) 千分位分隔符

3) 借用数组拼接字符串

4) 判断字符串前缀、后缀

参考

最后

评论列表共有 0 条评论

发表评论取消回复

实例详解你不知道的十个 JS 小技巧

1. 使用 const 定义

2. 有条件地向对象、数组添加属性

1) 向对象添加属性

2) 向数组添加属性

3. 数组小技巧

1) 访问数组最后一个元素

2) 异步函数组合（异步串行调用）

4. 解构赋值

1) 深度解构

2) 解构时使用别名

3) 解构时使用默认值

4) 使用短路避免报错

5. 展开运算符

6. 检查属性是否存在对象中

7. 对象的遍历

8. 使用 includes 简化 if 判断

9. Promise 三点总结

1) async/await 优雅异常处理

2) Promise 作为状态机

3) Promise 两点使用误区

10. 字符串小技巧

1) 字符串不满两位补零

2) 千分位分隔符

3) 借用数组拼接字符串

4) 判断字符串前缀、后缀

参考

最后

相关文章

评论列表共有 0 条评论

发表评论 取消回复

微信扫一扫：分享

发表评论取消回复