江苏龙网

  1. 主页 > 生活百科 > >

23 个超实用 JS 技巧( 二 )

JS


add = (test1 = 1, test2 = 2) => test1 + test2;
add(); //output: 3
条件查找简化如果我们要基于不同的类型调用不同的方法，可以使用多个 else if 语句或 switch，但有没有比这更好的简化技巧呢？其实是前面的 switch 简化方式一样！
// bad
if (type === "test1") {
test1();
} else if (type === "test2") {
test2();
} else if (type === "test3") {
test3();
} else if (type === "test4") {
test4();
} else {
throw new Error("Invalid value " + type);
}
// better
var types = {
test1,
test2,
test3,
test4,
};
types[type] && types[type]();
对象属性赋值let test1 = "a";
let test2 = "b";
// bad
let obj = { test1: test1, test2: test2 };
// better
let obj = { test1, test2 };
解构赋值// bad
const test1 = this.data.test1;
const test2 = this.data.test2;
const test2 = this.data.test3;
// better
const { test1, test2, test3 } = this.data;
模板字符串如果你厌倦了使用 + 将多个变量连接成一个字符串，那么这个简化技巧将让你不再头痛 。
// bad
const welcome = "Hi " + test1 + " " + test2 + ".";
// better
const welcome = `Hi ${test1} ${test2}`;
跨行字符串// bad
const data =https://www.isolves.com/it/cxkf/yy/js/2021-09-27/
"abc abc abc abc abc abcnt" + "test test,test test test testnt";
// better
const data = https://www.isolves.com/it/cxkf/yy/js/2021-09-27/`abc abc abc abc abc abc
test test,test test test test`;
indexOf 的按位操作简化在查找数组的某个值时，我们可以使用 indexOf() 方法 。但有一种更好的方法，让我们来看一下这个例子 。
// bad
if (arr.indexOf(item) > -1) {
// item found
}
if (arr.indexOf(item) === -1) {
// item not found
}
// better
if (~arr.indexOf(item)) {
// item found
}
if (!~arr.indexOf(item)) {
// item not found
}
按位 (~) 运算符将返回 true（-1 除外），反向操作只需要!~ 。另外，也可以使用 includes() 函数 。
if (arr.includes(item)) {
// true if the item found
}
字符串转成数字有一些内置的方法，例如 parseInt 和 parseFloat 可以用来将字符串转为数字 。我们还可以简单地在字符串前提供一个一元运算符 (+) 来实现这一点 。
// bad
let total = parseInt("453");
let average = parseFloat("42.6");
// better
let total = +"453";
let average = +"42.6";
顺序执行 promise如果你有一堆异步或普通函数都返回 promise，要求你一个接一个地执行，怎么办？
async function getData() {
const promises = [fetch("url1"), fetch("url2"), fetch("url3"), fetch("url4")];
for (const item of promises) {
// 打印出promise
console.log(item);
}
// better
for await (const item of promises) {
// 打印出请求的结果
console.log(item);
}
}
等待所有 promise 完成Promise.allSettled()方法接受一组 Promise 实例作为参数，包装成一个新的 Promise 实例 。只有等到所有这些参数实例都返回结果，不管是 fulfilled 还是 rejected，包装实例才会结束
有时候，我们不关心异步请求的结果，只关心所有的请求有没有结束 。这时，Promise.allSettled()方法就很有用
const promises = [fetch("index.html"), fetch("https://does-not-exist/")];
const results = await Promise.allSettled(promises);
// 过滤出成功的请求
const successfulPromises = results.filter((p) => p.status === "fulfilled");
// 过滤出失败的请求，并输出原因
const errors = results
.filter((p) => p.status === "rejected")
.map((p) => p.reason);
交换数组元素的位置// bad
const swapWay = (arr, i, j) => {
const newArr = [...arr];
let temp = newArr[i];
newArr[i] = list[j];
newArr[j] = temp;
return newArr;
};
ES6 开始，从数组中的不同位置交换值变得容易多了
// better
const swapWay = (arr, i, j) => {
const newArr = [...arr];
const [newArr[j],newArr[i]] = [newArr[i],newArr[j]];
return newArr;
};
使用变量作为对象键当你有一个字符串变量，并想将其用作对象中的键以设置一个值时可以用它
let property = "a";
const obj = {
b: "b",
};
property = "name";


推荐阅读


上一篇：excel两个合并成一个单元格-excel两个格怎么合并成一个格-

下一篇：分享几个自媒体写作套路