前端面试编程题

1.修改 this 指向

function bindThis(f, oTarget) {
     return function(){
        return f.apply(oTarget,arguments)
    }
}

2.dom节点查找

描述:

  • 查找两个节点的最近的一个共同父节点,可以包括节点自身
  • oNode1 和 oNode2 在同一文档中,且不会为相同的节点
function commonParentNode(oNode1, oNode2) {
        let parent1 = oNode1.parentNode;
        let parent2 = oNode2.parentNode;
        if(parent1 === parent2)return parent1;
        else commonParentNode(parent1, parent2);
}

3.数组去重

为 Array 对象添加一个去除重复项的方法
方法1:

Array.prototype.uniq = function () {
 // Array.from() 方法从一个类似数组或可迭代对象创建一个新的,浅拷贝的数组实例。
    // Set对象允许您存储任何类型的唯一值,无论是原始值或对象引用
    return Array.from(new Set(this));
}

方法2:

Array.prototype.uniq = function () {
    return [...new Set(this)]
}

4.斐波那契数列

用 JavaScript 实现斐波那契数列函数,返回第n个斐波那契数。 f(1) = 1, f(2) = 1 等

function fibonacci(n) {
     var num1=1;
        var num2=1;
        for(var i=2;i<n;i++){
                num2+=num1;
                num1=num2-num1;
        }
        return num2;
}

5.时间格式化输出

按所给的时间格式输出指定的时间
格式说明
对于 2014.09.05 13:14:20
yyyy: 年份,2014
yy: 年份,14
MM: 月份,补满两位,09
M: 月份, 9
dd: 日期,补满两位,05
d: 日期, 5
HH: 24制小时,补满两位,13
H: 24制小时,13
hh: 12制小时,补满两位,01
h: 12制小时,1
mm: 分钟,补满两位,14
m: 分钟,14
ss: 秒,补满两位,20
s: 秒,20
w: 星期,为 [‘日’, ‘一’, ‘二’, ‘三’, ‘四’, ‘五’, ‘六’] 中的某一个,本 demo 结果为 五
示例1:

formatDate(new Date(1409894060000), ‘yyyy-MM-dd HH:mm:ss 星期w’)
2014-09-05 13:14:20 星期五

function formatDate(t,str){
  var obj = {
    yyyy:t.getFullYear(),
    yy:(""+ t.getFullYear()).slice(-2),
    M:t.getMonth()+1,
    MM:("0"+ (t.getMonth()+1)).slice(-2),
    d:t.getDate(),
    dd:("0" + t.getDate()).slice(-2),
    H:t.getHours(),
    HH:("0" + t.getHours()).slice(-2),
    h:t.getHours() % 12,
    hh:("0"+t.getHours() % 12).slice(-2),
    m:t.getMinutes(),
    mm:("0" + t.getMinutes()).slice(-2),
    s:t.getSeconds(),
    ss:("0" + t.getSeconds()).slice(-2),
    w:['日', '一', '二', '三', '四', '五', '六'][t.getDay()]
  };
  return str.replace(/([a-z]+)/ig,function($1){return obj[$1]});
}

6.获取字符串长度

如果第二个参数 bUnicode255For1 === true,则所有字符长度为 1
否则如果字符 Unicode 编码 > 255 则长度为 2
示例1

‘hello world, 牛客’, false
17

function strLength(s, bUnicode255For1) {
    let len = s.length
    if(bUnicode255For1 !== true){
        for(let i in s){
            if(s.charCodeAt(i)>255)len++
        }        
    }
    return len
}

7.邮箱字符串判断

描述
判断输入是否是正确的邮箱格式
输入描述:
邮箱字符串
输出描述:
true表示格式正确

function isAvailableEmail(sEmail) {
    var reg=/^([\w+\.])+@\w+([.]\w+)+$/;

    return reg.test(sEmail);
}

8.颜色字符串转换(较难)

