美文网首页
js基础整理

js基础整理

作者: 念丶凉 | 来源:发表于2018-11-27 11:08 被阅读5次

    1 概念类

    • 数据类型
     基本数据类型:Number String Null Boolean Undefind Symbol
     复杂数据类型:Object 
    
    • 内置函数
       OBject Array Boolean Number Srting  Function Date RegExp Error 
    
    • this的使用场景
         在构造函数中使用 ===> 构造函数本身
         作为对象属性时使用 ===> 调用属性的对象
         作为普通函数时使用 ===>  window
         call,apply,bind ===> 执行的第一个参数
    
    • 同步和异步的区别并举例
     同步会阻塞代码,异步不会  alert是同步  setTimeout是异步
    
    • 原型和原型链
       原型: js中的对象分为两种,普通对象Object和函数对象Function
       prototype就是函数对象的原型
       原型对象的值实际上就是在函数创建的时候,创建了一个它的实例对象 
       并赋值给它的prototype
       原型链:原型组成的链。对象的_proto_属性指向它的原型,它的原型 
       也是一个对象,也有_proto_属性,原型的_proto_又指向原型的原型, 
       就这样可以一直通过__proto__向上找,这就是原型链,尽头是Object 
       的原型。
    
    • 闭包
     闭包是能够读取到其他函数内部变量的函数,也可以理解成定义在一个函数内部的函数
    
    • 同源策略(跨域)
    跨域是什么:实际上就是一个网站不能执行其他网站上的网址,是由浏览器同源策略造成的,是浏览器对js施加的安全限制
    所谓同源,实际上是指域名,协议,端口都相同
    也就是说当,域名或者协议,或者端口不同的时候,就是跨域
    

    2 常用

    • 列举三种强制类型转换和两种隐式类型转换
    parseInt(),parseFloat(),Number()  //强制
    ==,!!                             //隐式
    
    • 阻止冒泡默认
    e.preventDefault()    //默认
    e.stopPropagation()  //冒泡
    
    • ==和===区别
     == 会自动转换类型 === 不会
    
    • null和undefind的区别
    null是表示一个空的对象,转为数值为0,undefind表示一个空的原始值,转为数值为NAN
    undefind指本该有一个值,但却并有定义,null表示没有对象,不应该有值
    
    • ajax请求
    创建一个xhr对象 var xhr = new XmlHttpRequest()
    判断就绪状态为4时执行代码
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            console.log(responseText);
        }
    }
    创建请求 xhr.open('get','url',true)
    发送请求 xhr.send(null)
    
    • cookie localStorage sessionStorage
    // 与服务器的交互
    cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递。
    而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下。
    // 存储大小限制也不同,
    cookie数据不能超过4k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如会话标识。
    sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。
    // 数据有效期不同,
    sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持;
    localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;
    cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。
    // 作用域不同
    sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;
    localStorage 在所有同源窗口中都是共享的;
    cookie也是在所有同源窗口中都是共享的。
    
    • 数组去重
    //最简单去重  (用indexof查询)
     function (array){
        var temp = [];
        for(var i=0;i<array.length;i++){
           if(temp.indexOf(array[i]) == -1){
            temp.push(array[i]);
          } 
       }
       return temp;
    }
    //原数组操作 (splice方法)
     funttion (arr){
       let length = arr.length;
       for(var i = 0;i<length;i++){
           for(var j=i+1;j<length;j++){
            if(arr[i] === arr[j]){
             arr.splice(j,1);
             length -- ;
             j --;
            }  
          }
       }
    }
    // 对象属性
    function (arr){
    let obj = {}, res = []
    for(let i = 0;i < arr.length;i++){
      if(!obj[arr[i]]){
        obj[arr[i]] = 1;
        res.push(arr[i]);   
       }
     }
    }
    // es6 Set方法
    let arr = [1,1,2,3]
    let resultArr = [...new Set(arr)] 
    
    • 获取字符串出现最多的值及次数
     function(str){
       var obj = {};
       var maxn = -1;
       var letter;
       for(var i = 0; i < str.length; i++) {
         if(obj[s[i]]) {
           obj[s[i]]++;
        } else {
          obj[s[i]] = 1;
        }
        if(obj[s[i]] > maxn) {
            maxn = obj[s[i]];
            letter = s[i];
        }
      }
      console.log(letter:maxn)
     }
     
    
    • ul中含有多个li元素,点击li分别弹出对应的序号
     // html
     <ul>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
     </ul>
    //js
     let lis = document.getElementsByTagName('li')
    //dom污染
       for(var i = 0, length = lis.length; i < length; i++) {
          lis[i].index = i;
          lis[i].onclick = function() {
            alert(this.index);
          };
    // 闭包
           for (var i=0;i<aLi.length;i++){
               (function(i){
                  lis[i].onclick = function(){
                        alert(i);
                  };
                })(i);
           }
    
    • 解析url参数
    // split
    parseQueryString(url) {
        var result = [];
        var query = url.split("?")[1];
        var queryArr = query.split("&");
        queryArr.forEach(function(item){
            var obj = {};
            var value = item.split("=")[1];
            var key = item.split("=")[0];
            obj[key] = value;
            result.push(obj);
        });
        return result
    }
    //正则
    var reg = /[^&=?]+=[^&]*/g;
    var res = url.match(reg);
    // 获取具体的值
    var getParamValue = function(url,key){
        var regex = new RegExp(key+"=([^&]*)","i");
        return url.match(regex)[1];
    }
    
    • PxToRem
    <script>
    (function () {
    document.addEventListener('DOMContentLoaded', function () {
      var html = document.documentElement;
      var windowWidth = html.clientWidth;
      if(windowWidth > 640) windowWidth = 640;
      if(windowWidth < 320) windowWidth = 320;
      html.style.fontSize = windowWidth / 7.5 + 'px';
    }, false);
    })();
    </script>
    
    • 修改chrome记住密码后自动填充表单的黄色背景
      input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
        background-color: rgb(250, 255, 189); /* #FAFFBD; */
        background-image: none;
        color: rgb(0, 0, 0);
      }
    
    • 让页面里的字体变清晰,变细用CSS怎么做
      -webkit-font-smoothing: antialiased;
    

    相关文章

      网友评论

          本文标题:js基础整理

          本文链接:https://www.haomeiwen.com/subject/zwxpxqtx.html