【JS】排序，json格式，深浅克隆，自定义属性，文档碎片

沐语
195 阅读3分钟

前面提过的一些方法，比如ES6的一些方法，模板字符串、剩余运算符等都会用到，还有数组的一些方法，ajax请求数据，处理数据的一些方法，绑定数据，DOM映射机制，排序方法等等。

sort排序

1.如何升降序

let ary = [12,50,32,94,62];
//实现升序排列
let ary1 = ary.sort(function(a,b){
  return a - b
})
console.log(ary1); //=> [12, 32, 50, 62, 94]

注： return a-b 就是实现升序，return b - a 就是实现降序，排序的原理与冒泡排序类似，但又不是完全相同

分析：

 // sort排序
    let ary = [23,45,221,556,3,22];

    ary.sort(function(a,b){
      console.log(a,b);
      //         45 23
      // b是当前项 a是后一项
      // 如果a-b<0就交换位置，说明当前项大于后一项
      // 当前这个回调函数每一次执行return的结果就是大于0或者小于0的数字
       return a-b;
      //return -1;
      //return一个负数，相当于数组内部两两交换位置，最后相当于数组倒序
    });
    console.log(ary);

2.DOM的映射机制 如果DOM发生变化，之前获取过的元素集合不需要再次获取元素，获取过的元素集合自动也会发生变化，也会加入新创建的元素 ，这就是DOM的映射机制。 另外，appendChild 方法会自动识别是不是已经存在的元素，如果已经存在该元素，则不会新创建元素，只会进行更改，这种也叫映射机制

3.如何实现升降序切换

需求：点击按钮以后，把li标签按里面的数字进行升序或者降序排列

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <ul id="box">
    <li>39</li>
    <li>67</li>
    <li>22</li>
    <li>18</li>
    <li>34</li>
  </ul>
   <button id="btn">按钮</button>
   <script src="./utils.js"></script> 
    <script>
        let button = document.getElementById('btn');
        let list = document.getElementsByTagName('li');
        
        // let list = document.querySelectorAll('li'); // 他没有映射机制
        //[{innerText:3},{innerText:1},{innerText:0}]
        //这里利用引入的一个将类数组转化为数组的方法进行了转化
        list = utils.toArray(list);
        console.log(list);
        let flag = -1; // 创建一个标识，用来记录排序的顺序
        button.onclick = function(){
          flag*=-1; // 每点击一次，就给flag乘等于-1
          list.sort(function(a,b){
            return (a.innerText-b.innerText)*flag
            
            // 如果flag是一个负数，那就把之前的顺序倒过来，
            // sort排序之后，只是把当前list里的数据排序了，但是页面的dom并没有排序，所以还得把排好序的list插入到页面
          });
          
          console.log(list);
          for(var i = 0;i<list.length;i++){
            box.appendChild(list[i]);
            // 把排好序的list插入到页面
          };
        }
    </script>
</body>
</html>

json 格式的数据

1.json 格式的字符串

2.json 格式的对象

如何把json格式的字符串转化为json格式的对象

JSON.parse()

let  obj = "{name:1}"
console.log(JSON.parse(obj));
//=> {name:1}

如何把json格式的对象转化为json格式的字符串

JSON.stringify()

let  obj = {"name":1}
console.log(JSON.stringify(obj));
//=>"{"name":1}"

注意： 两种方法在转化的时候都必须要传参，不传参无法执行，会报错

浅克隆

let ary = [100,200,300,{name:1}];
let newAry = ary.slice(); 
console.log(newAry); // [100,200,300,{name:1}]
newAry[0] = 200;
console.log(ary,newAry);
//=>[100,200,300,{name:1}]    [200,200,300,{name:1}]
newAry[3].name = 100;
console.log(ary,newAry);
//=>[100,200,300,{name:100}]   [200,200,300,{name:100}]

克隆只是把内容拷贝过来，堆内存是新的堆内存，不是同一个堆内存，但是浅克隆的话，数组里面如果有引用数据类型，则克隆的是空间地址，即克隆过来的数组里面的引用数据类型的数据是同一个堆内存。

深克隆

深克隆就是不仅整体是一个新的堆内存，连里面的引用数据类型也都是新的堆内存（新创建的）。

let ary = [100,200,300,{name:1}];
let ary1 = JSON.parse(JSON.stringify(ary));
ary1[3].name = 100;
console.log(ary,ary1);
//=>[100,200,300,{name:1}]   [200,200,300,{name:100}]

自定义属性

自定义属性在项目中很常用，在需要对于元素进行辨别，需要让一些数据绑定到元素对象上面等，都可以运用自定义属性的方法。自定义属性可以赋予元素对象一些特别的属性，便于与其他元素进行区分，或者在进行数据处理的时候，把未来需要用到的数据绑定到元素对象里面，挂载在元素对象上，用的时候只需要进行成员访问即可拿到对应的数据，然后用这些数据进行相应的操作。

//比如在选项卡案例，或者背景换色等案例中，都需要用到元素对象的索引，可以把索引挂载到元素对象上

for(var i = 0;i<navList.length;i++){
  navList[i].index = i;
  navList[i].onclick = function(){
    console.log(this.index);
  
  }
}

然后根据索引，可以配合数组、字符串等具有索引的对象进行相关操作。

文档碎片

创建文档碎片，它就相当于一个容器，用来存放临时的元素

let frg = document.createDocumentFragment();
for(var i = 0;i<cardList.length;i++){
  frg.appendChild(cardList[i]);

}
cardBox.appendChild(frg);

这样是把所有的需要添加的元素先都循环添加到这个容器中，然后再将容器中的元素一次性添加到DOM中，这样只进行了一次的回流和重绘，节约性能。如果在循环中直接将元素添加到DOM中，会进行多次的回流和重绘，是非常消耗性能的。

avatar
文章
阅读
粉丝