前端笔试题

简答题

1.display: none;与visibility: hidden;的区别

答：

1.display:none是让这个元素失去块元素的效果，其本身这个元素也是直接消失，会影响到布局问题。

2.visibility:hidden:可以让元素消失，属于css样式，它只是简单的让元素看不见，但本身的位置还在，如果对div进行hidden，那么div除了看不见，其他所有的样式都在。

2.请描述一下 cookies，sessionStorage 和 localStorage 的区别？

答：

1.存储大小

• cookie数据大小不能超过4k。
• sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

2.有效时间

• localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
• sessionStorage 数据在当前浏览器窗口关闭后自动删除。
• cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

3. 数据与服务器之间的交互方式

• cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端
• sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

3.请写出数组的冒泡排序方法

<script>
    //升序
    function maopao() {
        var arr = [9, 2, 33, 66, 55, 34, 1, 91, 88];//定义一个数组；
        for (var i = 1; i < arr.length; i++) {
            for (var j = 0; j < arr.length - i; j++) {
                if (arr[j] > arr[j + 1]) {
                    var temp = arr[j];      //定义一个临时变量temp
                    arr[j] = arr[j + 1];
                    arr[j + 1] = temp;
                }
 
            }
        }
        return arr; //返回数组
    }
 
    document.write("升序：" + maopao());
</script>

new 操作符具体干了什么呢？如何实现？

JavaScript里new操作符具体过程如下：

（1）首先创建了一个新的空对象。

（2）设置原型，将对象的原型设置为函数的 prototype对象。

（3）让函数的 this 指向这个对象，执行构造函数的代码（为这个新对象添加属性）。

（4）判断函数的返回值类型，如果是值类型，返回创建的对象。如果是引用类型，就返回这个引用类型的对象。

实现一个函数计算求和，支持这两个情况: sum(2,3)和sum(2)(3)

function sum(x){
    if(arguments.length == 2){
        return arguments[0]+arguments[1];
    }
    else{
        return function(y){return x+y;}
    }
}

实现一个函数将字符串转驼峰，例如border-bottom-color ----> borderBottomColor

        function transform(str){
            var arr = str.split('-');
            //console.log(arr);
            for(var i=0;i<arr.length;i++){
                arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].substring(1);
            }
 
            //console.log(arr);
            //return arr.join('');
            alert(arr.join('')) 
        }
 
        //调用函数
        var str = "border-bottom-color";
        transform(str);
 

13. 编写一个javscript函数fn，该函数有一个参数n（数字类型），其返回值是一个数组，该数组内是n个随机且不重复的整数，且整数取值范围是【2,32】。提示：可以使用getRand(）函数

function fn(n){　　
var arr = [];　　
var min = 2,max = 32;　　
for(var i = 0;i<n;i++){　　　　//生成随机数　　　　
var rnd =Math.floor(Math.random()*(max-min)+min);　　　　
//判断数组里是否含有rnd这个随机数　　　　
if(arr.indexOf(rnd)==-1){　　　　　　
arr.push(rnd);　　　　
}else{　　　　　
i--;　　　
}　
}　　
return arr;}
console.log(fn(6));

js继承

class Parent {
  constructor() {
    this.age = 18
  }
}

class Child extends Parent {
  constructor() {
    super()
    this.name = '张三'
  }
}
let o1 = new Child()
console.log(o1, o1.name, o1.age)

function Parent () {
  this.age = 20
}
function Child () {
  this.name = '张三'
}
Child.prototype = new Parent()

let o2 = new Child()
console.log(o2, o2.name, o2.age)