2024年最全（面试加分新技能） 总结11个ES2024中你可能遗漏的语法，2024年最新面试建议

最后

中年危机是真实存在的，即便有技术傍身，还是难免对自己的生存能力产生质疑和焦虑，这些年职业发展，一直在寻求消除焦虑的依靠。

• 技术要深入到什么程度？

• 做久了技术总要转型管理？

• 我能做什么，我想做什么？

• 一技之长，就是深耕你的专业技能，你的专业技术。（重点）

• 独立做事，当你的一技之长达到一定深度的时候，需要开始思考如何独立做事。（创业）

• 拥有事业，选择一份使命，带领团队实现它。（创业）

一技之长分五个层次

• 栈内技术 - 是指你的前端专业领域技术

• 栈外技术 - 是指栈内技术的上下游，领域外的相关专业知识

• 工程经验 - 是建设专业技术体系的“解决方案”

• 带人做事 - 是对团队协作能力的要求

• 业界发声 - 工作经验总结对外分享，与他人交流

永远不要放弃一技之长，它值得你长期信仰持有。

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

主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue 等等。

// SyntaxError: Private field ‘#firstName’ must be
// declared in an enclosing class
console.log(person.#firstName);
console.log(person.#lastName);

请注意，这里抛出的错误是语法错误，发生在编译时，因此没有部分代码运行，编译器甚至不希望您尝试从类外部访问私有字段，因此，它假定您正在尝试声明一个。


### 3、await运算符


在 JavaScript 中，await 运算符用于暂停执行，直到 Promise 被解决（履行或拒绝）。以前，我们只能在 async 函数中使用此运算符 - 使用 async 关键字声明的函数。我们无法在全球范围内这样做。

function setTimeoutAsync(timeout) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve();
    }, timeout);
  });
}
// SyntaxError: await is only valid in async functions
await setTimeoutAsync(3000);

使用 ES13，现在我们可以：

function setTimeoutAsync(timeout) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve();
    }, timeout);
  });
}
// Waits for timeout - no error thrown
await setTimeoutAsync(3000);

### 4、静态类字段和静态私有方法


我们现在可以在 ES13 中为类声明静态字段和静态私有方法，静态方法可以使用 this 关键字访问类中的其他私有/公共静态成员，实例方法可以使用 this.constructor 访问它们。

class Person {
  static #count = 0;
  static getCount() {
    return this.#count;
  }
  constructor() {
    this.constructor.#incrementCount();
  }
  static #incrementCount() {
    this.#count++;
  }
}
const person1 = new Person();
const person2 = new Person();
console.log(Person.getCount()); // 2

### 5、类静态块


ES13 允许在创建类时定义只执行一次的静态块，这类似于其他支持面向对象编程的语言（如 C# 和 Java）中的静态构造函数。一个类的类主体中可以有任意数量的静态 {} 初始化块，它们将与任何交错的静态字段初始值设定项一起按照声明的顺序执行，我们可以在静态块中使用超属性来访问超类的属性。

class Vehicle {
  static defaultColor = ‘blue’;
}
class Car extends Vehicle {
  static colors = [];
  static {
    this.colors.push(super.defaultColor, ‘red’);
  }
  static {
    this.colors.push(‘green’);
  }
}
console.log(Car.colors); // [ ‘blue’, ‘red’, ‘green’ ]

### 6、私人领域的人体工程学品牌检查


我们可以使用这个新特性来检查一个对象中是否有一个特定的私有字段，使用 in 运算符。

class Car {
  #color;
  hasColor() {
    return #color in this;
  }
}
const car = new Car();
console.log(car.hasColor()); // true;

in 运算符可以正确区分不同类的同名私有字段：

class Car {
  #color;
  hasColor() {
    return #color in this;
  }
}
class House {
  #color;
  hasColor() {
    return #color in this;
  }
}
const car = new Car();
const house = new House();
console.log(car.hasColor()); // true;
console.log(car.hasColor.call(house)); // false
console.log(house.hasColor()); // true
console.log(house.hasColor.call(car)); // false

### 7、at() 方法进行索引


我们通常在 JavaScript 中使用方括号 ([]) 来访问数组的第 N 个元素，这通常是一个简单的过程，我们只访问数组的 N - 1 属性。

const arr = [‘a’, ‘b’, ‘c’, ‘d’];
console.log(arr[1]); // b

但是，如果我们想使用方括号访问数组末尾的第 N 个项目，我们必须使用 arr.length - N 的索引。

const arr = [‘a’, ‘b’, ‘c’, ‘d’];
// 1st element from the end
console.log(arr[arr.length - 1]); // d
// 2nd element from the end
console.log(arr[arr.length - 2]); // c

新的 at() 方法让我们可以更简洁、更有表现力地做到这一点，要访问数组末尾的第 N 个元素，我们只需将负值 -N 传递给 at()。

const arr = [‘a’, ‘b’, ‘c’, ‘d’];
// 1st element from the end
console.log(arr.at(-1)); // d
// 2nd element from the end
console.log(arr.at(-2)); // c

除了数组，字符串和 TypedArray 对象现在也有 at() 方法。

