js练习笔记:10道JavaScript题目

更新日期: 2018-07-12阅读: 3.7k标签: 面试

十个练习题目,感觉比较典型,分享一下。


累加函数addNum

实现一个累加函数addNum,参数为number 类型,每次返回的结果= 上一次计算的值+ 传入的值

var addNum = (function() {
    var result = result  0;
    return function(num) {
        result += num;
        return result;
    };
})();
addNum(10);          // 10
addNum(12);          // 22
addNum(30);          // 52

闭包实现即可。addNum右边为一个立即执行函数,返回了一个函数,此函数在内存中,所以其所依赖的result也还在内存中,不会被回收,从而实现缓存的效果。

灵活的应用闭包,能方便很多问题,再看下面一个例子:

    /////////////
    // 求斐波那契数列 //
    /////////////
    var count = 0;

    // 直接递归
    function fib(n) {
        count++;
        if (n < 0) return 0;
        if (n === 0  n === 1) return 1;
        // 大于2时递归
        // arguments.callee 返回正在执行的Function对象
        return arguments.callee(n - 1) + arguments.callee(n - 2);
    }
    console.time('fib(30)');
    console.log('fib(30),结果为:', fib(30), ',计算次数:', count); //fib(30),结果为: 1346269 计算次数: 2692537
    console.timeEnd('fib(30)'); //fib(30): 115.944ms //本机多次测试100ms以上

    // 闭包缓存方式
    count = 0;
    var fibWithCache = (function() {
        var result = []; // 缓存结果        

        return function(n) {            
            var res = result[n];
            // 存在直接取出,否则递归计算
            if (res != undefined) {
                return res;
            } else {
                if (n < 0) return null;
                if (n === 0  n === 1) {
                    res = 1;
                } else {
                    count++;
                    res = arguments.callee(n - 1) + arguments.callee(n - 2);
                }
            }
            result[n] = res;
            //console.log(result);
            return result[n];
        };
    })();

    console.time('fibWithCache(30)');
    console.log('fibWithCache(30),结果为:', fibWithCache(30), ',计算次数:', count); 
    //fibWithCache(30),结果为: 1346269 计算次数: 29
    console.timeEnd('fibWithCache(30)'); 
    //fibWithCache(30): 0.312ms //本机多次测试均小于1ms

       //  之后再调用小于30的项目,将会直接取出,不用计算。
    count = 0;
    console.time('fibWithCache(9)');
    console.log('fibWithCache(9),结果为:', fibWithCache(9), ',计算次数:', count);
    console.timeEnd('fibWithCache(9)');
    // fibWithCache(9),结果为: 55 ,计算次数: 0
    // fibWithCache(9): 0.215ms

    // 计算更大的 也变得很高效
    count = 0;
    console.time('fibWithCache(32)');
    console.log('fibWithCache(32),结果为:', fibWithCache(32), ',计算次数:', count);
    console.timeEnd('fibWithCache(32)');
    // fibWithCache(32),结果为: 3524578 ,计算次数: 2
    // fibWithCache(32): 0.224ms

使用闭包,函数所依赖的result数组将不会被系统的垃圾回收机制回收,将它用来缓存,使得性能得到大幅得的提升。

关于闭包有以下三个特性:

  • 函数可以引用定义在其外部作用域的变量。
  • 闭包比创建他们的函数具有更长的生命周期。(即使外部函数已经返回,闭包函数仍然可以引用在外部函数中定义的变量,例如上面两个例子中用来缓存上次累加结果的result和斐波拉切数列缓存数列的result数组。)
  • 闭包在内部存储其外部变量的引用,并能读写这些变量。(上两例中,闭包对两个外部函数中的result不仅可读,而且可写。)


实现一个Person类

实现一个Person 类,有2 个属性name,gender(性别),有一个sayHello 方法.

////////////////////////////////////////////////////////
// 实现一个Person 类,有2 个属性name,gender(性别),有一个sayHello 方法. //
////////////////////////////////////////////////////////
// 构造函数
function Person(name, gender) {
    // 避免忘记使用new命令
    if (!(this instanceof Person)) {
        return new Person(name, gender);
    }
    this.name = name;
    this.gender = gender;
}
Person.prototype.sayHello = function() {
    console.log('Hello,I am', this.name, '. I\'m a', this.gender);
};
var zs = new Person("zs", "man");
console.log(zs);        // Person {name: "zs", gender: "man"}
zs.sayHello();          // Hello,I am zs . I'm a man

