前端面试题（三）7.6

最新推荐文章于 2022-10-14 19:32:39 发布

夜☞

最新推荐文章于 2022-10-14 19:32:39 发布

阅读量198

点赞数

分类专栏： CSS 面试题基础文章标签：面试 javascript css es6

本文链接：https://blog.csdn.net/qq_41853417/article/details/118556721

版权

CSS 同时被 3 个专栏收录

12 篇文章 0 订阅

订阅专栏

基础

10 篇文章 2 订阅

订阅专栏

面试题

3 篇文章 0 订阅

订阅专栏

1rem 1em 1vh 1px 各代表的含义

rem
rem是全部的长度都相对于根元素

元素。通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem。

子元素字体大小的em是相对于父元素字体大小
元素的width/height/padding/margin用em的话是相对于该元素的font-size

vw/vh
全称是 Viewport Width 和 Viewport Height，视窗的宽度和高度，相当于屏幕宽度和高度的 1%，不过，处理宽度的时候%单位更合适，处理高度的话 vh 单位更好。
px
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
一般电脑的分辨率有{19201024}等不同的分辨率
19201024 前者是屏幕宽度总共有1920个像素,后者则是高度为1024个像素
借鉴文章传送门

跨域的解决方案有哪几种

首先我们应该理解什么是跨域

同源策略
跨域问题其实就是浏览器的同源策略所导致的。

同源策略是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。–来源 MDN

当我们遇到跨域时会出现以下错误

同源示例
那么如何才算是同源呢？先来看看 url 的组成部分

http://www.example.com:80/path/to/myfile.htmlkey1=value1&key2=value2#SomewhereInTheDocument

url组成
只有当

protocol（协议）、domain（域名）、port（端口）三者一致。

才是同源。
以下协议、域名、端口一致。

http://www.example.com:80/a.js
http://www.example.com:80/b.js

以下这种看上去再相似也没有用，都不是同源。

http://www.example.com:8080
http://www2.example.com:80

注意：
在这里注意一下啊，这里是为了突出端口的区别才写上端口。在默认情况下 http 可以省略端口 80， https 省略 443。这别到时候闹笑话了，你和我说http://www.example.com:80和http://www.example.com不是同源，他俩是一个东西。

http://www.example.com:80===http://www.example.com
https://www.example.com:443===https://www.example.com

一定要注意
第一，如果是协议和端口造成的跨域问题“前台”是无能为力的，
第二：在跨域问题上，域仅仅是通过“URL的首部”来识别而不会去尝试判断相同的ip地址对应着两个域或两个域是否在同一个ip上。
“URL的首部”指window.location.protocol +window.location.host，也可以理解为“Domains, protocols and ports must match”。

如何解决跨域？

document.domain + iframe (只有在主域相同的时候才能使用该方法)

在www.a.com/a.html中：

document.domain = 'a.com';
var ifr = document.createElement('iframe');
ifr.src = 'http://www.script.a.com/b.html';
ifr.display = none;
document.body.appendChild(ifr);
ifr.onload = function () {
  var doc = ifr.contentDocument || ifr.contentWindow.document;
  //在这里操作doc，也就是b.html
  ifr.onload = null;
};

在www.script.a.com/b.html中：

document.domain = 'a.com';

动态创建script
因为script标签不受同源策略的限制。

