js学习小结

·  阅读 18

1.原型链

_proto_prototype:<br/>
    prototype:函数或普通对象的原型属性();<br/>
   _proto_ 每个对象都有,保存着该对象的构造函数;        
复制代码
  • 对象实例的_proto_ === 当前对象的构造函数的protoType;

  • 原型链:以对象为基准,以_proto_为链接的桥梁,一直到Object.protoType为止,这个链就是原型链;

  • 原型链继承:沿着原型链一个个从低到高找,只要找到就可以获取(获取到就不会再往上找),如果没有,就继续网上找,直到Object.protoType为止;

  • Function 函数也是对象:
    Function的_proto_指向的是本身自己的protoType;

    function Test(){
        this.a = 1;
    };
    Test.protoType.func = () =>{
        console.log(123);
    };
    Test.protoType.b = 2;
    Test.protoType.a = 3;
    const Obj1 = new Test();
    
    console.log(Obj1._proto_===Test.protoType); //true;
    console.log(Test.protoType._proto_===Object.protoType); //true;
    console.log(Object.protoType._proto_); //null 顶层;
    console.log(Obj1.b) //2
    console.log(Obj1.a) //1
    
    console.log(Test._proto_===Function.protoType===Function._proto_); //true;
    console.log(typeof Object) //function
    console.log(typeof Function) //function
    console.log(Object._proto_===Function._proto_===Function.protoType) //false; 这里Object是当成对象;
    console.log(Object._proto_===Function.protoType) //true;
    console.log(Function._proto_===Function.protoType); //true;
    console.log("a" in Obj1);  //true 判断a是否在原型链里面;
    console.log(Obj1 hasOwnProperty('a')) //false 对象实例本身里面有属性a 
复制代码

2.sessionStorage、localStorage、cookie的区别?

  • 存储时间不同: sessionStorage:关闭浏览器没有了;
    localstorage:永久存储,除非手动清除;
    cookie:一般默认是浏览器关闭失效,可以自己设置时间;
  • 存储空间不同: sessionstorage和localstorage大概5M
    cookie存储大概4kb左右,存储量较小,一般页面最多存储20条左右信息
  • 与服务端的通信问题 cookie会参与到与服务端的通信,sessionStorage和localStorage是单纯的前端存储

3.事件冒泡、事件捕获和事件代理

事件冒泡:从目标元素开始,往顶层元素传播,途中如果有节点绑定了相应的事件处理函数,这些函数就会被依次触发。如果想阻止事件冒泡,可以使用 e.stopPropagation()(Firefox)或者e.cancelBubble=true(IE)来阻止事件的冒泡传播。 事件捕获:当某个元素触发某个事件(如 onclick),顶层对象 document 就会发出一个事件流,随着 DOM 树的节点向目标元素节点流去,直到到达事件真正发生的目标元素。在这个过程中,事件相应的监听函数是不会被触发的。 事件代理:当我们需要对很多事件添加事件的时候,可以通过将事件添加到他们的父节点而将事件委托给父节点来触发处理函数,这主要得益于浏览器的事件冒泡机制。

//获取父元素
document.getElementById("list").addEventListener("click",function(e){
    //检查事件元e.targe是否为li;
    if(e.targe && e.target.nodeName.toUpperCase==="LI"){
        //处理事件;
    }
})
复制代码

4.map、forEach、for...in、for...of区别?

  • map()和forEach() 相同点:
    只能遍历数组,且循环遍历数组中的每一项
    包含的匿名函数都是三个参数(item,index,input)(当前项,当前项的索引,原始数组)
    不同点:
    map()有返回值,可以用'链式'连接,会返回一个新数组;forEach()无返回值,写了也没用
    forEach()不能使用continue, break; forEach方法还可以接受第二个参数,用来绑定this
  • for...in和for...of for...in可以遍历对象和数组,对象中symbol不能遍历,可以用break或者throw跳出循环;获取的是对象的键名,即key值;可以遍历原型链上的参数
    for...of 获取的是对象的键值,即value值;不可遍历原型链

5.冒泡排序

相邻的两个数依次比较,小的数放在前面,大的数放后面,大的就再与后面的数做比较,直到比较到最后;

var arr = [3,2,1,5,4]
function arr_sort(data){
    for(let i=0;i<data.length-1;i++){
      for(let j=0;j<data.length-i;j++){
          if(data[j]>data[j+1]){
              [data[j],data[j+1]] = [data[j+1],data[j]] //解构赋值
          }
      }
    }
    return data;
}
console.log(arr_sort(arr))  //[1, 2, 3, 4, 5]

复制代码

6.this指向

  • 在全局环境中,this指向window;
  • 在函数环境中,this指向取决于函数调用的方式

7.vue中prop和data的优先级哪个高?

props优先级高;
props==>methods==>data==>computed==>watch;

8.算法题:

//一个数组 [2,7,11,15],num=9;得出数组中两个数值相加为num的值
let arr = [3,3];
let num = 6;   
let newArr=[];      
for(let i=0;i<arr.length;i++){
    for(let j=i+1;j<arr.length;j++){
        if(arr[i]+arr[j]==num){
            newArr.push(i);
            newArr.push(j);
            console.log(arr[i],arr[j]);//这是两个数的值
            console.log(newArr);//这是两个数的下标
        }
    }
}
复制代码
分类:
前端
收藏成功!
已添加到「」, 点击更改