整理前端面试题(十) : Javascrip相关

1. 请将一个URL的search部分参数与值转换成一个json对象？

 function getJsonFromUrlSearch ( search ) {

    var item;
    var result = {};
    
    if( search.indexOf( '&' ) < 0){
        item = search.split( '=' );
        result[ item[ 0 ] ] = item[ 1 ];
        return JSON.stringify( result );
    }

    var splitArray = search.split( '&' );
    
    for( var i = 0; i < splitArray.length; i++ ){
        item = splitArray[ i ].split( '=' );
        result[ item[ 0 ] ] = item[ 1 ];
    }

    return JSON.stringify( result );
    
}

2. 请实现jQuery的Ajax请求函数:

var $ = {
    //把对象转成http协议要求的字符串
    param: function( obj ){

        var html = '';
        for ( var key in obj ){
            html += key + '=' + obj[ key ] + '&';
        }
        html = html.slice( 0, -1 );
        return html;

    },

    //封装ajax方法,参数是一个对象的形式
    ajax: function( option ) {

        var type = option.type || 'get',
        var url  = option.url || '',
        var data = this.param( option.data || {} );
        var success = option.success;

        //实例化对象
        var xhr = new XMLHttpRequest();
        
        //设置请求行
        if( type == 'get' ){
            url = url + '?' + data;
            data = null;
        }
        xhr.open( type, url );
        
        //设置请求头
        if( type == 'post' ){
            xhr.setRequestHeader( 'Content-Type', 'application/x-www-form-urlencoded' );
        }
        
        //设置请求正文
        xhr.send( data );
        
        //监听并处理响应
        xhr.onreadystatechange = function() {
            if( xhr.readyState == 4 && xhr.status == 200 ){
                success( xhr.responseText );
            }
        }

    }   
    
}

3. 请简要描述web前端性能需要考虑哪方面，你的优化思路是什么？

参考: 前端优化：雅虎35条

4.下面的代码的结果是什么?该如何优化该代码?

let person = {
    name : 'joe'
}

Object.defineProperty( person, 'name', {
    set: function( value ){
        person.name = value;
    },
    get: function( value ){
        return person.name;
    }
})

person.name = 'rose'; 
console.log( person.name );

答: 该代码会出现死循环, 解决办法如下面代码所示

'use strict'
let person = {
    name : 'joe'
}
let tmp ;

Object.defineProperty( person, 'name', {
    set: function( value ){
        tmp = value;
    },
    get: function(){
        return tmp;
    }
})

person.name = 'rose';
console.log( person.name );  //rose

5.Promise对象有哪些状态?

pending:初始状态, 不是成功或失败状态
fulfilled (也叫resolved): 意味着操作成功完成
rejected: 意味着操作失败

Promise对象只能从pengding状态变成fulfilled状态, 或者pending状态变成rejected状态. 不会有其他状态之间的转变.

6.babel和browserify的作用分别是什么?

babel是一个编译器, 可以把ES6, ES7或者React的JSX语法编译成为ES5的语法, 实现浏览器的兼容.
browserify 能够让浏览器兼容CommonJS规范的require()方法,以此让你的代码中使用require()实现模块依赖的代码能够正常执行.

7. 请写一个函数,用来实现对象的深拷贝?

function deepClone( obj ){
    return JSON.parse( JSON.stringify( obj ) );
}

8. 采用最少的遍历方式完成以下数组的去重?

var arr1 = [ 1, 2, 3, 3, 4, 6, 6, 12, 12 ];
var result = [];
var obj = {};
for( let i = 0; i < arr1.length; i++ ){

    if( !obj[ arr1[ i ] ] ){
        obj[ arr1[ i ] ] = true;
        result.push( arr1[ i ]);
    }

}

9. 简述readyonly与disabled的区别

readonly只针对input(text/password)和textarea有效, disabled对所有的表单元素都有效
提交时,readonly的值会被提交, disabled的值不会被提交

10.请简述下什么是同源策略?

同源策略是Netscape公司提出的一个安全策略, 所有支持JavaScript的浏览器都会运用到这个安全策略. 所谓的同源是指域名,协议和端口都一致.只有当同源的情况下,才可以读取Cookie, LocalStorage和IndexDB,发送Ajax请求.浏览器这样做的目的是保证用户的数据安全.