佛系前端面试题记录--第七周

最新推荐文章于 2021-07-06 17:55:12 发布

牧之_

最新推荐文章于 2021-07-06 17:55:12 发布

阅读量148

点赞数

分类专栏：面试题记录

本文链接：https://blog.csdn.net/qq_43446007/article/details/109676204

版权

面试题记录专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<html>
<head>
	<title></title>
</head>
<body>
    <h1>发送页面</h1>
 　　<input id="name">  
<input type="button" id="btn" value="提交">  
      
</body>
 <script>
    window.onload=function(){
            var btn=document.getElementById('btn')  
            var name=document.getElementById('name')   
        btn.onclick=function(){  
        localStorage.setItem("name",name.value);   
            console.log(name.value)    
              
        };    
    };    
</script>  
</html>

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<h1>接收页面</h1>

</body>
</html>
<script type="text/javascript">  
    window.onload=function(){   
        window.addEventListener("storage", function(event){    
            console.log(event.key + "=" + event.newValue);  
            var p=document.createElement("p");
         p.innerHTML="从页面一接收到的值为"+event.newValue; 
         document.body.appendChild(p);  
         }); 

    };  
</script>

在这里插入图片描述

cookie+setInterval()
将要传递的信息存储在cookie中，每隔一定时间读取cookie信息，即可随时获取要传递的信息。

页面1：

<input type="text" id="ipt">  
<input type="button" id="btn" value="提交">  
<script type="text/javascript">  
    $(function(){    
        $("#btn").click(function(){    
            var ipt=$("#ipt").val();    
            document.cookie="name="+ipt;    
        });    
    });    
</script>

页面2：

<script type="text/javascript">  
    $(function(){   
        function getCookie(key) {    
            return JSON.parse("{\"" + document.cookie.replace(/;\s+/gim,"\",\"").replace(/=/gim, "\":\"") + "\"}")[key];    
        }     
        setInterval(function(){    
            console.log("name=" + getCookie("name"));    
        }, 10000);    
    });  
</script>

2.JavaScript的typeof返回类型有哪些？

JavaScript中的typeof是一个运算符，可以使用typeof运算符来检测变量的数据类型。有2种使用方式：typeof(表达式)和typeof 变量名，第一种是对表达式做运算，第二种是对变量做运算。

typeof返回值范围：
在这里插入图片描述

3.请你谈谈Cookie的弊端

1.Cookie数量和长度的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉。

2.安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了。

3.有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。

4.Vuex中actions和mutations的区别

action的功能和mutation是类似的，都是去变更store里的state，不过action和mutation有两点不同：

1、action主要处理的是异步的操作，mutation必须同步执行，而action就不受这样的限制，也就是说action中我们既可以处理同步，也可以处理异步的操作

2、action改变状态，最后是通过提交mutation

5.react生命周期中，最适合与服务端进行数据交互的是哪个函数

componentDidMount：在这个阶段，实例和dom已经挂载完成，可以进行相关的dom操作。

6.异步加载Js的方式有哪些

方法一：Script Dom Element

(function(){
    var scriptEle = document.createElement("script");
    scriptEle.type = "text/javasctipt";
    scriptEle.async = true;
    scriptEle.src = "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js";
    var x = document.getElementsByTagName("head")[0];
    x.insertBefore(scriptEle, x.firstChild);		
 })();

但是这种加载方式执行完之前会阻止onload事件的触发，而现在很多页面的代码都在onload时还执行额外的渲染工作，所以还是会阻塞部分页面的初始化处理。

方法二：onload时的异步加载

(function(){
	if(window.attachEvent){
    	window.attachEvent("load", asyncLoad);
    }else{
    	window.addEventListener("load", asyncLoad);
    }
    var asyncLoad = function(){
    	var ga = document.createElement('script'); 
         ga.type = 'text/javascript'; 
        ga.async = true; 
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 
        var s = document.getElementsByTagName('script')[0]; 
        s.parentNode.insertBefore(ga, s);
    }
})();

这种方法只是把插入script的方法放在一个函数里面，然后放在window的onload方法里面执行，这样就解决了阻塞onload事件触发的问题。
注:DOMContentLoaded与load的区别。前者是在document已经解析完成，页面中的dom元素可用，但是页面中的图片，视频，音频等资源未加载完，作用同jQuery中的ready事件；后者的区别在于页面所有资源全部加载完毕。

方法三：(document).ready()
需要引入jquery，兼容所有浏览器

$(document).ready(function() {
     alert("加载完成！");
 });