const str = ‘Coding Beauty’;
console.log(str.at(-1)); // y
console.log(str.at(-2)); // t
const typedArray = new Uint8Array([16, 32, 48, 64]);
console.log(typedArray.at(-1)); // 64
console.log(typedArray.at(-2)); // 48

### 8、 RegExp 匹配索引


这个新功能允许我们指定我们想要获取给定字符串中 RegExp 对象匹配的开始和结束索引。以前，我们只能在字符串中获取正则表达式匹配的起始索引。

const str = ‘sun and moon’;
const regex = /and/;
const matchObj = regex.exec(str);
// [ ‘and’, index: 4, input: ‘sun and moon’, groups: undefined ]
console.log(matchObj);

我们现在可以指定一个 d 正则表达式标志来获取匹配开始和结束的两个索引。

const str = ‘sun and moon’;
const regex = /and/d;
const matchObj = regex.exec(str);
/**
[
  ‘and’,
  index: 4,
  input: ‘sun and moon’,
  groups: undefined,
  indices: [ [ 4, 7 ], groups: undefined ]
]
 */
console.log(matchObj);

设置 d 标志后，返回的对象将具有包含开始和结束索引的 indices 属性。


### 9、Object.hasOwn() 方法


在 JavaScript 中，我们可以使用 Object.prototype.hasOwnProperty() 方法来检查对象是否具有给定的属性。

class Car {
  color = ‘green’;
  age = 2;
}
const car = new Car();
console.log(car.hasOwnProperty(‘age’)); // true
console.log(car.hasOwnProperty(‘name’)); // false

但是，这种方法存在一定的问题，一方面，Object.prototype.hasOwnProperty() 方法不受保护 - 它可以通过为类定义自定义 hasOwnProperty() 方法来覆盖，该方法可能具有与 Object.prototype.hasOwnProperty() 完全不同的行为。

class Car {
  color = ‘green’;
  age = 2;
  // This method does not tell us whether an object of
  // this class has a given property.
  hasOwnProperty() {
    return false;
  }
}
const car = new Car();
console.log(car.hasOwnProperty(‘age’)); // false
console.log(car.hasOwnProperty(‘name’)); // false

另一个问题是，对于使用 null 原型创建的对象（使用 Object.create(null)），尝试对其调用此方法会导致错误。

const obj = Object.create(null);
obj.color = ‘green’;
obj.age = 2;
// TypeError: obj.hasOwnProperty is not a function
console.log(obj.hasOwnProperty(‘color’));

解决这些问题的一种方法是使用调用 Object.prototype.hasOwnProperty Function 属性上的 call() 方法，如下所示：

const obj = Object.create(null);
obj.color = ‘green’;
obj.age = 2;
obj.hasOwnProperty = () => false;
console.log(Object.prototype.hasOwnProperty.call(obj, ‘color’)); // true
console.log(Object.prototype.hasOwnProperty.call(obj, ‘name’)); // false

这不是很方便，我们可以编写一个可重用的函数来避免重复自己：

function objHasOwnProp(obj, propertyKey) {
  return Object.prototype.hasOwnProperty.call(obj, propertyKey);
}
const obj = Object.create(null);
obj.color = ‘green’;
obj.age = 2;
obj.hasOwnProperty = () => false;
console.log(objHasOwnProp(obj, ‘color’)); // true
console.log(objHasOwnProp(obj, ‘name’)); // false

不过没有必要，因为我们可以使用新的内置 Object.hasOwn() 方法。与我们的可重用函数一样，它接受对象和属性作为参数，如果指定的属性是对象的直接属性，则返回 true。否则，它返回 false。

const obj = Object.create(null);
obj.color = ‘green’;
obj.age = 2;
obj.hasOwnProperty = () => false;
console.log(Object.hasOwn(obj, ‘color’)); // true
console.log(Object.hasOwn(obj, ‘name’)); // false

### 10、错误原因


错误对象现在有一个 cause 属性，用于指定导致即将抛出的错误的原始错误。这有助于为错误添加额外的上下文信息并帮助诊断意外行为，我们可以通过在作为第二个参数传递给 Error() 构造函数的对象上设置 cause 属性来指定错误的原因。

function userAction() {
  try {
    apiCallThatCanThrow();
  } catch (err) {
    throw new Error(‘New error message’, { cause: err });
  }
}
try {
  userAction();
} catch (err) {
  console.log(err);
  console.log(Cause by: ${err.cause});
}

### 11、从最后一个数组查找


在 JavaScript 中，我们已经可以使用 Array find() 方法在数组中查找通过指定测试条件的元素，同样，我们可以使用 findIndex() 来查找此类元素的索引。虽然 find() 和 findIndex() 都从数组的第一个元素开始搜索，但在某些情况下，最好从最后一个元素开始搜索。在某些情况下，我们知道从最后一个元素中查找可能会获得更好的性能。例如，这里我们试图在数组中获取值 prop 等于 y 的项目。使用 find() 和 findIndex()：



### 最后

如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.youkuaiyun.com/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

![](https://img-blog.csdnimg.cn/img_convert/54a6b04f29167333b139d2753f60db9f.png)