function loadScript(url, func) {
  var head = document.head || document.getElementByTagName('head')[0];
  var script = document.createElement('script');
  script.src = url;

  script.onload = script.onreadystatechange = function () {
    if (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete') {
      func();
      script.onload = script.onreadystatechange = null;
    }
  };

location.hash + iframe
原理是利用location.hash来进行传值。
假设域名a.com下的文件cs1.html要和cnblogs.com域名下的cs2.html传递信息。

cs1.html首先创建自动创建一个隐藏的iframe，iframe的src指向cnblogs.com域名下的cs2.html页面
cs2.html响应请求后再将通过修改cs1.html的hash值来传递数据
同时在cs1.html上加一个定时器，隔一段时间来判断location.hash的值有没有变化，一旦有变化则获取获取hash值
注：由于两个页面不在同一个域下IE、Chrome不允许修改parent.location.hash的值，所以要借助于a.com域名下的一个代理iframe

代码如下：
先是a.com下的文件cs1.html文件：

function startRequest() {
  var ifr = document.createElement('iframe');
  ifr.style.display = 'none';
  ifr.src = 'http://www.cnblogs.com/lab/cscript/cs2.html#paramdo';
  document.body.appendChild(ifr);
}

function checkHash() {
  try {
    var data = location.hash ? location.hash.substring(1) : '';
    if (console.log) {
      console.log('Now the data is ' + data);
    }
  } catch (e) { };
}
setInterval(checkHash, 2000);

cnblogs.com域名下的cs2.html:

function callBack() {
  try {
    parent.location.hash = 'somedata';
  } catch (e) {
    // ie、chrome的安全机制无法修改parent.location.hash，
    // 所以要利用一个中间的cnblogs域下的代理iframe
    var ifrproxy = document.createElement('iframe');
    ifrproxy.style.display = 'none';
    ifrproxy.src = 'http://a.com/test/cscript/cs3.html#somedata';    // 注意该文件在"a.com"域下
    document.body.appendChild(ifrproxy);
  }
}

a.com下的域名cs3.html

//因为parent.parent和自身属于同一个域，所以可以改变其location.hash的值
parent.parent.location.hash = self.location.hash.substring(1);

window.name + iframe
window.name 的美妙之处：name 值在不同的页面（甚至不同域名）加载后依旧存在，并且可以支持非常长的 name 值（2MB）。

创建a.com/cs1.html
创建a.com/proxy.html，并加入如下代码

<head>
  <script>
  function proxy(url, func){
    var isFirst = true,
        ifr = document.createElement('iframe'),
        loadFunc = function(){
          if(isFirst){
            ifr.contentWindow.location = 'http://a.com/cs1.html';
            isFirst = false;
          }else{
            func(ifr.contentWindow.name);
            ifr.contentWindow.close();
            document.body.removeChild(ifr);
            ifr.src = '';
            ifr = null;
          }
        };
 
    ifr.src = url;
    ifr.style.display = 'none';
    if(ifr.attachEvent) ifr.attachEvent('onload', loadFunc);
    else ifr.onload = loadFunc;
 
    document.body.appendChild(iframe);
  }
</script>
</head>
<body>
  <script>
    proxy('http://www.baidu.com/', function(data){
      console.log(data);
    });
  </script>
</body>

在b.com/cs1.html中包含：

<script>
    window.name = '要传送的内容';
</script>

postMessage（HTML5中的XMLHttpRequest Level 2中的API）

a.com/index.html中的代码：

<iframe id="ifr" src="b.com/index.html"></iframe>
<script type="text/javascript">
window.onload = function() {
    var ifr = document.getElementById('ifr');
    var targetOrigin = 'http://b.com';  // 若写成'http://b.com/c/proxy.html'效果一样
                                        // 若写成'http://c.com'就不会执行postMessage了
    ifr.contentWindow.postMessage('I was there!', targetOrigin);
};
</script>

b.com/index.html中的代码：

<script type="text/javascript">
    window.addEventListener('message', function(event){
        // 通过origin属性判断消息来源地址
        if (event.origin == 'http://a.com') {
            alert(event.data);    // 弹出"I was there!"
            alert(event.source);  // 对a.com、index.html中window对象的引用
                                  // 但由于同源策略，这里event.source不可以访问window对象
        }
    }, false);
</script>

CORS
CORS背后的思想，就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功，还是应该失败。

IE中对CORS的实现是xdr

var xdr = new XDomainRequest();
xdr.onload = function () {
  console.log(xdr.responseText);
}
xdr.open('get', 'http://www.baidu.com');
......
xdr.send(null);

其它浏览器中的实现就在xhr中

var xhr =  new XMLHttpRequest();
xhr.onreadystatechange = function () {
    if(xhr.readyState == 4){
        if(xhr.status >= 200 && xhr.status < 304 || xhr.status == 304){
            console.log(xhr.responseText);
        }
    }
}
xhr.open('get', 'http://www.baidu.com');
......
xhr.send(null);

实现跨浏览器的CORS

function createCORS(method, url){
    var xhr = new XMLHttpRequest();
    if('withCredentials' in xhr){
        xhr.open(method, url, true);
    }else if(typeof XDomainRequest != 'undefined'){
        var xhr = new XDomainRequest();
        xhr.open(method, url);
    }else{
        xhr = null;
    }
    return xhr;
}
var request = createCORS('get', 'http://www.baidu.com');
if(request){
    request.onload = function(){
        ......
    };
    request.send();
}

JSONP
JSONP包含两部分：回调函数和数据。
回调函数是当响应到来时要放在当前页面被调用的函数。
数据就是传入回调函数中的json数据，也就是回调函数的参数了。

function handleResponse(response){
    console.log('The responsed data is: '+response.data);
}
var script = document.createElement('script');
script.src = 'http://www.baidu.com/json/?callback=handleResponse';
document.body.insertBefore(script, document.body.firstChild);
/*handleResonse({"data": "zhe"})*/
//原理如下：
//当我们通过script标签请求时
//后台就会根据相应的参数(json,handleResponse)
//来生成相应的json数据(handleResponse({"data": "zhe"}))
//最后这个返回的json数据(代码)就会被放在当前js文件中被执行
//至此跨域通信完成

注意：
jsonp虽然很简单，但是有如下缺点：

1）安全问题(请求代码中可能存在安全隐患)

2）要确定jsonp请求是否失败并不容易

web sockets
web sockets是一种浏览器的API，它的目标是在一个单独的持久连接上提供全双工、双向通信。(同源策略对web sockets不适用)
web sockets原理：在JS创建了web socket之后，会有一个HTTP请求发送到浏览器以发起连接。取得服务器响应后，建立的连接会使用HTTP升级从HTTP协议交换为web sockt协议。
只有在支持web socket协议的服务器上才能正常工作。

var socket = new WebSockt('ws://www.baidu.com');//http->ws; https->wss
socket.send('hello WebSockt');
socket.onmessage = function(event){
    var data = event.data;
}

let var const 的区别

let是块作用域，var是函数作用域，const是

js中数组的操作方法及功能

常见的一些数组操作
push 、 pop、unshift、 shift

语法: array.push(item1, item2, …, itemX)
push( )方法：可以将一个或者更多的参数添加在数组的尾部；返回添加后的数组的长度，原数组发生改变。
代码示例如下：

var arr=[1,2,3,4];
var a=arr.push(9,8,7);
console.log(a,arr);//1,2,3,4,9,8,7；

unshift
语法: array.unshift(item1,item2, …, itemX)
unshift( )方法：可以将一个或者更多的参数添加在数组的头部；返回添加后的数组的长度，原数组发生改变。
代码示例如下：

var arr=[1,2,3,4];
var a=arr.unshift(9,8,7);
console.log(a,arr);//9,8,7,1,2,3,4；

pop
语法：array.pop()
pop( )方法：从数组尾部删除一个元素，返回这个被删除的元素，原数组发生改变。
代码示例如下：

var arr=[1,2,3,4];
var a=arr.pop();
console.log(a,arr)//4；1,2,3，

slice
语法：array.slice(start, end)
slice（）方法：如果不传参数，会返回原数组；如果一个参数，从该参数表示的索引开始截取，直至数组结束，返回这个截取数组，原数组不变；
两个参数，从第一个参数对应的索引开始截取，到第二个参数对应的索引结束，但包括第二个参数对应的索引上的值，原数组不改变 &最多接受两个参数
代码示例如下：

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1,3);
console.log(citrus )//Orange,Lemon

