前言:
正值毕业季我们在面试的过程中,总是会屡屡受挫,但是大家不要灰心我们受到挫折是因为有很多,市场大环境不好,我们行业的面试者太多了有点供大于求,还有可能就是我们的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) &#