注意sayHello方法不是写在构造函数里面,而是写在构造函数的原型上。这是因为如果写在构造函数里,将会为每个实例对象给添加一个自己的sayHello方法,而这是没有必要的,每个实例对象的sayHello方法都一样,写在构造函数的原型上就可以使得每个实例对象都能引用到此方法。

关于构造函数的new命令,原理是这样的:

  1. 创建一个空对象,作为将要返回的对象实例
  2. 将这个空对象的原型,指向构造函数的prototype属性
  3. 将这个空对象赋值给函数内部的this关键字
  4. 开始执行构造函数内部的代码

更多关于原型和构造函数的具体知识请访问:面向对象编程概述


基于Person 类,增加一个static 方法getNum(), 返回创建的实例数

为了实现计数功能,只需要在每次调用构造函数的时候,递增1即可,构造函数已经存在,不能修改,所以直接重写一遍

function Person(name, gender) {
    // 避免忘记使用new命令
    if (!(this instanceof Person)) {
        return new Person(name, gender);
    }
    this.name = name;
    this.gender = gender;
    Person._count += 1;
}
Person.getNum = (function() {
    Person._count = 0;    
    return function() {
        return Person._count;
    };
})();

var p1 = new Person('aaa', 'male');
var p2 = new Person('bbb', 'female');
Person.getNum(); // 2
var p3 = new Person('ccc', 'female');
Person.getNum(); // 3  


实现一个arrMerge 函数

实现一个arrMerge 函数,可传入2 个以上的数组类型参数,生成一个包含所有数组项,且没有重复项的新数组

function arrMerge() {
    var len = arguments.length,
        arr = [];
    for (var i = 0; i < len; i++) {
        // 合并
        arr = arr.concat(arguments[i]);
    }
    // 去重
    var result = [],
        hasElem = {};
    for (i = 0, l = arr.length; i < l; i++) {
        if (!hasElem[arr[i]]) {
            result.push(arr[i]);
            hasElem[arr[i]] = true;
            console.log(hasElem);
        }
    }
    return result;
}

实现可以接收任意个参数,我们需要了解js里面在function对象中arguments这个对象的知识,它代表此函数实参的参数列表,是一个类数组对象。

合并数组直接使用原生的<code>concat()</code>方法即可。

去重一步,使用了一个对象来记录此值是不是已经存在,使用对象来标识,效率比用数组来标识要高一点,因为对象是键值对的形式,类似哈希表,直接将数组元素作为此对象的键,用一个布尔值来标识这个数组元素是不是已经存在了,不存在则添加,并记录此元素已存在,存在则直接跳过。


arrMerge([0,1,1],[1,3],[2,0,456,6],[222,456]);
// [0, 1, 3, 2, 456, 6, 222]
arrMerge(['a', 'b', 'c', 'd'], ['a', 'bb', 'ccc', 'd'], ['11', 'sss']);
// ["a", "b", "c", "d", "bb", "ccc", "11", "sss"] 


实现一个toCamelStyle函数

实现一个toCamelStyle 函数,把“aaa-bbb-cc”这种形式的命名转换为“aaaBbbCc”


function toCamelStyle(str) {
    var strArr = str.split('-'),
        temp = '',
        result = '';

    for (var i = 0, l = strArr.length; i < l; i++) {
        result += strArr[i].substr(0, 1).toUpperCase() + strArr[i].substr(1).toLowerCase();
        //console.log(result);
    }
    return result;
}

使用正则表达式完成


function toCamelStyle(str) {
    // 匹配-以及之后的一个字符,其中这个字符在一个分组内
    var camelRegExp = /-([a-z])/ig;

    return str.replace(camelRegExp, fcamelCase);

    // all为匹配到的内容,letter为组匹配
    function fcamelCase(all, letter) {
        console.log(all);
        console.log(letter);
        return letter.toUpperCase();
    }
}
toCamelStyle('aaa-bbb-cc');    // aaaBbbCc