splice
语法：array.splice(index,howmany,item1,…,itemX)
splice( ) 方法：没有参数，返回空数组，原数组不变；
一个参数，从该参数表示的索引位开始截取，直至数组结束，返回截取的数组，原数组改变；
两个参数，第一个参数表示开始截取的索引位，第二个参数表示截取的长度，返回截取的数组，原数组改变；
三个或者更多参数，第三个及以后的参数表示要从截取位插入的值。
代码示例如下：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,2);
console.log(fruits )//Banana,Orange

reverse
语法：array.reverse()
reverse( )方法：用于颠倒数组中元素的顺序。。
代码示例如下：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.reverse();
console.log(fruits)//Mango,Apple,Orange,Banana

sort
语法：array.sort(sortfunction)
sort( ) 方法：用于对数组的元素进行排序。
代码示例如下

var Array = [1,2,3,4,5];
var fruits = Array.sort(function(a,b){
	//return a - b; //从小到大
	return b-a; //从大到小
})

join
语法：array.join(separator)
join( ) 方法：于把数组中的所有元素转换一个字符串,元素是通过指定的分隔符进行分隔的。
代码示例如下：

var arr = [1,2,3,4]
var bbc = arr.join()
console.log(bbc)//1,2,3,4

concat
语法：string.concat(string1, string2, …, stringX)
concat( ) 方法：属于字符串的方法，数组也可以用，接受一个或多个参数，将参数中的值放到操作的数组后边，返回拼接的数组，原数组不变。如果参数是一个数组，则先把值提取出来再操作。
代码示例如下：

