在前端面试过程中,面试官比较喜欢问的经典JavaScript算法题以及一些js小方法

本文介绍了JavaScript中的基础语法和实用技巧,包括生成随机IP、根据布尔值排序、RGB与16进制颜色转换、数组和对象的操作。接着深入探讨了斐波那契数列、买卖股票的贪心算法、回溯算法、数组排序(冒泡、选择、插入、快速、归并)以及树形结构处理(数组转JSON、广度优先遍历)。此外,还讲解了JSONP跨域请求和两数组交集的计算方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前言:

        正值毕业季我们在面试的过程中,总是会屡屡受挫,但是大家不要灰心我们受到挫折是因为有很多,市场大环境不好,我们行业的面试者太多了有点供大于求,还有可能就是我们的js的有些知识不牢固在问到一些不常用的东西时经常会有思路但不知道如何下手,所以这篇文章就带领大家一起熟悉熟悉前端的js基础和算法! 

一、js小方法 

1、生成随机ip

// 生成随机ip地址
const randomIp = () => Array(4).fill(0) 
.map((_, i) => Math.floor(Math.random() * 255) + (i === 0 ? 1 : 0) ) 
.join('.');
console.log(randomIp());

2、根据布尔值进行排序

// sort()的回调函数
// 数字升序:arr.sort((a,b)=>a-b),
// 按字母顺序对字符串数组进行排序:arr.sort((a, b) => a.localeCompare(b)),
// 根据真假值进行排序
const users = [
  { "name": "baby", "off": false },
  { "name": "adin", "off": true },
  { "name": "jean", "off": false },
  { "name": "george", "off": true },
  { "name": "jelly", "off": true },
  { "name": "mary", "off": false }
];

const offList = users.sort((a, b) => Number(b.off) - Number(a.off))
console.log(offList);

3、RGB<=>16进制 

// 使用&, >>, |来完成rgb值和16进制颜色值之间的转换
/**
 * 16进制颜色值转RGB
 * @param  {String} hex 16进制颜色字符串
 * @return {String}     RGB颜色字符串
 */
function hexToRGB(hex) {
  var hexx = hex.replace('#', '0x')
  var r = hexx >> 16
  var g = hexx >> 8 & 0xff
  var b = hexx & 0xff
  return `rgb(${r}, ${g}, ${b})`
}
/**
* RGB颜色转16进制颜色
* @param  {String} rgb RGB进制颜色字符串
* @return {String}     16进制颜色字符串
*/
function RGBToHex(rgb) {
  var rgbArr = rgb.split(/[^\d]+/)
  var color = rgbArr[1]<<16 | rgbArr[2]<<8 | rgbArr[3]
  return '#'+ color.toString(16)
}
console.log(RGBToHex('rgb(255,255,255)'));
console.log(hexToRGB('#000'));

4、js的ES6语法处理去重 

// JavaScript内置的一些数据结构带有不包含重复值的特性通过两次数据结构转换消耗掉达到去重的效果
const arr = ['fff', 'sss', 'sss', 'fff', 'aaa', 'ccc', 'vvv', 'ggg', 'hhh', 'ttt', 'ttt', 'ggg'];
const arraylist = Array.from(new Set(arr));
console.log(arraylist);
// 利用一些数组方法判断,如indexOf、forEach、includes、filter、reduce通过遍历并判断是否存在进行去重
const Arrs = [];
arr.forEach(item => {
	// 或者!Arrs.includes(item)
	if(Arrs.indexOf(item) === -1){
		Arrs.push(item)
	}
})
console.log(Arrs);
// 利用一些数组方法判断,如indexOf、filter通过遍历并判断是否存在进行去重
const Numbers = arr.filter((item, index) => {
	return arr.indexOf(item, 0) === index;
})
console.log(Numbers);
// 利用一些数组方法判断,如includes、reduce通过遍历并判断是否存在进行去重
const Strings = arr.reduce((prev,cur) => prev.includes(cur) ? prev : [...prev,cur],[]);
console.log(Strings);

5、对window和document元素的检索

 // 检测某个元素是否聚焦
  const hasFocus = el => el === document.activeElement
  // 获取某个元素所有的兄弟元素
  const a = el => [].slice.call(el.parentNode.children).filter(child => child !== el)
  // 获取当前选择的文本
  const getSelectedText = () => window.getSelection().toString()
  // 将 URL 参数转换为对象
  const getUrlParams = (query) =>Array.from(new URLSearchParams(query)).reduce((p, [k, v]) => Object.assign({}, p, { [k]: p[k] ? (Array.isArray(p[k]) ? p[k] : [p[k]]).concat(v) : v }),{});
  // 检测是否为暗模式
  const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

6、对数组类型和属性的操作

 // 比较两个数组
  let arr=[11,12,13,14,15]
  let b=[2,3,4,5,6,7,8,9]
  const isEqual = (arr, b) => JSON.stringify(arr) === JSON.stringify(b);
  console.log(isEqual());
  // 将数组转为对象
  const arrayToObject = (arr, key) => arr.reduce((a, b) => ({ ...a, [b[key]]: b }), {});
  console.log(arrayToObject());
  // 将数组按照属性计数
  const countBy = (arr, prop) => arr.reduce((prev, curr) => ((prev[curr[prop]] = ++prev[curr[prop]] || 1), prev), {} );
  // 判断数组是否不为空
  const arrayIsNotEmpty = (arr) => Array.isArray(arr) && Object.keys(arr).length > 0;
  // 展开多维数组
  const flat_entries = arr => [].concat(...arr); 
  // 获取数组最后一个元素
  const lastItem = arr => arr.slice(-1)[0]

7、对象属性检测及其排序

// 检测多个对象是否相等
  const isEquals = (...objects) => objects.every((obj) => JSON.stringify(obj) === JSON.stringify(objects[0]));
  // 从对象数组中提取属性值
  const pluck = (objs, property) => objs.map((obj) => obj[property]);
  // 反转对象的 key value
  const invert = (obj) => Object.keys(obj).reduce((res, k) => Object.assign(res, { [obj[k]]: k }), {});
  // 从对象中删除值为 null 和 undefined 的属性
  const removeNullAndUndefined = (obj) => Object.entries(obj) .reduce((a, [k, v]) => (v == null ? a : ((a[k] = v), a)), {});
  // 按照对象的属性对对象排序
  const sort = (obj) => Object.keys(obj) .sort() .reduce((p, c) => ((p[c] = obj[c]), p), {});
  // 检测对象是否为 Promise
  const isArray = (obj) &#
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值