js学习日记 (1)createDocumentFragment() ES6 => 箭头
只能说是会用和记载,深入理解还需时间。
有关性能优化:
使用createdocumentfragment()方法可以创建某个具有节点该有的所有属性的节点。
使用情况: 提取文档中的某个小部分,修改文档中的小节点,添加部分内容在节点尾部或者某个标志处。
虽然可以用文档的文档对象来在这些情况中使用,但如果防止文件结构被破坏,createDocumentFragment() 方法可以更安全改变文档的结构及节点。
一般这样用:
let newLists=document.createDocumentFragment();
newLists.appendChild(li);
lists.appendChild(newLists);
上面lists则为原来文档中有的,对newlists进行操作,例如再添加一个li文档节点,这样lists吸收newlists为子节点就可以进行节点的添加。
这样就创建了一个新的文档碎片,可以向指定位置添加。
块级作用域使用let,不过好像不太推荐。
ES6的新语法 => 箭头使用:
可以优化js语句,例如
- // ES5
- var selected = allJobs.filter(function (job) {
- return job.isSelected();
- });
- // ES6
- var selected = allJobs.filter(job => job.isSelected());
也就是说省去了function()这一步骤。
不过好像用着失去函数定义,虽然为了简化js,但是写法更高端可读性变差了。 是否会影响this的使用以及相关函数表达式的声明初始化呢。
小语法重新记录(不漏过一寸)
filter() 方法
创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
filter() 不对空数组进行检测。
filter() 不改变原始数组。
用法:
aqiData.filter(city => city[1]>=60) 使用箭头与fliter
.sort方法
aqiData.sort((a,b)=>b[1]-a[1]) 使用.sort排序 从大到小 通过这样排序得到排好序的数组。 两者结合使用可以选择特定范围的数组,并且是排好序的~
forEach (ie不能使用) 使用for循环用的烦时候可以考虑,foreach每个元素的循环: 用法:
JavaScript数组的 forEach()方法调用数组中的每个元素
aqiData.forEach(function(value, index, array) { });
可以循环返回 值 索引 数组 可以用这个 来搞事情。 总结就到这里,先去完善我的工程。
js学习日记 (1)createDocumentFragment() ES6 => 箭头的更多相关文章
- js学习日记-隐式转换相关的坑及知识
隐式转换比较是js中绕不过去的坎,就算有几年经验的工程师也很有可能对这块知识不够熟悉.就算你知道使用===比较从而避免踩坑,但是团队其它成员不一定知道有这样或那样的坑,有后端语言经验的人常常会形成一个 ...
- js学习日记-对象字面量
一.对象字面量语法 var person={ name:'小王', age:18, _pri:233 } 成员名称的单引号不是必须的 最后一个成员结尾不要用逗号,不然在某些浏览器中会抛出错误 成员名相 ...
- js学习日记-变量的坑
js变量细节是前端面试经常遇到的问题,可见其重要程度,要想掌握这个知识点,需注意以下几点: 变量提升 所谓变量提升,就是使用了var关键字申明的变量,会提升到所在作用域的顶部.es5的作用域分为全局作 ...
- js学习日记-new Object和Object.create到底干了啥
function Car () { this.color = "red"; } Car.prototype.sayHi=function(){ console.log('你好') ...
- js学习日记-常用正则符号参考
预定义类 量词 贪婪.惰性.支配性量词 前瞻 边界 RegExp是全局对象,RegExp.$1...$9是全局属性.当执行任意正则表达式匹配操作时,JavaScript会自动更新全局对象RegExp上 ...
- js学习日记-各种宽高总结(配图)
1.窗口和浏览器 window.innerWidth.window.innerHeight 浏览器内部可用宽高 window.outerWidth.window.outerHeight 浏览器 ...
- ES6学习笔记<二>arrow functions 箭头函数、template string、destructuring
接着上一篇的说. arrow functions 箭头函数 => 更便捷的函数声明 document.getElementById("click_1").onclick = ...
- 前端分享----JS异步编程+ES6箭头函数
前端分享----JS异步编程+ES6箭头函数 ##概述Javascript语言的执行环境是"单线程"(single thread).所谓"单线程",就是指一次只 ...
- 前端综合学习笔记---异步、ES6/7、Module、Promise同步 vs 异步
同步 vs 异步 先看下面的 demo,根据程序阅读起来表达的意思,应该是先打印100,1秒钟之后打印200,最后打印300.但是实际运行根本不是那么回事 console.log(100) setTi ...
随机推荐
- Android studio教程:[5]活动的生命周期
想要学好安卓开发,就必须理解安卓软件的生命周期,明白一个活动的创建.启动.停止.暂停.重启和销毁的过程,知道各个阶段会调用什么函数进行处理不同的情况,这里我就通过一个简单的例子让大家明白一个活动的生命 ...
- 工厂方法配置jdbc连接
package 配置方式.dbUtils; import java.io.InputStream; import java.sql.Connection; import java.sql.Driver ...
- CodeForces 501B - Misha and Changing Handles
有N个改名的动作,输出改完名的最终结果. 拿map做映射 #include <iostream> #include <map> #include <string> ...
- 研究 Javascript的&&和||的另类用法
这篇文章主要介绍了Javascript的&&和||的另类用法,需要的朋友可以参考下 最近也没什么心思写文章了,感觉总有忙不完的事情,呵. 不过这些天又开始研究起 Titanium 来, ...
- webStorm 列编辑
webStorm可以像Sublime一样使用列编辑,只是区别在于webStorm只可以编辑连续列表. 按住alt键鼠标选择一列,然后输入文字就会编辑多行,这个功能很赞,比较实用
- multiprocessing跨平台锁的使用(Windows问题)
在Windows上可能遇到,开启的子进程不会关闭的问题 参考multiprocessing官方文档: Explicitly pass resources to child processes On U ...
- Holding Bin-Laden Captive!(hdoj1085)代码并未完全看懂
We all know that Bin-Laden is a notorious terrorist, and he has disappeared for a long time. But rec ...
- TensorFlow深度学习笔记 文本与序列的深度模型
Deep Models for Text and Sequence 转载请注明作者:梦里风林 Github工程地址:https://github.com/ahangchen/GDLnotes 欢迎st ...
- Mongo客户端
http://www.linuxidc.com/Linux/2012-07/64233.htm http://www.oschina.net/p/rockmongo http://www.cnblog ...
- 自己封装的一个简易的二维表类SimpleTable
在QT中,QTableWidget处理二维表格的功能很强大(QTableView更强大),但有时我们只想让它显示少量数据(文字和图片),这时,使用QTableWidget就有点不方便了(个人感觉).所 ...