中科软web前端笔试题汇总

BittersweetYao
545 阅读9分钟

1.$(this) 和 this 关键字在 jQuery 中有何不同？

$(this) 返回一个 jQuery 对象，可以对它调用多个 jQuery 方法，比如用 text() 获取文本，用val() 获取值等等。

而 this 代表当前元素，它是 JavaScript 关键词中的一个，表示上下文中的当前 DOM 元素。你不能对它调用 jQuery 方法，直到它被 ()函数包裹，例如() 函数包裹，例如 (this)

2. margin和padding分别适合什么场景使用

何时使用margin：

  1. 需要在border外侧添加空白；
  2. 空白处不需要背景色；
  3. 上下相连的两个盒子之间的空白，需要相互抵消时。

何时使用padding：

  1. 需要在border内侧添加空白；
  2. 空白处需要背景颜色；
  3. 上下相连的两个盒子的空白，希望为两者之和

兼容性的问题：在IE5，IE6中，为float的盒子指定margin时，左侧的margin可能会变成两倍的宽度。通过改变padding或者指定盒子的display：inline解决

3. JS的作用域链是什么及其作用

是什么？

当一个变量取值时，没有在本身的作用域找到值，就会往上级作用域去查，直到找到全局作用域为止。这样的一个过程形成的链条就是作用域链

作用

  •  作用：主要用于解析变量的值

  • 如果没有这个，在不同的作用域内定义了许多变量，JS很难为变量选择某个值

4.解释JS中的高阶函数

高阶函数的定义：

高阶函数和普通函数其实是一样的，不过它有一个额外的能力就是接受函数作为参数，或者返回值是函数。

高阶函数举例

回调函数是典型的高阶函数，因为它是将函数作为另一个函数的参数

闭包，也是典型的高阶函数

递归函数，递归一般都需要在函数中返回自身（函数）

内置高阶函数

数组方法 map、filter、reduce 等等，因为这些方法都需要传入一个函数类型的参数

5. 是否可以在JS中执行301重定向

答案：否

301和302是什么？

301，永久重定向：在请求的URL已被移除时使用，响应的location首部中应包含资源现在所处的URL
302，临时重定向：和永久重定向类似，客户端应用location给出URL临时定位资源，将来的请求仍为原来的URL。

为什么不行？

JS完全运行在客户端上。301是服务器作为响应发送的响应代码。因此，客户端的JS不可能执行301重定向.

但是客户端可以执行简单的跳转，只能不能设置301状态码，代码如下：

// 假设旧域名为 www.a.com 新域名为 www.b.com 
if (document.domain =='www.a.com') 
this.location = "http://www.b.com" + 
this.location.pathname + this.location.search;

另一方面，服务端的Node.js是可以做301重定向的，如下

const http = require('http'); 
const server = http.createServer((req, res) => {
// 设置响应状态码 
res.statusCode = 301; 
// 响应头设置新地址 
res.setHeader('Location', 'http://www.a.com'); res.end(); }); 

