只能说是会用和记载,深入理解还需时间。

有关性能优化:

使用createdocumentfragment()方法可以创建某个具有节点该有的所有属性的节点。

使用情况:  提取文档中的某个小部分,修改文档中的小节点,添加部分内容在节点尾部或者某个标志处。

虽然可以用文档的文档对象来在这些情况中使用,但如果防止文件结构被破坏,createDocumentFragment() 方法可以更安全改变文档的结构及节点。

一般这样用:

let newLists=document.createDocumentFragment();
newLists.appendChild(li);
lists.appendChild(newLists);  

上面lists则为原来文档中有的,对newlists进行操作,例如再添加一个li文档节点,这样lists吸收newlists为子节点就可以进行节点的添加。

这样就创建了一个新的文档碎片,可以向指定位置添加。

块级作用域使用let,不过好像不太推荐。

ES6的新语法  =>  箭头使用:

可以优化js语句,例如

  1. // ES5
  2. var selected = allJobs.filter(function (job) {
  3. return job.isSelected();
  4. });
  5. // ES6
  6. 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 => 箭头的更多相关文章

  1. js学习日记-隐式转换相关的坑及知识

    隐式转换比较是js中绕不过去的坎,就算有几年经验的工程师也很有可能对这块知识不够熟悉.就算你知道使用===比较从而避免踩坑,但是团队其它成员不一定知道有这样或那样的坑,有后端语言经验的人常常会形成一个 ...

  2. js学习日记-对象字面量

    一.对象字面量语法 var person={ name:'小王', age:18, _pri:233 } 成员名称的单引号不是必须的 最后一个成员结尾不要用逗号,不然在某些浏览器中会抛出错误 成员名相 ...

  3. js学习日记-变量的坑

    js变量细节是前端面试经常遇到的问题,可见其重要程度,要想掌握这个知识点,需注意以下几点: 变量提升 所谓变量提升,就是使用了var关键字申明的变量,会提升到所在作用域的顶部.es5的作用域分为全局作 ...

  4. js学习日记-new Object和Object.create到底干了啥

    function Car () { this.color = "red"; } Car.prototype.sayHi=function(){ console.log('你好') ...

  5. js学习日记-常用正则符号参考

    预定义类 量词 贪婪.惰性.支配性量词 前瞻 边界 RegExp是全局对象,RegExp.$1...$9是全局属性.当执行任意正则表达式匹配操作时,JavaScript会自动更新全局对象RegExp上 ...

  6. js学习日记-各种宽高总结(配图)

    1.窗口和浏览器 window.innerWidth.window.innerHeight   浏览器内部可用宽高 window.outerWidth.window.outerHeight   浏览器 ...

  7. ES6学习笔记<二>arrow functions 箭头函数、template string、destructuring

    接着上一篇的说. arrow functions 箭头函数 => 更便捷的函数声明 document.getElementById("click_1").onclick = ...

  8. 前端分享----JS异步编程+ES6箭头函数

    前端分享----JS异步编程+ES6箭头函数 ##概述Javascript语言的执行环境是"单线程"(single thread).所谓"单线程",就是指一次只 ...

  9. 前端综合学习笔记---异步、ES6/7、Module、Promise同步 vs 异步

    同步 vs 异步 先看下面的 demo,根据程序阅读起来表达的意思,应该是先打印100,1秒钟之后打印200,最后打印300.但是实际运行根本不是那么回事 console.log(100) setTi ...

随机推荐

  1. CSS学习笔记——CSS中定位的浮动float

    昨天在解决了盒模型的问题之后又出现了新的知识模糊点:浮动和绝对定位?今天先解决浮动相关的问题,首先列举出想要解决的问题: 1.浮动到底是怎么样的? 2.浮动对元素的影响有什么? 3.浮动主要用来干什么 ...

  2. Failed to create the Java Virtual Machine (Myeclipse或者eclipse启动报错)

    把某几个值改为原来的0.5倍就ok了(我就这么解决的)   eclipse.ini如下:   -startupplugins/org.eclipse.equinox.launcher_1.2.0.v2 ...

  3. ps 网页布局

    910  1680  找一个页面作为参考   双击小手回到正常视角 新建组  把他们放到一个组里  新建组改名(创意专家)  放入一个图片 内发光投影  Shiftalt  复制 新建组  改名创意案 ...

  4. C#制作简易屏保(转)

    C#制作简易屏保[原创] 原始网址: http://www.cnblogs.com/drizzlecrj/archive/2006/10/06/522182.html 2006-10-06 16:25 ...

  5. js编码规范

    使用统一的 编码规范 编写代码能提高JS代码的可读性,利于后期的维护和扩展,利于团队开发. 引用规范: 1.采用<script>...</script>方式引入 *.js 文件 ...

  6. java 简单的文件上传

    一.文件上传原理: 1.文件上传的前提: a.form表单的method必须是post b.form表单的enctype必须是multipart/form-data(决定了POST请求方式,请求正文的 ...

  7. chapter 1 Number/Adventurous Person

    part1: 1- Which would be easier to remember a munber or a name? Well, I am better at remembering num ...

  8. QTableWidget嵌入QpushButton后定位QpushButton

    问题: 有时候会遇到这样的情况,在QTableWidget中我们需要嵌入一个QpushButton按钮,但是如何确定是哪个Button按下的呢? 解决: 一般地,一个按钮按下后会连接到一槽函数,那么在 ...

  9. Asp.net MVC 之 ActionResult

    Action运行完后,回传的值通过ActionResult 类别或者其衍生的类别操作.ActionResult是一个抽象类,因此,Asp.net MVC 本身就实作了许多不同类型的ActionResu ...

  10. MYSQL 注释的 3 方法

    方法 1.单行注释 # 方法 2.单行注释 -- 方法 3.多行注释 /*------*/ ------------------------------------------------------ ...