js基础整理

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
的原型。
Object的原型是null

• 闭包

闭包是能够读取到其他函数内部变量的函数，也可以理解成定义在一个函数内部的函数

• 同源策略(跨域)

跨域是什么：实际上就是一个网站不能执行其他网站上的网址，是由浏览器同源策略造成的，是浏览器对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>

• 判断数据类型

typeof
instanceof
Object.prototype.toString.call
//封装
var Type = (function() {
                var type = {};
                var typeArr = ['String', 'Object', 'Number', 'Array','Undefined', 'Function', 'Null', 'Symbol'];
                for (var i = 0; i < typeArr.length; i++) {
                    (function(name) {
                        type['Is' + name] = function(obj) {
                            return Object.prototype.toString.call(obj) == '[object ' + name + ']';
                        }
                    })(typeArr[i]);
                }
                return type;
})();
//调用方法
Type.IsFunction(function() {})      Type.IsObject({})

• 判断数组内包含某个元素

ARR.includes(${ITEM});

• 深拷贝

// 万金油方式
JSON.parse(JSON.stringify(XXXX))

function deepClone (obj) {
    if (obj === null) return null
    if (typeof obj !== 'object') return obj
    if (obj instanceof RegExp) return new RegExp(obj)
    if (obj instanceof Date) return new Date(obj)
    let newObj = new obj.constructor
    for (let key in obj) {
        newObj[key] = deepClone(obj[key])
    }
    return newObj
}