JavaScript

简介: JavaScript

theme: fancy

highlight: agate

内存管理

基本数据类型在内存中的存放方式

image.png
复杂数据类型在内存中的存放方式

image.png

V8引擎有多大 64位有1.4G,32位700M,不同浏览器还有些许扩容
其中又分为

新生代:短时间存活的新变量会存在新生代中,新生代的内存量极小,64位下大概是32MB

老生代:生存时间比较长的变量,会转存到老生代,老生代占据了几乎所有内存。64位下大概是1400MB

新生代的回收算法:分为两个空间to,from,一开始都存放在from空间,死亡的变量依然放在from空间,把存活着的变量复制到to空间,from
空间清空,然后对调fromto。这样可以提升回收速度,空间换时间。

老生代的回收算法:标记已死变量,清除已死变量,整理磁盘(否则内存碎片太多,浪费空间)

新生代转换为老生代:这个对象经历过一次新生代的回收(即在 from 和 to空间内进行互换一次),并且新生代发现本次复制,会占用超过百分之25的to空间。

什么时候会触发回收:执行完一次代码或者内存不够时(这个情况比较极端)

变量什么时候会被回收:全局变量会直到程序执行完毕才会回收。普通变量,就是当他们失去引用

优化:

  • 尽量不要定义全局,定义了及时手动释放。
  • 注意闭包

Node端的一些特殊点:

  • Node可以手动进行垃圾回收
  • Node可以设置新老生代内存大小

为什么V8设置成1.4G:

  • 对于浏览器脚本够用
  • 回收的时候是阻塞式的,也就是进行垃圾回收的时候会中断代码的执行。如果不限制内存大小,垃圾回收时间变长。

高阶函数

一个函数接收另一个函数作为参数

手写forEach,map

forEach接受一个函数,这个函数参数有遍历的那一项,序号

   Array.prototype.myForeach=function(callback){
   
   
            var len = this.length//数组长度,this代表调用函数的数组
            if(typeof callback !== 'function'){
   
   
                throw new Error("Invalid callback")
            }//健壮性
           for (let i = 0; i < len; i++) {
   
   
         callback.call(this,this[i],i)
           }
        }

与forEach不同map会返回一个新数组

    Array.prototype.myMap = function (callback) {
   
   
        var len = this.length;
        var arr = [];//与forEach相比只需要返回一个新数组
        if (typeof callback !== "function") {
   
   
          throw new Error("Invalid callback");
        }
        for (let i = 0; i < len; i++) {
   
   
          arr.push(callback.call(this, this[i], i));//注意这里是浅引用,要换成深拷贝
        }
        return arr
      };

手写reduce

累计求和,求积,或者对象的转化
reduce(pre,now,index) :pre是上次循环的返回值,now是当前循环值,index是数组下标,后面,还有一个参数作为开始的默认值,如果不指定 默认数组第一项为默认值,函数直接从第二项开始.

//对象转化
   var arr = [
        {
   
    path: "/", component: "login" },
        {
   
    path: "/sign", component: "sign" },
      ];
 console.log(
        arr.reduce((pre, now) => {
   
   
          pre[now.path] = now.component;
          return pre;
        }, {
   
   })
      );

      Array.prototype.myReduce = function (callback, init) {
   
   
        var i = 0;
        var len = this.length;
        var pre = init;
        if (typeof callback !== "function") {
   
   
          throw new Error("Invalid callback");
        }
        if (init == undefined) {
   
   
          i = 1;
          pre = this[0];
        }
        for (; i < len; i++) {
   
   
          pre = callback.call(this, pre, this[i]);
        }
        return pre;
      };

手写filter

 var arr = [
        {
   
    path: "/", component: "login" },
        {
   
    path: "/sign", component: "sign" },
      ];

      Array.prototype.myFilter = function (callback) {
   
   
        var len = this.length;
        var arr = [];
        for (let i = 0; i < len; i++) {
   
   
          if (callback.call(this, this[i], i)) {
   
   
            arr.push(this[i]);//这里要深拷贝
          }
        }
        return arr;
      };
      console.log(arr.myFilter((i) => i.path == "/sign"));

函数科里化

使用场景:函数在很多情况下调用参数固定

  • call() 立即调用一个函数,并允许您设置该函数的 this 值。
  • bind() 返回一个新的绑定了特定 this 值的函数,而不是立即调用原始函数。
  • 不要写成test().bind(),因为我们需要是改变函数指向而不是执行这个函数在调用这两个方法
  • 例如
 function test(a, b, c, d) {
   
   
        console.log(this.count);
        console.log(a);
        console.log(b);
        console.log(c);
        console.log(d);
      }
      test.bind({
   
    count: 2 }, 3, 4)(1, 2);
     // 结果是 2 3 4 1 2

手写bind

   Function.prototype.myBind = function (obj) {
   
   
        if (typeof this !== "function") {
   
   
          return;
        }
        var fn = this;
        var args = Array.prototype.slice.call(arguments, 1);
        return function () {
   
   
          return fn.apply(
            obj,
            args.concat(Array.prototype.slice.call(arguments))
          );
        };
      };
相关文章
|
10月前
|
JavaScript 前端开发
70.【JavaScript 6.0】(一)
70.【JavaScript 6.0】
36 0
|
10月前
|
JavaScript 前端开发
70.【JavaScript 6.0】(二)
70.【JavaScript 6.0】
32 0
|
2月前
|
存储 前端开发 JavaScript
JavaScript中你不知道的数学方法 (非常实用)
JavaScript中你不知道的数学方法 (非常实用)
|
10月前
|
JavaScript 前端开发
JavaScript小练习
JavaScript小练习
|
11月前
|
存储 JavaScript 前端开发
JavaScript Day01 初识JavaScript 2
JavaScript Day01 初识JavaScript
36 0
|
12月前
|
JavaScript 前端开发 API
JavaScript—DomApi
JavaScript—DomApi
|
JavaScript 前端开发
Javascript的特点
Javascript的特点
58 0
|
设计模式 前端开发 JavaScript
怎么学JavaScript?
怎么学JavaScript?
104 0
怎么学JavaScript?
|
JavaScript 前端开发
JavaScript中的this
JavaScript中的this自制脑图
58 0
JavaScript中的this
|
JavaScript 前端开发
【译】9个强大的JavaScript技巧
我喜欢优化!但是,如果站点无法在用户的Internet Explorer 11浏览器中运行,他们不会在乎我的优化代码。我使用Endtest来创建自动测试,并在跨浏览器的云上执行它们。
【译】9个强大的JavaScript技巧