使用正则表达式效率较高,之前的方法需要对整个字符串进行遍历,而正则表达式一次就把所有匹配内容获取到了,直接替换即可。

<code>String.prototype.replace()</code>方法第二个参数还可以是一个函数,接收多个参数,第一个为匹配到的内容,第二个为匹配到的分组,有多少组就可以传多少个参数,在此之后还可以有两个参数,一个为匹配到内容在原字符串的位置,另一个是原字符串。

以上在执行<code>toCamelStyle('aaa-bbb-cc')</code>时,控制台输出结果分别为:-b b -c c,代表匹配到的内容为:-b 和 -c 对应的分组为:b c


setTimeout实现重复调用

用setTimeout 实现一个定时循环任务,每隔200 毫秒,console 输出一句:”I am working ...”


function showWorking() {
    var timer = timer  1;
    console.log('I am working ...');
    // 避免重复调用 计时加快
    if (timer) clearTimeout(timer);
    timer = setTimeout(showWorking, 200);
}

<code>setTimeout()</code> 方法本来是迟延指定的时间执行指定的代码,要达到重复调用的效果就需要在方法里面加入它实现递归调用,从而达到效果。

<code>setTimeout()</code> 和<code>setInterval()()</code> 有所不同,后者是每隔指定的时间执行一次指定的代码,不需要递归就能重复调用。

但是后者不管执行的时间,只负责定时再次调用,比如指定100毫秒调用一次,那么每隔100ms就会发出一条指令,而不关心,上次的代码有没有执行完毕,假设所指定的代码执行需要一秒才能完成,那么一段时间后,会发现内存中会堆积很多等待执行的指令。 而前者本身就是迟延指定时间,在函数内部递归来实现重复调用,它会等待执行到它才会发出下一次指令,两次间隔的实际时间为执行时间+迟延时间(不考虑其他情况)。


实现一个bind函数

实现一个bind 函数,传入一个函数和一个对象,返回一个新的函数,且传入对象为函数执行时的context,即this 的指向

ES6中可直接使用bind方法,类似call、apply,但是其返回一个改变上下文环境的新函数,而call和apply是替换上下文环境并运行原函数。


function bind(fun, context) {
    return fun.bind(context);
}

利用call或apply来实现一个

以下都是用apply而没有试用call的原因是因为,call第一个参数传递新的上下文环境,之后依次传入其他参数。而apply最多接受两个参数,第一个参数为新的上下文环境,第二个参数为数组(参数按顺序放入数组)。使用call需要将参数分割出来依次传递进去,而使用apply直接传递数组即可较为简单。


// 参数可在生成新函数时传递(即调用bind时),也可以在实际使用时传递
function bind(fun, context) {    
    var args = [].slice.call(arguments, 2);
    return function() {
        fun.apply(context  this, args.concat([].slice.call(arguments)));
    };
}

// 参数只能在生成新函数时传递
function bind1(fun, context) {    
    var args = [].slice.call(arguments, 2);
    return function() {
        fun.apply(context  this, args);
    };
}
// 参数只能在实际使用时传递
function bind2(fun, context) {
    return function() {
        fun.apply(context  this, [].slice.call(arguments));        
    };
}

调用测试:


var fun = function(sex, age) {
    console.log(this.name, sex, age);
};
var person = {
    name: "Andrew"
};

// 使用bind方法,可以在任何时候传递参数
var fun1 = bind(fun, person);
// 实际使用时传递
fun1('gril', 20);                   // Andrew gril 20
// 生成新函数时传递
bind(fun, person, 'gril', 20)();    // Andrew gril 20
// 混合传递
bind(fun, person, 'gril')(20);      // Andrew gril 20

// bind1方法 只能在生成函数时传递 不支持调用时传递参数
bind1(fun, person, 'gril', 20)();       // Andrew gril 20
bind1(fun, person)('gril', 20);         // Andrew undefined undefined
bind1(fun, person, 'gril')(20);         // Andrew gril undefined

// bind2方法 只能在调用时传递,生成时传递无效
bind2(fun, person, 'gril', 20)();       // Andrew undefined undefined
bind2(fun, person)('gril', 20);         // Andrew gril 20
bind2(fun, person, 'gril')(20);         // Andrew 20 undefined