var arr = [1,2,3,4];
arr.concat([5,6,7])//[1,2,3,4,5,6,7]

ES5新增的一些数组方法

indexOf（）
语法：string.indexOf(searchvalue,start)
indexOf( ) 方法：字符串的方法，数组也可适用，此方法可返回某个指定的字符串值在字符串中首次出现的位置；若一个参数，返回这个参数在数组里面的索引值，如果参数不在操作的数组中，则返回 -1。
代码示例如下：

var arr = [1,2,3,4];
arr.indexOf(1) // 0
arr.indexOf(5) // -1

forEach（）
语法：array.forEach(function(currentValue, index, arr), thisValue)
forEach( ) 方法：数组遍历，且只能够遍历数组，不接受返回值或返回值为 undefined。
代码示例如下：

var arr = [1,2,3,4,5];
arr.forEach((item,index,arr)=>{
   //item 为当前数组元素
   // index 为当前索引
   // arr 为数组名字
})

map（）
语法：array.map(function(currentValue,index,arr), thisValue)
map( ) 方法：数组的遍历，用来接收一个返回值，创建一个新数组，不改变原数组。
代码示例如下：

var arr = [1,2,3,4,5,6];
arr.map(function(item,index,arr){
	return item * 2
})
//输出 [2,4,6,8,10,12]

filter（）
语法：array.filter(function(currentValue,index,arr), thisValue)
filter( ) 方法：过滤出一些符合条件的元素，返回一个新数组。
代码示例如下：

var ages = [32, 33, 16, 40];

function checkAdult(age) {
    return age >= 18;
    //返回数组 ages 中所有元素都大于 18 的元素:
}
function myFunction() {
    document.getElementById("demo").innerHTML = ages.filter(checkAdult);
}
//输出结果为：32,33,40

some（）
语法：array.some(function(currentValue,index,arr),thisValue)
some( ) 方法：检测数组中是否含有某一个值，返回一个布尔值，如果数组中有任意一个元素满足给定的条件，结果就为 true否则则为false。
代码示例如下：

var ages = [3, 10, 18, 20];

function checkAdult(age) {
    return age >= 18;
}
function myFunction() {
    document.getElementById("demo").innerHTML = ages.some(checkAdult);
}
//输出结果为：true

every（）
语法：array.every(function(currentValue,index,arr), thisValue)
every( ) 方法：方法用于检测数组所有元素是否都符合指定条件（通过函数提供）,返回一个布尔值,结果为 true或false。
代码示例如下：

var ages = [32, 33, 16, 40];

function checkAdult(age) {
    return age >= 18;
    //检测数组 ages 的所有元素是否都大于等于 18 
}

function myFunction() {
    document.getElementById("demo").innerHTML = ages.every(checkAdult);
}
//输出结果为：false

reduce（）
语法：array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
reduce( ) 方法：对数组中的所有元素调用指定的回调函数，该回调函数的返回值为累计结果。并且把返回值在下一次回调函数时作为参数提供。
代码示例如下：

var numbers = [65, 44, 12, 4];
 
function getSum(total, num) {
    return total + num;
    //计算数组相加的总和
}
function myFunction(item) {
    document.getElementById("demo").innerHTML = numbers.reduce(getSum);
}
//输出结果为：125

ES6新增的数组方法

Array.from( )
语法：Array.from(arrayLike[, mapFn[, thisArg]])
Array.from( ) 方法：将类数组对象或可迭代对象转化为数组，比如arguments，js选择器找到dom集合和对象模拟的数组。
代码示例如下

// 参数为数组,返回与原数组一样的数组
console.log(Array.from([1, 2])); // [1, 2] 
// 参数含空位
console.log(Array.from([1, , 3])); // [1, undefined, 3]

Array.of( )
Array.of( ) 方法：数组创建，将参数中所有值作为元素形成数组，如果参数为空，则返回一个空数组。
代码示例如下：

console.log(Array.of(1, 2, 3, 4)); // [1, 2, 3, 4] 
// 参数值可为不同类型
console.log(Array.of(1, '2', true)); // [1, '2', true] 
// 参数为空时返回空数组
console.log(Array.of()); // []

