1. 声明变量
在函数的开头声明变量赋值是一种很好的做法。在同时声明多个变量时,这种速记方法可以为您节省大量时间和空间。
普通的写法
let x;
let y;
let z = 3;
简化的写法
let x, y, z=3;
2. 使用三元运算符
当您开始使用三元条件而不是使用if…else
语句时,您的生活会变得更轻松。
普通的写法
const age = 26;
let eligibility;
if(age > 18){
eligibility = "Allowed";
}
else{
eligibility = "Not Allowed";
}
简化的写法
let eligibility = (age > 18) ? "Allowed" : "Not Allowed";
你也可以if
像这样嵌套你的语句:
let eligibility = age > 10 ? "greater than 10" : (age < 5 ? "less than 5" : "between 5 and 10");
3. JavaScript For 循环
如果您想要纯 JavaScript 并且不想依赖诸如 jQuery 或 lodash 之类的外部库,那么这个小技巧非常有用。
普通的写法
const fruits = ['mango', 'peach', 'banana'];
for (let i = 0; i < fruits.length; i++)
简化的写法
for (let fruit of fruits)
如果您只想访问索引,请执行以下操作:
for (let index in fruits)
如果您想访问文字对象中的键,这也适用:
const obj = {continent: 'Africa', country: 'Kenya', city: 'Nairobi'}
for (let key in obj)
console.log(key) // output: continent, country, city
Array.forEach 的简写:
function logArrayElements(element, index, array) {
console.log("a[" + index + "] = " + element);
}
[5, 7, 2].forEach(logArrayElements);
// a[0] = 5
// a[1] = 7
// a[2] = 2
4. 数组查找
如果你曾经被要求用纯 JavaScript 编写一个 find 函数,你可能会使用for
循环。在 ES6 中,find()
引入了一个名为的新数组函数。
普通的写法
const pets = [
{ type: 'Dog', name: 'Max'},
{ type: 'Cat', name: 'Karl'},
{ type: 'Dog', name: 'Tommy'},
]
function findDog(name) {
for(let i = 0; i<pets.length; ++i) {
if(pets[i].type === 'Dog' && pets[i].name === name) {
return pets[i];
}
}
}
简化的写法
pet = pets.find(pet => pet.type ==='Dog' && pet.name === 'Tommy');
console.log(pet); // { type: 'Dog', name: 'Tommy' }
5.if的使用
这可能是微不足道的,但值得一提。在进行“if
检查”时,有时可以省略赋值运算符
普通的写法
if (isLovely === true)
简化的写法
if (isLovely)
另外,请注意,这两个示例并不完全相等,因为只要isLovely
是真值,速记检查就会通过。
这是另一个例子。如果a
不等于 true,则执行某些操作。
普通的写法
let a;
if ( a !== true ) {
// do something...
}
简化的写法
let a;
if ( !a ) {
// do something...
}
奖励:格式化 JSON 代码
当您想在不使用任何第三方工具的情况下格式化 JSON 对象或 JSON 响应时。打开您的浏览器控制台并点击以下命令来格式化您的 JSON。
该stringify
方法需要三个输入。的value
,replacer
和space
。也许,你只知道价值!
接下来的两个是可选参数。这就是为什么我们没有以一般方式使用它们。要缩进我们的 JSON,我们必须使用space
参数。
console.log(JSON.stringify({name:"Rax",Age:26},null,'\t'));
6. 箭头函数
经典函数以其简单的形式易于阅读和编写,但是一旦您开始将它们嵌套在其他函数调用中,它们就会变得有点冗长和混乱。
普通的写法
function sayHi(name) {
console.log('Hello Rax', name);
}
setTimeout(function() {
console.log('Loaded')
}, 2000);
list.forEach(function(item) {
console.log(item);
});
简化的写法
sayHi = name => console.log('Hello Rax', name);
setTimeout(() => console.log('Loaded'), 2000);
list.forEach(item => console.log(item));
需要注意的是,this
箭头(类似于 Java Lambda 表达式)函数内部的值与普通函数的确定方式不同,因此这两个示例并不严格等效。
7. 多行字符串
如果您发现自己需要在代码中编写多行字符串,您可以这样编写:
普通的写法
const lorem = 'Lorem ipsum dolor sat amet, consectetur\n\t'
+ ' adipisicing elit, sed do eiusmod tempor incididunt\n\t'
+ 'ut Labore et dolore magna aliqua。Ut enim ad minim\n\t'
+ 'veniam, quis nostrud exercitation ullamco Laboris\n\t'
+ 'nisi ut aliquip ex ea commodo consequat。Duis aute\n\t'
+ 'irure dolor in reprehenderit in voluptate velit esse。\n\t'
但是有一个更简单的方法。只需使用反引号。` ...`
简化的写法
const lorem = `Lorem ipsum dolor sat amet, consectetur adipisicing elit,
sed do
eiusmod tempor incididunt ut Labore et dolore magna aliqua。Ut enim ad minim
veniam, quis nostrud exercitation ullamco Laboris nisi
ut aliquip ex ea commodo consequat。Duis aute
irure dolor in reprehenderit in voluptate velit esse。`
8. 模板文字
您不厌倦使用' + '
将多个变量连接成一个字符串吗?难道没有更简单的方法来做到这一点吗?如果您能够使用 ES6,那么您很幸运。您需要做的就是使用反引号,并将${}
变量括起来。
普通的写法
const welcome = 'You have logged in as ' + firstName + ' ' + lastName + '.'
const db = 'http://' + host + ':' + port + '/' + database;
简化的代码
const welcome = `You have logged in as ${firstName} ${lastName}`;
const db = `http://${host}:${port}/${database}`;
9. 短路评估
如果预期参数为null或undefined,则无需编写五六行代码来分配默认值,我们可以简单地使用短路逻辑运算符并仅用一行代码完成相同的事情。
普通的写法
let dbHost;
if (process.env.DB) {
dbHost = process.env.DB;
} else {
dbHost = '127.0.0.1';
}
简化的写法
const dbHost = process.env.DB || '127.0.0.1';
10:获取数组中的最后一项
如果你想从数组的末尾取元素,你可以使用slice
带有负整数的方法。
let array = [0, 1, 2, 3, 4, 5, 6, 7]
console.log(array.slice(-1));
>>>[7]
console.log(array.slice(-2));
>>>[6, 7]
console.log(array.slice(-3));
>>>[5, 6, 7]
11. 对象属性
在 JavaScript 中定义对象字面量让生活变得更轻松。ES6 提供了一种更简单的方法来为对象分配属性。如果变量名称与对象键相同,则可以利用速记符号。
普通的写法
const x = 2020, y = 2021;
const obj = { x:x, y:y };
简化的写法
const obj = { x, y };
12. 隐式回报
return 是我们经常使用的关键字,用于返回函数的最终结果。带有单个语句的箭头函数将隐式返回其计算结果(该函数必须省略大括号 ({}) 以省略 return 关键字)。
要返回多行语句(例如对象字面量),必须使用()
而不是{}
包装函数体。这确保代码被评估为单个语句。
普通的写法.
function calcCircumference(diameter) {
return Math.PI * diameter
}
简化的写法
calcCircumference = diameter => (
Math.PI * diameter;
)
13.解构赋值
如果您正在使用任何流行的 Web 框架,您很有可能会使用对象文字形式的数组或数据在组件和 API 之间传递信息。一旦数据对象到达一个组件,您就需要解包它。
普通的写法
const observable = require('mobx/observable');
const action = require('mobx/action');
const runInAction = require('mobx/runInAction');
const store = this.props.store;
const form = this.props.form;
const loading = this.props.loading;
const errors = this.props.errors;
const entity = this.props.entity;
简化的写法
import { observable, action, runInAction } from 'mobx';
const { store, form, loading, errors, entity } = this.props;
您甚至可以分配自己的变量名称:
const { store, form, loading, errors, entity:contact } = this.props;
14. 传播运算符
ES6 中引入的扩展运算符有几个用例,可以使 JavaScript 代码使用起来更加高效和有趣。它可用于替换某些数组函数。展开运算符只是一系列三个点。
普通的写法
// joining arrays
const odd = [1, 3, 5];
const nums = [2 ,4 , 6].concat(odd);
// cloning arrays
const arr = [1, 2, 3, 4];
const arr2 = arr.slice()
简化的写法
// joining arrays
const odd = [1, 3, 5 ];
const nums = [2 ,4 , 6, ...odd];
console.log(nums); // [ 2, 4, 6, 1, 3, 5 ]
// cloning arrays
const arr = [1, 2, 3, 4];
const arr2 = [...arr];
与concat()
函数不同的是,您可以使用展开运算符在另一个数组内的任意位置插入一个数组。
const odd = [1, 3, 5 ];
const nums = [2, ...odd, 4 , 6];
您还可以将扩展运算符与 ES6 解构符号结合使用:
const { a, b, ...z } = { a: 1, b: 2, c: 3, d: 4 };
console.log(a) // 1
console.log(b) // 2
console.log(z) // { c: 3, d: 4 }
15. 默认参数值
您可以使用该if
语句来定义函数参数的默认值。在 ES6 中,您可以在函数声明本身中定义默认值。
普通的写法
function volume(l, w, h) {
if (w === undefined)
w = 3;
if (h === undefined)
h = 4;
return l * w * h;
}
简化的写法
volume = (l, w = 3, h = 4 ) => (l * w * h);
volume(2) //output: 24
奖励:截断数组
如果要破坏性地从数组末尾删除值,有比使用splice()
.
例如,如果您知道原始数组的大小,则可以重新定义其长度属性,如下所示:
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;console.log(array); // Result: [0, 1, 2, 3]
这是一个特别简洁的解决方案。但是,我发现该slice()
方法的运行时间更快。如果速度是您的主要目标,请考虑使用以下内容:
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array = array.slice(0, 4);console.log(array);
// Result: [0, 1, 2, 3]
16. Object [key] 好处
你知道吗Foo.bar
也可以写成Foo['bar']
?起初,似乎没有理由让你这样写。但是,这种表示法为您提供了编写可重用代码的构建块。
考虑这个验证函数的简化示例:
function validate(values) {
if(!values.first)
return false;
if(!values.last)
return false;
return true;
}
console.log(validate({first:'Bruce',last:'Wayne'})); // true
这个函数完美地完成了它的工作。但是,请考虑一个场景,您有很多表单需要应用验证,但具有不同的字段和规则。构建一个可以在运行时配置的通用验证函数不是很好吗?
简化的写法
// object validation rules
const schema = {
first: {
required:true
},
last: {
required:true
}
}
// universal validation function
const validate = (schema, values) => {
for(field in schema) {
if(schema[field].required) {
if(!values[field]) {
return false;
}
}
}
return true;
}
console.log(validate(schema, {first:'Bruce'})); // false
console.log(validate(schema, {first:'Bruce',last:'Wayne'})); // true
现在我们有一个验证函数,我们可以在所有表单中重用,而无需为每个表单编写自定义验证函数。
17. 指数幂
它对数学指数幂函数很有用:
普通的写法
Math.pow(2,3); // 8
Math.pow(2,2); // 4
Math.pow(4,3); // 64
简化的写法
2**3 // 8
2**4 // 4
4**3 // 64
18. 将字符串转换为数字
有时您的代码会接收到字符串格式的数据,但需要以数字格式进行处理。这没什么大不了的,我们可以进行快速转换。
普通的写法
const num1 = parseInt("100");
const num2 = parseFloat("100.01");
简化的写法
const num1 = +"100"; // converts to int data type
const num2 = +"100.01"; // converts to float data type
19. Object.entries()
这是 ES8 中引入的一项功能,允许您将文字对象转换为键/值对数组。请参阅下面的示例:
const credits = { producer: 'John', director: 'Jane', assistant: 'Peter' };
const arr = Object.entries(credits);
console.log(arr);
/** Output:
[ [ 'producer', 'John' ],
[ 'director', 'Jane' ],
[ 'assistant', 'Peter' ]
]
**/
20. Object.values()
这也是 ES8 中引入的一个新特性,它执行类似于 的功能Object.entries()
,但没有关键部分:
const credits = { producer: 'John', director: 'Jane', assistant: 'Peter' };
const arr = Object.values(credits);
console.log(arr);
/** Output:
[ 'John', 'Jane', 'Peter' ]
**/
使用===
代替==
如果需要,==
(or !=
) 运算符会执行自动类型转换。的===
(或!==
)运算符将不执行任何转换。它比较值和类型,这可以被认为比==
.
[10] === 10 // is false
[10] == 10 // is true
'10' == 10 // is true
'10' === 10 // is false
[] == 0 // is true
[] === 0 // is false
'' == false // is true but true == "a" is false
'' === false // is false
另外,请注意, undefined
, null
, 0, false
, NaN
, ''
(空字符串)都是假的。
21. 按位索引
使用数组执行查找时,该indexOf()
函数用于检索您要查找的项目的位置。如果未找到该项目,-1
则返回该值。在 JavaScript 中,0
被认为是“假”,而大于或小于的数字0
被认为是“真”。因此,必须像这样编写正确的代码。
普通的写法
if(arr.indexOf(item) > -1) { // Confirm item IS found
}
if(arr.indexOf(item) === -1) { // Confirm item IS NOT found
}
简化的写法
if(~arr.indexOf(item)) { // Confirm item IS found
}
if(!~arr.indexOf(item)) { // Confirm item IS NOT found
}
该bitwise(~)
运营商将返回truthy值什么,但-1
。否定它就像做一样简单!~
。或者,我们也可以使用该includes()
函数:
if(arr.includes(item)) { // 如果项目存在则返回 true,如果不存在则返回 false
}
22. 对象属性赋值
考虑以下代码:
let fname = { firstName : 'Black' };
let lname = { lastName : 'Panther'}
您如何将它们合并为一个对象?一种方法是编写一个函数,将数据从第二个对象复制到第一个对象上。不幸的是,这可能不是您想要的——您可能需要创建一个全新的对象而不改变任何现有对象。最简单的方法是使用Object.assign
ES6 中引入的函数:
let full_names = Object.assign(fname, lname);
您还可以使用 ES8 中引入的对象销毁符号:
let full_names = {...fname, ...lname};
您可以合并的对象属性数量没有限制。如果您确实有具有相同属性名称的对象,则值将按照它们合并的顺序被覆盖。
23. Double Bitwise NOT 速记
按位运算符是您在 JavaScript 初学者教程中学到的功能之一,而且您永远无法在任何地方实现它们。同意?此外,如果您不处理二进制,谁愿意使用 1 和 0?
然而,双位非运算符有一个非常实用的用例。您可以将其用作Math.floor()
. Double Bitwise NOT 运算符的优点是它执行相同操作的速度要快得多。您可以在此处阅读有关按位运算符的更多信息。
普通的写法
Math.floor(4.9) === 4 //true
简化的写法
~~4.9 === 4 //true
24. 短路评估
将变量值分配给另一个变量时,您可能需要确保源变量不为null、undefined 或 empty。您可以编写if
带有多个条件的长语句,也可以使用短路评估。
普通的写法
if (variable1 !== null || variable1 !== undefined || variable1 !== '') {
let variable2 = variable1;
简化的写法
const variable2 = variable1 || 'new';
不相信我?自行测试(在es6console 中粘贴以下代码):
let variable1;
let variable2 = variable1 || 'bar';
console.log(variable2 === 'bar'); // prints true
variable1 = 'foo';
variable2 = variable1 || 'bar';
console.log(variable2); // prints foo
请注意,如果您设置variable1
为false
或0
,bar
则将分配该值。
25. 强制参数
默认情况下,JavaScript 会将函数参数设置undefined
为未传递值(简而言之,未分配任何值)。其他一些语言会抛出警告或错误。要强制参数分配,您可以使用if
statement 来抛出错误 if undefined
,或者您可以利用“强制参数速记”。
普通的写法
function foo(bar) {
if(bar === undefined) {
throw new Error('Missing parameter!');
}
return bar;
}
简化的写法
mandatory = () => {
throw new Error('Missing parameter!');
}
foo = (bar = mandatory()) => {
return bar;
}
交换两个变量
为了交换两个变量,我们经常使用第三个变量。但是它可以通过数组解构赋值轻松完成。
普通的写法
let x = "rakshit", y = "shah";
const temp = x;
x = y;
y = temp;
简化的写法
[x,y] = [y,x]
26. 将任何东西转换为布尔值
在开发任何代码时,您可能会遇到需要布尔值来比较或进行真/假检查的情况。这种方法在这种情况下会很有用!
const foo = '一些字符串行';
const toBool = !!foo
console.log(toBool) // 真
27. 将任何东西转换为数字
通过使用+
运算符,您可以实现它。
const foo = '522'
const toNumber = +foo
console.log(toNumber) // 522
const toNegativeNumber = -foo
console.log(toNegativeNumber) // -522
28. 将数组转换为对象
const arr = ['foo', 'bar', 1]
const obj = { ...arr }
console.log(obj) // {0: "foo", 1: "bar", 2: 1}
29.删除Array中的重复项
该Set
对象允许您存储任何类型的唯一值,无论是原始值还是对象引用。
const arr = ['a', 'b', 'c', 'b', 'd']
const newArr = [... new Set(arr)]
console.log(newArr) // ["a", "b", "c", "d"]
30.经常注释你的代码
通常,开发人员讨厌或忘记为他们开发的功能、算法或代码添加注释。显然,如果您在需要的地方发表评论,这将对您的同行有所帮助。
注释是总结代码片段目的的好方法,可以为您的开发伙伴节省自行确定它所需的时间。
如果代码没有完成它被注释完成的任务,它还允许他们捕捉可能的错误。一般来说,最好对每个函数都留下一个评论。
如果您不确定是否应该发表评论,那就去做吧!如果它太杂乱,以后可以随时删除。
当你觉得有些代码缺失或需要在未来完成时,只需添加 TODO 注释即可。