前端面试-JavaScript篇

最新推荐文章于 2020-03-05 17:06:26 发布

朦dada

最新推荐文章于 2020-03-05 17:06:26 发布

阅读量458

点赞数

分类专栏： JavaScript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/mengstudents/article/details/78213676

版权

JavaScript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

1、JavaScript的数据类型？

ECMAScript：string number boolean undefined object null
typeof：string number boolean undefined object function

2、3种强制类型转换和2种隐式类型转换?

强制类型转换：Number()、String()、Boolean()、ParseInt()、parseFloat()
隐士类型转换：+ - * / == %

3、数组中常见的方法？

参考：http://blog.csdn.net/mengstudents/article/details/76039281

4、ajax请求的时候，post方法和get方法的区别？

参考：https://mp.weixin.qq.com/s?__biz=MzI3NzIzMzg3Mw%3D%3D&mid=100000054&idx=1&sn=71f6c214f3833d9ca20b9f7dcd9d33e4

5、call和apply的区别？

call和apply的作用：改变构造函数中this的指向，一般用于继承

6、ajax请求时，如何解析json数据？

解析json数据有两种方式：

1、字符串解析
var obj = ‘{“name”:”小李子”}’;
var jsonObj = eval(‘(‘+obj+’)’);//eval解析
var jsonObj = JSON.parse(obj);//json.parse解析
2、区别
eval在解析字符串的时候，不会去判断字符串的合法性，如果字符串中存在js语句，他也会执行；
JSON.parse在解析字符串的时候，会判断字符串的合法性，如果字符串不合法的话，就会抛出异常；
就上面的描述而言，使用JSON.parse来解析json字符串更为安全。

7、什么是事件委托？

事件委托又叫事件代理，简单来说：就是将自己要做的事情交给其他人去做，让别人来代理。
事件委托的好处：
1）可以减少内存的占用，不需要频繁的绑定事件
2）当需要动态添加事件时，不需要为新增的元素添加事件

8、什么是闭包？有什么特性？对页面有什么影响？

9、DOM节点的操作：添加、删除、替换、插入

1、创建节点

1> 通过字符串方式创建节点：var str = "<div></div>";
使用这种方式添加元素节点之后，想要为每个元素添加事件，就需要重新获取元素；否则的话，只能给最后一个元素节点添加事件
2> 通过createElement创建节点
该方法只能通过document对象来调用，可以动态的给元素绑定事件，创建完之后，使用appendChild的方式添加到页面中，节点才会生效
var div = document.createElement("div");//创建DIV节点 document.body.appendChild(div);//将创建好的节点添加到页面中

2、添加节点

1> 父元素.appendChild(节点对象)
将要插入的节点添加到父元素的最后一个子节点后边，包括文本节点
var parent = document.getElementById("parent");//获取父元素节点 var child = document.createElement("div");//创建新的元素节点 parent.appendChild(child);//将子元素节点添加到父元素节点中
2> 父元素.insertBofore(新的元素节点，被插入的元素节点)
将新的元素节点添加到被插入的元素节点之前
var parent = document.getElementById("parent");//获取父元素节点 var newChild = document.createElement("div");//创建新的元素节点 var oldChild = parent.children[0];//获取旧的元素节点 parent.insertBefore(newChild,oldChild);//将子元素节点添加到父元素节点中,并且将新的元素插入到旧的元素之前
3> 上述两个方式,如果添加是已有元素，则相当于剪切
4> 注意：如果需要往父元素的第一个子元素节点前添加新的节点，需要先判断该父元素是否存在子元素节点，如果存在，就使用insertBefore来插入子节点；否则的话就使用appendChild来插入子节点

3、删除节点
removeChild：删除父元素下指定的节点
var parent = document.getElementById("parent");//获取父元素节点 var child = parent.children[0]; parent.removeChild(child);//删除第一个孩子节点

4、克隆/复制节点
cloneNode：只能克隆节点的html和css样式，不能克隆自定义属性和事件

<body>
    <ul id="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <ul id="list2">
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
    </ul>
    <script>
        var list = document.getElementById("list");
        var list2 = document.getElementById("list2");
        var child = list.children;
        var child2 = list2.children;
        var li = document.createElement("li");
        li.innerHTML = 'hello';
        list.appendChild(li); //往页面中添加刚创建好的节点，添加到最后边
        list.appendChild(child2[3]); //将已经存在的节点添加到list中，相当于剪切功能，另一个元素对象list2中的节点会被删除

        list.insertBefore(li,child[1]); //向指定元素的前边添加节点
        list.insertBefore(child2[2],child[0]); //向指定元素前添加节点，同appendChild，具有剪切功能

        list.removeChild(child[0]); //删除指定的元素节点

        list.replaceChild(li,child[0]); //替换指定位置的元素节点，被替换的元素会被删除
    </script>
</body>

5、替换节点
replaceChild(新元素，被替换的元素)：被替换的元素会被删除
6、查找节点
查找节点其实就是获取元素对象，那么就可以直接使用获取元素对象的方法来查找节点—-在02中有相关方法说明

10、什么是JavaScript的同源策略？

参考：https://segmentfault.com/a/1190000004186889

11、编写一个B继承A的方法

12、如何阻止事件冒泡和默认事件？

阻止事件冒泡：event.stopPropagation()
阻止默认事件：event.preventDefault()

13、下面程序执行后弹出什么样的结果?

function fn() {
    this.a = 0;
    this.b = function() {
        alert(this.a)
    }
}
fn.prototype = {
    b: function() {
        this.a = 20;
        alert(this.a);
    },
    c: function() {
        this.a = 30;
        alert(this.a);
    }
}
var myfn = new fn();
myfn.b();
myfn.c();

14、对this的理解

15、下面程序的结果

function fun(n,o) {
  console.log(o)
  return {
    fun:function(m){
      return fun(m,n);
    }
  };
}
var a = fun(0);  a.fun(1);  a.fun(2);  a.fun(3);
var b = fun(0).fun(1).fun(2).fun(3);
var c = fun(0).fun(1);  c.fun(2);  c.fun(3);

16、下面这段程序的运行结果？

var name = 'World!';
(function () {
    if (typeof name === 'undefined') {
        var name = 'Jack';
        console.log('Goodbye ' + name);
    } else {
        console.log('Hello ' + name);
    }
})();

17、http状态码及其含义

status表示的是服务器返回的状态码：
1xx：表示信息请求
2xx：表示信息发送成功，200表示信息发送成功
3xx：表示重定向，表示存在缓存
4xx：表示错误;404表示文件找不见
5xx：表示服务器出现错误

18、一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？

输入URL地址
浏览器根据输入的URL来获取对应的IP地址
浏览器向服务器发送http请求
服务器接收请求，开始处理请求
服务器将响应发送给浏览器
浏览器根据返回的信息将内容渲染到HTML页面中

19、常用的开发工具是什么？

sublime、 webstorm、 HBuilder

20、最近流行的东西？常去的网站有哪些？

（1）nodeJS、 MongDB、 npm、 MVVM、 React、 VUE
（2）segmentfault、 github、掘金、 CSDN

朦dada

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端面试-JavaScript篇

三、JavaScript篇1、JavaScript的typeof返回哪些数据类型？2、3种强制类型转换和2种隐式类型转换?3、数组中常见的方法？4、ajax请求的时候，post方法和get方法的区别？5、call和apply的区别？6、ajax请求时，如何解析json数据？7、什么是事件委托？8、什么是闭包？有什么特性？对页面有什么影
复制链接

扫一扫