某B端公司前端笔试题

1. JavaScript中如何检测一个变量是String类型？请写出函数实现。

function isString(obj) {
    return typeof(obj) === "string" ? true : false;
}

2. 根据以下示例代码，请填写代码输出值。

function test() {
    console.log(a);                
    console.log(foo());
    var a = 1;                      //变量提升，但赋值不提升
    function foo() {
        return 2;
    }
}
test();

undefined
2

3. 什么是跨域？跨域请求资源的方法有哪些？
①参考https://segmentfault.com/a/1190000011145364
②

			document.domain:	设置为基础主域
iframe	+		location.hash	通过中间页
			window.name	通过iframe的src属性由外域转向本地域

postMessage CORS 代理跨域

4. 请编写简要js代码，实现判断一个字符串中出现次数最多的字符，统计这个次数的需求。

var str = "Hello";         //存放需要判断的字符串
var obj = {};              //定义json格式的对象
    for(let i = 0; i < str.length; i++) {          //遍历字符串，存放字符及字符次数于obj
        if(!obj[str.charAt(i)) {                    //判断obj中是否存在当前str.charAt(i)的值
            obj[str.charAt(i)] = 1;                 //如果不存在，为此字符赋值为1
        }else{
            obj[str.charAt(i)]++;
        }
    }

var char = "";
var num = 0;
    for(let key in obj) {               //遍历obj，找到值最大的字符，即次数
        if(obj[key] > num) {
            char = key;
            num = obj[key];
        }
    }
    console.log(str+"中出现次数最多的字符是"+char+"，次数为："+num)

5. 已知f(1)=1，f(2)=1，求f(x+2)=f(x)+f(x+1)，编程实现。

var fibonacci = function(n) {
    let n1 = 1; n2 = 1;
    for(let i = 2; i < n; i++) {
        [n1, n2] = [n2, n1 + n2]           //解构赋值
    }
    return n2;
}
fibonacci(30);

6. $(this)和this关键字在jQuery中有何不同？
①$(this)返回一个jQuery对象，通过它可调用jQuery方法，比如用val()获取值，text()获取文本等；
②this代表当前元素，是javascript关键词中的一个，表示表示上下文中的当前DOM元素。

7. $(document).ready()方法和window.onload有什么区别？
①$(document).ready()只要在DOM完全就绪就可以调用；
②window.onload在网页中的所有元素（包括元素所有关联的文件）都完全加载到浏览器之后才执行。

8. 浏览器是如何渲染页面的，请简述渲染流程？
参考https://www.jianshu.com/p/fd3493345f8f

---

解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树
所以，浏览器会解析三个东西：
（1） HTML/SVG/XHTML，解析这三种文件会产生一个 DOM Tree。
（2） CSS，解析 CSS 会产生 CSS 规则树。
（3） js脚本，主要是通过 DOM API 和 CSSOM API 来操作 DOM Tree 和 CSS Rule Tree.

9. 怎么定义vue-router的动态路由？怎么获取传过来的动态参数？（Vue）
①在router目录下的index.js文件中，对path属性加上/:id;
②使用router对象的params.id。

10. vue如何实现父子组件通信，以及非父子组件通信？（Vue）
①用props:{ }；
②

var bus = new Vue();                  //事件总线
bus.$emit('id-selected', 1)           //触发组件A中的事件
bus.$on('id-selected', function(id) {
    //……
    })

11. 简述一下vue响应式原理。
通过数据劫持结合发布者-订阅者模式的方法来实现的。利用了object.defineProperty()这个方法重新定义了对象获取值（get）和设置属性值（set）。

12. 简单描述下微信小程序的相关文件类型？

		布局		wxml
app	json	配置	pages	json
	js	逻辑		js
	wxss	样式		wxss

13. 在小程序中你是怎么封装微信小程序的数据请求的？
参考https://blog.csdn.net/weixin_44486539/article/details/103130370

14. 小程序有哪些参数传值的方法？
①全局变量
②页面跳转携带参数
③页面→组件
④组件→页面

15. 怎么解决小程序的异步请求问题？
①在返回成功的回调里面处理逻辑
②Promise异步