Js学习总结

1.重绘和重排问题

2.add(2,3)和add(2)(3)问题(再考虑他的拓展性拓展),其实是考察js函数柯里化问题。

curry 的概念很简单:只传递给函数一部分参数来调用它,让它返回一个函数去处理剩下的参数。

function add1(a){
  var sum=a
  var tmp=function(b){
      sum= sum+ b;
      return tmp;
  }

  tmp.valueOf=function(){
    return sum;
  }

  return tmp;
}
var result=add1(2)(3)(4)(5)(6);
console.log('%d',result);  //输出14 '%d'会把result转换为10进制,从而触发tmp的valueOf函数

因为到最后tmp(6)之后,返回的是个tmp,如果输出tmp
的话,打印的是tmp这个函数对象,如下:

console.log(result) :
{ [Function: tmp] valueOf: [Function] }

所以我们要把result转换为10进制,console.log('%d',result);
'%d'会把result转换为10进制,从而触发tmp的valueOf函数,输出sum

还有一种方法是利用ES6语法中的Proxy,这个方法是我在StackOverflow上看到的

function add(n) {
  sum = n;
  const proxy = new Proxy(function a() {}, {
    get (obj, key) {
      return () => sum;
    },
    apply (receiver, ...args) {
    sum += args[1][0];
    return proxy;
  }
});
  return proxy
}
console.log(add(1)(2)(3));  //6
console.log(add(1)(2)(3)(4)(5)(6));   //21

proxy可以理解是对目标对象进行代理,外界对该对象的访问,都必须先通过这层拦截。
ES6 原生提供 Proxy 构造函数,用来生成 Proxy 实例。

var proxy = new Proxy(target, handler);

Proxy 对象的所有用法,都是上面这种形式,不同的只是handler参数的写法。其中,new Proxy()表示生成一个Proxy实例,target参数表示所要拦截的目标对象,handler参数也是一个对象,用来定制拦截行为。上面的代码就主要用到了proxy的get 和 apply

具体Proxy的使用可以学习阮一峰的ECMAScript 6 入门

其实我在看完Proxy和他的用法之后,并不知道proxy有什么优势,只觉得它是另一种方法,而且有点难理解。可能是我还不知道proxy的优势吧。

3.ES6中箭头函数和普通函数的区别。

1.this的区别。普通函数如果是作为对象的方法被调用的,则其 this 指向了那个调用它的对象;但是箭头函数的则会捕获其所在上下文的 this 值,作为自己的 this 值。箭头函数需要记着这句话:“箭头函数中没有 this 绑定,必须通过查找作用域链来决定其值,如果箭头函数被非箭头函数包含,则 this 绑定的是最近一层非箭头函数的 this.

var obj = {
  i: 10,
  b: () => console.log(this.i, this),
  c: function() {
    console.log( this.i, this)
  }
}
obj.b(); // prints undefined, Window
obj.c(); // prints 10, Object {...}

