WEB前端常用JavaScript代码整理(二)
对象的判空
- 将json对象转化成json字符串,然后进行判断是否等于字符串'{}',直接写{}无法进行判断
let isObject = {}; console.log(JSON.stringify(isObject) == '{}');
- 使用for循环来判断,若不为空,则返回false
let listObject = { a: 1, b: 3, c: 4 }; function isEmptyObject() {for(let key in listObject) { return false; } return true; } console.log(isEmptyObject());
- 使用Object.keys()来判断,返回的是一个数组,根据数组长度来判断
function isEmptyObject2(obj) {return Object.keys(obj).length == 0; } console.log(isEmptyObject2(isObject));
- 对这个对象中一定存在的属性进行判断
console.log(isObject.id == null);
用对象的属性查找数组里的对象
var inventory = [{name: 'apples', quantity: 2},{name: 'bananas', quantity: 0},{name: 'cherries', quantity: 5} ];function findCherries(fruit) { return function(value){ return value.name == fruit } } console.log(inventory.find(findCherries('cherries'))); // { name: 'cherries', quantity: 5 }
将对象转换成数组
Object.values()
方法返回一个给定对象自身的所有可枚举属性值的数组,值的顺序与使用for...in
循环的顺序相同 ( 区别在于 for-in 循环枚举原型链中的属性 )。
var obj = { foo: 'bar', baz: 42 }; console.log(Object.values(obj)); // ['bar', 42]// array like object var obj = { 0: 'a', 1: 'b', 2: 'c' }; console.log(Object.values(obj)); // ['a', 'b', 'c'] // array like object with random key ordering // when we use numeric keys, the value returned in a numerical order according to the keys var an_obj = { 100: 'a', 2: 'b', 7: 'c' }; console.log(Object.values(an_obj)); // ['b', 'c', 'a'] // getFoo is property which isn't enumerable var my_obj = Object.create({}, { getFoo: { value: function() { return this.foo; } } }); my_obj.foo = 'bar'; console.log(Object.values(my_obj)); // ['bar'] // non-object argument will be coerced to an object console.log(Object.values('foo')); // ['f', 'o', 'o']
Object.values()详细参考地址:《MDN:Object.values(obj)
》
将类数组对象转换成数组
- Array.prototype.slice.call(arguments)或者
[].slice.call(arguments)
/* 该方法可以将类数组对象转换为数组,所谓类数组对象,就是含 length 和索引属性的对象 * 返回的数组长度取决于对象 length 属性的值,并且非索引属性的值或索引大于 length 的值都不会被返回到数组中 * Array.prototype.slice.call(obj,start,end) start:方法中slice截取的开始位置,end终止位置,默认从0开始 * */ let testObject = {0: 'a', 1: 'b', 2: 'c', name: 'admin', length: 3, }; /* 对象中必须定义length,且属性值不能为非数字,非数字无法返回 */ console.log(Array.prototype.slice.call(testObject)); /* 或者简写为[].slice.call(testObject) */ console.log([].slice.call(testObject));
- Array.from()
/* Array、Set、Map 和字符串都是可迭代对象(WeakMap/WeakSet 并不是可迭代对象) * 这些对象都有默认的迭代器,即具有 Symbol.iterator 属性 * 所有通过生成器创建的迭代器都是可迭代对象 * 可以用 for of 循环* */ let testObject2 = {0: 'a', 1: 'b', 2: 'c', name: 'admin', length: 3, }; console.log(Array.from(testObject2));
判断是否为数组
let temporaryArray3 = [1,2,1,2,3]; console.log(temporaryArray3 instanceof Array); console.log(temporaryArray3.constructor == Array); console.log(Array.isArray(temporaryArray3)); console.log(Object.prototype.toString.call(temporaryArray3) === "[object Array]");
将数组转换成键值对对象
let transformObject = Object.assign({}, temporaryArray3); console.log(transformObject); let transformObject2 = {...temporaryArray3}; console.log(transformObject2);
深拷贝与浅拷贝
较常用的对象深拷贝方法:
let copyObject = JSON.parse(JSON.stringify(obj));
- Object.assign
assign对对象分配赋值,实现浅拷贝,但是它有一个特殊的地方,可以处理第一层的深拷贝。
assign(targetObject, obj, obj1) assign会改变targetObject的值,较好的做法就是将targetObject定义为空对象{}
assign是将这个3者合并,若有相同的属性,后面的属性会覆盖前面对象的属性
let temporaryObject2 = {a: 1, d: {e: 3}}; let temporaryObject3 = {b: 1,a: 2}; let mergeObject = Object.assign({}, temporaryObject2, temporaryObject3); console.log(mergeObject); /* mergeObject.d.e不会改变temporaryObject2里a的值,但会改变temporaryObject2里e的值 */ mergeObject.a = 5; mergeObject.d.e = 5; console.log(mergeObject);
- 数组slice浅拷贝
let copyArray1 = copyArray.slice(0);
- 数组concat浅拷贝
let copyArray2 = copyArray.concat();
- ...扩展运算符
const a1 = [1, 2]; // 写法一 const a2 = [...a1]; // 写法二 const [...a2] = a1;
上面的两种写法,a2
都是a1
的克隆。
生成由随机整数组成的数组,数组长度和元素大小可自定义
const genNumArr = (length, limit) =>Array.from({ length }, _ => Math.floor(Math.random() * limit));genNumArr(10, 100);
Date类的相关例
// 以chrome为例 new Date(); // Mon Oct 23 2017 23:38:02 GMT+0800 (CST) new Date(false); // Thu Jan 01 1970 08:00:00 GMT+0800 (CST) new Date(0); // Thu Jan 01 1970 08:00:00 GMT+0800 (CST) new Date(null); // Thu Jan 01 1970 08:00:00 GMT+0800 (CST) new Date(''); // Invalid Date new Date(undefined); // Invalid Date
详情参考:你可能不知道的 Date 类
JS 将有父子关系的数组转换成树形数据
data.forEach(ele => {let parentId = ele.parentId;if (parentId === 0) {//是根元素的hua ,不做任何操作,如果是正常的for-i循环,可以直接continue. } else { //如果ele是子元素的话 ,把ele扔到他的父亲的child数组中. data.forEach(d => { if (d.id === parentId) { let childArray = d.child; if (!childArray) { childArray = [] } childArray.push(ele); d.child = childArray; } }) } }); //去除重复元素 data = data.filter(ele => ele.parentId === 0); console.log('最终等到的tree结构数据: ', data);
前端通过Blob下载文件流
先看下网上一个简单的代码片段:
let blob = new Blob([res], {type: `application / pdf` //word文档为msword,pdf文档为pdf }); let objectUrl = URL.createObjectURL(blob); let link = document.createElement("a"); let fname = `我的文档`; //下载文件的名字 link.href = objectUrl; link.setAttribute("download", fname); document.body.appendChild(link); link.click();
全面:
/*** @param {String} resource 文件流* @param {String} fileType 文件类型* @param {String} fileName 文件名* */ var downloadBlob=function(resource,fileType,fileName){ var data = new Blob([resource],{ type:fileType }); if('download' in document.createElement('a')){ //非IE var downloadUrl = window.URL.createObjectURL(data); var anchor = document.createElement("a"); anchor.href = downloadUrl; anchor.download = fileName; anchor.style.display = 'none'; document.body.appendChild(anchor); anchor.click(); window.URL.revokeObjectURL(anchor.href); document.body.removeChild(anchor); }else{ //IE10+下载 navigator.msSaveBlob(data, fileName); } }
调用方式:
downloadBlob(res,'application/pdf','文档名称')
使用html2canvas保存页面为图片并下载
html2canvas官网:http://html2canvas.hertzen.com/
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="js/html2canvas.min.js"></script> <script type="text/javascript"> $(function(){$('#button').on('click',function(){html2canvas(document.querySelector("#capture")).then(canvas => {document.body.appendChild(canvas);let base64 = canvas.toDataURL('images/png');let a = document.createElement('a');a.href = base64;a.download = 'download';a.click(); });}) }) </script>
使用 Proxy 实现观察者模式
观察者模式(Observer mode)指的是函数自动观察数据对象,一旦对象有变化,函数就会自动执行。
const person = observable({name: '张三',age: 20 });function print() {console.log(`${person.name}, ${person.age}`) }observe(print); person.name = '李四'; // 输出 // 李四, 20
上面代码中,数据对象person
是观察目标,函数print
是观察者。一旦数据对象发生变化,print
就会自动执行。
下面,使用 Proxy 写一个观察者模式的最简单实现,即实现observable
和observe
这两个函数。思路是observable
函数返回一个原始对象的 Proxy 代理,拦截赋值操作,触发充当观察者的各个函数。
const queuedObservers = new Set();const observe = fn => queuedObservers.add(fn); const observable = obj => new Proxy(obj, {set});function set(target, key, value, receiver) {const result = Reflect.set(target, key, value, receiver);queuedObservers.forEach(observer => observer());return result; }
上面代码中,先定义了一个Set
集合,所有观察者函数都放进这个集合。然后,observable
函数返回原始对象的代理,拦截赋值操作。拦截函数set
之中,会自动执行所有观察者。
vue给文本输入框聚焦位置添加内容
/*** 文本聚焦位置添加新文本* @param {Object} myField聚焦的DOM对象* @param {String} myValue文本框初始值* @result {String} 返回文本框的value值* */function insertTextFromFocus(myField,myValue){//IE 浏览器if (document.selection) {myField.focus();var sel = document.selection.createRange();sel.text = myValue;sel.select();}//FireFox、Chrome等else if (myField.selectionStart || myField.selectionStart == '0') {var startPos = myField.selectionStart;var endPos = myField.selectionEnd;// 保存滚动条var restoreTop = myField.scrollTop;myField.value = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length);if (restoreTop > 0) {myField.scrollTop = restoreTop;}myField.focus();myField.selectionStart = startPos + myValue.length;myField.selectionEnd = startPos + myValue.length;} else {myField.value += myValue;myField.focus();}return myField.value}
调用方式:
this.dialogRepTemp.content = insertTextFromFocus(this.$refs.content.$el.children[0],data.variable)
在firefox, chrome等浏览器里,完美模拟new操作
function A( name ){this.name = name; }function ObjectFactory(){var obj = {},Constructor = Array.prototype.shift.call( arguments );obj.__proto__ = typeof Constructor.prototype === 'number' ? Object.prototype : Constructor.prototype;var ret = Constructor.apply( obj, arguments );return typeof ret === 'object' ? ret : obj; } var a = ObjectFactory( A, 'mr mo' ); console.log ( a.name ); //mr mo
参考地址:【Javascript设计模式2】-简单工厂模式
用JS将 386485473.88 转换为 386,485,473.88(千位分割符)
//方法1: var separator=(num)=>{if(!num){return '0.00';};let str = parseFloat(num).toFixed(2);return str && str.toString().replace(/(\d)(?=(\d{3})+\.)/g, function($0, $1) {return $1 + ",";}); }separator(386485473.88) //"386,485,473.88"//方法2: (386485473.88).toLocaleString('en-US') // "386,485,473.88" 由 (sRect)补充
给table表格中的每个td绑定事件,td数量为1000+,写一下你的思路(事件委托题)
<body class="container"><table id="table"><tr><td>我们是@IT·平头哥联盟</td><td>,我是首席填坑官</td><td>苏南</td><td>前端开发</td><td>优秀</td></tr><tr><td>我们是@IT·平头哥联盟</td><td>,我是首席填坑官</td><td>苏南</td><td>前端开发</td><td>优秀</td></tr><tr><td>我们是@IT·平头哥联盟</td><td>,我是首席填坑官</td><td>苏南</td><td>前端开发</td><td>优秀</td></tr>…………</table> <script>let table =document.querySelector("#table");table.addEventListener("click",(e)=>{let {nodeName} = e.target;if(nodeName.toUpperCase() === "TD"){console.log(e.target);//<td>N</td> }},false);</script> </body>
WEB前端常用JavaScript代码整理(二)相关推荐
- WEB前端常用JavaScript代码知识点
1.javascript删除元素节点 IE中有这样一个方法:removeNode(),这个方法在IE下是好使的,但是在Firefox等标准浏览器中就会报错了 removeNode is not def ...
- 移动web开发常用JavaScript代码(转)
转载: http://mobile.51cto.com/web-321960.htm 1.如果网页是在iPhone或Android浏览器中查看,则在主体元素中添加"iPhone"或 ...
- Web前端:JavaScript最强总结 附详细代码 (带常用案例!)
Web前端基础: Web前端:HTML最强总结 附详细代码 Web前端:CSS最强总结 附详细代码 Web前端:JavaScript最强总结 附详细代码 Web前端工具: Web前端: JQuery最 ...
- Web前端之JavaScript基础
Web前端之JavaScript基础 JavaScript介绍 变量 变量类型 基本的数据类型Number String Boolean underfined null typeof运算符 引用的数据 ...
- 好程序员web前端分享javascript枚举算法
好程序员web前端分享javascript枚举算法,题目:在1,2,3,4,5 五个数中,我们随机选取 3个数.问有多少种取法?并且把每种取出数的方法列举出来. 乍看这道题,其实感觉没什么难度.三个f ...
- 【从0到1学Web前端】javascript中的ajax对象(一)
[从0到1学Web前端]javascript中的ajax对象(一) 如今最流行的获取后端的(浏览器从server)数据的方式就是通过Ajax了吧.今天就来具体的来学习下这个知识吧.假设使用ajax来訪 ...
- JavaScript id_好程序员web前端分享Javascript中函数作为对象
好程序员web前端分享Javascript中函数作为对象,Javascript赋予了函数非常多的特性,其中最重要的特性之一就是将函数作为第一型的对象.那就意味着在javascript中函数可以有属性, ...
- web前端分享JavaScript到底是什么?特点有哪些?
web前端分享JavaScript到底是什么?特点有哪些?这也是成为web前端工程师必学的内容.今天为大家分享了这篇关于JavaScript的文章,我们一起来看看. 一.JavaScript是什么? ...
- 各式 Web 前端開發工具整理
各式 Web 前端開發工具整理 這裡收集了一系列各式各樣與「網頁前端」相關的開發工具.函式庫與參考文件,這些工具僅針對一般桌上型/筆記型電腦的顯示環境為主 (不含平板或手機等行動版網頁相關工具). 程 ...
最新文章
- ReactiveCocoa
- Mac没有winnt格式_8款优秀软件,让你使用mac更舒适
- angular HttpClient post put patch del 方法(2)-Promise 服务
- 怎么用BarTender批量打印标签
- 解决方案:外域HDFS客户端访问内网HDFS datanode
- Android Bitmap 研究与思考(上篇)
- PolyData之DataBounds
- ModelAndView介绍
- 如何在Ubuntu上查看和写入系统日志文件
- HTML基础知识点(1)
- 新手入坑自动驾驶,我是这么学习的......
- CVPR 2020文本图像检测与识别论文/代码
- Spring boot admin 使用
- NodeJS 搭建图形识别功能
- 操作系统----校招笔试面试常考内容总结
- 【苹果相册推】软件安装ipv6得到可由Apple使用ArrayList tmpMacList
- 网络笔记--交换机和路由器
- 如何将usb设置设为第一启动项
- [2]工作流框架:支持MySQL的Flowable安装
- iOS 正则表达式判断手机号,邮箱等
热门文章
- [Jquery Plugin]Jquery Tabs 插件简介-更友好地组织你的页面 (转)
- Mssql高级注入笔记.txt (转自:慕容小雨BLOG)
- 大数据_Flink_数据处理_案例WorldCount_批处理版---Flink工作笔记0008
- 大数据之-Hadoop3.x_MapReduce_分区数与reduce个数总结---大数据之hadoop3.x工作笔记0113
- 鸿蒙OS应用开发_基础篇_编写第一个HarmonyOs应用_体会HarmonyOs的一次开发多端部署_以及分布式任务调度_IDE安装_了解应用组件以及应用布局---HarmonyOs开发工作笔记001
- OAuth2.0_授权服务配置_三项内容_Spring Security OAuth2.0认证授权---springcloud工作笔记141
- 基于Session的认证方式_实现授权功能_Spring Security OAuth2.0认证授权---springcloud工作笔记118
- 微信小程序开发学习笔记005--微信小程序组件详解
- 安卓异常总结---WARNING: Application does not specify an API level requirement!
- 常用linux网络配置命令