1.如何实现一个对象的深拷贝?
// 方法1:使用JSON, var copy = JSON.parse(JSON.stringify(obj));
var obj = {
name: 'zhangsan',
age: 12
}
var obj1 = JSON.parse(JSON.stringify(obj));
obj1.name = 'lisi';
console.log(obj1, obj); //{ name: 'lisi', age: 12 } { name: 'zhangsan', age: 12 }
// 方法2:第三方库lodash 的cloneDeep
var _ = require('lodash');
var obj = {
name:'zhangsan',
age: 18
}
// 使用cloneDeep方法
var obj2 = _.cloneDeep(obj);
obj2.name = 'hhh';
obj2.age = 20;
console.log(obj); // { name: 'zhangsan', age: 18 }
console.log(obj2); // { name: 'hhh', age: 20 }
2.用递归的方法实现1到100求和
function sum(n) {
if (n == 1) {
return 1
} else {
return n + sum(n - 1)
}
}
var result = sum(100);//5050
console.log(result)
3.什么是闭包?如何解决闭包打来的内存泄露问题?
闭包是指有权访问另一个函数作用域中的变量的函数,闭包的创建方式,
就是在一个函数内部创建另外一个函数。保护变量不被内存回收机制回收,避免全局变量被污染。
function foo() {
var i = 0;
return function () { //这个就是一个闭包函数
console.log(i++); //变量不会被内存回收机制回收
}
}
var f1 = foo();
f1(); // 0
f1(); // 1
f1(); // 2
//闭包长期占用内存,内存消耗很大,可能导致内存泄露
function foo(){
var i=0;
return function(){ //这个就是一个闭包函数
console.log(i++); //变量不会被内存回收机制回收
i=null; //释放内存
}
}
var f1=foo();
f1(); // 0
f1(); // 0
f1(); // 0
4.简述http协议的报文格式
http协议是超文本传输协议,常用于BS架构中,为数据在网络传输中规定协议。
HTTP报文的分类有两种:请求报文和响应报文。
请求报文就是客户端向服务端发送请求的信号,
响应报文就是服务端响应处理后回传给客户端的信号。
请求报文:浏览器会将前端请求封装成请求报文发送给后端,
请求报文中包含请求行、请求头、请求体
响应报文:服务器接收到前端发来的请求,会将响应内容封装成为一个响应报文,
浏览器会对响应报文进行解析,进而显示出来。响应报文中包含响应行、响应头、响应体
5.列举最少5个animation的子属性,并说明其含义
animation-name 指定要绑定到选择器的关键帧的名称,告诉系统需要执行哪个动画
animation-duration 动画指定需要多少秒或毫秒完成,告诉系统动画持续的时长
animation-timing-function 设置动画将如何完成一个周期,告诉系统动画执行的速度
animation-delay 设置动画在启动前的延迟间隔。
animation-iteration-count 定义动画的播放次数。告诉系统动画需要执行几次
animation-direction 指定是否应该轮流反向播放动画。
animation-fill-mode 规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。
animation-play-state 告诉系统当前动画是否需要暂停
6.盒子模型种类及主要区别?
边框盒子/IE盒子/怪异盒子Border-box 内容盒子/W3C盒子/默认盒子content-box
区别:计算尺寸方式不同,
对于边框盒子设置的宽高是包含了border、padding、content的结果
对于内容盒子设置的宽高只是指content
7.统计一个字符串中字符出现一次的字符,例如:输入 hello,l 输出 2
function count(str,char){
var pat=new RegExp(char,'gm');
var res=str.match(pat);
console.log(res);
return res.length;
}
console.log(count('hello','l')); //[ 'l', 'l' ] 2
8.编写代码实现数组扁平化输出,例如:输入[[1,2,3,[4,5,6,[7,8]]],[9,10],[11,12,[13]],5] 输出为[1,2,3,4,5,6,7,8,9,10,11,12,13,5]
function mout(arr) {
var brr = arr.toString().split(',').map(function (item) {
return Number(item);
})
return brr;
}
var arr = [[1, 2, 3, [4, 5, 6, [7, 8]]], [9, 10], [11, 12, [13]], 5];
console.log(mout(arr)); //[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 5 ]
9.使用任意一种排序算法对数组进行排序,例如:输入[3,2,1,6,12,8,9] 输出:[1,2,3,6,8,9,12]
//第一种方法
var arr=[3,2,1,6,12,8,9] ;
var result=arr.sort(function(a,b){
return a-b;
})
console.log(result) //[ 1, 2, 3, 6, 8, 9, 12 ]
//第二种方法
var arr = [3, 2, 1, 6, 12, 8, 9];
var result = arr.sort(function (a, b) {
if (a > b) {
return 1;
} else {
return -1;
}
})
console.log(result); //[ 1, 2, 3, 6, 8, 9, 12 ]
//第三种方法
var arr = [3, 2, 1, 6, 12, 8, 9];
function bubbleSort(arr) {
var len = arr.length;
//外层控制循环多少趟
for (var i = 0; i < len - 1; i++) {
//内层控制每一趟的循环次数
for (var j = 0; j < len - 1 - i; j++) {
// 相邻元素两两对比,元素交换,大的元素交换到后面
if (arr[j] > arr[j + 1]) {
var temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
return arr;
}
bubbleSort(arr);
console.log(arr); //[ 1, 2, 3, 6, 8, 9, 12 ]
10.说明px、 em 、 rem三者关系
px为长度单位,表示一个像素点
em为相对长度单位,表示当前元素上的字体大小
rem为相对长度单位,表示根(html)元素上声明的字体大小