在本文中，我们将介绍八种不同的技术来帮助您编写更简洁的 JavaScript 代码。
现在让我们讨论每种技术，一次一个。
纯函数是在给定相同输入的情况下始终返回相同输出的函数。除了提供的输入之外，它不依赖于任何外部变量，也不影响/更改任何外部变量。拥有纯函数使测试变得更加容易，因为它们使测试变得超级容易，因为您可以随时存根/模拟输入并测试您的预期值。让我们看看下面的例子
复制
let name = "Yu DongSu";const splitName = () => { name = name.split(' ');
}name = splitName();console.log(name); // outputs [ 'Yu', 'DongSu' ]
1.
2.
3.
4.
5.
6.
虽然上面的代码看起来很合适。不是开玩笑。这是因为该splitName函数依赖于一个名为的外部变量name，如果其他人开始更改此变量，该函数将splitName开始提供不同的输出。使它成为一个非纯函数，因为我们仍然会调用splitName()它，但输出会有所不同。
让我们把它改成一个纯函数，看看它是什么样子的：
复制
let name = "Yu DongSu";const splitName = (nameString) => { return nameString.split(' ');
}name = splitName(name);console.log(name); // outputs [ 'Yu', 'DongSu' ]
1.
2.
3.
4.
5.
6.
通过上述更改，splitName现在是一个纯函数，因为：
它仅依赖于输入(nameString输入)。
它不会更改/重新分配任何外部变量。
使用函数时，我们经常使用位置参数，这些参数必须在函数声明中声明时提供。例如，在 call中，如果不提供and arithmaticOp(num1, num2, operator)，我们就无法提供operator参数。虽然这适用于这个例子，但对于许多功能来说，这会成为一个问题。考虑以下示例：
复制
const createButton = (title, color, disabled, padding, margin, border, shadow) => { console.log(title, color, disabled, padding, margin, border, shadow)
}
1.
2.
3.
查看上面的代码，您已经可以看到，如果我们想在调用createButton+ 时将任何参数设为可选(使用默认值)，那将是一场灾难，可能看起来像这样：
复制
createButton('Sudongyu er', undefined /* optional color */, true ,'2px....', undefined /* optional margin*/);
1.
你可以看到上面的语句看起来一点也不干净。此外，从函数调用语句中很难看出哪个参数对应于函数的哪个参数。所以这是我们可以遵循的做法：
如果我们有 2 个或更少的参数，我们可以将它们保留为位置参数
否则，我们提供一个带有键值对的对象
让我们在上面的例子中使用这个技术，看看它是什么样子的：
复制
const createButton = ({title, color, disabled, padding, margin, border, shadow}) => { console.log(title, color, disabled, padding, margin, border, shadow)
}createButton({ title: 'Sudongyu er', disabled: true, shadow: '2px....'});
1.
2.
3.
4.
5.
6.
7.
8.
9.
请注意，调用createButton函数的语句现在更简洁了。我们可以很容易地看到键值对中的哪个值对应于函数的参数。耶耶！
考虑以下 javascript 示例，其中我们从对象中获取一些属性并分配给它们的各个变量：
复制
const user = { name: 'Sudongyu', email: 'hi@xxx', designation: 'Software Architect', loves: 'The Code'}const name = user.name;const email = user.email;const loves = user.loves;
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
在上面的例子中，多次使用这个user.*符号是非常令人恶心的。这就是对象解构的用武之地。我们可以使用对象解构将上面的示例更改如下：
复制
const user = { name: 'Sudongyu', email: 'hi@xxx', designation: 'Software Architect', loves: 'The Code'}const {name, email, loves} = user;
1.
2.
3.
4.
5.
6.
7.
8.
看！好多了。对?让我们考虑另一个例子：
复制
const getDetails = () => { return ['xxx', 'sudongyu', 'Some Street', 'Some City', 'Some Zip', 'Some Country'];
}const details = getDetails();const uName = details[0];const uEmail = details[1];const uAddress = `${details[2]}, ${details[3]}, ${details[4]}, ${details[5]}`;const uFirstName = uName.split(' ')[0];const uLastName = uName.split(' ')[1];
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
啊。我什至讨厌编写上述示例的代码。虽然不得不这样做。您可以看到代码看起来非常怪异且难以阅读。我们可以使用 Array Destructuring 将其写得更简洁，如下所示：
复制
const getDetails = () => { return ['xxx', 'sudongyu', 'Some Street', 'Some City', 'Some Zip', 'Some Country'];
}const [uName, uEmail, ...uAddressArr] = getDetails();const uAddress = uAddressArr.join(', ');const [uFirstName, uLastName] = uName.split('');console.log({ uFirstName, uLastName, uEmail, uAddress});
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
你可以看到这有多干净！
复制
/** * 阿巴阿巴 * * * * * */setInterval(() => { // do something}, 86400000);// WHAT IS THIS 86400000 ??? 🤔
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
看代码的人可能不知道这个数字代表什么，它是如何计算的，以及它背后的业务逻辑是什么。我们可以创建一个常量，而不是硬编码这个值，如下所示：
复制
const DAY_IN_MILLISECONDS = 3600 * 24 * 1000; // 86400000setInterval(() => { // do something}, DAY_IN_MILLISECONDS);// now this makes sense
1.
2.
3.
4.
5.
6.
让我们考虑另一个例子：
复制
const createUser = (name, designation, type) => { console.log({name, designation, type});
}createUser('SudongYu', 'Software Architect', '1');// WHAT IS this '1'? 🤔
1.
2.
3.
4.
5.
6.
查看调用createUser方法。阅读代码的人很难理解这'1'代表什么。即type这是什么用户。因此，我们可以创建一个我们拥有的用户类型的对象映射，而不是在这里对值进行硬编码'1'，如下所示：
复制
const USER_TYPES = { REGULAR_EMPLOYEE: '1'}const createUser = (name, designation, type) => { console.log({name, designation, type});
}createUser('Sudongyu', 'Software Architect', USER_TYPES.REGULAR_EMPLOYEE);// smoooooooth 😎
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
速记变量在需要它们的地方才有意义。就像如果你有像xand这样的位置坐标y，那是可行的。p但是，如果我们在没有上下文的情况下创建像,t之类的变量c，那么真的很难阅读、跟踪和维护这样的代码。例如看这个例子：
复制
const t = 25;let users = ['Sudongyuer', 'xxx'];users = users.map((user) => { /** * * * * * * * * * * * * * * * * * * * * * * * * */
return {...user,tax: user.salary * t / 100 // WHAT IS `t` again? 🤔
}
})
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
上面的例子表明，现在开发人员/读者必须一直向上滚动或转到定义来尝试理解这个变量是什么。因此是不干净的代码。这也称为对变量进行思维导图，其中只有作者知道它们的含义。因此，我们可以给它一个适当的名称，而不是简写变量名称，如下所示：
复制
const taxFactor = 25;let users = ['Sudongyuer', 'xxx'];users = users.map((user) => { // some code
return {...user,tax: user.salary * taxFactor / 100
}
})
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
现在这更有意义了。
在某些情况下，您可能希望从另一个对象创建一个新对象，如果源对象没有它们，则提供一些默认值。考虑以下示例：
复制
const createButton = ({title, color, disabled, padding}) => { const button = {}; button.color = color || '#333'; button.disabled = disabled || false; button.title = title || ''; button.padding = padding || 0; return button;
}const buttonConfig = { title: 'Click me!', disabled: true}const newButton = createButton(buttonConfig);console.log('newButton', newButton)
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
Object.assign()如果源对象提供了默认属性，我们可以使用如下方式覆盖默认属性，而不是做所有这些：
复制
const createButton = (config) => { return {...{ color: '#dcdcdc', disabled: false, title: '', padding: 0},...config
};
}const buttonConfig = { title: 'Click me!', disabled: true}const newButton = createButton(buttonConfig);console.log('newButton', newButton)
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
如果我们知道类/对象的用户将一起使用多个函数，则方法链接是一种很有用的技术。您可能已经在诸如 moment.js 之类的库中看到了这一点。让我们看一个例子：
复制
class Player { constructor (name, score, position) {this.position = position;this.score = score;this.name = name;
} setName(name) {this.name = name;
} setPosition(position) {this.position = position;
} setScore(score) {this.score = score;
}
}const player = new Player();player.setScore(0);player.setName('Sudongyuer');player..setPosition([2, 0]);console.log(player)
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
在上面的代码中，您可以看到我们需要为播放器一起调用一堆函数。如果您的对象/类是这种情况，请使用方法链接。您需要做的就是从要链接的函数中返回对象的实例。上面的例子可以修改如下来实现：
复制
class Player { constructor (name, score, position) {this.position = position;this.score = score;this.name = name;
} setName(name) {this.name = name;return this; // <-- THIS
} setPosition(position) {this.position = position;return this; // <-- THIS
} setScore(score) {this.score = score;return this; // <-- THIS
}
}const player = new Player();player.setScore(0).setName('Sudongyuer').setPosition([2, 0]);// SUPER COOL 😎console.log(player)
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
承诺让我们的生活更轻松。几年前我们有一个叫做回调地狱的东西，这使得代码很难阅读。它看起来像这样：
图片描述
即使我正在使用具有回调的库，我也会尝试在那里添加一个包装器来保证这一点(是的，现在这是一个术语)。让我们考虑以下示例：
复制
const getSocials = (callback) => { setTimeout(() => { callback({socials: {youtube: 'xxx', twitter: 'xxx'}});
}, 1500);
}const getBooks = (callback) => { setTimeout(() => {callback({books: ['React Cookbook']});
}, 1500);
}const getDesignation = (callback) => { setTimeout(() => {callback({designation: 'Software Architect'});
}, 1500);
}const getUser = (callback) => { setTimeout(() => {callback({user: 'Sudongyuer'});
}, 1500);
} getUser(({user}) => {console.log('user retrieved', user)getDesignation(({designation}) => { console.log('designation retrieved', designation) getBooks(({books}) => {console.log('books retrieved', books)getSocials(({socials}) => { console.log('socials retrieved', socials)
})
})
})
})
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
上述代码中的所有函数都是异步的，它们会在 1.5 秒后发回数据。现在，如果涉及 15 个不同的功能，想象一下它会是什么样子。可能就像我在上面分享的图像😅。为了更好的可读性，我们可以promisify我们的函数并使用promises，而不是这个回调地狱：
复制
const getSocials = () => { return new Promise(resolve => {setTimeout(() => { resolve({socials: {youtube: 'xxx', twitter: 'xxx'}});
}, 1500);
})
}const getBooks = () => { return new Promise(resolve => {setTimeout(() => { resolve({books: ['React Cookbook']});
}, 1500);
})
}const getDesignation = () => { return new Promise(resolve => {setTimeout(() => { resolve({designation: 'Software Architect'});
}, 1500);
})
}const getUser = () => { return new Promise(resolve => {setTimeout(() => { resolve({user: 'Sudongyuer'});
}, 1500);
})
} getUser()
.then(({user}) => { console.log('user retrieved', user); return getDesignation();
})
.then(({designation}) => { console.log('designation retrieved', designation) return getBooks();
})
.then(({books}) => { console.log('books retrieved', books); return getSocials();
})
.then(({socials}) => { console.log('socials retrieved', socials)
})
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
您可以看到代码现在已经非常可读，因为所有语句都缩进并显示了在每个步骤.then()中检索到的数据。.then()我们可以很容易地看到使用这种语法的步骤，因为每次.then()调用都会返回下一个函数调用及其承诺。
现在我们可以把它提升一个档次，让我们的代码更具可读性。如何?通过使用async await. 我们将修改我们的代码如下来实现：
复制
const getSocials = () => { return new Promise(resolve => {setTimeout(() => { resolve({socials: {youtube: 'xxx', twitter: 'xxx'}});
}, 1500);
})
}const getBooks = () => { return new Promise(resolve => {setTimeout(() => { resolve({books: ['React Cookbook']});
}, 1500);
})
}const getDesignation = () => { return new Promise(resolve => {setTimeout(() => { resolve({designation: 'Software Architect'});
}, 1500);
})
}const getUser = () => { return new Promise(resolve => {setTimeout(() => { resolve({user: 'Sudongyuer'});
}, 1500);
})
}const performTasks = async () => { const {user} = await getUser(); console.log('user retrieved', user); const {designation} = await getDesignation(); console.log('designation retrieved', designation); const {books} = await getBooks(); console.log('books retrieved', books); const {socials} = await getSocials(); console.log('socials retrieved', socials);
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
请注意，我们将代码包装在performTasks()函数中，这是一个async函数，您可以看到async关键字的用法。在内部，我们使用await关键字进行每个函数调用，这基本上会在执行下一行代码之前等待函数的承诺得到解决。使用这种语法，我们的代码看起来好像都是同步的，但实际上是异步的。而且我们的代码更干净！