_indexBy() 返回一个key-value形式的js对象可用于添加商品业务逻辑的实现; _.map(productsData,function(product){ var objNegative= /jquery.js"></script> <script src=". /underscore-min.<em>js</em>"></script> <style type="text/css"> *{padding: 0;margin:0;} table{border-collapse ">
# 思路 创建 XMLHttpRequest 实例 发出 HTTP 请求 服务器返回 XML 格式的字符串 JS 解析 XML 字符串 随着历史推进,XML 已经被淘汰,取而代之的是 JSON # 版本
Object.prototype.isPrototypeOf(o) === true C.prototype instanceof Object // true,同上 C.prototype = {}; var o2 = new C(); o2 instanceof C; // true o instanceof C; // false , 因为 C.prototype 指向了一个空对象,这个对象不在 o 的原型链上
} } MyPromise.prototype.then = function (onResolved, onRejected) { var self = this; var promise2; ) => { try { var x = onResolved(self.value); resolutionProcedure(promise2, ) => { try { var x = onRejected(self.value); resolutionProcedure(promise2, reject(reason); } }); })); } }; function resolutionProcedure (promise2, { if (called) return; called = true; resolutionProcedure(promise2,
function Car() {} car1 = new Car(); car2 = new Car(); console.log(car1.color); // undefined Car.prototype.color __proto__.color); // "default color" console.log(car2. __proto__.color); // "default color" console.log(car1.color); // "red" console.log(car2.color); // "default this.model = model; this.year = year; } var car1 = new Car("Ford", "Mustang", 1976); var car2 = New(Person, 'John Doe', 27); console.log(p1.getAge()); // 33 console.log(p2.getAge()); // 27
# 思路 节流函数原理:规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,只有一次生效 # 场景 拖拽 固定时间内只执行一次,防止超高频次触发位置变动 缩放 监控浏览器 resize 动画 避免短时间内多次触发动画引起性能问题 # 实现 /** * @param {Function} fn * @param {Number} delay */ function throttle (fn, delay = 50) { let lastTime = 0; return
list.length; i++) { prev = fn(prev, list[i], i); } return prev; } console.log( reduce([1, 2,
concat 方法,所以这里必须写入初始值 空数组 只能打平一层 // const flat = (list) => list.reduce((a, b) => a.concat(b), []); // 2. flat(b, depth - 1) : b); }, []); }; // 测试用例 console.log(flat([1, 2, 3, [4, 5, [6, 7, [0, 9, 0], 8
只是有点复杂先用with,在用Proxy with with这个特性,也算是一个比较鸡肋的,他和eval并列为js两大SB特性. 不说无用, bug还多,安全性就没谁了... ></iframe> 这样已添加,那么下面的事,你都不可以做了: 1. script脚本不能执行 2. 不能发送ajax请求 3. 不能使用本地存储,即localStorage,cookie等 4. ></iframe> 这样,就可以保证js脚本的执行,但是禁止iframe里的javascript执行top.location = self.location。 head> </html> 这里顺便插播一下关于postMessage的相关知识点. postMessage 讲解 postMessage主要做的事情有三个: 1.页面和其打开的新窗口的数据传递 2. 设置基本的安全特性 <iframe sandbox='allow-scripts' id='sandboxed' src='frame.html'></iframe> // js
个人IP:shigen逛博客的时候,发现了一个很有意思的文章:数据库表结构导出工具。带着好奇,我也去DIY了一个,先看看效果:这个就是主要的程序界面,可以选择生成md文档或者docx文档。 table.rows[0].cells hdr_cells[0].text = '字段' hdr_cells[1].text = '类型' hdr_cells[2] row_cells[0].text = field_info[0] row_cells[1].text = field_info[1] row_cells[2] .text = field_info[2] row_cells[3].text = field_info[3] row_cells[ Button(root, text="生成文档", command=generate_document)generate_button.grid(row=len(fields) + 1, columnspan=2,
# 思路 防抖函数原理:在事件被触发 n 秒后再执行回调,如果在这 n 秒内又被触发,则重新计时 防抖动是将多次执行变为最后一次执行,节流是将多次执行变成每隔一段时间执行。 # 场景 按钮提交 分支多次提交,只执行最后一次提交 表单验证 需要服务端验证表单的情况,只执行一段连续输入事件的最后一次 搜索联想词 # 实现 /** * @param {Function} fn * @param {Number} delay */ function debounce (fn, delay = 50) {
initial-scale=1.0" /> <title>Document</title> </head> <body> <script> // 手写实现 let self = this; return function () { let args2 return self.apply(context, [...args1, ...args2]); }; }; let getName1 = obj.getName; getName1(); // xiaoming let getName2 = obj.getName.bind(obj); getName2(); // xiaohong let getName3 = obj.getName.bind
盘点那些 JS 手写题 1. JS 基础 1. 手写 call 函数 「语法」 function.call(thisArg, arg1, arg2, ...) thisArg:可选的。在 function 函数运行时使用的 this 值。 手写 bind 函数 「语法」 function.bind(thisArg[, arg1[, arg2[, ...]]]) thisArg:调用绑定函数时作为 this 参数传递给目标函数的值。 将js对象转化为树形结构 // 转换前: source = [{ id: 1, pid: 0, name: 'body' }, { id: 2, pid: 1, name: 'title 手写一个 sleep / delay 函数 sleep 函数既是面试中常问到的一道代码题,也是日常工作,特别是测试中常用的一个工具函数。
我们来谈谈关于「JS手写」的相关知识点和具体的算法。 该系列的文章,大部分都是前面文章的知识点汇总,如果想具体了解相关内容,请移步相关系列,进行探讨。 文章list CSS重点概念精讲 JS_基础知识点精讲 网络通信_知识点精讲 好了,天不早了,干点正事哇。 new ES5、ES6继承 instanceof debounce & throttle reduce compose 合并对象 函数柯里化 深复制对象 Object.create 函数缓存 数组去重 手写 , 3)(10)(50)(2); // 2 ---- 深复制对象 创建一个对象的深度克隆。 352" // "abc" Array.from与set去重 function unique(arr) { return Array.from(new Set(arr)) } ---- 手写
fn; } fn.toString = function() { return _args.reduce((sum, cur) => sum + cur); } return fn;}前端手写面试题详细解答使用 val; } } else { // 处理没有 value 的参数 paramsObj[param] = true; } }) return paramsObj;}手写 = a - b判断是否是电话号码function isPhone(tel) { var regx = /^1[34578]\d{9}$/; return regx.test(tel);}手写 // 手写简化版// 节流函数const throttle = (fn, delay = 500) => { let flag = true; return (...args) => { if 是此次传进来的数值5,m值还是上一步中的7,所以add(m+n)=add(7+5)=add(12),此时m=12,并且返回temp函数由于后面没有传入参数,等于返回的temp函数不被执行而是打印,了解JS
第二篇文章是看了Express的基本用法,更主要的是看了下他的源码:手写Express.js源码 Express的源码还是比较复杂的,自带了路由处理和静态资源支持等等功能,功能比较全面。 Koa代码已经上传GitHub,拿下来,一边玩代码一边看文章效果更佳:github.com/dennis-jian… 简单示例 我写源码解析,一般都遵循一个简单的套路:先引入库,写一个简单的例子,然后自己手写源码来替代这个库 从上面两个例子的代码来看,Koa跟Express有几个明显的区别: ctx替代了req和res 可以使用JS的新API了,比如async和await 手写源码 手写源码前我们看看用到了哪些API,这些就是我们手写的目标 比如这里的app.use就可以连续点点点了,像这样: app.use(middlewaer1).use(middlewaer2).use(middlewaer3) 为什么会有这种效果呢? Express源码可以看我之前这篇文章:手写Express.js源码 Koa的思路看起来更清晰,Koa本身的库只是一个内核,只有中间件功能,来的请求会依次经过每一个中间件,然后再出来返回给请求者,这就是大家经常听说的
food'; } console.log(new Food('cheese', 5).name); // cheese # 语法 function.call(thisArg, arg1, arg2, arg1, arg2, ... 可选,指定要传递给函数的参数。 # 返回值 使用调用者提供的 this 值和参数调用该函数的返回值。若该方法没有返回值,则返回 undefined。 arg1, arg2, ... 当目标函数被调用时,被预置入绑定函数的参数列表中的参数。 返回值 返回一个原函数的拷贝,并拥有指定的 this 值和初始参数。 { return arg1 + arg2; } var list_1 = list(1, 2, 3); // [1, 2, 3] var result_1 = addArguments(1, list_3 = leadingThirtysevenList(1, 2, 3); // [37, 1, 2, 3] var result_2 = addArguments(5); // 37 +
JavaScript进阶的必要性 无论是学习react还是vue,它们都是js的应用框架。 剥去他们的壳子看到的始终是js,所以作为一个前端大厨必须要熟练掌握好js这个大勺,才能烧出一顿好菜 无论是自我提升还是应付面试以下这些手写功能是每一个前端程序员必须掌握的 1. 返回result 结果 return result } func.myApply(newObj,['55','yw']) // xmx 55 yw apply代码执行效果 图片 相关js视频讲解 手写new new关键字执行时做了哪些 1. 创建了一个新对象 2. 将这个新对象与构造函数用原型链链接起来 3. 将构造函数的this指向新的对象,执行构造函数的代码赋值 4. 节流和防抖也是闭包的应用 手写防抖代码参考 /*** * 手写防抖 */ const debounce = (func, delay) => { let timer = null; return
本文照例会从Express的基本使用入手,然后自己手写一个Express来替代他,也就是源码解析。 => { const resData = [ { id: 1, name: "小明", age: 18, }, { id: 2, 手写源码 手写源码才是本文的重点,前面的不过是铺垫,本文手写的目标就是自己写一个express来替换前面用到的express api,其实就是源码解析。 Express.js的上述代码其实也是实现了类似的效果,setprototypeof又是一个第三方库,作用类似Object.setPrototypeOf(obj, prototype),就是给一个对象设置原型 layer.match layer.match是用来检测当前path是否匹配的函数,用到了一个第三方库path-to-regexp,这个库可以将path转为正则表达式,方便后面的匹配,这个库在之前写过的
上一章我们基本上领略了three.js的魅力,这一章我们先不急着深入three.js,先学习2个非常有用的工具库,分别是stats.js和dat.gui,也许你没有听过两个库,但是很可能你见过他们。 ---- stats.js stats.js是three.js的作者mrdoob开发的一个简单的JavaScript性能监控的库。 上述stats对象还有一个方法stats.update();,如果我们只关注每2次绘制间代码的FPS,那么用这个方法更方便,stats.js的源代码点击这里查看。 dat.gui dat.gui是一个轻量级的JavaScript控制库,它可以很方便控制变量的值。 其实网上好多canvas和three.js的特效都会引入这个库来简单的控制变量,这个库最6的地方是当GUI上的值改变的时候,内存中的数据也变了,你可以点击打印按钮来打印对象obj的值。