最后
四轮技术面+一轮hr面结束,学习到了不少,面试也是一个学习检测自己的过程,面试前大概复习了 一周的时间,把以前的代码看了一下,字节跳动比较注重算法,面试前刷了下leetcode和剑指offer, 也刷了些在牛客网上的面经。大概就说这些了,写代码去了~
祝大家都能收获大厂offer~
篇幅有限,仅展示部分内容
while (left <= right) {
const mid = Math.floor((left + right) / 2);
if (arr[mid] === target) {
return mid;
} else if (arr[mid] < target) {
left = mid + 1;
} else {
right = mid - 1;
}
}
return -1;
}
### 函数式编程
#### 高阶函数和柯里化
高阶函数和柯里化是函数式编程中的常见概念,它们可以让我们创建更加抽象、灵活的函数。
// 高阶函数
function higherOrderFunction(func) {
return function (num) {
return func(num);
};
}
function double(num) {
return num * 2;
}
const doubleFunc = higherOrderFunction(double);
console.log(doubleFunc(10)); // 20
// 柯里化
function curry(func) {
return function curried(…args) {
if (args.length >= func.length) {
return func.apply(this, args);
} else {
return function (…args2) {
return curried.apply(this, […args, …args2]);
};
}
};
}
function sum(a, b, c) {
return a + b + c;
}
const curriedSum = curry(sum);
console.log(curriedSum(1)(2)(3)); // 6
#### 闭包和作用域
闭包和作用域是JavaScript中比较常见的概念。闭包可以让我们维护函数内的状态,作用域则决定了变量的可见范围。
// 闭包
function closure() {
let i = 0;
return function () {
return ++i;
};
}
const func = closure();
console.log(func()); // 1
console.log(func()); // 2
// 作用域
let a = 10;
function foo() {
let a = 20;
console.log(a); // 20
}
foo();
console.log(a); // 10
#### 函数式编程中的常见模式
函数式编程中有很多常见的模式,如map、filter、reduce等。
// map
const arr = [1, 2, 3];
const mapArr = arr.map((item) => item * 2);
console.log(mapArr); // [2, 4, 6]
// filter
const filterArr = arr.filter((item) => item > 1);
console.log(filterArr); // [2, 3]
// reduce
const reduceArr = arr.reduce((sum, curr) => sum + curr, 0);
console.log(reduceArr); // 6
### 异步编程
#### Promise和async/await
Promise和async/await是常见的异步编程方式,它们可以让我们更好地处理异步编程中的问题。
// Promise
function promise() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(‘done’);
}, 1000);
});
}
promise().then((result) => console.log(result)); // ‘done’
// async/await
async function asyncFunc() {
const result = await promise();
console.log(result);
}
asyncFunc(); // ‘done’
#### 事件循环和EventEmitter
事件循环和EventEmitter用于处理异步事件,它们可以让我们更好地处理事件流。
// 事件循环
console.log(‘start’);
setTimeout(() => {
console.log(‘setTimeout’);
}, 0);
Promise.resolve().then(() => console.log(‘promise’));
console.log(‘end’);
// EventEmitter
const { EventEmitter } = require(‘events’);
const emitter = new EventEmitter();
emitter.on(‘doSomething’, (arg1, arg2) => {
console.log(${arg1} ${arg2}
);
});
emitter.emit(‘doSomething’, ‘Hello’, ‘World’); // ‘Hello World’
#### Web Worker
Web Worker可以让我们将长时间运行的任务移出主线程,以避免阻塞UI。
// 主线程
const worker = new Worker(‘worker.js’);
worker.onmessage = (event) => {
console.log(event.data);
};
worker.postMessage(‘start’);
// worker.js
self.onmessage = (event) => {
const result = longCalculation(event.data);
self.postMessage(result);
};
### 面向对象编程
#### 类和继承
JavaScript中的类和继承与其他面向对象编程语言类似。
// 类
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(${this.name} makes a noise.
);
}
}
class Cat extends Animal {
constructor(name, breed) {
super(name);
this.breed = breed;
}
speak() {
console.log(${this.name} meows.
);
}
get description() {
return ${this.name} is a ${this.breed} cat.
;
}
set nickname(nick) {
this.name = nick;
}
}
const cat = new Cat(‘Fluffy’, ‘Persian’);
cat.speak(); // ‘Fluffy meows.’
console.log(cat.description); // ‘Fluffy is a Persian cat.’
cat.nickname = ‘Fuffy’;
console.log(cat.name); // ‘Fuffy’
#### Encapsulation、Inheritance、Polymorphism(封装、继承、多态)
封装、继承、多态是面向对象编程中的重要概念。
// 封装
class Person {
constructor(name) {
this._name = name;
}
get name() {
return this._name.toUpperCase();
}
set name(newName) {
this._name = newName;
}
}
const person = new Person(‘John’);
console.log(person.name); // ‘JOHN’
person.name = ‘Lisa’;
console.log(person.name); // ‘LISA’
// 继承
class Shape {
constructor(color) {
this.color = color;
}
draw() {
console.log(‘Drawing a shape…’);
}
}
class Circle extends Shape {
constructor(color, radius) {
super(color);
this.radius = radius;
}
draw() {
console.log(Drawing a ${this.color} circle with radius ${this.radius}.
);
}
}
const circle = new Circle(‘red’, 10);
circle.draw(); // ‘Drawing a red circle with radius 10.’
// 多态
function drawShape(shape) {
shape.draw();
}
drawShape(new Shape(‘blue’)); // ‘Drawing a shape…’
drawShape(new Circle(‘green’, 20)); // ‘Drawing a green circle with radius 20.’
### 总结和实战
在本文中,我们介绍了一些JavaScript的高级知识点,如高级数据结构和算法、函数式编程、异步编程和面向对象编程。我们还提供了一些代码示例和实战案例,让掘友们更好地理解和掌握这些技术。
#### 通过Promise.all实现并发请求
function fetchData(urls) {
const promises = urls.map((url) => fetch(url));
return Promise.all(promises).then((responses) =>
Promise.all(
responses.map((response) => {
if (!response.ok) throw new Error(response.statusText);
return response.json();
})
)
);
这里分享一份由字节前端面试官整理的「2021大厂前端面试手册」,内容囊括Html、CSS、Javascript、Vue、HTTP、浏览器面试题、数据结构与算法。全部整理在下方文档中,共计111道
HTML
-
HTML5有哪些新特性?
-
Doctype作⽤? 严格模式与混杂模式如何区分?它们有何意义?
-
如何实现浏览器内多个标签页之间的通信?
-
⾏内元素有哪些?块级元素有哪些? 空(void)元素有那些?⾏内元 素和块级元素有什么区别?
-
简述⼀下src与href的区别?
-
cookies,sessionStorage,localStorage 的区别?
-
HTML5 的离线储存的使用和原理?
-
怎样处理 移动端 1px 被 渲染成 2px 问题?
-
iframe 的优缺点?
-
Canvas 和 SVG 图形的区别是什么?
JavaScript
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
-
问:0.1 + 0.2 === 0.3 嘛?为什么?
-
JS 数据类型
-
写代码:实现函数能够深度克隆基本类型
-
事件流
-
事件是如何实现的?
-
new 一个函数发生了什么
-
什么是作用域?
-
JS 隐式转换,显示转换
-
了解 this 嘛,bind,call,apply 具体指什么
-
手写 bind、apply、call
-
setTimeout(fn, 0)多久才执行,Event Loop
-
手写题:Promise 原理
-
说一下原型链和原型链的继承吧
-
数组能够调用的函数有那些?
-
PWA使用过吗?serviceWorker的使用原理是啥?
-
ES6 之前使用 prototype 实现继承
-
箭头函数和普通函数有啥区别?箭头函数能当构造函数吗?
-
事件循环机制 (Event Loop)