JavaScript 从成立之初就已经走了很长一段路,提供了许多新的功能,这些功能是专门设计来使该语言更加人性化和提升效率。以下是我最近发现的一些有趣的JavaScript 新增内容。其中一些功能已在 Node,Chrome,Firefox 和 Safari 中可用,而其他功能仍处于建议阶段。
Optional chaining (可选链)
Optional chaining 可选链使用 ?.
操作符来表示,Optional Chaining 使我们能检查一个对象上面是否存在某属性。其它一些语言有类似的特性。例如 C# 有 Null Conditional 操作符。而 JavaScript 的 Optional chaining 在需要深度访问嵌套对象属性时就特别有用。
当我们在访问对象的属性前,我们需要用 ?.
操作符来确定该属性是否存在。
首先看看下面代码:
const users = [
{
name: "Olagunju Gbolahan",
occupation: "Software Developer",
sayName(){
console.log(`my name is ${this.name}`);
},
address: { office: "New York" }
},
{ name: "Olawaseyi Moses" },
{ name: "Tunde Ednut" }
];
在该数组对象中,第二个对象是 secondUser:
const secondUser = users[1];
我们需要知道该用户的办公室地址,在没有 Optional chaining 之前,我们需要使用一种很低效的方式来验证该属性是否已存在:
const theAddress = secondUser.address && secondUser.address.office;
console.log(theAddress); // undefined
如果我们是一个深度嵌套的对象,那就必须通过 && 操作符来判断每一层的对象是否有效:
但是有了 optional chaining ,代码便可简化如下:
const theAddress = secondUser?.address?.office;
console.log(theAddress); // undefined
我们还可以使用 optional chaining 来确认对象的某个方法是否存在:
const firstUser = users[0];
console.log(firstUser.sayName?.()); // 我的名字是 Olagunju Gbolahan
如果方法名不存在的话,它会简单的返回 undefined
:
console.log(firstUser.sayOccupation?.()); // undefined
目前该特性尚未添加到 JavaScript 规范中,目前还处于草案建议阶段。
你可以通过 babel-plugin-proposal-optional-chaining 这个插件来实现相同功能。
你也可以阅读 《Optional Chaining 特性进入 Stage 3,TypeScript 跟进》 这篇文章来了解更多关于该特性的进展。
Optional catch binding (可选的错误捕获绑定)
当我们事先知道错误将是什么,并且我们不希望冗余未使用的变量时,此功能将派上用场。
首先看看常规的 try 和 catch 的代码块:
try {
const parsedJsonData = JSON.parse(obj);
} catch (error) {
//obj 变量在使用时没有进行定义
console.log(obj);
}
而通过错误捕获绑定,我们无需提供未使用的变量,特别是当我们已经为 try 块提供默认处理的情况下:
function getName () {
let name = "Gbolahan Olagunju";
try {
name = obj.details.name
} catch {}
console.log(name);
}
管道操作符
这是对 JavaScript 的拟议补充之一,目前处于第1阶段。本质上,它有助于使对同一参数的多个函数调用可读。
它通过将表达式的值作为参数传递给函数来实现。
在没有管道运算符的情况下调用以下函数|>
。
const capitalize = (input) => input[0].toUpperCase() + input.substring(1);
const removeSpaces = (input) => input.trim();
const repeat = (input) => `${input}, ${input}`;
const withoutpipe = repeat(capitalize(removeSpaces(' i am gbols ')));
console.log(withoutpipe); // I am gbols, I am gbols
而通过管道操作符,可读性大幅提升:
const withpipe = ' i am gbols '
|> removeSpaces
|> capitalize
|> repeat;
console.log(withpipe); // // I am gbols, I am gbols
String.trimStart 和 String.trimEnd
这两个方法在之前被命名为 trimRight 和 trimLeft,但在 ES2019 中将名字修改为 trimStart 和 trimEnd ,表述更加直观:
示例代码:
let message = " Welcome to LogRocket ";
message.trimStart(); // "Welcome to LogRocket "
message.trimEnd(); // "Welcome to LogRocket";
Object.fromEntries
在聊 Object.fromEntries 之前,有必要先看看 Object.entries.
Object.entries 是在 ES2017 规范中引入的,用于将对象转成数组,并可通过数组相关的函数进行访问。
示例代码:
const devs = {
gbols: 5,
andrew: 3,
kelani: 10,
dafe: 8,
};
const arrOfDevs = Object.entries(devs);
console.log(arrOfDevs);
//[
// ["gbols", 5]
// ["andrew", 3]
// ["kelani", 10]
// ["dafe", 8]
//]
然后我们可以使用 filter
方法来获取数组中超过 5 年经验的对象:
const expDevs = arrOfDevs.filter(([name, yrsOfExp]) => yrsOfExp > 5);
console.log(expDevs);
//[
// ["kelani", 10]
// ["dafe", 8]
//]
那么就会有一个新的问题:没有一个简单的方法将最新的数组重新变成对象。通常我们需要自己编写代码将数组变成对象:
const expDevsObj = {};
for (let [name, yrsOfExp] of expDevs) {
expDevsObj[name] = yrsOfExp;
}
console.log(expDevsObj);
//{
//dafe: 8
//kelani: 10
//}
但是现在通过 Object.fromEntries 就可以把这个过程极大简化:
console.log(Object.fromEntries(expDevs));
//{
//dafe: 8
//kelani: 10
//}
Flat
很多使用我们需要处理深度嵌套的数组,这个时候将数组展平就特别重要。
先看看如下代码:
const developers = [
{
name: 'Gbolahan Olagunju',
yrsOfExp: 6,
stacks: ['Javascript', 'NodeJs', ['ReactJs', ['ExpressJs', 'PostgresSql']]]
},
{
name: 'Daniel Show',
yrsOfExp: 2,
stacks: ['Ruby', 'Jest', ['Rails', ['JQuery', 'MySql']]]
},
{
name: 'Edafe Emunotor',
yrsOfExp: 9,
stacks: ['PHP', 'Lumen', ['Angular', 'NgRx']]
}
];
const allStacks = developers.map(({stacks}) => stacks);
console.log(allStacks);
// [
// ['Javascript', 'NodeJs', ['ReactJs', ['ExpressJs', 'PostgresSql']]]
// ['Ruby', 'Jest', ['Rails', ['JQuery', 'MySql']]]
// ['PHP', 'Lumen', ['Angular', 'NgRx']]
// ]
allstacks
变量包含深度嵌套的数组,为了将该数组展平,我们可以使用 Array.prototype.flat 方法。
示例代码:
const flatSingle = allStacks.flat();
console.log(flatSingle);
//[
// "JavaScript",
// "NodeJs",
// ['ReactJs', ['ExpressJs', 'PostgresSql']]]
// "Ruby",
// "Jest",
// ['Rails', ['JQuery', 'MySql']]]
// "PHP",
// "Lumen"
// ["Angular", "NgRx"]
//]
从上面代码可以推断出数组被展平了一层深,这是 array.prototype.flat 的默认参数。
我们可以向flat方法传递一个参数,以确定要展平的程度。
defaults 参数的值为1。为了完全展平数组,我们可以传递一个无穷大的参数。参数 infinity 使数组完全变平,与数组的深度无关。
示例代码:
const completelyFlat = allStacks.flat(Infinity);
console.log(completelyFlat);
//[
// "JavaScript",
// "NodeJs",
// "ReactJs",
// "ExpressJs",
// "PostgresSql",
// "Ruby",
// "Jest",
// "Rails",
// "JQuery",
// "MySql",
// "PHP",
// "Lumen",
// "Angular",
// "NgRx"
//]
FlatMap
FlatMap 相当于将 map 方法和 flat 方法合并起来,并默认使用深度为 1 的新方法。相当于是以更简洁的代码实现两种逻辑的组合。
下面是一个简单使用 map 和 flatMap 的代码:
let arr = ['my name is Gbols', ' ', 'and i am great developer'];
console.log(arr.map(word => word.split(' ')));
//[
// ["my", "name", "is", "Gbols"],
// ["", ""],
// ["and", "i", "am", "great", "developer"]
//]
console.log(arr.flatMap(word => word.split(' ')));
//[ "my"
// "name"
// "is"
// "Gbols"
// ""
// ""
// "and"
// "i"
// "am"
// "great"
// "developer"
//]