为什么会有 BigInt 的提案？
JavaScript 中 Number.MAX_SAFE_INTEGER 表示最⼤安全数字，计算结果是 9007199254740991，即在这个数范围内不会出现精度丢失（⼩数除外）。但是⼀旦超过这个范围，js 就会出现计算不准确的情况，这在⼤数计算的时候不得不依靠⼀些第三⽅库进⾏解决，因此官⽅提出了 BigInt 来解决此问题。
说一下 SPA 单页面有什么优缺点？
优点：
1.体验好，不刷新，减少 请求 数据ajax异步获取 页面流程；
2.前后端分离
3.减轻服务端压力
4.共用一套后端程序代码，适配多端
缺点：
1.首屏加载过慢；
2.SEO 不利于搜索引擎抓取
复制代码
事件总线（发布订阅模式）
class EventEmitter { constructor() { this.cache = {} } on(name, fn) { if (this.cache[name]) { this.cache[name].push(fn) } else { this.cache[name] = [fn] } } off(name, fn) { let tasks = this.cache[name] if (tasks) { const index = tasks.findIndex(f => f === fn || f.callback === fn) if (index >= 0) { tasks.splice(index, 1) } } } emit(name, once = false, ...args) { if (this.cache[name]) { // 创建副本，如果回调函数内继续注册相同事件，会造成死循环 let tasks = this.cache[name].slice() for (let fn of tasks) { fn(...args) } if (once) { delete this.cache[name] } } }}
// 测试let eventBus = new EventEmitter()let fn1 = function(name, age) { console.log(`${name} ${age}`)}let fn2 = function(name, age) { console.log(`hello, ${name} ${age}`)}eventBus.on('aaa', fn1)eventBus.on('aaa', fn2)eventBus.emit('aaa', false, '布兰', 12)// '布兰 12'// 'hello, 布兰 12'
复制代码
函数防抖
触发高频事件 N 秒后只会执行一次，如果 N 秒内事件再次触发，则会重新计时。
简单版：函数内部支持使用 this 和 event 对象；
function debounce(func, wait) { var timeout; return function () { var context = this; var args = arguments; clearTimeout(timeout) timeout = setTimeout(function(){ func.apply(context, args) }, wait); }}
复制代码
使用：
var node = document.getElementById('layout')function getUserAction(e) { console.log(this, e) // 分别打印：node 这个节点 和 MouseEvent node.innerHTML = count++;};node.onmousemove = debounce(getUserAction, 1000)
复制代码
最终版：除了支持 this 和 event 外，还支持以下功能：
function debounce(func, wait, immediate) { var timeout, result;
var debounced = function () { var context = this; var args = arguments;
if (timeout) clearTimeout(timeout); if (immediate) { // 如果已经执行过，不再执行 var callNow = !timeout; timeout = setTimeout(function(){ timeout = null; }, wait) if (callNow) result = func.apply(context, args) } else { timeout = setTimeout(function(){ func.apply(context, args) }, wait); } return result; };
debounced.cancel = function() { clearTimeout(timeout); timeout = null; };
return debounced;}
复制代码
使用：
var setUseAction = debounce(getUserAction, 10000, true);// 使用防抖node.onmousemove = setUseAction
// 取消防抖setUseAction.cancel()
复制代码
树形结构转成列表
题目描述:
[ { id: 1, text: '节点1', parentId: 0, children: [ { id:2, text: '节点1_1', parentId:1 } ] }]转成[ { id: 1, text: '节点1', parentId: 0 //这里用0表示为顶级节点 }, { id: 2, text: '节点1_1', parentId: 1 //通过这个字段来确定子父级 } ...]
复制代码
实现代码如下:
function treeToList(data) { let res = []; const dfs = (tree) => { tree.forEach((item) => { if (item.children) { dfs(item.children); delete item.children; } res.push(item); }); }; dfs(data); return res;}
复制代码
实现函数原型方法
call
使用一个指定的 this 值和一个或多个参数来调用一个函数。
实现要点：
this 可能传入 null；
传入不固定个数的参数；
函数可能有返回值；
Function.prototype.call2 = function (context) { var context = context || window; context.fn = this;
var args = []; for(var i = 1, len = arguments.length; i < len; i++) { args.push('arguments[' + i + ']'); }
var result = eval('context.fn(' + args +')');
delete context.fn return result;}
复制代码
apply
apply 和 call 一样，唯一的区别就是 call 是传入不固定个数的参数，而 apply 是传入一个数组。
实现要点：
this 可能传入 null；
传入一个数组；
函数可能有返回值；
Function.prototype.apply2 = function (context, arr) { var context = context || window; context.fn = this;
var result; if (!arr) { result = context.fn(); } else { var args = []; for (var i = 0, len = arr.length; i < len; i++) { args.push('arr[' + i + ']'); } result = eval('context.fn(' + args + ')') }
delete context.fn return result;}
复制代码
bind
bind 方法会创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。
实现要点：
Function.prototype.bind2 = function (context) { var self = this; var args = Array.prototype.slice.call(arguments, 1);
var fNOP = function () {};
var fBound = function () { var bindArgs = Array.prototype.slice.call(arguments); return self.apply(this instanceof fNOP ? this : context, args.concat(bindArgs)); }
fNOP.prototype = this.prototype; fBound.prototype = new fNOP(); return fBound;}
复制代码
实现 new 关键字
new 运算符用来创建用户自定义的对象类型的实例或者具有构造函数的内置对象的实例。
实现要点：
function objectFactory() { var obj = new Object() Constructor = [].shift.call(arguments); obj.__proto__ = Constructor.prototype; var ret = Constructor.apply(obj, arguments);
// ret || obj 这里这么写考虑了构造函数显示返回 null 的情况 return typeof ret === 'object' ? ret || obj : obj;};
复制代码
使用：
function person(name, age) { this.name = name this.age = age}let p = objectFactory(person, '布兰', 12)console.log(p) // { name: '布兰', age: 12 }
复制代码
实现 instanceof 关键字
instanceof 就是判断构造函数的 prototype 属性是否出现在实例的原型链上。
function instanceOf(left, right) { let proto = left.__proto__ while (true) { if (proto === null) return false if (proto === right.prototype) { return true } proto = proto.__proto__ }}
复制代码
上面的 left.proto 这种写法可以换成 Object.getPrototypeOf(left)。
实现 Object.create
Object.create()方法创建一个新对象，使用现有的对象来提供新创建的对象的__proto__。
Object.create2 = function(proto, propertyObject = undefined) { if (typeof proto !== 'object' && typeof proto !== 'function') { throw new TypeError('Object prototype may only be an Object or null.') if (propertyObject == null) { new TypeError('Cannot convert undefined or null to object') } function F() {} F.prototype = proto const obj = new F() if (propertyObject != undefined) { Object.defineProperties(obj, propertyObject) } if (proto === null) { // 创建一个没有原型对象的对象，Object.create(null) obj.__proto__ = null } return obj}
复制代码
实现 Object.assign
Object.assign2 = function(target, ...source) { if (target == null) { throw new TypeError('Cannot convert undefined or null to object') } let ret = Object(target) source.forEach(function(obj) { if (obj != null) { for (let key in obj) { if (obj.hasOwnProperty(key)) { ret[key] = obj[key] } } } }) return ret}
复制代码
实现 JSON.stringify
JSON.stringify([, replacer [, space]) 方法是将一个 JavaScript 值(对象或者数组)转换为一个 JSON 字符串。此处模拟实现，不考虑可选的第二个参数 replacer 和第三个参数 space
基本数据类型：
undefined 转换之后仍是 undefined(类型也是 undefined)
boolean 值转换之后是字符串 "false"/"true"
number 类型(除了 NaN 和 Infinity)转换之后是字符串类型的数值
symbol 转换之后是 undefined
null 转换之后是字符串 "null"
string 转换之后仍是 string
NaN 和 Infinity 转换之后是字符串 "null"
函数类型：转换之后是 undefined
如果是对象类型(非函数)
如果是一个数组：如果属性值中出现了 undefined、任意的函数以及 symbol，转换成字符串 "null" ；
如果是 RegExp 对象：返回 {} (类型是 string)；
如果是 Date 对象，返回 Date 的 toJSON 字符串值；
如果是普通对象；
如果有 toJSON() 方法，那么序列化 toJSON() 的返回值。
如果属性值中出现了 undefined、任意的函数以及 symbol 值，忽略。
所有以 symbol 为属性键的属性都会被完全忽略掉。
对包含循环引用的对象（对象之间相互引用，形成无限循环）执行此方法，会抛出错误。
function jsonStringify(data) { let dataType = typeof data;
if (dataType !== 'object') { let result = data; //data 可能是 string/number/null/undefined/boolean if (Number.isNaN(data) || data === Infinity) { //NaN 和 Infinity 序列化返回 "null" result = "null"; } else if (dataType === 'function' || dataType === 'undefined' || dataType === 'symbol') { //function 、undefined 、symbol 序列化返回 undefined return undefined; } else if (dataType === 'string') { result = '"' + data + '"'; } //boolean 返回 String() return String(result); } else if (dataType === 'object') { if (data === null) { return "null" } else if (data.toJSON && typeof data.toJSON === 'function') { return jsonStringify(data.toJSON()); } else if (data instanceof Array) { let result = []; //如果是数组 //toJSON 方法可以存在于原型链中 data.forEach((item, index) => { if (typeof item === 'undefined' || typeof item === 'function' || typeof item === 'symbol') { result[index] = "null"; } else { result[index] = jsonStringify(item); } }); result = "[" + result + "]"; return result.replace(/'/g, '"');
} else { //普通对象 /** * 循环引用抛错(暂未检测，循环引用时，堆栈溢出) * symbol key 忽略 * undefined、函数、symbol 为属性值，被忽略 */ let result = []; Object.keys(data).forEach((item, index) => { if (typeof item !== 'symbol') { //key 如果是symbol对象，忽略 if (data[item] !== undefined && typeof data[item] !== 'function' && typeof data[item] !== 'symbol') { //键值如果是 undefined、函数、symbol 为属性值，忽略 result.push('"' + item + '"' + ":" + jsonStringify(data[item])); } } }); return ("{" + result + "}").replace(/'/g, '"'); } }}
复制代码
实现 JSON.parse
介绍 2 种方法实现：
eval 实现
第一种方式最简单，也最直观，就是直接调用 eval，代码如下：
var json = '{"a":"1", "b":2}';var obj = eval("(" + json + ")"); // obj 就是 json 反序列化之后得到的对象
复制代码
但是直接调用 eval 会存在安全问题，如果数据中可能不是 json 数据，而是可执行的 JavaScript 代码，那很可能会造成 XSS 攻击。因此，在调用 eval 之前，需要对数据进行校验。
var rx_one = /^[\],:{}\s]*$/;var rx_two = /\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g;var rx_three = /"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g;var rx_four = /(?:^|:|,)(?:\s*\[)+/g;
if ( rx_one.test( json.replace(rx_two, "@") .replace(rx_three, "]") .replace(rx_four, "") )) { var obj = eval("(" +json + ")");}
复制代码
new Function 实现
Function 与 eval 有相同的字符串参数特性。
var json = '{"name":"小姐姐", "age":20}';var obj = (new Function('return ' + json))();
复制代码
实现 Promise
实现 Promise 需要完全读懂 Promise A+ 规范，不过从总体的实现上看，有如下几个点需要考虑到：
then 需要支持链式调用，所以得返回一个新的 Promise；
处理异步问题，所以得先用 onResolvedCallbacks 和 onRejectedCallbacks 分别把成功和失败的回调存起来；
为了让链式调用正常进行下去，需要判断 onFulfilled 和 onRejected 的类型；
onFulfilled 和 onRejected 需要被异步调用，这里用 setTimeout 模拟异步；
处理 Promise 的 resolve；
const PENDING = 'pending';const FULFILLED = 'fulfilled';const REJECTED = 'rejected';
class Promise { constructor(executor) { this.status = PENDING; this.value = undefined; this.reason = undefined; this.onResolvedCallbacks = []; this.onRejectedCallbacks = [];
let resolve = (value) = > { if (this.status === PENDING) { this.status = FULFILLED; this.value = value; this.onResolvedCallbacks.forEach((fn) = > fn()); } };
let reject = (reason) = > { if (this.status === PENDING) { this.status = REJECTED; this.reason = reason; this.onRejectedCallbacks.forEach((fn) = > fn()); } };
try { executor(resolve, reject); } catch (error) { reject(error); } }
then(onFulfilled, onRejected) { // 解决 onFufilled，onRejected 没有传值的问题 onFulfilled = typeof onFulfilled === "function" ? onFulfilled : (v) = > v; // 因为错误的值要让后面访问到，所以这里也要抛出错误，不然会在之后 then 的 resolve 中捕获 onRejected = typeof onRejected === "function" ? onRejected : (err) = > { throw err; }; // 每次调用 then 都返回一个新的 promise let promise2 = new Promise((resolve, reject) = > { if (this.status === FULFILLED) { //Promise/A+ 2.2.4 --- setTimeout setTimeout(() = > { try { let x = onFulfilled(this.value); // x可能是一个proimise resolvePromise(promise2, x, resolve, reject); } catch (e) { reject(e); } }, 0); }
if (this.status === REJECTED) { //Promise/A+ 2.2.3 setTimeout(() = > { try { let x = onRejected(this.reason); resolvePromise(promise2, x, resolve, reject); } catch (e) { reject(e); } }, 0); }
if (this.status === PENDING) { this.onResolvedCallbacks.push(() = > { setTimeout(() = > { try { let x = onFulfilled(this.value); resolvePromise(promise2, x, resolve, reject); } catch (e) { reject(e); } }, 0); });
this.onRejectedCallbacks.push(() = > { setTimeout(() = > { try { let x = onRejected(this.reason); resolvePromise(promise2, x, resolve, reject); } catch (e) { reject(e); } }, 0); }); } });
return promise2; }}const resolvePromise = (promise2, x, resolve, reject) = > { // 自己等待自己完成是错误的实现，用一个类型错误，结束掉 promise Promise/A+ 2.3.1 if (promise2 === x) { return reject( new TypeError("Chaining cycle detected for promise #<Promise>")); } // Promise/A+ 2.3.3.3.3 只能调用一次 let called; // 后续的条件要严格判断 保证代码能和别的库一起使用 if ((typeof x === "object" && x != null) || typeof x === "function") { try { // 为了判断 resolve 过的就不用再 reject 了（比如 reject 和 resolve 同时调用的时候） Promise/A+ 2.3.3.1 let then = x.then; if (typeof then === "function") { // 不要写成 x.then，直接 then.call 就可以了 因为 x.then 会再次取值，Object.defineProperty Promise/A+ 2.3.3.3 then.call( x, (y) = > { // 根据 promise 的状态决定是成功还是失败 if (called) return; called = true; // 递归解析的过程（因为可能 promise 中还有 promise） Promise/A+ 2.3.3.3.1 resolvePromise(promise2, y, resolve, reject); }, (r) = > { // 只要失败就失败 Promise/A+ 2.3.3.3.2 if (called) return; called = true; reject(r); }); } else { // 如果 x.then 是个普通值就直接返回 resolve 作为结果 Promise/A+ 2.3.3.4 resolve(x); } } catch (e) { // Promise/A+ 2.3.3.2 if (called) return; called = true; reject(e); } } else { // 如果 x 是个普通值就直接返回 resolve 作为结果 Promise/A+ 2.3.4 resolve(x); }};
复制代码
Promise 写完之后可以通过 promises-aplus-tests 这个包对我们写的代码进行测试，看是否符合 A+ 规范。不过测试前还得加一段代码：
// promise.js// 这里是上面写的 Promise 全部代码Promise.defer = Promise.deferred = function () { let dfd = {} dfd.promise = new Promise((resolve,reject)=>{ dfd.resolve = resolve; dfd.reject = reject; }); return dfd;}module.exports = Promise;
复制代码
全局安装：
npm i promises-aplus-tests -g
复制代码
终端下执行验证命令：
promises-aplus-tests promise.js
复制代码
上面写的代码可以顺利通过全部 872 个测试用例。
Promise.resolve
Promsie.resolve(value) 可以将任何值转成值为 value 状态是 fulfilled 的 Promise，但如果传入的值本身是 Promise 则会原样返回它。
Promise.resolve = function(value) { // 如果是 Promsie，则直接输出它 if(value instanceof Promise){ return value } return new Promise(resolve => resolve(value))}
复制代码
Promise.reject
和 Promise.resolve() 类似，Promise.reject() 会实例化一个 rejected 状态的 Promise。但与 Promise.resolve() 不同的是，如果给 Promise.reject() 传递一个 Promise 对象，则这个对象会成为新 Promise 的值。
Promise.reject = function(reason) { return new Promise((resolve, reject) => reject(reason))}
复制代码
Promise.all
Promise.all 的规则是这样的：
传入的所有 Promsie 都是 fulfilled，则返回由他们的值组成的，状态为 fulfilled 的新 Promise；
只要有一个 Promise 是 rejected，则返回 rejected 状态的新 Promsie，且它的值是第一个 rejected 的 Promise 的值；
只要有一个 Promise 是 pending，则返回一个 pending 状态的新 Promise；
Promise.all = function(promiseArr) { let index = 0, result = [] return new Promise((resolve, reject) => { promiseArr.forEach((p, i) => { Promise.resolve(p).then(val => { index++ result[i] = val if (index === promiseArr.length) { resolve(result) } }, err => { reject(err) }) }) })}
复制代码
Promise.race
Promise.race 会返回一个由所有可迭代实例中第一个 fulfilled 或 rejected 的实例包装后的新实例。
Promise.race = function(promiseArr) { return new Promise((resolve, reject) => { promiseArr.forEach(p => { Promise.resolve(p).then(val => { resolve(val) }, err => { rejecte(err) }) }) })}
复制代码
Promise.allSettled
Promise.allSettled 的规则是这样：
Promise.allSettled = function(promiseArr) { let result = []
return new Promise((resolve, reject) => { promiseArr.forEach((p, i) => { Promise.resolve(p).then(val => { result.push({ status: 'fulfilled', value: val }) if (result.length === promiseArr.length) { resolve(result) } }, err => { result.push({ status: 'rejected', reason: err }) if (result.length === promiseArr.length) { resolve(result) } }) }) }) }
复制代码
Promise.any
Promise.any 的规则是这样：
Promise.any = function(promiseArr) { let index = 0 return new Promise((resolve, reject) => { if (promiseArr.length === 0) return promiseArr.forEach((p, i) => { Promise.resolve(p).then(val => { resolve(val)
}, err => { index++ if (index === promiseArr.length) { reject(new AggregateError('All promises were rejected')) } }) }) })}
复制代码
参考 前端进阶面试题详细解答
深拷贝
实现一：不考虑 Symbol
function deepClone(obj) { if(!isObject(obj)) return obj; let newObj = Array.isArray(obj) ? [] : {}; // for...in 只会遍历对象自身的和继承的可枚举的属性（不含 Symbol 属性） for(let key in obj) { // obj.hasOwnProperty() 方法只考虑对象自身的属性 if(obj.hasOwnProperty(key)) { newObj[key] = isObject(obj[key]) ? deepClone(obj[key]) : obj[key]; } } return newObj;}
复制代码
实现二：考虑 Symbol
// hash 作为一个检查器，避免对象深拷贝中出现环引用，导致爆栈function deepClone(obj, hash = new WeakMap()) { if(!isObject(obj)) return obj; // 检查是有存在相同的对象在之前拷贝过，有则返回之前拷贝后存于hash中的对象 if(hash.has(obj)) return hash.get(obj); let newObj = Array.isArray(obj) ? [] : {}; // 备份存在hash中，newObj目前是空对象、数组。后面会对属性进行追加，这里存的值是对象的栈 hash.set(obj, newObj); // Reflect.ownKeys返回一个数组，包含对象自身的（不含继承的）所有键名，不管键名是 Symbol 或字符串，也不管是否可枚举。 Reflect.ownKeys(obj).forEach(key => { // 属性值如果是对象，则进行递归深拷贝，否则直接拷贝 newObj[key] = isObject(obj[key]) ? deepClone(obj[key], hash) : obj[key]; }); return newObj;}
复制代码
instanceof
题目描述:手写 instanceof 操作符实现
实现代码如下:
function myInstanceof(left, right) { while (true) { if (left === null) { return false; } if (left.__proto__ === right.prototype) { return true; } left = left.__proto__; }}
复制代码
什么是物理像素，逻辑像素和像素密度，为什么在移动端开发时需要用到 @3x, @2x 这种图片？
以 iPhone XS 为例，当写 CSS 代码时，针对于单位 px，其宽度为 414px & 896px，也就是说当赋予一个 DIV 元素宽度为 414px，这个 DIV 就会填满手机的宽度；
而如果有一把尺子来实际测量这部手机的物理像素，实际为 1242*2688 物理像素；经过计算可知，1242/414=3，也就是说，在单边上，一个逻辑像素=3 个物理像素，就说这个屏幕的像素密度为 3，也就是常说的 3 倍屏。
对于图片来说，为了保证其不失真，1 个图片像素至少要对应一个物理像素，假如原始图片是 500300 像素，那么在 3 倍屏上就要放一个 1500900 像素的图片才能保证 1 个物理像素至少对应一个图片像素，才能不失真。 当然，也可以针对所有屏幕，都只提供最高清图片。虽然低密度屏幕用不到那么多图片像素，而且会因为下载多余的像素造成带宽浪费和下载延迟，但从结果上说能保证图片在所有屏幕上都不会失真。
还可以使用 CSS 媒体查询来判断不同的像素密度，从而选择不同的图片:
my-image { background: (low.png); }@media only screen and (min-device-pixel-ratio: 1.5) { #my-image { background: (high.png); }}
复制代码
computed 的实现原理
computed 本质是一个惰性求值的观察者computed watcher。其内部通过 this.dirty 属性标记计算属性是否需要重新求值。
当 computed 的依赖状态发生改变时,就会通知这个惰性的 watcher,computed watcher 通过 this.dep.subs.length 判断有没有订阅者,
有的话,会重新计算,然后对比新旧值,如果变化了,会重新渲染。 (Vue 想确保不仅仅是计算属性依赖的值发生变化，而是当计算属性最终计算的值发生变化时才会触发渲染 watcher 重新渲染，本质上是一种优化。)
没有的话,仅仅把 this.dirty = true (当计算属性依赖于其他数据时，属性并不会立即重新计算，只有之后其他地方需要读取属性的时候，它才会真正计算，即具备 lazy（懒计算）特性。)
函数柯里化
什么叫函数柯里化？其实就是将使用多个参数的函数转换成一系列使用一个参数的函数的技术。还不懂？来举个例子。
function add(a, b, c) { return a + b + c}add(1, 2, 3)let addCurry = curry(add)addCurry(1)(2)(3)
复制代码
现在就是要实现 curry 这个函数，使函数从一次调用传入多个参数变成多次调用每次传一个参数。
function curry(fn) { let judge = (...args) => { if (args.length == fn.length) return fn(...args) return (...arg) => judge(...args, ...arg) } return judge}
复制代码
浏览器是如何对 HTML5 的离线储存资源进行管理和加载？
说一下 HTTP 3.0
HTTP/3 基于 UDP 协议实现了类似于 TCP 的多路复用数据流、传输可靠性等功能，这套功能被称为 QUIC 协议。
流量控制、传输可靠性功能：QUIC 在 UDP 的基础上增加了一层来保证数据传输可靠性，它提供了数据包重传、拥塞控制、以及其他一些 TCP 中的特性。
集成 TLS 加密功能：目前 QUIC 使用 TLS1.3，减少了握手所花费的 RTT 数。
多路复用：同一物理连接上可以有多个独立的逻辑数据流，实现了数据流的单独传输，解决了 TCP 的队头阻塞问题。
快速握手：由于基于 UDP，可以实现使用 0 ~ 1 个 RTT 来建立连接。
偏函数
什么是偏函数？偏函数就是将一个 n 参的函数转换成固定 x 参的函数，剩余参数（n - x）将在下次调用全部传入。举个例子：
function add(a, b, c) { return a + b + c}let partialAdd = partial(add, 1)partialAdd(2, 3)
复制代码
发现没有，其实偏函数和函数柯里化有点像，所以根据函数柯里化的实现，能够能很快写出偏函数的实现：
function partial(fn, ...args) { return (...arg) => { return fn(...args, ...arg) }}
复制代码
如上这个功能比较简单，现在我们希望偏函数能和柯里化一样能实现占位功能，比如：
function clg(a, b, c) { console.log(a, b, c)}let partialClg = partial(clg, '_', 2)partialClg(1, 3) // 依次打印：1, 2, 3
复制代码
_ 占的位其实就是 1 的位置。相当于：partial(clg, 1, 2)，然后 partialClg(3)。明白了原理，我们就来写实现：
function partial(fn, ...args) { return (...arg) => { args[index] = return fn(...args, ...arg) }}
复制代码
Object.assign()
描述：Object.assign()方法用于将所有可枚举（Object.propertyIsEnumerable() 返回 true）和自有（Object.hasOwnProperty() 返回 true）属性的值从一个或多个源对象复制到目标对象。它将返回修改后的目标对象（请注意这个操作是浅拷贝）。
实现：
Object.assign = function(target, ...source) { if(target == null) { throw new TypeError('Cannot convert undefined or null to object'); } let res = Object(target); source.forEach(function(obj) { if(obj != null) { // for...in 只会遍历对象自身的和继承的可枚举的属性（不含 Symbol 属性） // hasOwnProperty 方法只考虑对象自身的属性 for(let key in obj) { if(obj.hasOwnProperty(key)) { res[key] = obj[key]; } } } }); return res;}
复制代码
Object.is 实现
题目描述:
Object.is不会转换被比较的两个值的类型，这点和===更为相似，他们之间也存在一些区别。 1. NaN在===中是不相等的，而在Object.is中是相等的 2. +0和-0在===中是相等的，而在Object.is中是不相等的
复制代码
实现代码如下:
Object.is = function (x, y) { if (x === y) { // 当前情况下，只有一种情况是特殊的，即 +0 -0 // 如果 x !== 0，则返回true // 如果 x === 0，则需要判断+0和-0，则可以直接使用 1/+0 === Infinity 和 1/-0 === -Infinity来进行判断 return x !== 0 || 1 / x === 1 / y; }
// x !== y 的情况下，只需要判断是否为NaN，如果x!==x，则说明x是NaN，同理y也一样 // x和y同时为NaN时，返回true return x !== x && y !== y;};
复制代码
let 闭包
let 会产生临时性死区，在当前的执行上下文中，会进行变量提升，但是未被初始化，所以在执行上下文执行阶段，执行代码如果还没有执行到变量赋值，就引用此变量就会报错，此变量未初始化。
原函数形参定长（此时 fn.length 是个不变的常数）
// 写法1-不保存参数,递归局部函数function curry(fn) { let judge = (...args) => { // 递归结束条件 if(args.length === fn.length) return fn(...args); return (...arg) => judge(...args, ...arg); } return judge;}
// 写法2-保存参数,递归整体函数function curry(fn) { // 保存参数，除去第一个函数参数 let presentArgs = [].slice.call(arguments, 1); // 返回一个新函数 return function(){ // 新函数调用时会继续传参 let allArgs = [...presentArgs, ...arguments]; // 递归结束条件 if(allArgs.length === fn.length) { // 如果参数够了，就执行原函数 return fn(,,,allArgs); } // 否则继续柯里化 else return curry(fn, ...allArgs); }}
// 测试function add(a, b, c, d) { return a + b + c + d;}console.log(add(1, 2, 3, 4));let addCurry = curry(add);// 以下结果都返回 10console.log(addCurry(1)(2)(3)(4)); console.log(addCurry(1)(2, 3, 4));console.log(addCurry(1, 2)(3)(4));console.log(addCurry(1, 2)(3, 4));console.log(addCurry(1, 2, 3)(4));console.log(addCurry(1, 2, 3, 4));
复制代码
说一下 HTML5 drag API
dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发。
darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发。
dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。
dragover：事件主体是目标元素，在被拖放在某元素内移动时触发。
dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发。
drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。
dragend：事件主体是被拖放元素，在整个拖放操作结束时触发。
使用 clear 属性清除浮动的原理？
使用 clear 属性清除浮动，其语法如下：
clear:none|left|right|both
复制代码
如果单看字面意思，clear:left 是“清除左浮动”，clear:right 是“清除右浮动”，实际上，这种解释是有问题的，因为浮动一直还在，并没有清除。
官方对 clear 属性解释：“元素盒子的边不能和前面的浮动元素相邻”，对元素设置 clear 属性是为了避免浮动元素对该元素的影响，而不是清除掉浮动。
还需要注意 clear 属性指的是元素盒子的边不能和前面的浮动元素相邻，注意这里“前面的”3 个字，也就是 clear 属性对“后面的”浮动元素是不闻不问的。考虑到 float 属性要么是 left，要么是 right，不可能同时存在，同时由于 clear 属性对“后面的”浮动元素不闻不问，因此，当 clear:left 有效的时候，clear:right 必定无效，也就是此时 clear:left 等同于设置 clear:both；同样地，clear:right 如果有效也是等同于设置 clear:both。由此可见，clear:left 和 clear:right 这两个声明就没有任何使用的价值，至少在 CSS 世界中是如此，直接使用 clear:both 吧。
一般使用伪元素的方式清除浮动：
.clear::after{ content:''; display: block; clear:both;}
复制代码
clear 属性只有块级元素才有效的，而::after 等伪元素默认都是内联水平，这就是借助伪元素清除浮动影响时需要设置 display 属性值的原因。
评论