wangyi准备

1. alert(1&&2)的结果是2

只要“&&”前面是false，无论“&&”后面是true还是false，结果都将返“&&”前面的值;
只要“&&”前面是true，无论“&&”后面是true还是false，结果都将返“&&”后面的值;

alert(0||1)的结果是1

只要“||”前面为false,不管“||”后面是true还是false，都返回“||”后面的值。
只要“||”前面为true,不管“||”后面是true还是false，都返回“||”前面的值。

2mouseenter与mouseover区别

不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。对应mouseout
只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。对应mouseleave

3. 用正则表达式匹配字符串，以字母开头，后面是数字、字符串或者下划线，长度为 9-20

var re=new RegExp=("^[a-zA-Z][a-zA-Z0-9_]{9-20}$")

4.js 字符串两边截取空白的 trim 的原型方法的实现

2  String.prototype.trim = function () { 
3    var arr=this.split("");  
4    while(1) {  
5       if(arr[0]==" ") {   
6          arr.shift();       
7      continue; 
8       }   
9    break;  
10   }
11   while(1){  
12     if(arr[arr.length-1]==" ") { 
13          arr.pop();    
14       continue;  
15    }    
16    break;   
17   }  
18  return arr.join("");
19  }
20  //后来面试官跟我说一句话就解决了，然而我正则都忘了，平时没怎么用
21  String.prototype.trim = function () {
22    return this.replace(/(^\s*)|(\s*$)/g,'');
23  };

　　5.三道判断输出的题都是经典的题

1  //5.1
2  var a=4;
3  function b() {
4     a=3; 
5   console.log(a); 
6   function a(){};
7  }
8 b();
9 //明显输出是3，因为里面修改了a这个全局变量，那个function a(){}是用来干扰的，虽然函数声明会提升，就被a给覆盖掉了，这是我的理解
10 //5.2
12 //不记得具体的就类似如下
13  var baz=3;
14  var bazz={  
15   baz: 2, 
16   getbaz: function() { 
17         return this.baz 
18   }
19  }
20  console.log(bazz.getbaz())
21  var g=bazz.getbaz;
22  console.log(g()) ;
23   //第一个输出是2，第二个输出是3，这题考察的就是this的指向，函数作为对象本身属性调用的时候this指向对象，作为普通函数调用的时候就指向全局了
24  //5.3var arr=[1,2,3,4,5];
25  for(var i=0;i<arr.length;i++)
26  {   
27   arr[i]=function(){
28  alert(i)
29  }
30  }
31  arr[3]();
32  //典型的闭包啊，看都不用看，肯定弹出5啊

　　6 position 不同值及区别

absolute生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。(不占位)

relective生成相对定位的元素，相对于其正常位置进行定位。因此，”left:20” 会向元素的 LEFT 位置添加 20 像素。（占位）

static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）inherit：规定应该从父元素继承 position 属性的值。

fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

8. 讲述你对 reflow 和 repaint 的理解

repaint 就是重绘，reflow 就是回流。repaint 主要是针对某一个 DOM 元素进行的重绘，reflow 则是回流，针对整个页面的重排。

严重性：在性能优先的前提下，性能消耗 reflow 大于 repaint。

体现：repaint 是某个 DOM 元素进行重绘；reflow 是整个页面进行重排，也就是页面所有 DOM 元素渲染。

如何触发：style 变动造成 repaint 和 reflow。不涉及任何 DOM 元素的排版问题的变动为 repaint，例如元素的 color/text-align/text-decoration 等等属性的变动。除上面所提到的 DOM 元素 style 的修改基本为 reflow。例如元素的任何涉及长、宽、行高、边框、display 等 style 的修改

触发 repaint：

1 color的修改，如color=#ddd；
2 text-align的修改，如text-align=center；
3 a:hover也会造成重绘。
4 :hover引起的颜色等不导致页面回流的style变动。

触发 reflow：

1 width/height/border/margin/padding的修改，如width=778px；
2 动画，:hover等伪类引起的元素表现改动，display=none等造成页面回流；
3 appendChild等DOM元素操作；
4 font类style的修改；
5 background的修改，注意着字面上可能以为是重绘，但是浏览器确实回流了，经过浏览器厂家的优化，部分background的修改只触发repaint，当然IE不用考虑；
6 scroll页面，这个不可避免；
7 resize页面，桌面版本的进行浏览器大小的缩放，移动端的话，还没玩过能拖动程序，resize程序窗口大小的多窗口操作系统。
8 读取元素的属性（这个无法理解，但是技术达人是这么说的，那就把它当做定理吧）：读取元素的某些属性（offsetLeft、offsetTop、offsetHeight、offsetWidth、scrollTop/Left/Width/Height、clientTop/Left/Width/Height、getComputedStyle()、currentStyle(in IE))；

如何避免：

尽可能在 DOM 末梢通过改变 class 来修改元素的 style 属性：尽可能的减少受影响的 DOM 元素。

避免设置多项内联样式：使用常用的 class 的方式进行设置样式，以避免设置样式时访问 DOM 的低效率。

设置动画元素 position 属性为 fixed 或者 absolute：由于当前元素从 DOM 流中独立出来，因此受影响的只有当前元素，元素 repaint。

牺牲平滑度满足性能：动画精度太强，会造成更多次的 repaint/reflow，牺牲精度，能满足性能的损耗，获取性能和平滑度的平衡。

避免使用 table 进行布局：table 的每个元素的大小以及内容的改动，都会导致整个 table 进行重新计算，造成大幅度的 repaint 或者 reflow。改用 div 则可以进行针对性的 repaint 和避免不必要的 reflow。

