JavaScript

前端

发布日期: 2020-08-18

文章字数: 4.5k

阅读时长: 20 分

阅读次数:

以下所有的js测评均来自牛客网，练习自己的js编码能力。

数组

查找数组元素位置

题目描述

找出元素 item 在给定数组 arr 中的位置，如果数组中存在 item，则返回元素在数组中的位置，否则返回 -1

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

代码：

// 方法一
function indexOf(arr, item) {
    for (var i = 0; i < arr.length; i++) {
        if (arr[i] == item) {
            return i;
        }
    }
    return -1;
}

// 方法二
function indexOf(arr, item) {
    return arr.indexOf(item);
}

数组求和

题目描述

计算给定数组 arr 中所有元素的总和。（输入数组中的元素均为 Number 类型）

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

代码：

// 方法一
function sum(arr) {
    return arr.reduce(function(a, b) {
        return a + b;
    }, 0);
}

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

移除数组中的元素

题目描述

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

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

代码：

// 方法一
function remove(arr, item) {
    // 返回符合条件的数组，x为数组中遍历的元素
      // filter() 方法创建一个新的数组
    return arr.filter(x => {
        return x !== item
    })
}

// 方法二
function remove(arr, item) {
    var newArr = [];
    for (var i = 0; i < arr.length; i++) {
        if (arr[i] != item) {
            newArr.push(arr[i]);
        }
    }
    return newArr;
}

移除数组中的元素

题目描述(✨)

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

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

代码：

// splice(index, 删除个数, 插入的元素)会改变原数组
function removeWithoutCopy(arr, item) {
    for (var i = 0; i < arr.length; i++) {
        if (arr[i] == item) {
            arr.splice(i, 1);
            i--;
        }
    }
    return arr;
}

添加元素

题目描述

在数组 arr 末尾添加元素 item。不要直接修改数组 arr，结果返回新的数组

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

代码：

// 方法一：初始化一个新的数组，先将arr数组中的元素添加到新数组中，然后在新数组末尾添加新元素item
function append(arr, item) {
    let newArr = [];
    for (let i = 0; i < arr.length; i++) {
        newArr.push(arr[i]);
    }
      // push()会改变原数组
    newArr.push(item);
    return newArr;
}

// 方法二：slice(start, end)返回从start到end（不包括end）的元素，返回一个新数组
function append(arr, item) {
    var newArr = arr.slice(0);
    newArr.push(item);
    return newArr;
}

删除数组最后一个元素

题目描述

删除数组 arr 最后一个元素。不要直接修改数组 arr，结果返回新的数组

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

代码：

function truncate(arr) {
    var newArr = arr.slice(0);
    newArr.pop();
    return newArr;
}

function truncate(arr) {
    var newArr = arr.slice(0, arr.length - 1);
    return newArr;
}

function truncate(arr) {
    var newArr = [];
    for (let i = 0; i < arr.length; i++) {
        newArr.push(arr[i]);
    }
    newArr.pop();
    return newArr;
}

添加元素

题目描述

在数组 arr 开头添加元素 item。不要直接修改数组 arr，结果返回新的数组

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

代码：

// unshift()数组开头增加一个或多个元素，会改变原数组
function prepend(arr, item) {
    var newArr = arr.slice(0);
    newArr.unshift(item);
    return newArr;
}

// forEach()
function prepend(arr, item) {
    var newArr = [];
    arr.forEach(function(val, index) {
        newArr.push(val);
    })
    newArr.unshift(item);
    return newArr;
}

// concat()连接两个或多个数组，返回新数组
function prepend(arr, item) {
    let val = [item];
    return val.concat(arr);
}

// 扩展运算符
function prepend(arr, item) {
    let newArr = [...arr];
    newArr.unshift(item);
    return newArr;
}

// map()使用，返回新数组
function prepend(arr, item) {
    let newArr = [];
    arr.map((item) => {
        newArr.push(item);
    })
    newArr.unshift(item);
    return newArr;
}

删除数组第一个元素

题目描述

删除数组 arr 第一个元素。不要直接修改数组 arr，结果返回新的数组

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

代码：

function curtail(arr) {
    let newArr = [...arr];
    newArr.shift();
    return newArr;
}

function curtail(arr) {
    return arr.slice(1);
}
// 不同种方法同上一题

