### 2018年第二期前三周复习 1. 写出你所熟知的ES6新语法，说出它们和ES5的区别！ 2. 请说出你对 “重排和重绘读写分离” 的理解！ 3. 写出下面代码运行的结果 ~~~javascript 1.var str='abc123', 2. num=parseFloat(str); 3.if(num===NaN){ 4. alert(NaN); 5.}else if(num===123){ 6. alert(123); 7.}else if(typeof num==='number'){ 8. alert('number'); 9.}else{ 10. alert('str'); 11.} ~~~ 4. 写出代码执行的结果 ~~~javascript 1.var a='abc'+123+456; 2.alert(a); 3. 4.var b='456'-'123'; 5.alert(b); 6. 7.var c=1, 8. d='1'; 9.var f=c>d?(c<d?c:d):(c==d?c:d); 10.alert(f); ~~~ 5. 用户昵称规定只能是“数字、大小写字母”组成，而且不能少于2位，也不能超过20位，写个正则匹配这个需求 6. 谈谈你对面向对象的理解！ 7. 写出代码运行结果 ~~~javascript 1.var point={ 2. x:10, 3. y:20, 4. moveTo:function(x,y){ 5. var moveX=function(x){ this.x=x; } 6. var moveY=function(y){ this.y=y; } 7. moveX(x); 8. moveY(y); 9. } 10.}; 11.point.moveTo(100,200); 12.console.log(point.x,point.y); ~~~ 8. 分析代码写结果 ~~~javascript 1.function fun(){ 2. this.a=10; 3. this.b=function(){ 4. alert(this.a); 5. } 6.} 7.fun.prototype={ 8. b:function(){ 9. this.a=20; 10. alert(this.a); 11. }, 12. c:function(){ 13. this.a=30; 14. alert(this.a) 15. } 16.} 17.var my_fun=new fun(); 18.my_fun.b(); 19.my_fun.c(); ~~~ 9. 分析代码写结果 ~~~javascript 1.var n=2; 2.function a(){ 3. var n=3; 4. function b(m){ 5. alert(++n+m); 6. } 7. b(4); 8. return b; 9.} 10.var c=a(5); 11.c(6); 12.alert(n); ~~~ 10. 谈一下你对作用域链和原型链的理解 11. 实现 一个$attr(domId,name,value)遍历id是domId的，内部属性为name且值为value的元素？ 12. 实现数组去重你都有哪些办法? 13. 说出你所掌握的算法 14. 写出你掌握的JS继承方式，项目中什么时候你用到了继承？ 15. JS中有一个insertBefore方法，目的是实现把新元素插入到指定元素之前，现在你实现一个 InsertAfter 方法，把新元素插入到指定元素之后！ ~~~javascript 1.function insertAfter(newEle,originEle){ 2. //=>newEle:新插入的元素 3. //=>originEle:指定的老元素 4.} ~~~ 16. 英文字母汉字组成的字符串，用正则给英文单词前后加空格 17. jQuery的原理，怎么扩展插件 18. 看代码，回答问题 ~~~javascript 1.for(var i = 0;i<5;i++){ 2. setTimeout(function(){ 3. console.log(i) 4. },1000); 5.} 6.这段代码输出什么？怎么才能输出01234？ ~~~ 19. 分析代码写结果 ~~~javascript 1.var a = {n:4}; 2.var b = a; 3.b.x = a = {n: 10}; 4.console.log(a.x); 5.console.log(b.x); ~~~ 20. 你了解过闭包吗？ ~~~javascript 1.var fullName='language'; 2.var obj={ 3. fullName:'javascript', 4. prop:{ 5. getFullName:function(){ 6. return this.fullName; 7. } 8. } 9.}; 10.console.log(obj.prop.getFullName()); 11.var test=obj.prop.getFullName; 12.console.log(test()); ~~~ ~~~javascript 1.let a = 3, 2. b = 4; 3.function A(a) { 4. A = function (b) { 5. alert(a + (--b)); 6. }; 7. alert(++a); 8.} 9.A(5); 10.A(6); ~~~ 23. ~~~javascript 1.window.val = 1; 2.let json = { 3. val: 10, 4. dbl: function () { 5. this.val *= 2; 6. } 7.}; 8.json.dbl(); 9.let dbl = json.dbl; 10.dbl(); 11.json.dbl.call(window); 12.alert(window.val + json.val); ~~~ 24. ~~~javascript 1.(function () { 2. let val = 1; 3. let json = { 4. val: 10, 5. dbl: function () { 6. val *= 2; 7. } 8. }; 9. json.dbl(); 10. alert(json.val + val); 11.})(); ~~~ 25. ~~~javascript 1.let test = (function (i) { 2. return function () { 3. alert(i *= 2); 4. } 5.})(2); 6.test(5); ~~~ 26. ~~~javascript 1.let n = 2, 2. fn = () => { 3. this.n *= 3; 4. n++; 5. return m=>console.log((++n)+m); 6. }; 7.var f = fn(4); 8.f(5); 9.fn(4)(5); 10.f(6); 11.console.log(n); ~~~ 27. 忽略报错阻碍代码的执行 ~~~javascript 1.let Fn = function (x = 0, y = 0) { 2. this.x = x; 3. this.y = y; 4. this.getX = function () { 5. console.log(this.x); 6. } 7.}; 8.Fn.prototype.getX = function () { 9. console.log(this.x); 10.}; 11.let f1 = new Fn; 12.Fn.prototype = { 13. getY: function () { 14. console.log(this.y); 15. } 16.}; 17.let f2 = new Fn(1, 2); 18.console.log(f1.constructor===f2.constructor); 19.f1.getX(); 20.f1.getY(); 21.f1.__proto__.getX(); 22.f1.__proto__.getY(); 23.f2.getX(); 24.f2.getY(); 25.f2.__proto__.getX(); 26.f2.__proto__.getY(); ~~~ 28. 写出输出结果，说出原因 ~~~javascript 1.let fn1=function(){alert(1)}, 2. fn2=function(){alert(2)}; 3.fn1.call(fn2); 4.fn1.call.call(fn2); ~~~ 29. 如下一个字符串 “54389”，要求将字符串中的阿拉伯数字替换成我们的中文大写数字”伍肆叁捌玖”，请使用正则的方式进行处理 30. 在javascript对象上定义一个repeatify函数,这个函数接受一个整数参数,来明确子字符串需要重复几次,这个函数要求字符串重复指定的次数,比如:’abc’.repeatify(3);//”abcabcabc” 31. `var str='hello<img src="haha.png" alt="哈哈"/>world';`正确匹配输出’hello\[哈哈\]world’ 32. 一个url 后面好多key-value 如localhost?key=val&key2=val2&key3=val3 封装一个函数 getParam(‘key’) 通过key获得相应等号后面的值. 33. call、apply、bind的区别 34. 有两个升序数组，然后将他们合为 一个数组并进行升序排序？ 35. 瀑布流的实现原理 36. 图片延迟加载怎么实现 37. 写出完整的验证函数 > 1)长度不能小于6位 > 2)首字母必须是字母 > 3)合法字符只能是数字、字母、下划线 38. 使用jquery实现点击按钮弹出一个对话框（对话框在整个页面正中间，并且最初页面中没有任何的HTML标签）？ 39. 怎么避免全局变量的污染？ ~~~javascript 1.function Foo() { 2. getName = function () { 3. console.log(1); 4. }; 5. return this; 6.} 7.Foo.getName = function () { 8. console.log(2); 9.}; 10.Foo.prototype.getName = function () { 11. console.log(3); 12.}; 13.var getName = function () { 14. console.log(4); 15.}; 16.function getName() { 17. console.log(5); 18.} 19.Foo.getName(); 20.getName(); 21.Foo().getName(); 22.getName(); 23.new Foo.getName(); 24.new Foo().getName(); 25.new new Foo().getName(); ~~~ 41. ~~~javascript 1.在函数式编程当中有一个很重要的概念就是函数组合，实际上就是把处理数据的函数像管道一样连接起来，然后让数据穿过管道得到最终的结果。例如： 2.const add1 = (x) => x + 1; 3.const mul3 = (x) => x * 3; 4.const div2 = (x) => x / 2; 5.div2(mul3(add1(add1(0)))) //=>3 6. 7.而这样的写法可读性明显太差了。我们可以构建一个 compose 函数，它接受任意多个函数作为参数（这些函数都只接受一个参数），然后 compose 返回的也是一个函数，达到以下的效果： 8.const operate = compose(div2, mul3, add1, add1) 9.operate(0) //=>相当于div2(mul3(add1(add1(0)))) 10.operate(2) //=>相当于div2(mul3(add1(add1(2)))) 11. 12.简而言之：compose 可以把类似于 f(g(h(x))) 这种写法简化成 compose(f, g, h)(x)。请你完成 compose 函数的编写。 13.额外挑战：你能通过 1~2 行代码实现 compose 吗。 ~~~ 42. 点击每一个li可以创建出对应的对象（可以不兼容低版本浏览器） ~~~javascript 1.[结构] 2.<ul> 3. <li><a href='http://xxx'>xxx</a></li> 4. <li><a href='http://sss'>sss</a></li> 5.</ul> 6. 7.点击第一个LI创建对象： 8.{ 9. index:1, 10. name:'xxx', 11. link:'http://xxx' 12.} 13.同样点击第二个LI创建对象 14.{ 15. index:2, 16. name:'sss, 17. link:'http://sss' 18.} 19.... ~~~ 43. 分析此函数的作用，补全1/2处的代码  44. 获取数据中的最大值 45. 编写一个函数，把一个列表中的每一项反序 ~~~ 1.<ul id='target'> 2. <li>1</li> 3. <li>2</li> 4. <li>3</li> 5. <li>4</li> 6. <li>5</li> 7.</ul> ~~~ 46. 编写一个函数实现数组扁平化 ~~~javascript 1.let ary = [1,[2,[3,[4,5]]],6]; //=>[1,2,3,4,5,6] ~~~ 47. 网页中实现一个计算，计算当年还剩多少时间的倒数计时程序，要求网页上显示 “xxxx年还剩xx天xx时xx分xx秒”；（获取当前时间采用new Data()即可） 48. offsetHeight/clientHeight/scrollHeight的区别 49. 获取字符串中出现次数最多的字符及出现的次数 50. 完成如图所示的文字横向无缝衔接滚动的“跑马灯”效果