9AMD CMD commonjs es6 模块化的区别

commonjs 是同步加载执行，这对应服务器不是一个问题，因为所有的模块都放在本地硬盘等待模块时间就是硬盘读取文件时间，很小，但是对于浏览器而言，它需要从服务器加载模块，涉及到网速，代理等原因，一旦等待时间过长，浏览器处于假死状态，所以在浏览器端，不适于commonjs

AMD：commonjs解决了模块化问题，但同步加载不适合浏览器端一次amd是异步模式，模块加载不影响后面语句执行

requireJS加载模式采用的AMD规范模式规范必须按照AMD规定方式来写

CMD推崇依赖就近，延迟执行可以把你的依赖写进代码任意一行

UMD 由于CommonJS是服务器的规范，跟AMD，CMD两个标准实际不冲突

ES6采用import与export实现模块的输入输出其中i是输入其他模块提供的功能ex是用于规定模块的对外接口

https://blog.csdn.net/Real_Bird/article/details/54869066

ES6学习笔记：

跨域解决办法：

一种：使用跨域资源共享

二种：使用jsonp

三种：document.domain+iframe（iframe主要是为了ajax通道）

四种：window.name_iframe

五种：window.postMessage

ES6 map

map对象就是简单的键值对映射，其中键和值可以是任意值

1，创建map实例的两种方法

var map=new Map（）；

map.set('one',1) map.set('one',11) map.set('one',11)

第二种：

var map=new Map（[['one',1],['two',2],['three',3]]）

2键的比较

NAN与NAN是相同的（虽然NAN！==NAN），除此之外所有的值都根据‘===’判断

var map=newMap（）；

map.set(Number('aa111'),'isNaN');

map.set(Number('aa1','isNaN111'))

map.get(NAN);

3 Map VS object

一个对象通常都有自己的原型，所以一个对象总有一个prototype键从ES5开始可以使用

map=object.create（null）来创建一个没有原型的对象。

一个对象的键值只能是字符串或symbols 但是map的键值可以是任意值

你可以通过size属性很容易地得到一个map的键值对个数，而对象的键值对个数只能手动确认

4map属性

Map.length属性 length值为0

map.prottotype表示map的构造器的原型。允许添加属性从而应用与所有的map对象

5 map实例所有的实例对象都会继承map.prototype属性

Map.prototype.constructor返回创建给map实例的构造函数，默认map函数

map.prototype.size是返回map对象键值对的数量

var map = new Map([['one',1], ['two', 2], ['three', 3]]); console.log(map.constructor); //function Map() { [native code] }

console.log(map.size); //3

方法：

//Iterator对象：可以使用for..of进行迭代的对象

var map = new Map([[1, 'one'],[2, 'two'], [3, 'three']]);

1.Map.prototype.clear() 移除Map对象的所有键值对。

console.log(map.size); //3

map.clear();

console.log(map.size); //0

2.Map.prototype.delete(key) 移除任何与键相关联的值，并且返回该值，该值在之前会被Map.prototype.has(key)返回为true。之后再调用则返回false。

console.log(map.has(1)); //true map.delete(1); console.log(map.has(1)); //false

3.Map.prototype.entries() 返回一个新的iterator（迭代）对象，它按插入顺序包含了Map对象总每一个元素[可以，value]数组

console.log(map); //Map {1 => "one", 2 => "two", 3 => "three"}

map.entries();

console.log(map); //Map {1 => "one", 2 => "two", 3 => "three"}

4.Map.prototype.forEach(callbackFn[,thisArg])按顺序插入，为map对象的每一个键值对调一次callbackFn函数，如果为forEach提供

了thisArg，他将在每次回调函数中作为this值。

   map.forEach(function(value, key, mapObj) {
        console.log(value + '---' + key + '---' + mapObj);
        //value - Map对象里每一个键值对的值
        //key - Map对象里每一个键值对的键
        //mapObj - Map对象本身
        console.log(this); //this === window
    });

    map.forEach(function(value, key, mapObj) {
        console.log(value + '---' + key + '---' + mapObj);
        console.log(this);    //this === map
    }, map)

5.Map.prototype.get(key) 返回键对应的值，如果不存在，则返回undefined。

map.get(1); //'one'

6.Map.prototype.has(key) 返回一个布尔值，表示Map实例是否包含键对应的值。

map.has(1); // true

map.has(5); //false

7.Map.prototype.keys() 返回一个新的Iterator对象，它按插入顺序包含了Map对象中每个元素的键。

map.keys(); //MapIterator {1, 2, 3}

8.Map.prototype.set(key, value) 设置Map对象中键的值，返回该Map对象。

console.log(map.has(4)); //false

map.set(4, 'four');

console.log(map.has(4)) //true

9Map.prototype.values() 返回一个新的Iterator对象，它按插入顺序包含了Map对象中每个元素的值。

map.values(); //

6:使用for..of方法迭代映射

    var map = new Map();
    map.set(1, 'one');
    map.set(2, 'two');
    for (var [key, value] of map) {
        console.log(key + '---' + value);
    }
    // 1 --- one 2 --- two
    
    for (var key of map.keys()) {
        console.log(key);
    }
    // 1 2
    
    for (var value of map.values()) {
        console.log(value);
    }
    // 'one' 'two'

posted @ 2018-08-27 09:10 asss1 阅读(129) 评论(0) 编辑收藏举报

刷新页面返回顶部

asss1

wangyi准备

6:使用for..of方法迭代映射

公告