server.listen(3000, () => console.log('server running...')

6. JS中的Array.splice()和Array.slice()方法有什么区别

我们通过两个例子来展示他们的区别

var arr=[0,1,2,3,4,5,6,7,8,9];//设置一个数组
console.log(arr.slice(2,7));//2,3,4,5,6
console.log(arr.splice(2,7));//2,3,4,5,6,7,8
//由此我们简单推测数量两个函数参数的意义,
slice(start,end)第一个参数表示开始位置,第二个表示截取到的位置(不包含该位置)
splice(start,length)第一个参数开始位置,第二个参数截取长度


var x=y=[0,1,2,3,4,5,6,7,8,9]
console.log(x.slice(2,5));//2,3,4
console.log(x);[0,1,2,3,4,5,6,7,8,9]原数组并未改变
//接下来用同样方式测试splice
console.log(y.splice(2,5));//2,3,4,5,6
console.log(y);//[0,1,7,8,9]显示原数组中的数值被剔除掉了

总结：

slice和splice虽然都是对数组进行截取操作，但是slice是根据括号里的参数，进行左闭右开的（作为下标）拿去原数组数据，并生成一个新数组

而splice是是第一个参数是截取开始的下标，第二个参数是截取的个数，并且splice会改变原数组

7.cookie和session的区别

Cookie和Session都是用于在Web应用程序中跟踪用户状态的机制，但它们有一些不同之处：

  1. 存储位置：Cookie保存在客户端浏览器中，Session保存在服务器端。
  2. 安全性：Session相对于Cookie来说更安全一些，因为其保存在服务器端，而Cookie保存在客户端，可能会被恶意用户窃取和篡改。
  3. 存储容量：Cookie的存储容量比Session要大，因为Cookie可以在客户端硬盘上存储，而Session只能存储在服务器端。
  4. 生命周期 ：Cookie可以设置一个过期时间，可以在客户端保持长期有效，而Session会在用户关闭浏览器或者一段时间后自动失效。
  5. 作用范围：Cookie的作用范围可以是整个应用程序，也可以是某个特定的页面，而Session只有在创建它的应用程序内有效。

总的来说，Cookie和Session都是用于跟踪Web应用程序中的用户状态，但它们的实现方式不同，各有优缺点，需要根据具体的应用场景来选择使用哪种机制。

8.箭头函数与普通函数的区别

普通函数可以有匿名函数，也可以有具体名函数，但是箭头函数都是匿名函数

定义函数

// 箭头函数
()=>{
log("我是最正经的箭头函数")
}
//定义一个变量等于这个箭头函数方法
const fun1 = (a) => {
    return `Hello ${a} !`;
};

// 普通函数
const fun2 = function (a) {
    return `Hello ${a} !`;
};

在写法上也有很大差别：箭头函数有简写方法

① 如果箭头函数没有参数，直接写一个空括号即可。

② 如果箭头函数的参数只有一个，也可以省去包裹参数的括号。

③ 如果箭头函数有多个参数，将参数依次用逗号(，)分隔，包裹在括号中即可。

// 没有参数
let fun1 = () => {
    console.log('dingFY');
};

// 只有一个参数，可以省去参数括号
let fun2 = name => {
    console.log(`Hello ${name} !`)
};

// 有多个参数，逗号分隔
let fun3 = (val1, val2, val3) => {
    return [val1, val2, val3];
};

本处代码不是我自己写的，copy的 --- dingFY

简写方式当然还不止这些，当你只需要return一句代码或对象，那么你连return ，大括号这些都不用写了

// 用小括号包裹要返回的对象，不报错
let getTempItem = id => ({ id: id, name: "Temp" });

// 但绝不能这样写，会报错，因为对象的大括号会被解释为函数体的大括号
let getTempItem = id => { id: id, name: "Temp" };

上面这个代码还可以在改进，其实我直接不写大括号也不会报错，要简写就全简写捏

let getTempItem = id =>  id: id, name: "Temp" ;

也许你只看这个看不出优势

这里举例一个最常用的场景，router

图片.png 这下对比看出优势了吗？

箭头函数没有prototype (原型)，所以箭头函数本身没有this

// 箭头函数
let a = () => {};
console.log(a.prototype); // undefined
// 普通函数
function a() {};
console.log(a.prototype); // {constructor:f}

箭头函数不会创建自己的this

箭头函数没有自己的this,箭头函数的this指向在定义（注意： 是定义时，不是调用时）的时候继承自外层第一个普通函数的this。所以，箭头函数中 this 的指向在它被定义的时候就已经确定了，之后永远不会改变。

let obj = {
  a: 10,
  b: () => {
    console.log(this.a); // undefined
    console.log(this); // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
  },
  c: function() {
    console.log(this.a); // 10
    console.log(this); // {a: 10, b: ƒ, c: ƒ}
  }
}
obj.b(); 
obj.c();

也就是说，箭头函数的this与其上下文有关

箭头函数不绑定arguments，取而代之用rest参数...代替arguments对象，来访问箭头函数的参数列表

箭头函数不能用作Generator函数，不能使用yield关键字

什么是闭包？谈谈你的了解

JS闭包指的是一个函数能够访问并操作其外部作用域的变量，即使这个函数在外部作用域已经执行完毕，这些变量依然可以被访问和修改。

也就是延长了其生命周期

闭包的实现方式是在一个函数内部定义另一个函数，并将其作为返回值返回。这个内部函数可以访问外部函数的局部变量，而外部函数的局部变量则被保存在返回的内部函数中，形成了一个闭包。

function outerFunction() {    
  var privateMethod = function() {    
    console.log("This is a private method");    
  };  
  
  return privateMethod;    
}  
  
const privateMethod = outerFunction();    
privateMethod(); // 输出 "This is a private method"

从代码我们可以看出，闭包的一种形式就是很简单的函数里面在套一个函数，调用上层函数获取下面的函数的东西

闭包的高级操作

闭包实现高并发

// 在函数内部创建一个新的闭包，用于存储线程对象
var thread = null;
function addNumbers(a, b, callback) {  
    function worker() {  
var result = a + b; callback(result); 
    }  
    if (!thread) { 
thread = new Thread(worker); 
thread.start(); 
    } 
    else thread.run(worker); 
}
// 在函数外部创建一个新的线程，并使用闭包创建一个新的线程对象
addNumbers(1, 1, function(result) { 
console.log(result); 
});

在这个例子中，addNumbers 函数返回了一个闭包，该闭包在内部创建了一个新线程，该线程执行的任务是加法运算。新线程执行的任务是在闭包内部完成的，因此可以避免竞争条件。最后，闭包返回的结果被返回到调用它的上下文中，并通过线程对象被其他线程访问。

闭包的作用

实现私有变量和方法，以及实现高阶函数等功能。但是过度使用闭包也可能导致内存泄漏和性能问题，因此需要慎重使用

常见的HTTP头部有：

  1. Accept：指定客户端能够处理的媒体类型。
  2. Accept-Encoding：指定客户端能够处理的内容编码方式。
  3. Accept-Language：指定客户端能够处理的自然语言。
  4. Cache-Control：指定请求/响应中的缓存行为。
  5. Content-Type：指定请求/响应中的实体内容的媒体类型。
  6. Cookie：用于在请求和响应之间传递会话信息。
  7. Host：指定请求的目标服务器的主机名和端口号。
  8. User-Agent：指定客户端的用户代理标识。
  9. Referer：指定当前请求的来源页面的URL。
  10. Server：指定响应中的服务器软件信息。
  11. Location：指定重定向的目标URL。
  12. Content-Length：指定请求/响应中的实体内容的长度。
  13. Authorization：指定客户端提供的身份验证凭证。
  14. If-Modified-Since：指定只有在指定日期后修改过的资源才会被返回。
  15. If-None-Match：指定只有与指定的ETag值不匹配的资源才会被返回。

先就更这么多qwq

avatar
文章
阅读
粉丝