Daily Question
1.React/Vue 列表渲染 key 的作用?
- key 是给每一个 vnode 的唯一 id
- 可以依靠 key,更准确, 更快的拿到 oldVnode 中对应的 vnode 节点.
2.ES5/ES6 继承除写法以外的区别?
- class 声明会提升,但不会初始化赋值。Foo 进入暂时性死区,类似于 let、const 声明变量。
const bar = new Bar() // it's ok
function Bar() {
this.bar = 42
}
const foo = new Foo() // ReferenceError: Foo is not defined
class Foo {
constructor() {
this.foo = 42
}
}
- class 声明内部会启用严格模式。
- class 的所有方法(包括静态方法和实例方法)都是不可枚举的。
- class 的所有方法(包括静态方法和实例方法)都没有原型对象 prototype,所以也没有[[construct]],不能使用 new 来调用。
- 必须使用 new 调用 class。
- class 内部无法重写类名
3.简单实现一个 eval
通过Function 构造函数 创建一个新的 Function 对象。 在 JavaScript 中, 每个函数实际上都是一个 Function 对象。
new Function ([arg1[, arg2[, ...argN]],] functionBody). MDN (opens new window)
function cEval(exp) {
return new Function('return '+ exp).call(this)
}
const str = '1+1'
cEval(str)
4.parseInt 深入
parseInt(string, radix)
对于第一个参数 string:
- 如果参数不是一个字符串,则将其转换为字符串(使用 ToString 抽象操作)
- 字符串开头的空白符将会被忽略
对于第二个参数 radix:
- 一个介于 2 和 36 之间的整数(数学系统的基础),表示上述字符串的基数
radix 为 undefined,0 或者没有指定的情况下:
- 以"0x"或者"0X"开头, 则基数是 16
- string 以"0"开头, 基数是 8(八进制)或者 10(十进制)
- string 以其它任何值开头,则基数是 10 (十进制)
如果被解析参数的第一个字符无法被转化成数值类型,则返回 NaN
radix 参数为 n 将会把第一个参数看作是一个数的 n 进制表示,而返回的值则是十进制的
注意:
- 使用 parseInt 去截取包含 e 字符数值部分会造成难以预料的结果
- 如果 parseInt 遇到了不属于 radix 参数所指定的基数中的字符那么该字符和其后的字符都将被忽略。接着返回已经解析的整数部分
- 基数是 1,返回 NaN
base 转换规则表
String | Base36 | ... | Base10 | ... | Base2 |
---|---|---|---|---|---|
0 | 0 | ... | 0 | ... | 0 |
1 | 1 | ... | 1 | ... | 1 |
2 | 2 | ... | 2 | ... | 2 |
3 | 3 | ... | 3 | ... | NaN |
4 | 4 | ... | 4 | ... | NaN |
5 | 5 | ... | 5 | ... | NaN |
6 | 6 | ... | 6 | ... | NaN |
7 | 7 | ... | 7 | ... | NaN |
8 | 8 | ... | 8 | ... | NaN |
9 | 9 | ... | 9 | ... | NaN |
a | 10 | ... | NaN | ... | NaN |
b | 11 | ... | NaN | ... | NaN |
c | 12 | ... | NaN | ... | NaN |
d | 13 | ... | NaN | ... | NaN |
e | 14 | ... | NaN | ... | NaN |
f | 15 | ... | NaN | ... | NaN |
g | 16 | ... | NaN | ... | NaN |
h | 17 | ... | NaN | ... | NaN |
i | 18 | ... | NaN | ... | NaN |
j | 19 | ... | NaN | ... | NaN |
k | 20 | ... | NaN | ... | NaN |
l | 21 | ... | NaN | ... | NaN |
m | 22 | ... | NaN | ... | NaN |
n | 23 | ... | NaN | ... | NaN |
o | 24 | ... | NaN | ... | NaN |
p | 25 | ... | NaN | ... | NaN |
q | 26 | ... | NaN | ... | NaN |
r | 27 | ... | NaN | ... | NaN |
s | 28 | ... | NaN | ... | NaN |
t | 29 | ... | NaN | ... | NaN |
u | 30 | ... | NaN | ... | NaN |
v | 31 | ... | NaN | ... | NaN |
w | 32 | ... | NaN | ... | NaN |
x | 33 | ... | NaN | ... | NaN |
y | 34 | ... | NaN | ... | NaN |
z | 35 | ... | NaN | ... | NaN |
String |
---|
0 |
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
a |
b |
c |
d |
e |
f |
g |
h |
i |
j |
k |
l |
m |
n |
o |
p |
q |
r |
s |
t |
u |
v |
w |
x |
y |
z |
console结果可能不准确,按F12打开控制台查看
5.position sticky ?
相对用户的滚动位置定位
6.call & apply & bind 实现
- call
Function.prototype._call = function(context, ...args) {
context = context || window
context.fn = this
const result = context.fn(...args)
delete context.fn
return result
}
- apply
Function.prototype._apply = function(context, arg = []) {
context = context || window
context.fn = this
const result = context.fn(...arg)
delete context.fn
return result
}
- bind
Function.prototype._bind = function(context, ...args) {
return () => this.apply(context, args)
}
← 😍 Works Solution →