HTML+CSS+JS考试复习题(二)

359 阅读4分钟

1.如何实现一个对象的深拷贝?

// 方法1:使用JSON,  var copy = JSON.parse(JSON.stringify(obj));
var obj = {
    name'zhangsan',
    age12
}
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',
  age18
}
// 使用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
区别:计算尺寸方式不同,
对于边框盒子设置的宽高是包含了borderpaddingcontent的结果
对于内容盒子设置的宽高只是指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 = [[123, [456, [78]]], [910], [1112, [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 = [32161289];
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 = [32161289];
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)元素上声明的字体大小