第一个方法是参照jquery中<code>$.proxy ()</code> 方法写的,之所以对参数进行了两次处理,原因在于,这样可以使得再调用bind方法生成新函数的时候,直接给原函数指定一些参数,达到固定前面一些参数的作用(之后传入的参数会依次后移,例如 <code>bind(fun, person, 'gril')('boy',20)</code> 的结果为:Andrew gril boy,相当于在生成新函数的时候,直接把第一个参数固定为gril了,实际调用时候参数依次后移)。

第二个方法bind1几乎没有实际意义,仅仅是为了测试。因为根据原函数生成的新函数,不能传递参数了(参数只能在生成新函数的时候直接指定好)。

第三个方法bind2最符合简单的直接需求,bind2的作用仅仅是根据原函数,替换上下文,生成一个新函数,原函数的参数和新函数的参数相同。


实现一个Utils模块

实现一个Utils 模块,有_method1 方法、_method2 方法、methodAll 方法,methodAll 中调用了_method1 和_method2


//  简单写法 
var Utils0 = {
    _method1: function() {
        console.log('this is _method1 running');
    },
    _method2: function() {
        console.log('this is _method1 running');
    },
    methodAll: function() {
        this._method1();
        this._method2();
    }
};

// 模块放大式写法
var Utils = (function(Utils) {
    var _method1 = function() {
            console.log('this is _method1 running');
        },
        _method2 = function() {
            console.log('this is _method1 running');
        },
        methodAll = function() {
            this._method1();
            this._method2();
        };
    return {
        _method1: _method1,
        _method2: _method2,
        methodAll: methodAll
    };
})(Utils  {});

可以简单写为一个对象,内部有几个方法的模式。但是这样,外部可以访问并修改这个对象的任何内容。

采用模块放大模式,对外暴露的仅仅是return出来的内容,在函数里面,可以定义很多私有的方法和属性。最后传递Utils {}的作用是表示此部分代码可能仅是Utils模块的一部分,可做合并使用,多传入一个 {}对象能去除加载顺序的依赖(当然要保证此块代码不依赖别的地方的Utils),此部分代码可以最先加载。

参考链接:面向对象编程模式


输出一个对象自身的属性

有一个对象obj,请输出它自身具有的属性,而非它原型连上的。


function showOwnProp(obj) {
    if (typeof obj == "undefined"  typeof obj != 'object') throw new Error('请传入一个对象!');
    for (var key in obj) {
        // for in循环会遍历整个原型链 
        // in运算符返回一个布尔值,表示一个对象是否具有某个属性。它不区分该属性是对象自身的属性,还是继承的属性。
        if (Object.prototype.hasOwnProperty.call(obj, key)) {
            console.log(key, ':', obj[key]);
        }
    }
}

其中 <code>Object.prototype.hasOwnProperty.call(obj, key)</code> 可以替换为 <code>obj.hasOwnProperty(key)</code> 之所以使用Object上的是因为防止obj对象上重写了 <code>hasOwnProperty()</code>方法对结果的影响。

另外在ES5 中可使用Object.keys方法和Object.getOwnPropertyNames方法 都返回数组,仅含自身属性,keys只返回可枚举的,而后者包含不可枚举的。


对象深复制

在js 中,对象的赋值,实质是传递指向它内存的引用,请实现一个深度copy 的方法,传入一个对象obj,返回一个该对象的复制,而且两者没有任何值引用关联

复制对象需要保证:

  • 确保拷贝后的对象,与原对象具有同样的prototype原型对象。

  • 确保拷贝后的对象,与原对象具有同样的属性。

所以 1、原型链上的属性不要复制,直接指向即可。2、自身属性一一复制

下面总结了一点简单的复制对象方法:

  • 简单数组(内部不含符合类型)可直接使用slice方法

  • 不含json不支持的值(方法)以及enumerable属性不为false 的对象可转化为json字符串,再转化为对象。

  • 还可以直接及使用jQuery的extend方法,第一个参数传入true即可。

  • 不考虑不可枚举属性的话 可以遍历分别加入新对象即可。

以下演示通过属性描述对象拷贝对象。