数组合并

题目描述

合并数组 arr1 和数组 arr2。不要直接修改数组 arr，结果返回新的数组

// 输入
[1, 2, 3, 4], ['a', 'b', 'c', 1]
// 输出
[1, 2, 3, 4, 'a', 'b', 'c', 1]

代码：

// concat()连接两个或多个数组，返回新数组
function concat(arr1, arr2) {
    return arr1.concat(arr2);
}

function concat(arr1, arr2) {
    return [...arr1, ...arr2];
}

添加元素

题目描述

在数组 arr 的 index 处添加元素 item。不要直接修改数组 arr，结果返回新的数组

// 输入
[1, 2, 3, 4], 'z', 2
// 输出
[1, 2, 'z', 3, 4]

代码：

function insert(arr, item, index) {
    var newArr = arr.slice(0);
    newArr.splice(index, 0, item);
    return newArr;
}

计数

题目描述

统计数组 arr 中值等于 item 的元素出现的次数

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

代码：

function count(arr, item) {
    let count = 0;
    arr.forEach(function(val, index) {
        if (item == val) {
            count++;
        }
    })
    return count;
}

查找重复元素

题目描述(✨)

找出数组 arr 中重复出现过的元素

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

代码：

// for in遍历的是数组的索引（即键名），而for of遍历的是数组元素值。 所以for in更适合遍历对象，不要使用for in遍历数组
function duplicates(arr) {
    var obj = {};
    var res = [];
    for (item of arr) {
        obj[item] ? obj[item]++ : obj[item] = 1;
    }
    for (item in obj) {
        if (obj[item] > 1) {
            res.push(item);
        }
    }
    return res;
}

function duplicates(arr) {
    var res = [];
    arr.forEach(function(val) {
        if (arr.indexOf(val) != arr.lastIndexOf(val) && res.indexOf(val) == -1) {
            res.push(val);
        }
    })
    return res;
}

求二次方

题目描述

为数组 arr 中的每个元素求二次方。不要直接修改数组 arr，结果返回新的数组

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

代码：

function square(arr) {
    var newArr = arr.map((val) => {
            return val * val;
            })
    return newArr;
}

function square(arr) {
    var newArr = [];
    for (let i = 0; i < arr.length; i++) {
        newArr.push(arr[i] * arr[i]);
    }
    return newArr;
}

查找元素位置

题目描述

在数组 arr 中，查找值与 item 相等的元素出现的所有位置

// 输入
['a','b','c','d','e','f','a','b','c'] 'a'
// 输出
[0, 6]

代码：

function findAllOccurrences(arr, target) {
    let newArr = [];
    arr.forEach((val, index) => {
        val == target ? newArr.push(index) : ''
    })
    return newArr;
}

function findAllOccurrences(arr, target) {
    let newArr = [];
    for (let i = 0; i < arr.length; i++) {
        if (arr[i] == target) {
            newArr.push(i);
        }
    }
    return newArr;
}

函数

避免全局变量

题目描述

给定的 js 代码中存在全局变量，请修复

代码：

function globals() {
    let myObject = {
      name : 'Jory'
    };

    return myObject;
}

正确的函数定义

题目描述

请修复给定的 js 代码中，函数定义存在的问题

//输入
true
// 输出
a

代码：

function functions(flag) {
    function getValue() {
        if (flag) {
            return 'a';
        } else {
            return 'b';
        }
    }
    return getValue();
}

function functions(flag) {
    if (flag) {
      getValue = function() { return 'a'; }
    } else {
      getValue = function() { return 'b'; }
    }
    return getValue();
}

正确使用parseInt

题目描述

修改 js 代码中 parseInt 的调用方式，使之通过全部测试用例

// 输入
'12'   '12px'    '0x12'
// 输出
12    12    0

代码：

// parseInt(string, radix)   将一个字符串 string 转换为 radix 进制的整数， radix 为介于2-36之间的数。
function parse2Int(num) {
    return parseInt(num, 10);
}

完全等同

题目描述

判断 val1 和 val2 是否完全等同

代码：

function identity(val1, val2) {
    if (val1 === val2) {
        return true;
    }
    return false;
}

// 简化版
function identity(val1, val2) {
    return val1 === val2;
}

