首页 > 代码库 > js学习日记 (1)createDocumentFragment() ES6 => 箭头

js学习日记 (1)createDocumentFragment() ES6 => 箭头

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

 

有关性能优化:

使用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.   
  6. // ES6  
  7. 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 => 箭头