欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

前端一些面试题

程序员文章站 2022-06-09 12:11:09
...

Q:如何判断一个变量是对象还是数组?

判断数组和对象分别都有好几种方法,其中用prototype.toString.call()兼容性最好。

function isObjArr(variable){
     if (Object.prototype.toString.call(value) === "[object Array]") {
            console.log('value是数组');
       }else if(Object.prototype.toString.call(value)==='[object Object]'){//这个方法兼容性好一点
            console.log('value是对象');
      }else{
          console.log('value不是数组也不是对象')
      }
}

ps:千万不能使用typeof来判断对象和数组,因为这两种类型都会返回"object"。

原文链接:https://juejin.im/post/5aad40e4f265da237f1e12ed


Q: 统计字符串字母个数

var str="aaaabbbcccddfhk";
var obj=[];
for(var i=0;i<str.length;i++){
var v=str.charAt(i);
if(obj[v]&&obj[v].value==v){
obj[v].count=++obj[v].count;
}
else{
obj[v]={};
obj[v].count=1;
obj[v].value=v;
}
}
for(key in obj)

console.log(obj[key].value+"="+obj[key].count+"&nbsp;");


ES5的继承和ES6的继承有什么区别?

ES5的继承时通过prototype或构造函数机制来实现。ES5的继承实质上是先创建子类的实例对象,然后再将父类的方法添加到this上(Parent.apply(this))。

ES6的继承机制完全不同,实质上是先创建父类的实例对象this(所以必须先调用父类的super()方法),然后再用子类的构造函数修改this

具体的:ES6通过class关键字定义类,里面有构造方法,类之间通过extends关键字实现继承。子类必须在constructor方法中调用super方法,否则新建实例报错。因为子类没有自己的this对象,而是继承了父类的this对象,然后对其进行加工。如果不调用super方法,子类得不到this对象。

ps:super关键字指代父类的实例,即父类的this对象。在子类构造函数中,调用super后,才可使用this关键字,否则报错。

链接:https://juejin.im/post/5aad40e4f265da237f1e12ed


Q:CSS3有哪些新增的属性?

这里可以分为边框、背景,渐变,阴影、2D转换 3D转换等之类的来说。
比如:边框(border-radius、border-shadow、border-image)之类的 。

Q:setTimeout的执行机制

setTimeout属于异步执行函数,遇到setTimeout会将该函数放入等待队列,等待当前主程序(除去setTimeout的部分)执行完毕后开始执行setTimeout,由于后面的几个都是setTimeout,因此都会放到等待队列~~~

Q:你知道哪些http状态码?

1xx:1开头的是信息状态码
2xx:2开头的是请求成功
3xx:3开头的是重定向
4xx:4开头的是客户端错误
5xx:5开头的是服务器错误

具体查看 https://juejin.im/post/590082e6a22b9d0065be1a5c

Q:反转字符串

转载自 https://juejin.im/post/590082e6a22b9d0065be1a5c

(1)使用字符串函数

//使用数组翻转函数
function reverseString(str){
    var array = str.split('');  //转换成字符串数组
    array = array.reverse();
    str = array.join('');
    return str;
}
//简写
function reverseString1(str){
    return str.split('').reverse().join('');
}

console.log(reverseString("helloworld"));  //dlrowolleh
console.log(reverseString1("helloworld"));  //dlrowolleh

(2)使用for循环

//使用for循环
function reverseString2(str){
    var newStr = "";
    for(var i=str.length-1; i>=0; i--){
        newStr += str[i];
    }
    return newStr;
}
console.log(reverseString2("helloworld"));  //dlrowolleh

(3)使用递归

//使用递归
function reverseString3(str){
    if(str===""){
        return "";
    }else{
        return reverseString3(str.substr(1)) + str.charAt(0);
    }
}
console.log(reverseString3("helloworld"));  //dlrowolleh

