zoukankan      html  css  js  c++  java
  • 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'
    

      

  • 相关阅读:
    React——JSX语法【三】
    React——虚拟DOM创建的两种方式【二】
    Nginx——虚拟主机简介
    Linux——Centos8虚拟机添加网卡未显示
    React——React简介和基本使用【一】
    Linux——删除系统python导致yum无法使用
    SonarQube——Docker搭建SonarQube服务
    Linux——配置SSH免密登录
    Jumpserver——如何替换多因子认证
    GitLab——如何快速部署GitLab仓库
  • 原文地址:https://www.cnblogs.com/asasas/p/9540287.html
Copyright © 2011-2022 走看看