描述
将 rgb 颜色字符串转换为十六进制的形式,如 rgb(255, 255, 255) 转为 #ffffff

  1. rgb 中每个 , 后面的空格数量不固定
  2. 十六进制表达式使用六位小写字母
  3. 如果输入不符合 rgb 格式,返回原始输入

示例1
输入:‘rgb(255, 255, 255)’
输出:#ffffff

function rgb2hex(sRGB) {
    var regexp=/rgb\((\d+),\s*(\d+),\s*(\d+)\)/;
    var ret=sRGB.match(regexp);
    if(!ret){
        return sRGB;
    }else{
        var str='#';
        for(var i=1;i<=3;i++){
            var m=parseInt(ret[i]);
            if(m<=255&&m>=0){
                str+=(m<16?'0'+m.toString(16):m.toString(16));
            }else{
                return sRGB;
            }
        }
        return str;
    }
}

9.字符串字符统计

描述
统计字符串中每个字符的出现频率,返回一个 Object,key 为统计字符,value 为出现频率

  1. 不限制 key 的顺序
  2. 输入的字符串参数不会为空
  3. 忽略空白字符
    示例1

输入:‘hello world’
输出:{h: 1, e: 1, l: 3, o: 2, w: 1, r: 1, d: 1}

function count(str) {
    var obj = {};
    for(var i = 0; i < str.length; i++){
        if (str[i] !== ' '){
            var key = str[i];
            if (obj[key] !== undefined){
                obj[key] = obj[key] + 1;
            } else{
                obj[key] = 1;
            }
        }
    }
    return obj;
}

10.查找数组元素位置

描述
找出元素 item 在给定数组 arr 中的位置
输出描述:
如果数组中存在 item,则返回元素在数组中的位置,否则返回 -1
示例1

输入:[ 1, 2, 3, 4 ], 3
输出:2

function indexOf(arr, item) {
       return (arr.indexOf(item));
}

10.1查找元素位置

描述
在数组 arr 中,查找值与 item 相等的元素出现的所有位置
示例1

输入:[‘a’,‘b’,‘c’,‘d’,‘e’,‘f’,‘a’,‘b’,‘c’] ‘a’
输出:[0, 6]

function findAllOccurrences(arr, target) {
    var list = [];
    arr.forEach(function(value,index,array){
        (value == target) ? list.push(index) : 0
    })
    return list;
}

11.数组求和

描述
计算给定数组 arr 中所有元素的总和
输入描述:
数组中的元素均为 Number 类型
示例1

输入:[ 1, 2, 3, 4 ]
输出:10

function sum(arr) {
    var sum = 0;
    for(var i = 0 ;i<arr.length;i++){
        sum += arr[i]
    }
    return sum
}

12.移除数组中的元素

描述
移除数组 arr 中的所有值与 item 相等的元素。不要直接修改数组 arr,结果返回新的数组
示例1

输入:[1, 2, 3, 4, 2], 2
输出:[1, 3, 4]
方法1:

function remove(arr, item) {
    return arr.filter(value=>{
        if(value!==item){
            return value
        }
    })
}

方法2:

function remove(arr, item) {
var arr1 = [];
    for(var i = 0; i < arr.length; i ++){
        if(arr[i] !== item){
            arr1.push(arr[i])
        }   
    }
    return arr1
}
remove([1, 2, 3, 4, 2], 2)

13.移除数组中元素(升级)

描述
移除数组 arr 中的所有值与 item 相等的元素,直接在给定的 arr 数组上进行操作,并将结果返回

function removeWithoutCopy(arr, item) {
    for(let i =0; i< arr.length; i++){
        if(arr[i]==item){
            arr.splice(i,1)
            i--
        }
    }
    return arr
}

14.头部添加元素

描述
在数组 arr 开头添加元素 item。不要直接修改数组 arr,结果返回新的数组
示例1

输入:[1, 2, 3, 4], 10
输出:[10,1, 2, 3, 4]

function prepend(arr, item) {
    let newArr = arr.slice(0);
    newArr.unshift(item);
    return newArr;
}

15.尾部添加元素

