前端刷题 —— 牛客网前端题库60道详解(三)

目录

• 引言

  21. 删除数组最后一个元素(入门)
  22. 添加元素(入门)
  23. 删除数组第一个元素(入门)
  24. 数组合并(入门)
  25. 添加元素(简单)
  26. 计数(入门)
  27. 查找重复元素(中等)
  28. 求二次方(入门)
  29. 查找元素位置(入门)
  30. 避免全局变量(入门)

引言

牛客网这个前端笔试题库，能够说这60道是最基础的了，也是考察的东西比较杂，有时间4天差很少就能够刷完，巩固基础仍是有些用的。作完题回顾一上午就能够过完一遍。如今我结合个人答案和参考的其余人的答案，在这里作一个总结，也是本身知识的整理结果。

• 前端刷题 —— 牛客网前端题库60道详解(一)
• 前端刷题 —— 牛客网前端题库60道详解(二)
• 前端刷题 —— 牛客网前端题库60道详解(三)
• 前端刷题 —— 牛客网前端题库60道详解(四)
• 前端刷题 —— 牛客网前端题库60道详解(五)
• 前端刷题 —— 牛客网前端题库60道详解(六)

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

题目描述
删除数组 arr 最后一个元素。不要直接修改数组 arr，结果返回新的数组
输入：[1, 2, 3, 4]
输出：[1, 2, 3]

其余简单方法就不写了

// 最经常使用的方法
function truncate(arr) {
    return arr.slice(0,-1)
}

// 方法二：返回新数组API + pop()
function truncate(arr) {
    let newArr = [].concat(arr)
    newArr.pop()
    return newArr
}
复制代码

相关知识点：

• 数组API

22. 添加元素

题目描述
在数组 arr 开头添加元素 item。不要直接修改数组 arr，结果返回新的数组
输入：[1, 2, 3, 4], 10 输出：[10, 1, 2, 3, 4]

// 方法一：先把最后一个放进去，而后遍历数组
function prepend(arr, item) {
    let newArr = [item]
    for(let i = 0; i < arr.length ; i++) {
        newArr.push(arr[i])
    }
    return newArr
}

// 方法二：copy新数组，把item添加到第一个
function prepend(arr, item) {
    let arr1 = arr.slice(0)
    arr1.splice(0, 0, item) // arr1.unshift(item)
    return arr1
}

// 方法三：直接使用concat返回新数组
function prepend(arr, item) {
    return [item].concat(arr)
}
复制代码

相关知识点：

• 数组API

23. 删除数组第一个元素

题目描述
删除数组 arr 第一个元素。不要直接修改数组 arr，结果返回新的数组
输入：[1, 2, 3, 4]
输出：[2, 3, 4]

// 方法一： for循环push元素
function curtail(arr) {
    let newArr = []
    for(let i = 1; i < arr.length ; i++) {
        newArr.push(arr[i])
    }
    return newArr
}

// 方法二：copy原数组，删除元素返回
function curtail(arr) {
    let newArr = arr.slice(0)
    newArr.shift()
    return newArr
}

// 方法三：直接slice截取返回新数组
function curtail(arr) {
    return arr.slice(1)
}

复制代码

相关知识点：

• 数组方法API

24. 数组合并

题目描述
合并数组 arr1 和数组 arr2。不要直接修改数组 arr，结果返回新的数组
输入：[1, 2, 3, 4], ['a', 'b', 'c', 1]
输出：[1, 2, 3, 4, 'a', 'b', 'c', 1]

// 方法一： 迭代
function concat(arr1, arr2) {
    var newArr=arr1.slice(0);
    for(var i=0;i<arr2.length;i++){
        newArr.push(arr2[i]);
    }
    return newArr;
}

// 方法二：数组合并
function concat(arr1, arr2) {
    return arr1.concat(arr2)
}
复制代码

相关知识点：

• 数组API

25. 添加元素

题目描述
在数组 arr 的 index 处添加元素 item。不要直接修改数组 arr，结果返回新的数组
输入：[1, 2, 3, 4], 'z', 2
输出：[1, 2, 'z', 3, 4]

// 方法一：普通迭代
function insert(arr, item, index) {
    let newArr = []
    for(let i = 0;i < arr.length; i++) {
        if(i === index) {
            newArr.push(item)
            newArr.push(arr[i])
        } else {
            newArr.push(arr[i])
        }
    }
    return newArr
}