2.箭头函数不绑定arguments,取而代之用rest参数 … 解决 (rest参数介绍

function consol() {
  console.log(arguments)
}
consol('haha',1)  // { '0': 'haha', '1': 1 }

var conso = (...args)=>{ console.log(args)}
conso('hahaha',1)   // [ 'hahaha', 1 ]

4.javascript闭包问题。在网上看了很多关于对于什么是闭包的解释。

看过一个答案,我觉得挺通俗易懂的。

闭包 就是把函数以及其所依赖的所有外部自由变量保存在一起的结合体
闭包 就是一个函数把外部的那些不属于自己的对象也包含(闭合)进来了。

参见:如何通俗易懂的理解闭包
闭包的牛逼解答

这两者都很好理解。看一段代码:

var foo = function(){
    var name = "exe";
    return function inner(){
        console.log( name );
    }
}
var bar = foo();//这里虽然得到的是函数inner的引用,而不是那一坨代码
bar();//这里开始执行inner函数  "exe"  读取foo函数内部的变量

这里面的 name 就是相对于函数 inner( )的外部自由变量。所以inner函数就是一个闭包。

闭包的作用

它的最大用处有两个,一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。(因为闭包引用了上一级的环境,所以导致上一级也释放不了。拿上例来说,inner()函数引用name,而这个name是上一级的变量。这导致inner始终在内存中,而inner的存在依赖于foo,因此foo也始终在内存中,不会在调用结束后,被垃圾回收机制回收。

闭包的原理(为什么能够访问外部的自由变量)

其实就是作用域链。关于作用域对象及作用域链的讲解:
推荐一篇博客: JavaScript闭包的底层运行机制

最后:
闭包是什么时候被创建的?因为所有JavaScript对象都是闭包,因此,当你定义一个函数的时候,你就定义了一个闭包。
闭包是什么时候被销毁的?当它不被任何其他的对象引用的时候。

5.实现数组扁平化处理。

一种方法是用递归的方式。

var arr = [1, [2, [3, 4]]];

function flatten(arr) {
    var result = [];
    for (var i = 0, len = arr.length; i < len; i++) {
        if (Array.isArray(arr[i])) {
            result = result.concat(flatten(arr[i]))
        }
        else {
            result.push(arr[i])
        }
    }
    return result;
}


console.log(flatten(arr))

另一种是用ES6的扩展运算符 ...
扩展运算符 ... 可以把一个数组转换为参数序列

var arr = [1, [2, [3, 4]]];
console.log(...arr)   // ...运算符把数组arr 转换为  1  [2,[3,4]] 两个参数

再用

arr = [].contact(...arr)  //  [1,2,[3,4]  

这样就去掉了数组的一层 顺着这个方法一直继续下去,就写出了如下代码

function flatten(arr) {
   while (arr.some(item => Array.isArray(item))) { //some函数会对每一个数组元素执行一次箭头函数
    var arr = [].concat(...arr);
  }
   return arr;
}
console.log(flatten(arr))

中间可以输出一下函数执行的过程。

1 [ 2, [ 3, [ 4, 5 ] ] ]
[ 1, 2, [ 3, [ 4, 5 ] ] ]
1 2 [ 3, [ 4, 5 ] ]
[ 1, 2, 3, [ 4, 5 ] ]
1 2 3 [ 4, 5 ]
[ 1, 2, 3, 4, 5 ]

奇数行是...arr 的执行结果
偶数行是[].concat(...arr); 的执行结果

6.es6和es5中的继承

ES5继承

es5的继承实际上是用原型链实现的,将子类的原型设置为父类的实例,从而实现继承

function father(){
  this.flag = true;
}
function child(){
  this.childFlag = false;
}
// 将子类的prototype对象指向父类的实例,实现继承
child.prototype = new father();
var child1 = new child();

console.log(child1.__proto__ === child.prototype)  // true
_proto_和protoType的区别.jpg

这张图好像是我在知乎上看到的。

ES6继承

es6继承就很容易理解了,差不多就是java的class
详细学习可以看阮一峰的ES6入门

7.数组去重

indexOf

var array = [1, 1, '1'];

function unique(array) {
   var res = [];
   for (var i = 0, len = array.length; i < len; i++) {
       var current = array[i];
       if (res.indexOf(current) === -1) {
           res.push(current)
       }
   }
   return res;
}

console.log(unique(array));

由于indexOf是一个一个进行比较,效率不高。
可以先对数组进行排序,排序后,相同的值就会被排在一起,然后我们就可以只判断当前元素与上一个元素是否相同,相同就说明重复,不相同就添加进 res。这种方法效率高于使用 indexOf。

8.浅拷贝和深拷贝

浅拷贝

对于数组和对象这种属于引用类型的,如果浅拷贝(例如用 = 直接赋值,或者只遍历第一层 )那么对于复杂的,具有嵌套结构的数据来说,浅拷贝只是拷贝了同一个引用,而这个引用指向存储在堆中的一个对象。拷贝完成后,两个变量实际上将引用同一个对象,如果改变其中一个变量,就会影响另一个变量。

// 引用类型值复制
var object1 = {a: 1};
var object2 = object1;
object1.a = 2
console.log(object1)   //  { a: 2 }
console.log(object2)   //  { a: 2 }

可以看出来,改变其中一个变量,另一个也会改变

深拷贝

第一种方法:使用 JSON.stringify 和 JSON.parse 方法

var arr = ['old', 1, true, ['old1', 'old2'], {old: 1}]
var new_arr = JSON.parse( JSON.stringify(arr));
console.log(new_arr);   //  [ 'old', 1, true, [ 'old1', 'old2' ], { old: 1 } ]

但是这种方法有一个问题,不能拷贝函数。

第二种方法。利用递归

function deepClone(source) {
  // 递归终止条件
  if (!source || typeof source !== 'object') {
    return source;
  }
  var targetObj = source instanceof Array ? [] : {};
  for (var key in source) {
    if (source.hasOwnProperty(key)){
      if (source[key] && typeof source[key] === 'object') {  //数组 typeof的结果也是object
        targetObj[key] = deepClone(source[key]);
      } else {
        targetObj[key] = source[key];
      }
    }
  }
  return targetObj;
}
var object1 = {'year':12, arr: [1, 2, 3], obj: {key: 'value' }, func: function(){return 1;}};
var object2 = [1,[2,[3,4,[5,6]]]]
var newObj= deepClone(object1);
var newObj2 = deepClone(object2)
console.log(newObj)  // { year: 12,arr: [ 1, 2, 3 ],obj: { key: 'value' }, func: [Function: func] }
console.log(newObj2) // [ 1, [ 2, [ 3, 4, [Array] ] ] ]

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,214评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,307评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,543评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,221评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,224评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,007评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,313评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,956评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,441评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,925评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,018评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,685评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,234评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,240评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,464评论 1 261
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,467评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,762评论 2 345

推荐阅读更多精彩内容