计时器

题目描述

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

代码：

function count(start, end) {
    // 第一个数需要立即输出
    console.log(start)
    // 从 start 到 end（包含 start 和 end），每隔 100 毫秒 console.log 一个数字，每次数字增幅为 1
    let timer = setInterval(function() {
        if (start >= end - 1) {
            clearInterval(timer);
        }
        console.log(start++);
    }, 100);
    // 返回的对象中需要包含一个 cancel 方法，用于停止定时操作
    return {
        cancel: function() {
            clearInterval(timer);
        }
    }
}

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

流程控制

题目描述

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

// 输入
15
// 输出
fizzbuzz

代码：

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;
}

function fizzBuzz(num) {
    if (!num || isNaN(num)) return false;
    var str = '';
    if (num % 3 == 0) str += 'fizz';
    if (num % 5 == 0) str += 'buzz';
    return str || num;
}

函数传参

题目描述（✨）

将数组 arr 中的元素作为调用函数 fn 的参数

// 输入
function (greeting, name, punctuation) {return greeting + ', ' + name + (punctuation || '!');}, ['Hello', 'Ellie', '!']
// 输出
Hello, Ellie!

代码：

function argsAsArray(fn, arr) {
    return fn(...arr);
}

// ？
function argsAsArray(fn, arr) {
    return fn.apply(this, arr);
}

函数上下文

题目描述

将函数 fn 的执行上下文改为 obj 对象

// 输入
function () {return this.greeting + ', ' + this.name + '!!!';}, {greeting: 'Hello', name: 'Rebecca'}
// 输出
Hello, Rebecca!!!

代码：

function speak(fn, obj) {
    return fn.call(obj);
}

function speak(fn, obj) {
    return fn.apply(obj);
}

返回函数

题目描述（✨）

实现函数 functionFunction，调用之后满足如下条件：
1、返回值为一个函数 f
2、调用返回的函数 f，返回值为按照调用顺序的参数拼接，拼接字符为英文逗号加一个空格，即 ‘, ‘
3、所有函数的参数数量为 1，且均为 String 类型

// 输入
functionFunction('Hello')('world')
// 输出
Hello, world

使用闭包

题目描述(✨)

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

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

代码：

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

// ?
function makeClosures(arr, fn) {
    let result = [];
    for (let i = 0; i < arr.length; i++) {
        result[i] = function() {
            return fn.call(null, arr[i]);
        }
    }
    return result;
}

二次封装函数

题目描述

已知函数 fn 执行需要 3 个参数。请实现函数 partial，调用之后满足如下条件：
1、返回一个函数 result，该函数接受一个参数
2、执行 result(str3) ，返回的结果与 fn(str1, str2, str3) 一致

// 输入
var sayIt = function(greeting, name, punctuation) {     return greeting + ', ' + name + (punctuation || '!'); };  partial(sayIt, 'Hello', 'Ellie')('!!!');
// 输出
Hello, Ellie!!!

代码：

function partial(fn, str1, str2) {
    var result = function(str3) {
        return fn.call(this, str1, str2, str3);
    } 
    return result;
}

使用`arguments`

题目描述

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

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

代码：

// 方法一
function useArguments() {
    var arr = [...arguments];
    return arr.reduce((a,b)=> a+b );
}

// 方法二
function useArguments() {
    var sum = 0;
    for (var i = 0; i < arguments.length; i++) {
        sum += arguments[i];
    }
    return sum;
}

使用`apply`调用函数

题目描述(✨)

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

// 方法一
function callIt(fn) {
    var arr = [...arguments].slice(1);
    return fn(...arr);
}

// 方法二
function callIt(fn) {
    return fn.apply(this, [].slice.call(arguments, 1));
}

// 方法三
function callIt(fn) {
  //将arguments转化为数组后，截取第一个元素之后的所有元素
    var arr = Array.prototype.slice.call(arguments, 1);
    return fn.apply(fn, arr);
}

二次封装函数

题目描述（✨）

实现函数 partialUsingArguments，调用之后满足如下条件：
1、返回一个函数 result
2、调用 result 之后，返回的结果与调用函数 fn 的结果一致
3、fn 的调用参数为 partialUsingArguments 的第一个参数之后的全部参数以及 result 的调用参数

代码：

