[TOC]
## 实现 JS 对象的深拷贝
备注: 递归容易造成爆栈,尾部调用(需要了解一下)可以解决递归的这个问题,Chrome 的 V8 引擎做了尾部调用优化,我们在写代码的时候也要注意尾部调用写法。递归的爆栈问题可以通过将递归改写成枚举的方式来解决,就是通过for或者while来代替递归。
## 实现js方法对对url参数的解析 ,延伸url参数的拼接
## 实现一个简单的模版引擎
列:我叫a,年龄b,性别c; let data = { name: '小明', age: 18, } 没有定义的返回undefined
## 如何快速让字符串变成已千为精度的数字
## 如何判断当前的环境是node还是浏览器
通过判断global 对象是否是window,window的话就是浏览器中.直接控制台输出查看window是有值的还是未定义的。
## 对象相等判断
简单写出一个方法判断两个对象相等,假设只具有一层属性结构,且均为基本值。基本逻辑很简单,判断两个对象的属性数量相同,并且a具有的属性另一个属性也具有并且值相同即可。
```
function isEqual(a, other){
var len = Object.keys(a);
if(len !== Object.keys(b)) return false;
while(len--){
key = keys[len]
if (!(b.hasOwnProperty(key) && a[key] === b[key]))) return false;
}
return true
}
```
备注:如果你想了解更多,欢迎去看
- [eq写法分析](https://github.com/mqyqingfeng/Blog/issues/41)
- [lodash库:baseIsEqualDeep](https://github.com/lodash/lodash/blob/master/.internal/baseIsEqualDeep.js)
## 闭包
- 优点
使用闭包主要是为了设计私有的方法和变量,可以避免全局变量的污染
- 缺点
闭包会常驻内存,会增大内存使用量,使用不当很容易造成内存泄露。在js中,函数即闭包,只有函数才会产生作用域的概念
- 闭包的特点
1.函数嵌套函数
2.函数内部可以引用外部的参数和变量
3.参数和变量不会被垃圾回收机制回收
## 浮点数精度问题
### 问题
- 计算不准确
- 超出表示范围,大数危机
首先要搞清楚 JavaScript 如何存储小数。和其它语言如 Java 和 Python 不同,JavaScript 中所有数字包括整数和小数都只有一种类型 — `Number`。它的实现遵循 [IEEE 754](http://grouper.ieee.org/groups/754/) 标准,使用 64 位固定长度来表示,也就是标准的 double 双精度浮点数(相关的还有float 32位单精度)。
这样的存储结构优点是可以归一化处理整数和小数,节省存储空间。
解决方案:
### **1 数据展示类**
当你拿到 `1.4000000000000001` 这样的数据要展示时,建议使用 `toPrecision` 凑整并 `parseFloat` 转成数字后再显示,如下:
```
parseFloat(1.4000000000000001.toPrecision(12)) === 1.4 // True
```
封装成方法就是:
```js
function strip(num, precision = 12) {
return +parseFloat(num.toPrecision(precision));
}
```
为什么选择 `12` 做为默认精度?这是一个经验的选择,一般选12就能解决掉大部分0001和0009问题,而且大部分情况下也够用了,如果你需要更精确可以调高。
### **2 数据运算类**
对于运算类操作,如 `+-*/`,就不能使用 `toPrecision` 了。正确的做法是把小数转成整数后再运算。以加法为例:
```js
/**
* 精确加法
*/
function add(num1, num2) {
const num1Digits = (num1.toString().split('.')[1] || '').length;
const num2Digits = (num2.toString().split('.')[1] || '').length;
const baseNum = Math.pow(10, Math.max(num1Digits, num2Digits));
return (num1 * baseNum + num2 * baseNum) / baseNum;
}
```
以上方法能适用于大部分场景。遇到科学计数法如 `2.3e+1`(当数字精度大于21时,数字会强制转为科学计数法形式显示)时还需要特别处理一下。
能读到这里,说明你非常有耐心,那我就放个福利吧。遇到浮点数误差问题时可以直接使用
https://github.com/dt-fe/number-precision
完美支持浮点数的加减乘除、四舍五入等运算。非常小只有1K,远小于绝大多数同类库(如Math.js、BigDecimal.js),100%测试全覆盖,代码可读性强,不妨在你的应用里用起来!
### **3 参考推荐文章**:
- [浮点数精度](https://github.com/camsong/blog/issues/9)
## null与undefined的区别
null是一个表示"无"的对象,转为数值时为0;undefined是一个表示"无"的原始值,转为数值时为NaN。
当声明的变量还未被初始化时,变量的默认值为undefined。 null用来表示尚未存在的对象,常用来表示函数企图返回一个不存在的对象。
* undefined表示"缺少值",就是此处应该有一个值,但是还没有定义。典型用法是:
(1)变量被声明了,但没有赋值时,就等于undefined。
(2) 调用函数时,应该提供的参数没有提供,该参数等于undefined。
(3)对象没有赋值的属性,该属性的值为undefined。
(4)函数没有返回值时,默认返回undefined。
* null表示"没有对象",即该处不应该有值。典型用法是:
(1) 作为函数的参数,表示该函数的参数不是对象。
(2) 作为对象原型链的终点。
- 前端入门
- 前端入职须知
- 入职准备
- 前端ide
- vsc快速上手指南
- 上手指南一
- 常用插件推荐
- 微信开发者
- sublime的使用
- hbuilder入门
- ws
- 前端面试
- 概要
- bat面试题库
- 题库一
- 面试大纲
- 题库二
- 面试大纲
- 前端基础面试题
- js基础面试题
- vue&&react面试题
- 数据结构&&算法面试题
- 题库三
- 001
- 题库四
- 中小公司leader
- 常规题库
- 前端规范
- 001
- css
- 001
- 002
- es6(js)
- 001
- 002
- 003
- 004
- node
- 001
- vue
- 001
- react
- 001
- 预处理器
- 001
- gulp
- 001
- webpack
- 001
- 设计模式
- 001
- web常识
- 001
- koa
- 001
- 小程序
- 001
- 数据结构与算法
- 001
- 推荐文章
- 面试指南
- web性能
- 面试分享
- 001
- ps
- ps入门阶段
- 图片类型以及区别
- 基本概念以及常用工具
- ps操作技巧
- 几个问题
- ps互动教程软件(app)
- 资源导航
- ps站点资源导航
- ui站点导航
- html
- h5专题
- audio/video
- Geolocation
- Websockets
- Web storage
- Communication
- Web Workers
- requestAnimationFrame
- async&&defer
- fileApi
- h5调用底层能力
- input新解
- canvas实战篇
- 教程
- js
- javascript入门
- js代码审查工具
- js性能优化
- 浏览器dom对象
- js优质资源
- indexDB入门
- jquery
- jq基本语法
- jq插件与原生插件
- Jq使用建议
- ajax后退解决方案
- jq常见问题
- js常用技术
- js控制运动-move.js
- 常用正则归纳
- js实用技术
- 鼠标行为分析
- document.referrer
- 你可能不知道的调试技巧
- 表格文件的读取与下载
- 异步编程那些事
- 数据结构
- 编程环境和模型
- 列表
- 栈
- 队列
- 链表
- 字典
- 散列
- 集合
- 二叉树和二叉查找树
- 参考
- js编程
- js模块机制
- 算法
- 基本算法
- 递归
- 图和图算法
- 图定义
- 系统建模
- 图类
- 搜索图
- 查找最短路径
- 拓扑排序
- 图实践
- 排序算法
- 测试平台
- 冒泡排序
- 选择排序
- 插入排序
- 基本排序的比较
- 希尔排序
- 归并排序
- 快速排序
- 实践
- 二分排序
- 检索算法
- 顺序查找
- 二分查找
- 查找文本数据
- 检索实践
- 高级算法
- 动态规划
- 贪心算法
- 高级算法实践
- 代码重构
- 简化函数参数
- 001
- 002
- 基础巩固
- 001
- es2015实战
- 初识es-module
- 异步编程
- es6工厂函数
- filter|map|reduce
- js实战篇
- 前端图像处理
- touch事件知多少
- 手势与实践
- print表格分页
- 精彩文章推荐
- 001
- 插件库
- 插件大全
- 功能性插件
- pdfjs
- wdatepicker
- qrcoder
- barcode插件
- photoviewer
- hammer.js
- echarts
- 视频控件
- 发送浏览器通知
- 触屏签名插件
- 图片相关插件推荐
- 待分类插件(pc)
- 待分类插件(手机端)
- 交互组件
- layerjs
- web
- web兼容
- pc端兼容bug汇总
- ie兼容bug汇总
- ie8测试专题
- web常用技术点
- web兼容汇总001
- ie6专题
- css兼容
- web安全
- web安全初级
- app/h5组件
- app教程
- 前端教程
- rubikx的教程
- 与app交互逻辑
- h5唤起app通识
- webview专题
- webview总纲
- js与oc交互协议
- js与安卓交互协议
- 兼容问题汇总
- jsBridge专题
- errorBook.js
- 常用工具
- chrome-devtool使用
- chraels
- 开发注意事项
- web常识
- markdown教程
- 自定义风格思路
- 经验与问题总结
- 总结1
- 前端应该注意哪些seo
- 懒加载和预加载
- https
- 前端重构
- web优化
- 移动端web优化
- http缓存
- web端优化
- 图片专题
- svg专题
- 深入浅出svg
- 地图使用
- 注意事项
- 需求提交
- 常规交互需求提交
- 缓存
- 干货文章
- 浏览器缓存
- 内存
- web性能指南
- 读书笔记
- ui框架
- 概论
- easyui
- bootstrap
- 入门推荐
- modal插件使用
- 按钮组件
- 正确使用栅格布局
- 下拉框插件使用
- 表单使用与验证
- tab切换项插件
- 分页控件
- 进度条控件
- 文件上传控件
- 面板控件
- 常见特效与插件
- weui
- sui-pc
- sui-mobile
- layerUI
- frozen-UI
- rubik-u那些事
- 基本内容
- 小程序
- 小程序入门
- 入门
- 实践踩坑
- 001
- 基本语法
- 开发大纲
- 注意事项
- 微信专题
- 基本入门
- 准备工作
- 定制菜单
- 图文消息与图文推送
- h5支付
- 公众号支付
- node完成微信支付
- 进阶使用
- 微信分享
- weui使用
- 基本使用
- 支付宝专题
- 支付宝h5支付
- app支付接入
- 服务窗支付
- java
- java入门
- eclipse基本使用
- 语言特点
- java代码规范
- 编译调试
- java基本语句
- springMVC
- javaweb
- vm模板引擎
- freemarker
- 常用常识
- 常用常识2
- 部署项目
- web --xml文件解析
- java生成pdf文件
- java读取、写文件案例
- 图片加水印
- 图片加水印2
- java-cookie
- 验证码文件
- sql-mapper语法
- maven教程
- mySql教程
- jeecms
- flash
- flash入门
- flash准备工作
- 运行与编译
- 浏览器中flash设置教程
- flash检测