2024年Web前端最新ECMAScript 6 简明教程（一文搞懂ES6）_ecmascript教程(1)，2024年最新面试笔记

最后

我可以将最近整理的前端面试题分享出来，其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器、数据结构与算法等等，还在持续整理更新中，希望大家都能找到心仪的工作。

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

篇幅有限，仅展示部分截图：

// 忽略 `function` 关键词简写对象函数
depreciate() {
  this.value -= 2500;
}

};
}

let car = getCar(‘Barret’, ‘Lee’, 40000);

// output: {
// make: ‘Barret’,
// model:‘Lee’,
// value: 40000,
// makeBarret: true,
// depreciate: [Function: depreciate]
// }

### 6. 二进制和八进制字面量


ES6 支持二进制和八进制的字面量，通过在数字前面添加 0o 或者0O 即可将其转换为八进制值：

let oValue = 0o10;
console.log(oValue); // 8

let bValue = 0b10; // 二进制使用 0b 或者 0B
console.log(bValue); // 2

### 7. 对象和数组解构


解构可以避免在对象赋值时产生中间变量：

function foo() {
return [1,2,3];
}
let arr = foo(); // [1,2,3]

let [a, b, c] = foo();
console.log(a, b, c); // 1 2 3

function bar() {
return {
x: 4,
y: 5,
z: 6
};
}
let {x: x, y: y, z: z} = bar();
console.log(x, y, z); // 4 5 6

### 8. 对象超类


ES6 允许在对象中使用 super 方法：

var parent = {
foo() {
console.log(“Hello from the Parent”);
}
}

var child = {
foo() {
super.foo();
console.log(“Hello from the Child”);
}
}

Object.setPrototypeOf(child, parent);
child.foo(); // Hello from the Parent
// Hello from the Child

### 9. 模板语法和分隔符


ES6 中有一种十分简洁的方法组装一堆字符串和变量。