find( )
find( ) 方法：查找数组中符合条件的元素,若有多个符合条件的元素，则返回第一个元素。
代码示例如下：

let arr = Array.of(1, 2, 3, 4);
console.log(arr.find(item => item > 2)); // 3 
// 数组空位处理为 undefined
console.log([, 1].find(n => true)); // undefined

findIndex( )
查找数组中符合条件的元素索引，若有多个符合条件的元素，则返回第一个元素索引。
代码示例如下：

let arr = Array.of(1, 2, 1, 3);
// 参数1：回调函数
// 参数2(可选)：指定回调函数中的 this 值
console.log(arr.findIndex(item => item == 1)); // 0
// 数组空位处理为 undefined
console.log([, 1].findIndex(n => true)); //0

includes( )
includes( ) 方法：检测数组中是否包含一个值。
注意：与 Set 和 Map 的 has 方法区分；Set 的 has 方法用于查找值；Map 的 has 方法用于查找键名。
代码示例如下：

// 参数1：包含的指定值
[1, 2, 3].includes(1);    // true
// 参数2：可选，搜索的起始索引，默认为0
[1, 2, 3].includes(1, 2); // false
// NaN 的包含判断
[1, NaN, 3].includes(NaN); // true

fill( )
fill( ) 方法：将一定范围索引的数组元素内容填充为单个指定的值。
代码示例如下：

let arr = Array.of(1, 2, 3, 4);
// 参数1：用来填充的值
// 参数2：被填充的起始索引
// 参数3(可选)：被填充的结束索引，默认为数组末尾
console.log(arr.fill(0,1,2)); // [1, 0, 3, 4]

entries( )
entries( ) 方法：遍历键值对。
代码示例如下：

for(let [key, value] of ['a', 'b'].entries()){
    console.log(key, value);
}
// 0 "a"
// 1 "b" 
// 不使用 for... of 循环
let entries = ['a', 'b'].entries();
console.log(entries.next().value); // [0, "a"]
console.log(entries.next().value); // [1, "b"]
 
// 数组含空位
console.log([...[,'a'].entries()]); // [[0, undefined], [1, "a"]]

keys( )
keys( ) 方法：遍历键名。
代码示例如下：

for(let key of ['a', 'b'].keys()){
    console.log(key);
}
// 0
// 1 
// 数组含空位
console.log([...[,'a'].keys()]); // [0, 1]

values( )
values( ) 方法：遍历键值。
代码示例如下：

for(let value of ['a', 'b'].values()){
    console.log(value);
}
// "a"
// "b"
// 数组含空位
console.log([...[,'a'].values()]); // [undefined, "a"]

flat( )
嵌套数组转一维数组
代码示例如下：

console.log([1 ,[2, 3]].flat()); // [1, 2, 3] 
// 指定转换的嵌套层数
console.log([1, [2, [3, [4, 5]]]].flat(2)); // [1, 2, 3, [4, 5]] 
// 不管嵌套多少层
console.log([1, [2, [3, [4, 5]]]].flat(Infinity)); // [1, 2, 3, 4, 5]
// 自动跳过空位
console.log([1, [2, , 3]].flat());<p> // [1, 2, 3]

复制数组
…：扩展运算符
代码示例如下：

let arr = [1, 2],
    arr1 = [...arr];
console.log(arr1); // [1, 2]
 
// 数组含空位
let arr2 = [1, , 3],
    arr3 = [...arr2];
console.log(arr3); [1, undefined, 3]
//合并数组
console.log([...[1, 2],...[3, 4]]); // [1, 2, 3, 4]

借鉴文章出处

举例vue常用指令，v-if和v-show的区别

VUE常用指令

v-model
v-model在表单控件或者组件上创建双向绑定，本质上是负责监听用户的输入事件（onchange，onkeyup，onkeydown等）以更新数据，并对一些极端场景进行一些特殊处理

<div id="dd">
  <input type="text" value="" v-model='user'>
    <!-- 双向绑定 -->
    <p>{{ user }}</p>
</div>
  <script src="vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#dd',
    data: {
      user: "this  is  v-model"
    }
})
  </script>

v-on
v-on:指令就是给元素进行事件绑定
例如：有个按钮，当点击的时候执行一些操作

