JS高级技术点总结

闭包

闭包指有权访问另一个函数作用域中变量的函数.
简单理解就是,一个作用域可以访问另外一个函数内部的局部变量.

<script>
  function fn1(){ //fn1就是闭包函数
   var num=10;
   function fn2(){
   console.log(num);//10
  }
  fn2()
}
fn1();
</script>

闭包作用:延伸变量的作用范围.

递归

如果一个函数在内部可以调用其本身,那么这个函数就是递归函数.
简单理解:函数内部自己调用自己,这个函数就是递归函数
递归函数的作用和循环效果一样
由于递归很容易发生'栈溢出'错误(stack overflow),所以必须要加退出条件return.

<script>
      var data = [
        {
          id: 1,
          name: "家电",
          goods: [
            {
              id: 11,
              gname: "冰箱",
              goods: [
                {
                  id: 111,
                  gname: "海尔",
                },
                {
                  id: 112,
                  gname: "美的",
                },
              ],
            },
            {
              id: 12,
              gname: "洗衣机",
            },
          ],
        },
        {
          id: 2,
          name: "服饰",
        },
      ];
      function getID(json, id) {
        var o = {};
        json.forEach(function (item) {
          if (item.id == id) {
            o = item;
          } else if (item.goods && item.goods.length > 0) {
            o = getID(item.goods, id);
          }
        });
        return o;
      }
      console.log(getID(data, 12));
    </script>

浅拷贝

子对象复制父对象,父子对象发生关联,两者属性值指向同一内存空间.简单来讲,就是改变其中一个对象,另一个对象也会跟着改变.

let a = [0,1,2],
     b = a;

a[0] = 3;

console.log(a,b) // [3,1,2] [3,1,2]

深拷贝

拷贝对象各个层级的属性.简单的讲,就是复制出来的每个对象都有属于自己的内存空间,不会互相干扰.

实现深拷贝的几种方式

封装深拷贝函数

function deepClone(obj) {
    let objClone = Array.isArray(obj) ? [] : {};
    if(obj && typeof obj === "object") {
        for(key in obj) {
            if(obj.hasOwnProperty(key)) {
                 // 判断 obj 是否是对象,如果是，递归复制
                 if(obj[key] && typeof obj[key] === "object") {
                      objClone[key] = deepClone(obj[key]);
                 }else{
                      // 如果不是
                      objClone[key] = obj[key];
                 }
            }
        }
    }      
    return objClone
}         

let a = [1,2,3,4],
     b = deepClone(a);
a[0] = 5;
console.log(a,b)

借用JSON对象的parse和stringify

function deepClone(obj){
    let newObj = JSON.stringify(obj);
    let objClone = JSON.parse(newObj);
    return objClone;  
}

let a=[0,1,[2,3],4],
    b=deepClone(a);
a[0]=1;
a[2][0]=1;
console.log(a,b);

借用JQuery的extend方法实现深拷贝

$.extend([deep],target,...object);
deep 表示深拷贝,Boolean值
target 目标对象
...object 需要进行合并的对象

JSON.stringify()与JSON.parse()的区别

json.stringfy()将对象、数组转换成字符串；json.parse()将字符串转成json对象。

1.parse 用于从一个字符串中解析出json 对象

var str='{"name":"Andy","sex":"女","age":"26"}';

console.log(JSON.parse(str));//{name:"Andy", sex: "女", age: "26"}

2.stringify用于从一个对象解析出字符串

var o={a:1,b:2,c:3};

console.log(JSON.stringify(o));//{"a":1,"b":2,"c":3}