function partialUsingArguments(fn) {
    var arr = Array.prototype.slice.call(arguments, 1);
    arr.unshift(null);
    return fn.bind.apply(fn, arr);
}

已知 fn 为一个预定义函数，实现函数 curryIt，调用之后满足如下条件：
1、返回一个函数 a，a 的 length 属性值为 1（即显式声明 a 接收一个参数）
2、调用 a 之后，返回一个函数 b, b 的 length 属性值为 1
3、调用 b 之后，返回一个函数 c, c 的 length 属性值为 1
4、调用 c 之后，返回的结果与调用 fn 的返回值一致
5、fn 的参数依次为函数 a, b, c 的调用参数

// 输入
var fn = function (a, b, c) {return a + b + c}; curryIt(fn)(1)(2)(3);
// 输出
6

代码：

function curryIt(fn) {
    return function(a) {
        return function(b) {
            return function(c) {
                return fn(a,b,c);
            }
        }
    }
}

或运算

题目描述

返回参数 a 和 b 的逻辑或运算结果

// 输入
false, true
// 输出
true

代码：

function or(a, b) {
    return a || b;
}

且运算

题目描述

返回参数 a 和 b 的逻辑且运算结果

// 输入
false, true
// 输出
false

代码：

function and(a, b) {
    return a && b;
}

模块

题目描述

完成函数 createModule，调用之后满足如下要求：
1、返回一个对象
2、对象的 greeting 属性值等于 str1， name 属性值等于 str2
3、对象存在一个 sayIt 方法，该方法返回的字符串为 greeting属性值 + ‘, ‘ + name属性值

代码：

function createModule(str1, str2) {
    const obj = {
        greeting: str1,
        name: str2,
        sayIt: function(){
      return this.greeting + ', ' + this.name
    }
    }
    return obj
}

二进制转换1

题目描述(✨)

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

// 输入
128, 8
// 输出
1

代码：

// parseInt(string, radix) 将一个字符串string 转换为radix 进制的整数
function valueAtBit(num, bit) {
    let str = num.toString(2);
      // 为啥子？
    return str[str.length - bit];
}

二进制转换2

题目描述

给定二进制字符串，将其换算成对应的十进制数字

// 输入
'11000000'
// 输出
192

代码：

// 直接使用parseInt函数
function base10(str) {
    return parseInt(str, 2);
}

function base10(str) {
  // 先将字符串进行分割转化为数组，然后对其进行反转，然后二进制转换为十进制，使用pow函数
    var arr = str.split('').reverse();
    var sum = 0;
    for (var i = 0; i < arr.length; i++) {
        sum += arr[i] * Math.pow(2,i);
    }
    return sum;
}

二进制转换3

题目描述

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

// 输入
65
// 输出
01000001

代码：

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

function convertToBinary(num) {
    return ('00000000' + num.toString(2)).slice(-8);
}

乘法

题目描述(✨)

求 a 和 b 相乘的值，a 和 b 可能是小数，需要注意结果的精度问题

// 输入
3, 0.0001
// 输出
0.0003

代码：

function multiply(a, b) {
    let lenA = a.toString().split('.')[1] || '';
    let lenB = b.toString().split('.')[1] || '';
    let len = lenA.length + lenB.length;
    return (a * b).toFixed(len);
}

改变上下文

题目描述

将函数 fn 的执行上下文改为 obj，返回 fn 执行后的值

// 输入
alterContext(function() {return this.greeting + ', ' + this.name + '!'; }, {name: 'Rebecca', greeting: 'Yo' })
// 输出
Yo, Rebecca!

代码：

function alterContext(fn, obj) {
    return fn.call(obj);
}

function alterContext(fn, obj) {
    return fn.apply(obj);
}

function alterContext(fn, obj) {
    return fn.bind(obj)();
}

批量改变对象的属性

题目描述(✨)

给定一个构造函数 constructor，请完成 alterObjects 方法，将 constructor 的所有实例的 greeting 属性指向给定的 greeting 变量。

// 输入
var C = function(name) {this.name = name; return this;}; 
var obj1 = new C('Rebecca'); 
alterObjects(C, 'What\'s up'); obj1.greeting;
// 输出
What's up

代码：

function alterObjects(constructor, greeting) {
    constructor.prototype.greeting = greeting;
}