${ … } 用来渲染一个变量  
 ` 作为分隔符

let user = ‘Barret’;
console.log(Hi ${user}!); // Hi Barret!

### 10. for…of VS for…in


for…of 用于遍历一个迭代器，如数组：

let nicknames = [‘di’, ‘boo’, ‘punkeye’];
nicknames.size = 3;
for (let nickname of nicknames) {
console.log(nickname);
}
// 结果: di, boo, punkeye

for…in 用来遍历对象中的属性：

let nicknames = [‘di’, ‘boo’, ‘punkeye’];
nicknames.size = 3;
for (let nickname in nicknames) {
console.log(nickname);
}
Result: 0, 1, 2, size

### 11. Map 和 WeakMap


ES6 中两种新的数据结构集：Map 和 WeakMap。事实上每个对象都可以看作是一个 Map。


一个对象由多个 key-val 对构成，在 Map 中，任何类型都可以作为对象的 key，如：

var myMap = new Map();

var keyString = “a string”,
keyObj = {},
keyFunc = function () {};

// 设置值
myMap.set(keyString, “value 与 ‘a string’ 关联”);
myMap.set(keyObj, “value 与 keyObj 关联”);
myMap.set(keyFunc, “value 与 keyFunc 关联”);

myMap.size; // 3

// 获取值
myMap.get(keyString); // “value 与 ‘a string’ 关联”
myMap.get(keyObj); // “value 与 keyObj 关联”
myMap.get(keyFunc); // “value 与 keyFunc 关联”

**WeakMap**


WeakMap 就是一个 Map，只不过它的所有 key 都是弱引用，意思就是 WeakMap 中的东西垃圾回收时不考虑，使用它不用担心内存泄漏问题。


另一个需要注意的点是，WeakMap 的所有 key 必须是对象。它只有四个方法 delete(key),has(key),get(key) 和set(key, val)：

let w = new WeakMap();
w.set(‘a’, ‘b’);
// Uncaught TypeError: Invalid value used as weak map key

var o1 = {},
o2 = function(){},
o3 = window;

w.set(o1, 37);
w.set(o2, “azerty”);
w.set(o3, undefined);

w.get(o3); // undefined, because that is the set value

w.has(o1); // true
w.delete(o1);
w.has(o1); // false

### 12. Set 和 WeakSet


Set 对象是一组不重复的值，重复的值将被忽略，值类型可以是原始类型和引用类型：

let mySet = new Set([1, 1, 2, 2, 3, 3]);
mySet.size; // 3
mySet.has(1); // true
mySet.add(‘strings’);
mySet.add({ a: 1, b:2 });

可以通过 forEach 和 for…of 来遍历 Set 对象：

mySet.forEach((item) => {
console.log(item);
// 1
// 2
// 3
// ‘strings’
// Object { a: 1, b: 2 }
});

for (let value of mySet) {
console.log(value);
// 1
// 2
// 3
// ‘strings’
// Object { a: 1, b: 2 }
}

Set 同样有 delete() 和 clear() 方法。


**WeakSet**


类似于 WeakMap，WeakSet 对象可以让你在一个集合中保存对象的弱引用，在 WeakSet 中的对象只允许出现一次：

var ws = new WeakSet();
var obj = {};
var foo = {};

ws.add(window);
ws.add(obj);

ws.has(window); // true
ws.has(foo); // false, foo 没有添加成功

ws.delete(window); // 从结合中删除 window 对象
ws.has(window); // false, window 对象已经被删除

### 13. 类


ES6 中有 class 语法。值得注意是，这里的 class 不是新的对象继承模型，它只是原型链的语法糖表现形式。


函数中使用 static 关键词定义构造函数的的方法和属性：

class Task {
constructor() {
console.log(“task instantiated!”);
}

showId() {
console.log(23);
}

static loadAll() {
console.log(“Loading all tasks…”);
}
}

console.log(typeof Task); // function
let task = new Task(); // “task instantiated!”
task.showId(); // 23
Task.loadAll(); // “Loading all tasks…”

类中的继承和超集：

class Car {
constructor() {
console.log(“Creating a new car”);
}
}

class Porsche extends Car {
constructor() {
super();
console.log(“Creating Porsche”);
}
}

let c = new Porsche();
// Creating a new car
// Creating Porsche

**extends** 允许一个子类继承父类，需要注意的是，子类的constructor 函数中需要执行 super() 函数。


当然，你也可以在子类方法中调用父类的方法，如super.parentMethodName()。


在 这里 阅读更多关于类的介绍。


有几点值得注意的是：


类的声明不会提升（hoisting)，如果你要使用某个 Class，那你必须在使用之前定义它，否则会抛出一个 ReferenceError 的错误  
 在类中定义函数不需要使用 function 关键词


### 14. Symbol


Symbol 是一种新的数据类型，它的值是唯一的，不可变的。ES6 中提出 symbol 的目的是为了生成一个唯一的标识符，不过你访问不到这个标识符：

var sym = Symbol( “some optional description” );
console.log(typeof sym); // symbol

注意，这里 Symbol 前面不能使用 new 操作符。


如果它被用作一个对象的属性，那么这个属性会是不可枚举的：

var o = {
val: 10,
[ Symbol(“random”) ]: “I’m a symbol”,
};

console.log(Object.getOwnPropertyNames(o)); // val

如果要获取对象 symbol 属性，需要使用Object.getOwnPropertySymbols(o)。


### 15. 迭代器（Iterators）


迭代器允许每次访问数据集合的一个元素，当指针指向数据集合最后一个元素时，迭代器便会退出。它提供了 next() 函数来遍历一个序列，这个方法返回一个包含 done 和 value 属性的对象。


ES6 中可以通过 Symbol.iterator 给对象设置默认的遍历器，无论什么时候对象需要被遍历，执行它的 @@iterator 方法便可以返回一个用于获取值的迭代器。


数组默认就是一个迭代器：

var arr = [11,12,13];
var itr = arrSymbol.iterator;

itr.next(); // { value: 11, done: false }
itr.next(); // { value: 12, done: false }
itr.next(); // { value: 13, done: false }

框架相关

原生JS虽能实现绝大部分功能，但要么就是过于繁琐，要么就是存在缺陷，故绝大多数开发者都会首选框架开发方案。现阶段较热门是React、Vue两大框架，两者工作原理上存在共通点，也存在一些不同点，对于校招来说，不需要两个框架都学得特别熟，一般面试官会针对你简历中写的框架进行提问。

在框架方面，生命周期、钩子函数、虚拟DOM这些基本知识是必须要掌握的，在学习的过程可以结合框架的官方文档

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

Vue框架

知识要点：
1. vue-cli工程
2. vue核心知识点
3. vue-router
4. vuex
5. http请求
6. UI样式
7. 常用功能
8. MVVM设计模式

React框架

知识要点：
1. 基本知识
2. React 组件
3. React Redux
4. React 路由

析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

Vue框架

知识要点：
1. vue-cli工程
2. vue核心知识点
3. vue-router
4. vuex
5. http请求
6. UI样式
7. 常用功能
8. MVVM设计模式

[外链图片转存中…(img-R9eP40a2-1715420414376)]

React框架

知识要点：
1. 基本知识
2. React 组件
3. React Redux
4. React 路由

[外链图片转存中…(img-bwefvVew-1715420414377)]