// 方法二：新数组+splice方法
function insert(arr, item, index) {
    let newArr = arr.slice(0)
    newArr.splice(index,0,item)
    return newArr
}

// 方法三：拼数组
function insert(arr, item, index) {
    // 根据index分红两个数组而后concat拼接
    return arr.slice(0,index).concat(item,arr.slice(index))
}
复制代码

相关知识点：

• 数组API

26. 计数

题目描述
统计数组 arr 中值等于 item 的元素出现的次数
输入：[1, 2, 4, 4, 3, 4, 3], 4
输出：3

// 方法一：计数器
function count(arr, item) {
    let count = 0
    arr.forEach((value,index) => {
        if(value === item) count++
    })
    return count
}

// 方法二：filter过滤了等于item的，最后返回数组长度
function count(arr, item) {
    let newArr = arr.filter(val => val === item)
    return newArr.length
}

// 方法二：reduce
function count(arr, item) {
  return arr.reduce((prev, val) => {
    return val === item ? ++prev : prev
  }, 0)
}
复制代码

相关知识点：

• 数组API

27. 查找重复元素

题目描述
找出数组 arr 中重复出现过的元素
输入：[1, 2, 4, 4, 3, 3, 1, 5, 3]
输出：[1, 3, 4]

// 方法一：数组排序，双指针若是相邻的相等就放到结果数组中
function duplicates(arr) {
    if(arr.length < 2) return arr
    let newArr = arr.slice(0).sort()
    let result = []
    let i = 0
    let j = 1
    while(j < newArr.length) {
        if(newArr[i] === newArr[j]){
            if(!result.includes(newArr[i])) result.push(newArr[i])
        } else {
            i = j
        }
        j++
    }
    return result
}

// 方法二：使用map记录count，把大于1的输出
function duplicates(arr) {
    let map = new Map()
    arr.forEach(value => {
        if (map.has(value)) {
          let count = map.get(value)
          map.set(value,++count)
        } else {
          map.set(value,1)
        }
    })
    let arr1 = []
    for(let [key,index] of map) {
      if(map.get(key) > 1) arr1.push(key)
    }
    return arr1
}

// 方法三：只有一个的概念就是第一次出现的索引和第二次出现的索引不一样
function duplicates(arr) {
    let newArr = []
    arr.forEach((value, index) => {
        if(arr.indexOf(value) !== arr.lastIndexOf(value) && newArr.indexOf(value) === -1) newArr.push(value)
    })
    return newArr
}
复制代码

相关知识点：

• 算法题：双指针
• 计数器
• 索引

28. 求二次方

题目描述
为数组 arr 中的每一个元素求二次方。不要直接修改数组 arr，结果返回新的数组
输入：[1, 2, 3, 4]
输出：[1, 4, 9, 16]

题设，就是为map准备的，牛客不太支持ES6以上的语法，目前不支持 ** ，不过正常是能够用的。

// 方法一：map
function square(arr) {
    // 平方能够 Math.pow(value, 2) ，也能够 value ** 2
    return arr.map(value => value * value)
}

// 方法二：forEach：如何用forEach实现map，就这么写
function square(arr) {
    let newArr = []
    arr.forEach((value, item) => {
        newArr.push(value * value)
    })
    return newArr
}
复制代码

相关知识点：

• 数组map方法，以及map的方法实现
• 平方的写法

29. 查找元素位置

题目描述 在数组 arr 中，查找值与 item 相等的元素出现的全部位置
输入：['a','b','c','d','e','f','a','b','c'] 'a'
输出：[0, 6]

// 方法一：forEach，其余的遍历都大同小异，必定是要遍历就对了。
function findAllOccurrences(arr, target) {
    let newArr = []
    arr.forEach((value,index) => {
        if(target === value) newArr.push(index)
    })
    return arr1
}
复制代码

相关知识点：

• 数组API

30. 避免全局变量

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

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

    return myObject;
}
复制代码

// 方法一： myObject前面加var/let/const均可以
function globals() {
    const myObject = {
      name : 'Jory'
    };

    return myObject;
}
复制代码

相关知识点：

• 做用域

数组方法终于过完了~~~~