<div id="ddd">
  <input type="text" v-model='num'><br />
  <input type="button" v-on:click="add" value="加一">
  <input type="button" @click="dda" value="减一">
         //在input中加入一个button并绑定一个点击事件
</div>
<script src="vue.js"></script>
<script>
  var vm =new  Vue({
    el:"#ddd",
    data:{
      num:1
    },
    methods:{
      add:function(){
        this.num += 1
      },
      dda:function(){
        this.num -= 1
      }
    }
  })
</script>

语法

<标签 v-on:click=“事件处理函数名” ></标签>
简写形式(v-on: 指令可以简写成 @)
<标签 @click=“事件处理函数名” ></标签>

v-pre
v-pre：跳过这个元素和它的子元素的编译过程。可以用来显示原始标签。跳过大量没有指令的节点会加快编译

   <script src="vue.js"></script>
    <div id="add">
        <p v-pre>{{msg}}</p>
        <!-- 不被编译 -->
        <p>{{msg}}</p>
    </div>
    <script>
        var vm = new Vue({
            el: '#add',
            data: {
                msg: '666'
            }
        })
    </script>

运行结果
4. v-text and v-html
v-text是用于操作纯文本，它会替代显示对应的数据对象上的值。当绑定的数据对象上的值发生改变，插值处的内容也会随之更新（v-text可以简写为{{}},并且支持逻辑运算）

v-html用于输出html，它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。

<div id="dd">
<div v-text='user'> </div>
<div v-html='user2'> </div>
</div>

<script src="vue.js"></script>
<script>
var vm = new Vue({
    el: '#dd',
    data: {
        user: "<h3 style='color: red;'>这是v-text</h3>",
        user2: "<h3 style='color: red;'>这是v-html</h3>"
    }
})
</script>

运行结果

v-text绑定后是直接显示文本，也就是说你绑定的是什么内容就直接显示什么内容，不作任务的翻译
而v-html从名字上就可以看出，把绑定的文本内容尽量的翻译成html的标签

v-bind
v-bind用于绑定数据和元素属性

   <div id="ddd">
        <a v-bind:href="url">点击跳转</a>
    </div>
    <script src="vue.js"></script>
    <script>
        var app = new Vue({
            el: '#ddd',
            data: {
                url: "https://www.baidu.com"
            }
        });
    </script>

v-bind绑定了a标签的href属性，当点击a标签时，会根据对应vue中的对应的url数据进行跳转

v-cloak
一起用时，可以使用 v-cloak 指令设置样式，这些样式会在 Vue 实例编译结束时，从绑定的 HTML 元素上被移除。
例子：

    <script src="vue.js"></script>
    <div id='ddd'>
        {{msg}}
    </div>
    <script>
setTimeout(()=>{
    new Vue({
        el:"#ddd",
        data:{
msg:'this  is  vue'
        }
    })
},2000)
    </script>

当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。

我们可以使用 v-cloak 指令来解决这一问题。

  <div id='ddd' v-cloak>
        {{msg}}
    </div>

借鉴文章出处
v-if和v-show的区别

v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一点。如果你的页面不想让其他程序员看到就用v-if，它不会在页面中显示。

举例3个vue常用生命周期钩子函数及作用

什么是vue生命周期?
每个Vue实例再被创建之前都要经过一系列的初始化过程,这个过程就是Vue的生命周期。
各个钩子函数之间的生命周期干的事

在beforeCreate和create钩子函数之间的生命周期
在这个生命周期之间,进行初始化,可以看到created的时候数据已经和data属性进行绑定(放在data中的属性值发生改变的同时,视图也会改变)
此时还没有el选项
created和beforeMount间的生命周期
首先会判断对象是否有el选项,如果有的话就继续向下编译,如果没有el选项(意思就是没有挂载el),则会停止编译,也就意味着停止生命周期,当有了el选项的时候才会继续编译
beforeMount和Mounted钩子函数之间的生命周期
给vue实例对象添加$el成员,并且替换掉在的dom元素,在beforeMount之前el还是undefined
mounted钩子函数
在mounted之前,页面内容还是一javascript中的虚拟DOM形式存在.在Mounted之后才把内容挂载到页面上
beforeUpdate和update钩子函数之间的生命周期
在vue发现data中的数据发生了改变,会重现渲染页面,先后调用这两个钩子函数,beforeUpdate的时候数据更新但是dom节点中的innerHtml还没有发生改变,还是data之前的数据,update的时候新数据渲染到页面上了就是data更新后的数据
beforDestroy和destroyed钩子函数键的声明周期
beforDestroy就是在实例(节点)销毁之前调用,实例还可以用
destroyed在实例销毁之后,所有的东西都会解绑,包括监听的事件都会移除,节点也就消失