// 在之前通过Person实例化出的zs对象上添加属性以做测试使用 
zs.family = {
    father: 'zsfather',
    mother: 'zsmother'
};
zs.children = [{}, {}];

function deepCopyObject(obj) {
    var copy = Object.create(Object.getPrototypeOf(obj));
    _copySelfProp(copy, obj);
    return copy;
    // 内部使用 拷贝自身属性
    function _copySelfProp(target, source) {
        Object
            .getOwnPropertyNames(source)
            .forEach(function(key) {
                console.log(key);
                // 获取属性描述对象
                var desc = Object.getOwnPropertyDescriptor(source, key);
                // 复合类型再次调用
                if (typeof desc.value == 'object') {
                    // function未处理,原因见下描述
                    target[key] = deepCopyObject(source[key]);
                } else {
                    // 将此属性添加到target
                    Object.defineProperty(target, key, desc);
                }
            });
        return target;
    }
}

先介绍两个方法

Object.defineProperty(obj, prop, descriptor)

obj 需要定义属性的对象。

prop 需定义或修改的属性的名字。

descriptor 将被定义或修改的属性的描述对象。

Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象。该方法允许精确添加或修改对象的属性。一般情况下,我们为对象添加属性是通过赋值来创建并显示在属性枚举中(for...in 或 Object.keys 方法), 但这种方式添加的属性值可以被改变,也可以被删除。而使用 Object.defineProperty() 则允许改变这些额外细节的默认设置。例如,默认情况下,使用Object.defineProperty() 增加的属性值是不可改变的。

Object.getOwnPropertyDescriptor(obj, prop)

obj 要处理的对象

prop 属性名称,该属性的属性描述对象将被返回

该方法允许对一个属性的描述进行检索。在 Javascript 中, 属性 由一个字符串类型的“名字”(name)和一个“属性描述符”(property descriptor)对象构成。更多关于属性描述符类型以及他们属性的信息可以查看:Object.defineProperty

这个拷贝方法比把值(即使是简单类型的值)直接给新对象要精确很多。js中对象的值,可能看起来就是个字符串或者数值,但实际它还有一些属性,我们查看zs.name属性,发现他的描述对象为:Object {value: "zs", writable: true, enumerable: true, configurable: true}。此方法拷贝的对象能保证这个值的属性也都和原对象一直。而直接赋值的方式,其他属性都变成了默认值。

参考链接:属性描述对象

但是<code>getOwnPropertyDescriptor</code>、<code>defineProperty</code>、<code>getOwnPropertyNames</code>是在ES5和ES6中才有的,下面再展示一个只用ES写的


function deepCopy(obj) {
    // 通过原对象的构造函数来创建对象,确保类型一致且原型链相同
    var copy = obj.constructor.call();
    _copySelfProp(copy, obj);
    return copy;
    // 自身属性拷贝
    function _copySelfProp(target, source) {
        for (var key in source) {
            if (Object.prototype.hasOwnProperty.call(source, key)) {
                if (typeof source[key] == "object") {
                    // function未处理,原因见下描述
                    target[key] = deepCopy(source[key]);
                } else {
                    target[key] = source[key];
                }
            }
        }
        return target;
    }
}

需要指出的是,以上两个拷贝函数都没有对复合类型中的function进行处理(对象和数组进行typeof结果都为object),原因是函数一旦定义,不能对函数体进行修改,可以直接对齐进行引用。如果重新赋值一个新的函数给这个属性的话,由于新的函数也是一个对象,就切断了原来的联系,可以不用处理。

比如obj.a为一个function内存地址记为N1,对obj进行拷贝时,可以直接将obj1.a指向N1,如果修改obj.a为一个新的函数,此函数有一个内存地址N2,那么修改后:obj.a实际指向N2,而复制出的obj1.a指向N1。意思就是function比较特殊,不能像对象一样直接修改它内部的东西,可以直接拿来引用。

但是当前可以这么做的前提是:obj.a值仅仅是一个function,而没有其他值。实际可能存在的情况是先给obj.a=function(){},再接着给obj.a添加属性,obj.a.prop=[{},{}],(这就是js里面的一切皆对象,你甚至可以先var mm='111',再mm.a=[{},{}],此时typeof mm 仍为string,但mm真的只是个字符串吗?)这种情况虽然不多,但是也是存在的,需要注意。

