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

js学习日记 （1）createDocumentFragment（） ES6 => 箭头

2024-08-18 10:30:58   219人阅读

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

 

有关性能优化：

使用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 => 箭头


联系
我们