前端关于JavaScript的面试题（三）

最新推荐文章于 2024-06-17 02:46:14 发布

Jojorain

最新推荐文章于 2024-06-17 02:46:14 发布

阅读量330

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/Jojorain/article/details/104806699

版权

31.简述下为何通过ajax发送的请求会出现乱码问题，如何解决？

乱码的问题就是编码格式冲突，我们需要传输中文数据前面加一个encodeURI()编码，例如：encodeURI($("#fk_info").val())；在接受参数的页面对传过来的编码过后的内容用后端语言进行解码

//node后台向其他服务器发送请求
var url = "http://www.baidu.com/?name=张三";
//这里我们需要将中文的  张三  编码后发给服务器
url = encodeURI(url);
request(url,function(error,response,body){
    if(!error && response.statusCode == 200){
        //输出返回的内容
        console.log(body);
    }
});

32.简述DOM，HTML DOM的区别和联系

DOM分为三部分：

（1）核心DOM：遍历DOM树、添加新节点、删除节点、修改节点

（2）HTML DOM：以一种简便的方法访问DOM树

（3）XML DOM：准用于操作XML文档

核心DOM与HTML DOM的区别：
A.核心DOM(dom对象) ： Document,Node,  ElementNode,TextNode,AttributeNode，CommentNode,NodeList

核心DOM提供了统一的操作接口，如：createElement、appendChild、setAttribute等
核心DOM创建新元素：var newNode=document.createElement("img")
给元素添加属性：e.setAttribure()、e.setAttribureNode()
适用场合：核心DOM适合操作节点，如创建，删除，查找等

B.HTML DOM(js对象)：image,Table,Form,Input,Select等等HTML标签对象化
使用HTML DOM创建新元素：  var newNode = new Image()；
使用给元素添加属性：
img.src='';
img.id='';
imd.title='';
img.className=''
img.style.display='';

适用场合：
HTML DOM适合操作属性，如读取或修改属性的值

33.什么是事件流

DOM(文档对象模型)结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素结点与根结点之间的路径传播，路径所经过的结点都会收到该事件，这个传播过程可称为DOM事件流。DOM同时支持两种事件模型：捕获型事件和冒泡型事件

el.addEventListener(“click”, function(){},false); //事件冒泡阶段
el.addEventListener(“click”, function(){},true); //事件捕获阶段

34.JavaScript原型继承是如何运作的？

1.什么是原型链
  对象.__propto__ = 函数.prototype
  函数.prototype.__proto__ = 父亲的.prototype

  原型链中属性的查找规则如下：当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么他就会去prototype里找这个属性，这个prototype又会有自己的prototype，于是就这样一直找下去(知道找到null为止)，也就是我们平时所说的原型链的概念。

2.原型继承是对原型链做了相应的修改

3.举个例子 
   Dog.prototype = new Animal()
   var dog = new Dog()
   dog.__proto__ == Dog.prototype
   //原来 Dog.prototype.__proto__ == 父亲的.prototype
  
   //现在 dog.__proto__ == new Animal()
   //然后 new Animal().__proto__ == Animal.prototype;
   //所以原型链被修改了

35.DOM元素Attribute与Property的区别是什么？

1、 property是DOM中的属性，是JavaScript里的对象；而attribute是HTML标签上的特性，它的值只能够是字符串；

2、DOM对象初始化时会在创建默认的基本property；只有在HTML标签中定义的attribute才会被保存在property的attributes属性中；

3、attribute会初始化property中的同名属性，但自定义的attribute不会出现在property中；

4、propety是对象，而attribute的值都是字符串；

36.指出下面代码的区别

function Order(){

}

var order = Order();      （1）
var order = new Order();  （2）


答案：
1.代码（1）是将函数Order()作为一个普通函数去调用的
2.代码（2）是将Order()作为一个构造函数去调用的；
3.当函数Order的方法体中有this关键之的时候，作为普通函数this指的是window对象，作为构造函数存在的时候this指代的是本对象

37.$(document).ready()是个什么函数？为什么要用它。

1.$(document).ready()这个函数是用来取代页面中的window.onload; 不同的是onload()的方法是在页面加载完成后才发生，这包括DOM元素和其他页面元素（例如图片）的加载，而document.ready()是在dom准备就绪后执行。因此，使用document.ready()方法的执行速度比onload()的方法要快。

2.如果使用onload，那么页面中只能写一个onload函数，如果写多个，后面的onload会覆盖前面的onload。但是如果使用$(document).ready()，那么我们可以写多个。

39.请写一个正则，匹配输入的字符：第一个必须是字母或下划线开头，后面就是字母和数字或下划线构成，长度5-20.

答案： /¹\w{4,19}$/

40.JS中原型链最上层的对象是 object 的原型对象，该对象的`_proto_`指针指向 null 的原型对象。

对的

42.JS中使用 Object 对象的 defineProperty 函数定义对象属性的访问器。

使用Object.defineProperty()方法可以做数据的劫持，当我们使用Object.defineProperty()定义了对象的属性之后，给对象赋值的时候会执行set方法，获取对象值的时候会执行get方法

var person = {};
Object.defineProperty(person, 'name', {
  get: function () {
    return temp
  },
  set: function (val) {
    temp = val
  }
})

person.name = "张三"；                   执行set（）方法
console.log(person.name);               执行get（）方法

43.如何对一篇文章进行敏感词替换？假如有几千个敏感词。（写一下思路即可）

将这篇文章以字符串的形式赋给一个变量。定义一个正则表达式，以全局匹配的方式查找所有敏感词，并用replace方法替换掉

var rep=/cao|草|曹操|妈/g;
console.log(text1.value.replace(rep,'*'));  //将相关的敏感词用*替换

44.添加、删除、更改、插入节点的方法

appendChild
removeChild
replaceChild
insertBefore

45.在javascript编程中，请至少说出三种异步操作的使用场景？

//异步操作的场景：

1.读文件  :   fs.readFile("path","utf-8",function(){})
2.事件监听 :
    element.addEventListener(“click”,function(){
        
    },false); 
3.网络请求 :
    $.ajax({
        url:"",
        method:"GET",
        success:function(res){
            
        }
    })

//异步问题的解决方案：
//1.基于回调的异步请求解决方案

//2.基于Promise
console.log("2")
new Promise(function(resolve,reject){
    console.log("1");
    setTimeout(function(){
        console.log("4");
        resolve();
    },500);
}).then(function(){
    console.log("5");
})
console.log("3");

//3.Async和await
async function test(){
    let result1 = await axios("url1")
    let result2 = await axios("url2")
}
加async修饰的方法，里面可以使用await，方法的返回值需要是一个promise
await只能出现在async修饰的方法里面，await后面需要跟一个promise
async + await 可以将原来的并行任务转换串行任务
比如上面的例子，result2的结果要等到result1请求结束之后才能执行

A-Za-z_ ↩︎

Jojorain

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端关于JavaScript的面试题（三）

31.简述下为何通过ajax发送的请求会出现乱码问题，如何解决？乱码的问题就是编码格式冲突，我们需要传输中文数据前面加一个encodeURI()编码，例如：encodeURI($("#fk_info").val())；在接受参数的页面对传过来的编码过后的内容用后端语言进行解码//node后台向其他服务器发送请求var url = "http://www.baidu.com/?name=张三"...
复制链接

扫一扫