方法四：<script>标签的async="async"属性
async属性是HTML5新增属性，需要Chrome、FireFox、IE9+浏览器支持
async属性规定一旦脚本可用，则会异步执行
async属性仅适用于外部脚本
此方法不能保证脚本按顺序执行
他们将在onload事件之前完成

<script type="text/javascript" src="xxx.js" async="async"></script>

方法六：es6模块type="module"属性
浏览器对于带有type=”module”的< script >，都是异步加载，不会造成堵塞浏览器，即等到整个页面渲染完，再执行模块脚本，等同于打开了< script >标签的defer属性。如下：

<script type="module" src="XXX.js"></script>

转载：https://www.cnblogs.com/Lolita-web/p/10456967.html

7.说一下JS中类型转换的规则？

通过手动进行类型转换，Javascript提供了以下转型函数：

转换为数值类型：Number(mix)、parseInt(string,radix)、parseFloat(string)
转换为字符串类型：toString(radix)、String(mix)
转换为布尔类型：Boolean(mix)
1、Number(mix)函数
可以将任意类型的参数mix转换为数值类型。其规则为：
（1）如果是布尔值，true和false分别被转换为1和0
（2）如果是数字值，返回本身。
（3）如果是null，返回0.
（4）如果是undefined，返回NaN。
（5）如果是字符串，遵循以下规则：

如果字符串中只包含数字，则将其转换为十进制（忽略前导0）
如果字符串中包含有效的浮点格式，将其转换为浮点数值（忽略前导0）
如果是空字符串，将其转换为0
如果字符串中包含非以上格式，则将其转换为NaN
（6）如果是对象，则调用对象的valueOf()方法，然后依据前面的规则转换返回的值。如果转换的结果是NaN，则调用对象的toString()方法，再次依照前面的规则转换返回的字符串值。

下表列出了对象的valueOf()的返回值：

在这里插入图片描述

2.parseInt(string, radix)函数
将字符串转换为整数类型的数值。它也有一定的规则：

（1）忽略字符串前面的空格，直至找到第一个非空字符
（2）如果第一个字符不是数字符号或者负号，返回NaN
（3）如果第一个字符是数字，则继续解析直至字符串解析完毕或者遇到一个非数字符号为止
（4）如果上步解析的结果以0开头，则将其当作八进制来解析；如果以x开头，则将其当作十六进制来解析
（5）如果指定radix参数，则以radix为基数进行解析

3、parseFloat(string)函数
将字符串转换为浮点数类型的数值。

它的规则与parseInt基本相同，但也有点区别：字符串中第一个小数点符号是有效的，另外parseFloat会忽略所有前导0，如果字符串包含一个可解析为整数的数，则返回整数值而不是浮点数值。

4、toString(radix)方法。
除undefined和null之外的所有类型的值都具有toString()方法，其作用是返回对象的字符串表示。

在这里插入图片描述

5、String(mix)函数
将任何类型的值转换为字符串，其规则为：

（1）如果有toString()方法，则调用该方法（不传递radix参数）并返回结果
（2）如果是null，返回”null”
（3）如果是undefined，返回”undefined”

6、Boolean(mix)函数
将任何类型的值转换为布尔值。

以下值会被转换为false：false、”"、0、NaN、null、undefined，其余任何值都会被转换为true。

转自 https://www.cnblogs.com/dream111/p/13472132.html

8.new的原理是什么？通过new的方式创建对象和通过字面量创建有什么区别？

new的原理

创建一个新对象。
这个新对象会被执行[[原型]]连接。
将构造函数的作用域赋值给新对象，即this指向这个新对象.
如果函数没有返回其他对象，那么new表达式中的函数调用会自动返回这个新对象。

字面量创建对象，不会调用 Object构造函数, 简洁且性能更好;
new Object() 方式创建对象本质上是方法调用，涉及到在proto链中遍历该方法，当找到该方法后，又会生产方法调用必须的堆栈信息，方法调用结束后，还要释放该堆栈，性能不如字面量的方式。
通过对象字面量定义对象时，不会调用Object构造函数。

转自：https://blog.csdn.net/m0_37686205/article/details/89194248

牧之_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
佛系前端面试题记录--第七周

目录1.如何实现浏览器多标签页之间的通信？2.JavaScript的typeof返回类型有哪些？3.请你谈谈Cookie的弊端4.Vuex中actions和mutations的区别5.react生命周期中，最适合与服务端进行数据交互的是哪个函数6.异步加载Js的方式有哪些7.说一下JS中类型转换的规则？8.new的原理是什么？通过new的方式创建对象和通过字面量创建有什么区别？1.如何实现浏览器多标签页之间的通信？调用localStorage在一个标签页里面使用 localStorage.setI
复制链接

扫一扫