前端知识积累(可能包含面试题)

本篇文章打算自己遇到一个问题积累一个,所以…..慢慢来,慢慢积累,总会好的

sessionStorage 、localStorage 和 cookie 之间的区别

共同点：都是保存在浏览器端，且同源的。
区别：
cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。
存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。
Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。
Web Storage 的 api 接口使用更方便

for… of… 和for …in… 的区别

简单来说,for in是遍历对象属性,即遍历键名,for of是遍历对象元素,即遍历键值。
此外,for in 遍历数组无法保证输出值的顺序，而for of可以保证输出顺序

Object.prototype.objCustom = function () {}; 
Array.prototype.arrCustom = function () {};

let iterable = [3, 5, 7];
iterable.foo = "hello";
//for in 循环所有
for (let i in iterable) {
  console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom"
}
//for of只可以循环可迭代对象的可迭代属性，不可迭代属性在循环中被忽略了
for (let i of iterable) {
  console.log(i); // logs 3, 5, 7
}

注意:

1. 推荐在循环对象属性的时候使用for…in ; 在遍历数组的时候的时候使用for…of。
2. for…in循环出的是key，for…of循环出的是value
3. for…of是ES6新引入的特性。修复了ES5引入的for…in的不足
4. for…of不能循环普通的对象，需要通过和Object.keys()搭配使用;所以对普通对象的属性遍历推荐使用for…in

二维数组去重

var arr = [
     ["aa", "bb", "cc"],
      ["aa", "bb", "cc"],
      ["b", "b", "v"]
  ];
  var hash = {};
  var result = [];
  for (var i = 0, len = arr.length; i < len; i++) {
      if (!hash[arr[i]]) {
          result.push(arr[i]);
          hash[arr[i]] = true;
      }
  }
  console.log(result)

 var array = [
      ["aa", "bb", "cc"],
      ["aa", "bb", "cc"],
      ["b", "b", "v"]
  ];
  var tempObj = {};
  for (var n in array) {
      var itemString = array[n].join("");
      console.log(itemString)
      if (tempObj[itemString]) {
          array.splice(n, 1);
      }
      tempObj[itemString] = true;
  }
  console.log(array);

解决浏览器显示12px字体问题

.small-font {
     font-size: 12px;
     -webkit-transform-origin-x: 0;
     -webkit-transform: scale(0.90);
 }
 .smallsize-font {
     font-size: 10.8px;
 }
 <p class="small-font smallsize-font">温馨提示：</p>
 <p style="font-size: 12px;">温馨提示：</p>

命名冲突

我们常常在一个js文件中定义一个大的对象，并为其绑定属性方法，其主要目的主要是为了避免命名冲突。
全局变量会帮到window上，不同js文件中如果使用了相同的全局变量，或者定义了相同名字的顶级函数都会造成命名冲突。
减少冲突的办法就是把所有变量和函数都绑定在一个全局变量中。

//1.js
var a = {};
a.name = 'cheny0815';
a.foo = function (){
    return 'foo';
}
//2.js
var b ={};
b.name = 'cheny0815';
b.foo = function(a,b){
    return a+b;
}
//此时两个文件即使定了相同的name属性和foo函数，但是并不冲突。 

变量提升

javascript中函数会先扫描整个函数体的语句，把所有申明的变量提升到函数顶部

function foo(){
    var a = "name"+b;
    var b = 'cheny0815';
    return a;
}
foo() //nameundefined
//相当于
function foo(){
    var b;
    var a = "name"+b;
    b = "cheny0815";
    return a;
}

闭包中的this指向window

window.focus() 方法可把键盘焦点给予一个窗口。

前端常遇兼容性问题

前端常遇兼容性问题

获取地址栏参数方法

function GetRequest() {   
    var url = decodeURI(location.search); 
    var object = {};
    if(url.indexOf("?") != -1)  
    {   
      var str = url.substr(1);  
      var strs = str.split("&");  
      for(var i = 0; i < strs.length; i ++)  
        {   
　　　　　　　　object[strs[i].split("=")[0]]=strs[i].split("=")[1]
　　　　　　}
　　}
    return object;  
}  

前端性能优化方面

给你一个网址,从输入到渲染完成的过程?

先解析域名,在根据域名找对应的ip,根据ip地址找到对应的服务器,请求到服务器上的所需资源,之后渲染页面

display 的值以及作用

/* <display-outside> values */
display: block;
display: inline;
display: run-in;

/* <display-inside> values */
display: flow;
display: flow-root;
display: table;
display: flex;
display: grid;
display: ruby;
display: subgrid;

/* <display-outside> plus <display-inside> values */
display: block flow;
display: inline table;
display: flex run-in;

/* <display-listitem> values */
display: list-item;
display: list-item block;
display: list-item inline;
display: list-item flow;
display: list-item flow-root;
display: list-item block flow;
display: list-item block flow-root;
display: flow list-item block;

/* <display-internal> values */
display: table-row-group;
display: table-header-group;
display: table-footer-group;
display: table-row;
display: table-cell;
display: table-column-group;
display: table-column;
display: table-caption;
display: ruby-base;
display: ruby-text;
display: ruby-base-container;
display: ruby-text-container;

/* <display-box> values */
display: contents;
display: none;

/* <display-legacy> values */
display: inline-block;
display: inline-table;
display: inline-flex;
display: inline-grid;

/* Global values */
display: inherit;
display: initial;
display: unset;

vuex是做什么的

pc端页面和手机端页面的区别