前端编程题
- 1.修改 this 指向
- 2.dom节点查找
- 3.数组去重
- 4.斐波那契数列
- 5.时间格式化输出
- 6.获取字符串长度
- 7.邮箱字符串判断
- 8.颜色字符串转换(较难)
- 9.字符串字符统计
- 10.查找数组元素位置
- 11.数组求和
- 12.移除数组中的元素
- 13.移除数组中元素(升级)
- 14.头部添加元素
- 15.尾部添加元素
- 16.删除数组最后一个元素
- 17.删除第一个元素
- 18.数组合并
- 19.数组中某个值出现的次数
- 20.查找重复元素
- 21.求二次方
- 22.判断 val1 和 val2 是否完全等同
- 23.计时器
- 24.流程控制
- 25.使用闭包
- 26.使用arguments
- 27.使用apply调用函数
- 28.二进制转换
- 29.判断是否包含数字
- 30.检查重复字符串
- 31.获取指定字符串
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
- rgb 中每个 , 后面的空格数量不固定
- 十六进制表达式使用六位小写字母
- 如果输入不符合 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 为出现频率
- 不限制 key 的顺序
- 输入的字符串参数不会为空
- 忽略空白字符
示例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
}