借鉴文章出处

[‘1’,‘2’,‘3’].map(parseInt)输出结果

首先公布结果
[1, NaN, NaN]
为什么会是这个结果

map函数
将数组的每个元素传递给指定的函数处理，并返回处理后的数组，所以 [‘1’,‘2’,‘3’].map(parseInt) 就是将字符串1，2，3作为元素；0，1，2作为下标分别调用 parseInt 函数。即分别求出 parseInt(‘1’,0), parseInt(‘2’,1), parseInt(‘3’,2)的结果。
parseInt函数（重点）

概念：以第二个参数为基数来解析第一个参数字符串，通常用来做十进制的向上取整（省略小数）如：parseInt(2.7) //结果为2
特点：接收两个参数parseInt(string,radix)
string：字母（大小写均可）、数组、特殊字符（不可放在开头,特殊字符及特殊字符后面的内容不做解析）的任意字符串，如 ‘2’、‘2w’、‘2!’

radix：解析字符串的基数，基数规则如下：

1 ） 区间范围介于2~36之间；

2 ） 当参数为 0，parseInt() 会根据十进制来解析；

3 ） 如果忽略该参数，默认的基数规则：

       如果 string 以 "0x" 开头，parseInt() 会把 string 的其余部分解析为十六进制的整数；parseInt("0xf")   //15 

       如果 string 以 0 开头，其后的字符解析为八进制或十六进制的数字；parseInt("08")   //8

       如果 string 以 1 ~ 9 的数字开头，parseInt() 将把它解析为十进制的整数；parseInt("88.99f")   //88

       只有字符串中的第一个数字会被返回。parseInt("10.33")   //返回10；

       开头和结尾的空格是允许的。parseInt(" 69 10 ")   //返回69

       如果字符串的第一个字符不能被转换为数字，返回 NaN。parseInt("f")  //返回NaN  而parseInt("f"，16)  //返回15

再来分析一下结果

[‘1’,‘2’,‘3’].map(parseInt)即
parseInt(‘1’,0);radix 为 0，parseInt() 会根据十进制来解析，所以结果为 1；
parseInt(‘2’,1);radix 为 1，超出区间范围，所以结果为 NaN；
parseInt(‘3’,2);radix 为 2，用2进制来解析，应以 0 和 1 开头，所以结果为 NaN。

parseInt方法解析的运算过程

parseInt(‘101.55’,10); //以十进制解析，运算过程：向上取整数(不做四舍五入，省略小数)，结果为 101。
parseInt(‘101’,2); //以二进制解析，运算过程：12的2次方+02的1次方+12的0次方=4+0+1=5，结果为 5。
parseInt(‘101’,8); //以八进制解析，运算过程：18的2次方+08的1次方+18的0次方=64+0+1=65，结果为 65。
parseInt(‘101’,16); //以十六进制解析，运算过程：116的2次方+016的1次方+1*16的0次方=256+0+1=257，结果为 257。

借鉴文章出处

eval()函数作用

eval()函数用于计算JavaScript字符串，并把它作为脚本代码来执行。如果参数是一个表达式，eval()函数将执行表达式。如果参数是Javascript语句，eval()将执行Javascript 语句。

语法如下

eval(string)
string：必需。要计算的字符串，其中含有要计算的 JavaScript 表达式或要执行的语句。

注意：IE6/7/8不兼容eval()函数
实例：

<script>
eval("x=10;y=20;console.log(x*y)");
console.log(eval("2+2"));
console.log(eval("x+17"));
</script>

//结果
//200
//4
//27

待完善

尝试写出防抖函数和节流函数

夜☞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

前端面试题（三）7.6

1rem 1em 1vh 1px 各代表的含义

跨域的解决方案有哪几种

let var const 的区别

js中数组的操作方法及功能

举例vue常用指令 ，v-if和v-show的区别

举例3个vue常用生命周期钩子函数及作用

[‘1’,‘2’,‘3’].map(parseInt)输出结果

eval()函数作用

待完善

尝试写出防抖函数和节流函数

举例vue常用指令，v-if和v-show的区别