2024年【面试题】说说Javascript中你常用的知识点总结，2024年最新350道Web前端面试真题分享-CSDN博客

本文链接：https://blog.csdn.net/2401_84616838/article/details/138744107

最后

文章到这里就结束了，如果觉得对你有帮助可以点个赞哦

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端面试题库（面试必备）推荐：★★★★★

地址：前端面试题库

【国庆头像】- 国庆爱国程序员头像！总有一款适合你！

一行代码完成结构加赋值

我们日常经常使用结构赋值，一般都是先结构，再赋值，当然我们也可以一行就完成解构加赋值操作，看起来非常简化，当然可读性你懂得！

let people = { name: null, age: null };
let result = { name: '张三',  age: 16 };

({ name: people.name, age: people.age} = result);
console.log(people) // {"name":"张三","age":16}###

对基础数据类型进行解构

日常中我们应该用不到这样的场景，但是实际上我们也可以对基础数据类型解构

const {length : a} = '1234';
console.log(a) // 4

对数组解构快速拿到最后一项值

实际上我们是可以对数组解构赋值拿到length属性的，通过这个特性也可以做更多的事情。

const arr = [1, 2, 3];
const { 0: first, length, [length - 1]: last } = arr;
first; // 1
last; // 3
length; // 3

将下标转为中文零一二三…

日常可能有的列表我们需要将对应的012345转为中文的一、二、三、四、五…，在老的项目看到还有通过自己手动定义很多行这样的写法，于是写了一个这样的方法转换

export function transfromNumber(number){
  const  INDEX_MAP = ['零'，'一'.....]
  if(!number) return
  if(number === 10) return INDEX_MAP[number]
  return [...number.toString()].reduce( (pre, cur) => pre  + INDEX_MAP[cur] , '' )
}

判断整数的不同方法

/* 1.任何整数都会被1整除，即余数是0。利用这个规则来判断是否是整数。但是对字符串不准确 */
function isInteger(obj) {
 return obj%1 === 0
}

/* 1. 添加一个是数字的判断 */
function isInteger(obj) {
 return typeof obj === 'number' && obj%1 === 0
}

/* 2. 使用Math.round、Math.ceil、Math.floor判断 整数取整后还是等于自己。利用这个特性来判断是否是整数*/
function isInteger(obj) {
 return Math.floor(obj) === obj
}

/* 3. 通过parseInt判断 某些场景不准确 */
function isInteger(obj) {
 return parseInt(obj, 10) === obj
}

/* 4. 通过位运算符*/
function isInteger(obj) {
 return (obj | 0) === obj
}

/* 5.ES6提供了Number.isInteger */

通过css检测系统的主题色从而全局修改样式

@media 的属性 prefers-color-scheme就可以知道当前的系统主题，当然使用前需要查查兼容性

@media (prefers-color-scheme: dark) { //... } 
@media (prefers-color-scheme: light) { //... }

javascript也可以轻松做到

window.addEventListener('theme-mode', event =>{ 
    if(event.mode == 'dark'){}
   if(event.mode == 'light'){} 
})

window.matchMedia('(prefers-color-scheme: dark)') .addEventListener('change', event => { 
    if (event.matches) {} // dark mode
})

数组随机打乱顺序

通过 0.5-Math.random() 得到一个随机数，再通过两次sort排序打乱的更彻底,但是这个方法实际上并不够随机，如果是企业级运用，建议使用第二种洗牌算法

shuffle(arr) {
      return arr.sort(() => 0.5 - Math.random()). sort(() => 0.5 - Math.random());
 },

function shuffle(arr) {
  for (let i = arr.length - 1; i > 0; i--) {
    const randomIndex = Math.floor(Math.random() * (i + 1))
    ;[arr[i], arr[randomIndex]] = [arr[randomIndex], arr[i]]
  }
  return arr
}

随机获取一个Boolean值

和上个原理相同，通过随机数获取，**Math.random()**的区间是0-0.99，用0.5在中间百分之五十的概率

function randomBool() {
    return 0.5 - Math.random()
}

把数组的第一项放到最后一项

function (arr){
    return arr.push(arr.shift());
}

把数组最后一项移到第一项

function(arr){
  return arr.unshift(arr.pop());
}

利用set数组去重

function uniqueArr(arr){
    return [...new Set(arr)]
}

dom节点平滑滚动到可是区域，顶部，底部

原生的scrollTo方法没有动画，类似于锚点跳转，比较生硬，可以通过这个方法会自带平滑的过度效果

function scrollTo(element) {
    element.scrollIntoView({ behavior: "smooth", block: "start" }) // 顶部
    element.scrollIntoView({ behavior: "smooth", block: "end" }) // 底部
    element.scrollIntoView({ behavior: "smooth"}) // 可视区域
}

获取随机颜色

日常我们经常会需要获取一个随机颜色，通过随机数即可完成

function getRandomColor(){
    return `#${Math.floor(Math.random() * 0xffffff) .toString(16)}`;
}

检测是否为空对象

通过使用Es6的Reflect静态方法判断他的长度就可以判断是否是空数组了，也可以通过**Object.keys()**来判断

function isEmpty(obj){
    return  Reflect.ownKeys(obj).length === 0 && obj.constructor === Object;
}

#### 结束  

一次完整的面试流程就是这样啦，小编综合了腾讯的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析，分享给小伙伴们，有没有需要的小伙伴们都去领取！

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

![](https://img-blog.csdnimg.cn/img_convert/45f2869b91b538dd3bb3290ba13bc806.png)



程就是这样啦，小编综合了腾讯的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析，分享给小伙伴们，有没有需要的小伙伴们都去领取！

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

![](https://img-blog.csdnimg.cn/img_convert/45f2869b91b538dd3bb3290ba13bc806.png)