描述
在数组 arr 末尾添加元素 item。不要直接修改数组 arr,结果返回新的数组
示例1

输入:[1, 2, 3, 4], 10
输出:[1, 2, 3, 4, 10]

function append(arr, item) {
    return arr.concat([item])
}

16.删除数组最后一个元素

描述
删除数组 arr 最后一个元素。不要直接修改数组 arr,结果返回新的数组
示例1

输入:[1, 2, 3, 4]
输出:[1, 2, 3]

function truncate(arr) {
let arr2 = []
  for (let i = 0; i < arr.length; i++) {
    arr2.push(arr[i])
  }
  arr2.splice(arr2.length - 1, 1)
  return arr2
}

17.删除第一个元素

描述
删除数组 arr 第一个元素。不要直接修改数组 arr,结果返回新的数组
示例1

输入:[1, 2, 3, 4]
输出:[2, 3, 4]
方法1:

function curtail(arr) {
    let arr2 = arr.slice(0);
    arr2.shift(arr[0])
    return arr2
}

方法2:

function curtail(arr) {
    return arr.slice(1)
}

18.数组合并

描述
合并数组 arr1 和数组 arr2。不要直接修改数组 arr,结果返回新的数组
示例1

输入:[1, 2, 3, 4], [‘a’, ‘b’, ‘c’, 1]
输出:[1, 2, 3, 4, ‘a’, ‘b’, ‘c’, 1]

function concat(arr1, arr2) {
    return res = arr1.concat(arr2)
}

19.数组中某个值出现的次数

描述
统计数组 arr 中值等于 item 的元素出现的次数
示例1

输入:[1, 2, 4, 4, 3, 4, 3], 4
输出:3

function count(arr, item) {
    var count=0;
    for(var i=0;i<arr.length;i++){
        if(arr[i]==item){
            count++;
        }
    }
    return count;
}

20.查找重复元素

描述
找出数组 arr 中重复出现过的元素(不用考虑返回顺序)
示例1

输入:[1, 2, 4, 4, 3, 3, 1, 5, 3]
输出:[1, 3, 4]

function duplicates(arr) {
    var a = [],b = [];
     //遍历arr,如果以arr中元素为下标的的b元素已存在,则该b元素加1,否则设置为1
     for(var i = 0; i < arr.length; i++){
         if(!b[arr[i]]){
             b[arr[i]] = 1;
             continue;
         }
         b[arr[i]]++;
     }
     //遍历b数组,将其中元素值大于1的元素下标存入a数组中
     for(var i = 0; i < b.length; i++){
         if(b[i] > 1){
             a.push(i);
         }
     }
     return a;
}

21.求二次方

描述
为数组 arr 中的每个元素求二次方。不要直接修改数组 arr,结果返回新的数组
示例1

输入:[1, 2, 3, 4]
输出:[1, 4, 9, 16]

方法1:

function square(arr) {
   var sq = [];  
   for(var i in arr)
  {
      sq.push(arr[i]*arr[i]);
  }
    return sq;
}

方法2:

function square(arr) {     
   return arr.map(index=>Math.pow(index,2))
}

22.判断 val1 和 val2 是否完全等同

function identity(val1, val2) {
    return val1 === val2
}

23.计时器

描述
实现一个打点计时器,要求
1、从 start 到 end(包含 start 和 end),每隔 100 毫秒 console.log 一个数字,每次数字增幅为 1
2、返回的对象中需要包含一个 cancel 方法,用于停止定时操作
3、第一个数需要立即输出

function count(start, end) {
    console.log(start);
    let timer = setInterval(()=>{
        if(start<end){
            console.log(++start);
        }else{
            clearInterval(timer);
        }
    },1000)
    return {
        cancel(){
            clearInterval(timer);
        }
    }
}

24.流程控制