属性遍历

题目描述(✨)

找出对象 obj 不在原型链上的属性(注意这题测试例子的冒号后面也有一个空格~)
1、返回数组，格式为 key: value
2、结果数组不要求顺序

// 输入
var C = function() {this.foo = 'bar'; this.baz = 'bim';}; 
C.prototype.bop = 'bip'; 
iterate(new C());
// 输出
["foo: bar", "baz: bim"]

代码：

function iterate(obj) {
    let arr = [];
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            arr.push(`${key}: ${obj[key]}`);
        }
    }
    return arr;
}

function iterate(obj) {
    return Object.keys(obj).map(function(key) {
        return key + ": " + obj[key];
    })
}

function iterate(obj) {
    var arr = [];
    Object.getOwnPropertyNames(obj).forEach(function(item) {
        arr.push(item + ': ' + obj[item]);
    })
    return arr;
}

正则表达式

判断是否包含数字

题目描述

给定字符串 str，检查其是否包含数字，包含返回 true，否则返回 false

// 输入
'abc123'
// 输出
true

代码：

function containsNumber(str) {
    var reg = /\d/;
    return reg.test(str);
}

检查重复字符串

题目描述

给定字符串 str，检查其是否包含连续重复的字母（a-zA-Z），包含返回 true，否则返回 false

// 输入
'rattler'
// 输出
true

代码：

function containsRepeatingLetter(str) {
    return /([A-z])\1/.test(str);
}

判断是否以元音字母结尾

题目描述

给定字符串 str，检查其是否以元音字母结尾
1、元音字母包括 a，e，i，o，u，以及对应的大写
2、包含返回 true，否则返回 false

// 输入
'gorilla'
// 输出
true

代码：

function endsWithVowel(str) {
    var reg = /[a,e,i,o,u,A,E,I,O,U]$/g;
    return reg.test(str);
}

function endsWithVowel(str) {
    var reg = /[a,e,i,o,u]$/i;
    return reg.test(str);
}

获取指定字符串

题目描述(✨)

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

function captureThreeNumbers(str) {
    return str.match(/\d{3}/) || false;
}

判断是否符合指定格式

题目描述

给定字符串 str，检查其是否符合如下格式
1、XXX-XXX-XXXX
2、其中 X 为 Number 类型

// 输入
'800-555-1212'
// 输出
true

代码：

function matchesPattern(str) {
    return /^\d{3}-\d{3}-\d{4}$/.test(str);
}

判断是否符合USD格式

题目描述

给定字符串 str，检查其是否符合美元书写格式
1、以 $开始
2、整数部分，从个位起，满 3 个数字用 , 分隔
3、如果为小数，则小数部分长度为 2
4、正确的格式如：$1,023,032.03 或者 $2.03，错误的格式如：$3,432,12.12 或者 $34,344.3

function isUSD(str) {
      // *匹配前一个表达式 0 次或多次
    return /^(\$)([0-9]{1,3})(,[0-9]{3})*(\.(([1-9][0-9])||([0][1-9])))?$/.test(str);
}

JavaScript

前端需要注意的小细节总结

前端面试题总结

2020-08-20 前端

JavaScript

前端大挑战

2020-08-16 前端

JavaScript

js能力测评

数组

题目描述

代码：

题目描述

代码：

题目描述

代码：

题目描述(✨)

代码：

题目描述

代码：

题目描述

代码：

题目描述

代码：

题目描述

代码：

题目描述

代码：

题目描述

代码：

题目描述

代码：

题目描述(✨)

代码：

题目描述

代码：

题目描述

代码：

函数

题目描述

代码：

题目描述

代码：

题目描述

题目描述

代码：

题目描述

代码：

题目描述

代码：

题目描述（✨）

代码：

题目描述

代码：

题目描述（✨）

题目描述(✨)

代码：

题目描述

代码：

题目描述

代码：

题目描述(✨)

题目描述（✨）

代码：

题目描述

代码：

题目描述

代码：

题目描述

代码：

题目描述

代码：

题目描述(✨)

代码：

题目描述

代码：

题目描述

代码：

题目描述(✨)

代码：

题目描述

代码：

题目描述(✨)

代码：

题目描述(✨)

代码：

正则表达式

题目描述