界面设计|web前端 - 10 个现代JavaScript开发技巧( 二 ) 界面设计

lastName: 'Anwar'
printName: function () {
return `${this.firstName ${this.lastName`;

console.log(person.printName()); // returns 'Haseeb Anwar'
【界面设计|web前端 - 10 个现代JavaScript开发技巧】console.log(persone.doesNotExist?.()); // returns undefined
7、使用 !! 运算符进行布尔转换
该 !! 运算符可用于将表达式的结果快速转换为布尔值 true 或 false 。就是这样：
const greeting = 'Hello there!';
console.log(!!greeting) // returns true
const noGreeting = '';
console.log(!!noGreeting); // returns false
8、字符串和整数转换
使用 + 运算符快速将字符串转换为数字，如下所示：
const stringNumer = '123';
console.log(+stringNumer); // returns integer 123
console.log(typeof +stringNumer); // returns 'number'
要将数字快速转换为字符串，请使用 + 运算符后跟空字符串 \"\"：
const myString = 25 + '';
console.log(myString); // returns '25'
console.log(typeof myString); // returns 'string'
这些类型转换非常方便，但它们的清晰度和代码可读性较差。因此，在生产中使用它们之前，你可能需要考虑一下。但是，不要犹豫在代码中使用它们。
9、检查数组中的假值
你必须熟悉 filter、some 和 every 数组方法。但是，你也应该知道你可以只使用Boolean方法来测试真值：
const myArray = [null false 'Hello' undefined 0
;
// filter falsy values
const filtered = myArray.filter(Boolean);
console.log(filtered); // returns ['Hello'

// check if at least one value is truthy
const anyTruthy = myArray.some(Boolean);
console.log(anyTruthy); // returns true
// check if all values are truthy
const allTruthy = myArray.every(Boolean);
console.log(allTruthy); // returns false
这是它的工作原理。正如我们所知，这些数组方法采用回调函数，因此我们将 Boolean方法作为回调函数传递。Boolean本身接受一个参数并根据参数的真实性返回 true 或 false 。所以我们可以这样说：
myArray.filter(val => Boolean(val));
是不是和这个一样：
myArray.filter(Boolean);
10、扁平化数组
原型 Array 上有一个方法 flat 可以让你从数组的数组中创建一个数组：
const myArray = [{ id: 1[{ id: 2
[{ id: 3

;
const flattedArray = myArray.flat();
// returns [ { id: 1{ id: 2{ id: 3

你还可以定义一个深度级别，指定嵌套数组结构应展平的深度。例如：
const arr = [0 1 2 [[[3 4

;
console.log(arr.flat(2)); // returns [0 1 2 [34

到这里，爱创乐育小编要与你分享的10个JavaScript的技巧就全部结束了，我希望这些技巧对你很有帮助。想学习前端，了解前端更多的知识与信息，欢迎大家关注，私信我！