使用字面量形式创建对象而不是构造函数

两者差异是因为其创建的时候不一样,构造函数是在运行时创建,而字面量形式是在编译时创建。

以下代码可以看出字面量形式创建对象效率要高很多,同时字面量形式创建对象,写的代码也少,而且比较可读。


console.time('for');
var arr10000=new Array(10000);
for(var i=0,l=arr10000.length;i<l;i++){
    arr10000[i]=new Object();
}
console.timeEnd('for'); //for: 4.885ms

console.time('for2');
var arr10000=new Array(10000);
for(var i=0,l=arr10000.length;i<l;i++){
    arr10000[i]={};
}
console.timeEnd('for2');//for2: 0.855ms

// 在创建正则表达式时,差别更加明显: 
console.time('for3');
var arr10000=new Array(10000);
for(var i=0,l=arr10000.length;i<l;i++){
    arr10000[i]=new RegExp('.*');
}
console.timeEnd('for3'); //for3: 10.689ms

console.time('for4');
var arr10000=new Array(10000);
for(var i=0,l=arr10000.length;i<l;i++){
    arr10000[i]=/.*/;
}
console.timeEnd('for4');//for4: 0.930ms


链接:http://www.imooc.com/article/12995
来源:慕课网  


链接: https://fly63.com/article/detial/921

Web前端年后跳槽面试复习指南

很多童鞋可能年后有自己的一些计划,比如换份工作环境,比如对职业目标有了新的打算。当然面试这一关不得不过,大概又不可能系统性的复习,这里罗列一些 重点 面试的知识点和文章,

前端面试之webpack面试常见问题

什么是webpack和grunt和gulp有什么不同?什么是bundle,什么是chunk,什么是module?什么是Loader?什么是Plugin?如何可以自动生成webpack配置?webpack-dev-server和http服务器如nginx有什么区别?

每个 JavaScript 工程师都应当知道的 10 个面试题

多问问应聘者高层次的知识点,如果能讲清楚这些概念,就说明即使应聘者没怎么接触过 JavaScript,也能够在短短几个星期之内就把语言细节和语法之类的东西弄清楚。

37个JavaScript基本面试问题和解答

面试比棘手的技术问题要多,这篇文章整理了37个JavaScript基本面试问题和解答,这些仅仅是作为指导。希望对前端开发的你有所帮助!

React常见面试题

React常见面试题:React中调用setState之后发生了什么事情?React中Element与Component的区别?优先选择使用ClassComponent而不是FunctionalComponent?React中的refs属性的作用是什么?React中keys的作用是什么?

有趣的Js面试题_如何让 (a == 1 && a == 2 && a == 3) 返回 true

题目大意为:JS 环境下,如何让 a == 1 && a == 2 && a == 3 这个表达式返回 true ?这道题目乍看之下似乎不太可能,因为在正常情况下,一个变量的值如果没有手动修改,在一个表达式中是不会变化的。

vue菜鸟从业记:没准备好的面试,那叫尬聊

面试开场白总缺少不了自我介绍,一方面是面试官想听听你对自己的介绍,顺便有时间看看简历上的描述,是否与口述一致。另一方面就是看看你简历上做过什么项目,用到了哪些技术栈,一会儿好提问你。

毕业一年左右的前端妹子面试总结

把面试当做学习,这个过程你会收益很大。前端知识很杂,可能实际工作中用到的技术,像框架都是跟着公司的要求走的,像我最近也在看React啦,Vue和React都对比着再学习

vue面试时需要准备的知识点

vue上手可以说是比较轻松而且简单,如果你用过angular,react,你也会很喜欢vue。vue的核心思想依旧是:构建用户界面的渐进式框架,关注视图的变化。这也是为什么新建的文件是结构是template script style

一篇文章教会你面试中的小套路

面试,一个短时间内对某个人做出判断的测试。很多时候,工程师们只准备了相关的技术点,却没有对非技术的软实力部分做准备。而软实力的考察,不仅贯穿整个面试流程中,更在BOSS面和HR面中尤为关键。鉴于当前业界也没有特别契合的攻略文档,仅有有几篇文章还是HR写的,特有此文

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!