2024年最新有个开发者总结这 15 优雅的 JavaScript 个技巧，2024年最新网易前端几轮面试

总结

三套“算法宝典”

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

算法刷题LeetCode中文版（为例）

人与人存在很大的不同，我们都拥有各自的目标，在一线城市漂泊的我偶尔也会羡慕在老家踏踏实实开开心心养老的人，但是我深刻知道自己想要的是一年比一年有进步。

最后，我想说的是，无论你现在什么年龄，位于什么城市，拥有什么背景或学历，跟你比较的人永远都是你自己，所以明年的你看看与今年的你是否有差距，不想做咸鱼的人，只能用尽全力去跳跃。祝愿，明年的你会更好！

由于篇幅有限，下篇的面试技术攻克篇只能够展示出部分的面试题，详细完整版以及答案解析，有需要的可以关注

// 使用可选链

console.log(book.author?.age); // undefined

// 或深度可选链

console.log(book.author?.address?.city); // undefined

复制代码

还可以使用如下函数可选链：

const person = {

firstName: ‘前端’,

lastName: ‘小智’,

printName: function () {

return ${this.firstName} ${this.lastName};

},

};

console.log(person.printName()); // ‘前端 小智’

console.log(persone.doesNotExist?.()); // undefined

复制代码

7. 使用 !! 操作符

!! 运算符可用于将表达式的结果快速转换为布尔值(true或false):

const greeting = ‘Hello there!’;

console.log(!!greeting) // true

const noGreeting = ‘’;

console.log(!!noGreeting); // false

复制代码

8. 字符串和整数转换

使用 + 操作符将字符串快速转换为数字:

const stringNumer = ‘123’;

console.log(+stringNumer); //123

console.log(typeof +stringNumer); //‘number’

复制代码

要将数字快速转换为字符串，也可以使用 + 操作符，后面跟着一个空字符串:

const myString = 25 + ‘’;

console.log(myString); //‘25’

console.log(typeof myString); //‘string’

复制代码

这些类型转换非常方便，但它们的清晰度和代码可读性较差。所以实际开发，需要慎重的选择使用。

9. 检查数组中的假值

大家应该都用过数组方法：filter、some、every，这些方法可以配合 Boolean 方法来测试真假值。

const myArray = [null, false, ‘Hello’, undefined, 0];

// 过滤虚值

const filtered = myArray.filter(Boolean);

console.log(filtered); // [‘Hello’]

// 检查至少一个值是否为真

const anyTruthy = myArray.some(Boolean);

console.log(anyTruthy); // true

// 检查所有的值是否为真

const allTruthy = myArray.every(Boolean);

console.log(allTruthy); // 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();

//[ { id: 1 }, { id: 2 }, { id: 3 } ]

复制代码

你也可以定义一个深度级别，指定一个嵌套的数组结构应该被扁平化的深度。例如：

const arr = [0, 1, 2, [[[3, 4]]]];

console.log(arr.flat(2)); // returns [0, 1, 2, [3,4]]

复制代码

11.Object.entries

大多数开发人员使用 Object.keys 方法来迭代对象。 此方法仅返回对象键的数组，而不返回值。 我们可以使用 Object.entries 来获取键和值。

const person = {

name: ‘前端小智’,

age: 20

};

Object.keys(person); // [‘name’, ‘age’]

Object.entries(data); // [[‘name’, ‘前端小智’], [‘age’, 20]]

复制代码

为了迭代一个对象，我们可以执行以下操作：

Object.keys(person).forEach((key) => {

console.log(${key} is ${person[key]});

});

// 使用 entries 获取键和值

Object.entries(person).forEach(([key, value]) => {

console.log(${key} is ${value});

});

// name is 前端小智

// age is 20

复制代码

上述两种方法都返回相同的结果，但 Object.entries 获取键值对更容易。

12.replaceAll 方法

在 JS 中，要将所有出现的字符串替换为另一个字符串，我们需要使用如下所示的正则表达式：

const str = ‘Red-Green-Blue’;

// 只规制第一次出现的

str.replace(‘-’, ’ '); // Red Green-Blue

// 使用 RegEx 替换所有匹配项

str.replace(/-/g, ’ '); // Red Green Blue

复制代码

但是在 ES12 中，一个名为 replaceAll 的新方法被添加到 String.prototype 中，它用另一个字符串值替换所有出现的字符串。

str.replaceAll(‘-’, ’ '); // Red Green Blue

复制代码

13.数字分隔符

可以使用下划线作为数字分隔符，这样可以方便地计算数字中0的个数。

// 难以阅读

const billion = 1000000000;

// 易于阅读

const readableBillion = 1000_000_000;

console.log(readableBillion) //1000000000

复制代码

下划线分隔符也可以用于BigInt数字，如下例所示

const trillion = 1000_000_000_000n;

console.log(trillion); // 1000000000000

复制代码

14.document.designMode

与前端的JavaScript有关，设计模式让你可以编辑页面上的任何内容。只要打开浏览器控制台，输入以下内容即可。

document.designMode = ‘on’;

复制代码

15.逻辑赋值运算符

逻辑赋值运算符是由逻辑运算符&&、||、??和赋值运算符=组合而成。

const a = 1;

const b = 2;

a &&= b;

console.log(a); // 2

// 上面等价于

a && (a = b);

// 或者

if (a) {

a = b

}

复制代码

检查a的值是否为真，如果为真，那么更新a的值。使用逻辑或 ||操作符也可以做同样的事情。

const a = null;

const b = 3;

a ||= b;

结束

一次完整的面试流程就是这样啦，小编综合了腾讯的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析，分享给小伙伴们，有没有需要的小伙伴们都去领取！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】