描述
实现 fizzBuzz 函数,参数 num 与返回值的关系如下:
1、如果 num 能同时被 3 和 5 整除,返回字符串 fizzbuzz
2、如果 num 能被 3 整除,返回字符串 fizz
3、如果 num 能被 5 整除,返回字符串 buzz
4、如果参数为空或者不是 Number 类型,返回 false
5、其余情况,返回参数 num

function fizzBuzz(num) {
if (num % 3 === 0 && num % 5 === 0){
    return 'fizzbuzz'
} else if (num % 3 === 0){
    return 'fizz'
} else if (num % 5 === 0){
    return 'buzz'
} else if (num === null || typeof(num) !== 'number'){
    return false
} else {
    return num
}
}

25.使用闭包

描述
实现函数 makeClosures,调用之后满足如下条件:
1、返回一个函数数组 result,长度与 arr 相同
2、运行 result 中第 i 个函数,即 resulti,结果与 fn(arr[i]) 相同
示例1

输入:[1, 2, 3], function (x) {
return x * x;
}
输出:4

function makeClosures(arr, fn) {
    let result = []
    for(let i = 0;i < arr.length; i++) {
        result[i] = fn.bind(this,arr[i])
    }
    return result
}

26.使用arguments

描述
函数 useArguments 可以接收 1 个及以上的参数。请实现函数 useArguments,返回所有调用参数相加后的结果。本题的测试参数全部为 Number 类型,不需考虑参数转换。
示例1

输入:1, 2, 3, 4
输出:10

function useArguments() {
  let num = 0;
  for (let index = 0; index < arguments.length; index++) {
    num += arguments[index];
  }
  return num;
}

27.使用apply调用函数

描述
实现函数 callIt,调用之后满足如下条件
1、返回的结果为调用 fn 之后的结果
2、fn 的调用参数为 callIt 的第一个参数之后的全部参数

function callIt(fn) {
 return fn.apply(this,[].slice.call(arguments,1))
}

28.二进制转换

描述
获取数字 num 二进制形式第 bit 位的值。注意:
1、bit 从 1 开始
2、返回 0 或 1
3、举例:2 的二进制为 10,第 1 位为 0,第 2 位为 1
示例1

输入:128, 8
输出:1

function valueAtBit(num, bit) {
    var newN = num.toString(2)
    return Number(newN.slice(newN.length-bit,newN.length-bit+1))
}

28.1二进制转换

描述
给定二进制字符串,将其换算成对应的十进制数字
示例1

输入:‘11000000’
输出:192

function base10(str) {
    var res = parseInt(str, 2)
    return res;
}

28.2二进制转换

描述
将给定数字转换成二进制字符串。如果字符串长度不足 8 位,则在前面补 0 到满8位。
示例1

输入:65
输出:01000001

function convertToBinary(num) {
var s = num.toString(2);
    while(s.length<8){
        s = "0"+s;
    }
    return s;
}

29.判断是否包含数字

描述
给定字符串 str,检查其是否包含数字,包含返回 true,否则返回 false
示例1

输入:‘abc123’
输出:true

function containsNumber(str) {
    for(let i= 0; i< str.length; i++) {
        if(!isNaN(Number(str[i]))) return true
    }
    return false
}

30.检查重复字符串

描述
给定字符串 str,检查其是否包含连续重复的字母(a-zA-Z),包含返回 true,否则返回 false
示例1

输入:‘rattler’
输出:true

function containsRepeatingLetter(str) {
    if(str == '' || str == undefined || str.length == 1) {
        return false;
    }
    
    let bool = false;
    for(let i = 0; i < str.length;i++) {
        if((str[i] == str[i+1] && (!/^\d+$/.test(str[i])) && (!/^\d+$/.test(str[i+1])))) {
            bool = true;
            break;
        }
    }
    return bool;
}

31.获取指定字符串

描述
给定字符串 str,检查其是否包含 连续3个数字
1、如果包含,返回最先出现的 3 个数字的字符串
2、如果不包含,返回 false
示例1

输入:‘9876543’
输出:987

function captureThreeNumbers(str) {
    var result = str.match(/(\d{3})/)
    return result ? result[0] : false
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值