是什么
收集 整理一些代码块，面试题，强化理解记忆
题目
- 验证参数是数字
- 禁用网页中的右键单击
- 什么是 AJAX
- 如何取消 Promise 请求
- 如何取消 Axios 请求
- promises 和 observables 有什么区别
- 你如何创建复制到剪贴板按钮
- 获取时间戳的快捷方式是什么
- 你如何展平多维数组
- 多条件检查
- 捕获浏览器后退按钮
- 什么是包装对象
- 什么是最小超时限制
- 什么是微任务
- 什么是事件表
- 如何在 typescript 文件中使用 javascript 库
- 什么是 Babel
- Node.js 是完全单线程的吗
- 什么是 RxJS
- 什么是短路状态
- 什么是异步函数
- 如何在 javascript 中使对象可迭代
- 如何检查一个对象是否是一个 Promise
- arguments 对象和 rest 参数之间有什么区别
- 什么是内置可迭代对象
- for…of 和 for…in 语句之间有什么区别
- 如何在没有任何额外括号的情况下调用 IIFE
- 忽略 promise 错误的最简单方法是什么
- 如何正则表达式校验
- 用 react 开发的时候，什么时候用函数组件，什么时候用类组件呢
- 如何做自适应图片布局
验证参数是数字
function isNumber (n) {
return !isNaN(parseFloat(n)) && isFinite(n)
}
禁用网页中的右键单击
<body oncontextmenu="return false">
你如何创建复制到剪贴板按钮
document.querySelector('#copy').onclick = function () {
document.querySelector('input').select()
document.execCommand('copy')
}
什么是 AJAX
异步获取数据的技术，我们可以在不刷新页面的情况下获取到数据
如何取消 Promise 请求
1. 返回 pending 状态 可以取消请求
Promise.resolve().then((res)=> {
console.log("执行")
return new Promise(()=>{})
}).then(() => {
// 后续的函数不会被调用
console.log('ok2')
}).catch(err => {
console.log('err->', err)
})
2. 通过 throw 'throw error1' 取消
Promise.resolve().then(() => {
console.log('ok1')
throw 'throw error1'
}).then(() => {
console.log('ok2')
}, err => {
// 捕获错误
console.log('err->', err)
}).then(() => {
// 该函数将被调用
console.log('ok3')
throw 'throw error3'
}).then(() => {
// 错误捕获前的函数不会被调用
console.log('ok4')
}).catch(err => {
console.log('err->', err)
});
如何取消 Axios 请求
1. 第一种通过CancelToken.source工厂方法创建cancel token
var CancelToken = axios.CancelToken;
var source = CancelToken.source();
axios.get('/user/12345', {
cancelToken: source.token
}).catch(function(thrown) {
if (axios.isCancel(thrown)) {
console.log('Request canceled', thrown.message);
} else {
// 处理错误
}
});
// 取消请求（message 参数是可选的）
source.cancel('Operation canceled by the user.');
2. 通过传递executor函数到CancelToken的构造函数来创建cancel token
var CancelToken = axios.CancelToken;
var cancel;
axios.get('/user/12345', {
cancelToken: new CancelToken(function executor(c) {
// executor 函数接收一个 cancel 函数作为参数
cancel = c;
})
});
// 取消请求
cancel();
promises 和 observables 有什么区别
promises
一次只发出一个值
立即调用
Promise 总是异步的，即使它立即解决了
不提供任何操作符
不能取消, 只能模拟异常取消
observables
在一段时间内发出多个值（从 0 到多个的值流）
天性懒惰；他们需要调用订阅
Observable 可以是同步的也可以是异步的
提供map、forEach、filter、reduce、retry、retryWhen等操作符
使用 unsubscribe() 方法取消
获取时间戳的快捷方式是什么
var _date = +new Date()
var _date = Date.now()
你如何展平多维数组
const _array = [11, [22, 33], [44, 55], [66, 77], 88, 99]
const flattenArr = [].concat(..._array) // [11, 22, 33, 44, 55...
多条件检查
if(["val1","val2"].indexOf(input) !==-1) {
....
}
捕获浏览器后退按钮
// 捕获浏览器后退按钮事件
window.onbeforeunload = function () {
....
};
什么是包装对象？
除 null 和 undefined 之外的每个原语都有包装对象，包装对象列表是 String、Number、Boolean、Symbol 和 BigInt。
什么是最小超时限制
浏览器和 NodeJS javascript 环境都会以大于 0 毫秒的最小延迟进行节流,即使设置 0 毫秒的延迟也不会立即发生。由于大于 0ms 的最小延迟，您不能使用 setTimeout(fn, 0) 立即执行代码。但是您可以使用 window.postMessage() 来实现此行为。
什么是微任务
微任务：是当前插队执行的任务，微任务执行完成后立即执行 回主任务 javascript 代码。微任务在执行的时候，主线程将被阻塞，直到微任务队列为空。
微任务的主要来源是 Promise.resolve、Promise.reject、MutationObservers、IntersectionObservers 等。
什么是事件表
事件表是一种 数据结构，用于存储和跟踪将在一段时间间隔后或在某些 API 请求解析后异步执行的所有事件。即，每当您调用 setTimeout 函数或调用异步操作时，它都会被添加到事件表中。
它不会自行执行功能。事件表的主要目的是跟踪事件并将它们发送到事件队列。
如何在 typescript 文件中使用 javascript 库
并非所有 JavaScript 库或框架都有 TypeScript 声明文件。但是如果你仍然想在我们的 TypeScript 文件中使用库或框架而不会出现编译错误，唯一的解决方案是declare关键字和变量声明。
什么是 Babel
Babel 是 js 转译器，可以把es2015+ 的代码转换成，向后兼容的js 代码
Node.js 是完全单线程的吗
Node 是单线程的，但是 Node.js 标准库中包含的一些函数（例如 fs 模块函数）不是单线程的。即，它们的逻辑在 Node.js 单线程之外运行，以提高程序的速度和性能。
什么是 RxJS
RxJS (Reactive Extensions for JavaScript) 是一个使用 observables 实现反应式编程的库，它可以更容易地编写异步或基于回调的代码。它还提供了用于创建和使用 observable 的实用函数。
什么是短路状态
if 的精简模式，由于逻辑运算的从左向右的性质，if 可以 flag && go();
什么是异步函数
异步函数是一个用async关键字声明的函数，它以更简洁的风格编写异步的。这些函数可以包含零个或多个await表达式。
如何在 javascript 中使对象可迭代
可以通过Symbol.iterator在其上定义属性来使对象可迭代。
const collection = {
one: 1,
two: 2,
three: 3,
[Symbol.iterator]() {
const values = Object.keys(this);
let i = 0;
return {
next: () => {
return {
value: this[values[i++]],
done: i > values.length
}
}
};
}
};
const iterator = collection[Symbol.iterator]();
console.log(iterator.next()); // → {value: 1, done: false}
console.log(iterator.next()); // → {value: 2, done: false}
console.log(iterator.next()); // → {value: 3, done: false}
console.log(iterator.next()); // → {value: undefined, done: true}
如何检查一个对象是否是一个 Promise
function isPromise (object) {
return Boolean(object && typeof object.then === 'function')
}
arguments 对象和 rest 参数之间有什么区别
1.arguments 对象是一个类似数组的对象，但不是一个数组。而rest 参数是数组实例。
2.arguments 对象不支持 sort、map、forEach 或 pop 等方法。而这些方法可用于rest 参数。
3.rest 参数只是那些没有被赋予单独名称的参数，而参数对象包含传递给函数的所有参数
什么是内置可迭代对象
1.数组和类型数组
2.字符串：迭代每个字符或 Unicode 代码点
3.Maps：迭代其键值对
4.集合：迭代它们的元素
5.参数：函数中类似数组的特殊变量
6.NodeList 等 DOM 集合
for…of 和 for…in 语句之间有什么区别
1. for..in 迭代对象的所有可枚举属性键
2. for..of 迭代可迭代对象的值。
如何在没有任何额外括号的情况下调用 IIFE
立即调用函数表达式（IIFE）需要一对括号来包装包含语句集的函数。由于 IIFE 和 void 运算符都会丢弃表达式的结果,所以可以改成：
void function(dt) {
console.log(dt.toLocaleTimeString());
}(new Date());
忽略 promise 错误的最简单方法是什么
await promise.catch(e => void e)
如何使用 CSS 设置控制台输出的样式
console.log(
'%cThis is a red text with bigger font',
'color:red; font-size:20px'
)
如何正则表达式校验
a — 匹配一个字符a(不能匹配 b, aa等等.)
abc — 匹配 a, 其次 b, 最后 c.
a* — 匹配0个或者多个字符 a (+ 代表至少匹配一个或者多个).
[^a] — 匹配一个字符，但它不能是a.
a|b — 匹配一个字符 a 或者 b.
[abc] — 匹配一个字符，它可以是a,b或c.
[^abc] — 匹配一个字符，但它不可以是a,b或c.
[a-z] — 匹配字符范围 a-z且全部小写 (你可以使用 [A-Za-z] 涵盖大小写, 或 [A-Z] 来限制必须大写).
a.c — 匹配字符 a,中间匹配任意一个字符,最后匹配字符 c.
a{5} — 匹配字符 a五次.
a{5,7} — 匹配字符 a五到七次,不能多或者少.
用 react 开发的时候，什么时候用函数组件，什么时候用类组件呢
1. 能用函数就用函数；Hooks 对于逻辑的拆分重组比 class 方便得多；
2. 如果不影响 DOM 层级，代码行数到一定量级能拆组件尽量拆；
3. 有 Error Boundary 的需求的话，这个是 hooks 目前做不到的，只能通过 HoC 或者 class component；
4. 反正现在已经没有 class XXX extend React.Component 这样的习惯了，起手全都是 function
如何做自适应图片布局
图片自适应、宽高比不变，不影响其他布局
.img-wrapper {
position:relative;
width: 100%;
padding-bottom: 75%;
}
.img-wrapper img {
position:absolute;
width: 100%;
height: 100%;
}