//简写
function reverseString4(str) {  
 return (str === '') ? '' : reverseString(str.substr(1)) + str.charAt(0);  
}   
console.log(reverseString4("helloworld"));  //dlrowolleh


Q:document.write的用法

http://blog.csdn.net/qq_34986769/article/details/52160532


Q:js for循环闭包问题及解决办法

https://www.cnblogs.com/ZinCode/p/5551907.html

http://www.jb51.net/article/87084.htm

1.变量声明const和let

我们都是知道在ES6以前,var关键字声明变量。无论声明在何处,都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是函数变量提升例如:

  function aa() {
    if(bool) {
        var test = 'hello man'
    } else {
        console.log(test)
    }
  }

以上的代码实际上是:

  function aa() {
    var test // 变量提升
    if(bool) {
        test = 'hello man'
    } else {
        //此处访问test 值为undefined
        console.log(test)
    }
    //此处访问test 值为undefined
  }

所以不用关心bool是否为true or false。实际上,无论如何test都会被创建声明。

接下来ES6主角登场:
我们通常用let和const来声明,let表示变量、const表示常量。let和const都是块级作用域。怎么理解这个块级作用域?

  • 在一个函数内部
  • 在一个代码块内部

说白了 {}大括号内的代码块即为let 和 const的作用域。

看以下代码:

  function aa() {
    if(bool) {
       let test = 'hello man'
    } else {
        //test 在此处访问不到
        console.log(test)
    }
  }

let的作用域是在它所在当前代码块,但不会被提升到当前函数的最顶部。

再来说说const。

    const name = 'lux'
    name = 'joe' //再次赋值此时会报错

说一道面试题

    var funcs = []
    for (var i = 0; i < 10; i++) {
        funcs.push(function() { console.log(i) })
    }
    funcs.forEach(function(func) {
        func()
    })

这样的面试题是大家常见,很多同学一看就知道输出 10 十次
但是如果我们想依次输出0到9呢?两种解决方法。直接上代码。

    // ES5告诉我们可以利用闭包解决这个问题
    var funcs = []
    for (var i = 0; i < 10; i++) {
        func.push((function(value) {
            return function() {
                console.log(value)
            }
        }(i)))
    }
    // es6
    for (let i = 0; i < 10; i++) {
        func.push(function() {
            console.log(i)
        })
    }

达到相同的效果,es6简洁的解决方案是不是更让你心动!!!

链接:https://www.jianshu.com/p/287e0bb867ae

Q:四种函数调用的方法

1. 函数作为对象的属性进行方法调用

2. 正常函数调用

3. 构造函数调用(new一个)

4. apply/call

http://www.fed123.com/2017/08/29/%E5%87%BD%E6%95%B0%E8%B0%83%E7%94%A8%E7%9A%84%E8%A7%92%E5%BA%A6%E7%90%86%E8%A7%A3call/


Q:get和post的区别

 前端一些面试题GET使用URL或Cookie传参,而POST将数据放在BODY中。

 前端一些面试题GET的URL会有长度上的限制,则POST的数据则可以非常大。

 前端一些面试题POST比GET安全,因为数据在地址栏上不可见。

 前端一些面试题GET请求的参数会保存在浏览器的历史记录中


Q: src和href的区别

src和href之间存在区别,能混淆使用。src用于替换当前元素,href用于在当前文档和引用资源之间确立联系。

src是source的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内,例如js脚本,img图片和frame等元素。

<script src ="js.js"></script>

当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

href是Hypertext Reference的缩写,指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,如果我们在文档中添加

<link href="common.css" rel="stylesheet"/>

那么浏览器会识别该文档为css文件,就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css,而不是使用@import方式。

转自:http://www.jb51.net/web/77258.html


Q:XHTML和HTML的区别

最主要的不同:

  • XHTML 元素必须被正确地嵌套。
  • XHTML 元素必须被关闭。
  • 标签名必须用小写字母。
  • XHTML 文档必须拥有根元素。


相关标签: 面试题 js