JavaScript代码 在项目中高效开发，社招面试心得

英文字符串首字母大写

---

const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1)

console.log( capitalize(“hello world”));// ‘Hello world’

4、删除数组中的重复值

=========================================================================

删除数组的重复项是非常有必要的，使用“Set”会变得非常简单。

const removeDuplicates = (arr) => […new Set(arr)]

console.log(removeDuplicates([1, 2, 2, 3, 3, 4, 4, 5, 5, 6]))

// [1, 2, 3, 4, 5, 6]

5、删除数组对象的重复值

==========================================================================

删除数组对象中重复项

const CSDN = [

{

id: ‘1’,

result: ‘半’

},

{

id: ‘1’,

result: ‘半’

},

{

id: ‘2’,

result: ‘生’

},

{

id: ‘3’,

result: ‘生’

},

{

id: ‘3’,

result: ‘过’

},

{

id: ‘3’,

result: ‘往’

},

{

id: ‘4’,

result: ‘往’

},

]

let obj = {}

let scdn = CSDN.reduce((cur,next) => {

obj[next.id] ? “” : obj[next.id] = true && cur.push(next);

return cur;

},[]) //设置cur默认类型为数组，并且初始值为空的数组

console.log(scdn );

// 0: {id: ‘1’, result: ‘半’}

// 1: {id: ‘2’, result: ‘生’}

// 2: {id: ‘3’, result: ‘生’}

// 3: {id: ‘4’, result: ‘往’}

// length: 4

6、展平一个数组

======================================================================

多层数组展开成一层

// 方法一：

const flat = (arr) =>

[].concat.apply(

[],

arr.map((a) => (Array.isArray(a) ? flat(a) : a))

)

// 方法二：

const flat = (arr) => arr.reduce((a, b) => (Array.isArray(b) ? […a, …flat(b)] : […a, b]), [])

console.log( flat([‘半’, [‘生’, ‘过’, [‘往’]]]) );

// [‘半’, ‘生’, ‘过’, ‘往’]

7、从数组中删除虚假值

=========================================================================

使用此方法，您将能够过滤掉数组中的所有虚假值。

const removeFalsy = (arr) => arr.filter(Boolean)

console.log( removeFalsy([0, ‘a string’, ‘’, NaN, true, 5, undefined, ‘another string’, false]) )

// [‘a string’, true, 5, ‘another string’]

8、检查一个数字是偶数还是奇数

=============================================================================

可以通过使用模运算符 (%) 来解决。

const isEven = num => num % 2 === 0

console.log( isEven(2) )// true

console.log( isEven(1) )// false

9、获取参数的平均值

========================================================================

我们可以使用 reduce 方法来获取我们在此函数中提供的参数的平均值。

const average = (…args) => args.reduce((a, b) => a + b) / args.length;

console.log( average(1, 2, 3, 4, 5); ) // 3

取数组的最大数、最小数

---

const arr = [0, 1, 2, 3];

const min = Math.min(…arr); // 0

const max = Math.max(…arr); // 3

10、将数字保留固定小数点

===========================================================================

使用 Math.pow() 方法，我们可以将一个数字截断为我们在函数中提供的某个小数点。

const round = (n, d) => Number(Math.round(n + “e” + d) + “e-” + d)

console.log( round(1.005, 2) ) //1.01

console.log( round(1.555, 2) ) //1.56

console.log( round(1.554, 2) ) //1.55

console.log( round(1.555, 3) ) //1.555

console.log( round(1.555, 1) ) //1.6

11、计算两个日期相差天数

===========================================================================

计算两个日期之间的天数，一行代码就可以搞定。

const diffDays = (date, otherDate) => Math.ceil(Math.abs(date - otherDate) / (1000 * 60 * 60 * 24));

console.log( diffDays(new Date(“2021-11-3”), new Date(“2022-2-1”)) )// 100

12、从日期中获取一年中的哪一天

==============================================================================

您想知道某个日期是一年中的哪一天吗？

const dayOfYear = (date) => Math.floor((date - new Date(date.getFullYear(), 0, 0)) / (1000 * 60 * 60 * 24))

console.log( dayOfYear(new Date()) ) // 101

检查日期是否为周末

---

const isWeekend = (date) => [0, 6].indexOf(date.getDay()) !== -1;

console.log(isWeekend(new Date(2022, 4, 15)));

// false (Friday)

console.log(isWeekend(new Date(2022, 4, 16)));

// true (Saturday)

检查日期是否合法

---

使用以下代码段检查给定日期是否有效。

const isDateValid = (…val) => !Number.isNaN(new Date(…val).valueOf());

const isDateValid = (…val) => !Number.isNaN(new Date(…val).valueOf());

console.log(isDateValid(“December 17, 1995 03:24:00”)); // true

console.log(isDateValid(“1995.08.04 03:24:00”)); // true

console.log(isDateValid(“1995/08/04 03:24:00”)); // true

console.log(isDateValid(“1995/08/04 T 03:24:00”)); // aflse

以 hⓂ️s 格式记录时间

---

const timeFromDate = date => date.toTimeString().slice(0, 8);

console.log(timeFromDate(new Date(2021, 0, 10, 17, 30, 0)));

// 17:30:00

13、生成一个随机的十六进制颜色

==============================================================================

如果你需要一个随机的颜色值，这个函数就可以了。

const randomColor = () => #${Math.random().toString(16).slice(2, 8).padEnd(6, '0')}

console.log( randomColor() )// #9dae4f

console.log( randomColor() )// #6ef10e

14、将RGB颜色转换为十六进制

==============================================================================

const rgbToHex = (r, g, b) => “#” + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)

console.log( rgbToHex(255, 255, 255) ) // ‘#ffffff’

15、清除所有cookies

============================================================================

const clearCookies = () => document.cookie.split(‘;’).forEach(© => (document.cookie = c.replace(/^ +/, ‘’).replace(/=.*/, =;expires=${new Date().toUTCString()};path=/)))

16、按功能分组数组

========================================================================

根据某些特征对数组进行分组

const groupBy = (arr, fn) =>

arr.map(fn).reduce((acc, cur, i) => {

acc[cur] = […(acc[cur] || []), arr[i]];

return acc;

}, {});

console.log( groupBy([1, “2”, 3, “4”],(val) => typeof val) )

//{ number: [ 1, 3 ], string: [ ‘2’, ‘4’ ] }

console.log( groupBy([[1], [1,2], [3], [3,4]], (val) => typeof val.length) );

// { 1: [ [ 1 ], [ 3 ] ], 2: [ [ 1, 2 ], [ 3, 4 ] ] }

17、获取数组 、对象给定路径的值

===============================================================================

const getValue = (from, selectors) =>

selectors

.replace(/[([¹*)]/g, ‘.$1.’)

.split(‘.’)

.filter((item) => item !== ‘’)

.reduce((acc, cur) => {

if (acc instanceof Object) {

return acc[cur];

}

return void 0;

}, from);

const object = { a: [{ b: { c: 3 } }] };

const array = [{ a: { b: [1] } }, { c: 2 }];

console.log(getValue(object, ‘a[0].b.c’));

// 3

console.log(getValue(array, ‘[0].a.b[0]’));

// 1

console.log(getValue(array, ‘[1].c’));

// 2

console.log(getValue(array, ‘[0].a.b[0][2].c’));

// undefined

18、深拷贝

====================================================================

深拷贝功能考虑了几乎各种极端情况

const deepClone = (obj, map = new WeakMap()) => {

if (obj instanceof Date) return new Date(obj);

if (obj instanceof RegExp) return new RegExp(obj);

if (map.has(obj)) {

return map.get(obj);

}

const allDesc = Object.getOwnPropertyDescriptors(obj);

const cloneObj = Object.create(Object.getPrototypeOf(obj), allDesc);

map.set(obj, cloneObj);

for (const key of Reflect.ownKeys(obj)) {

const value = obj[key];

cloneObj[key] =

value instanceof Object && typeof value !== ‘function’

? deepClone(value, map)

value;

}

return cloneObj;

};

const symbolKey = Symbol(‘symbolKey’);

const originValue = {

num: 0,

str: ‘’,

boolean: true,

unf: void 0,

nul: null,

obj: { name: ‘object’, id: 1 },

arr: [0, 1, 2],

func() {

console.log(‘function’);

},

date: new Date(0),

reg: new RegExp(‘/regexp/ig’),

};

Object.defineProperty(originValue, ‘innumerable’, {

// writable is true to ensure that the assignment operator can be used

writable: true,

enumerable: false,

value: ‘innumerable’,

});

// Create circular reference

originValue.loop = originValue;

// Deep Copy

const clonedValue = deepClone(originValue);

// Change original value

originValue.arr.push(3);

originValue.obj.name = ‘newObject’;

// Remove circular reference

originValue.loop = ‘’;

originValuesymbolKey = ‘newSymbol’;

console.log('originValue: ', originValue);

console.log('clonedValue: ', clonedValue);

19、将URL参数转换为对象

============================================================================

从 URL 获取参数

const getURLParams = (url) => {

return (url.match(/([^?=&]+)(=([&]*))/g) || []).reduce((acc, cur) => {

const [k, v] = cur.split(‘=’);

const p = acc[k];

acc[k] = p ? (Array.isArray§ ? p : [p]).concat(v) : v;

return acc;

}, {});

};

console.log(getURLParams(‘google.com’));

// {}

console.log(getURLParams(‘https://www.google.com/?name=1&age=2’));

// { name: ‘1’, age: ‘2’ }

// 支持数组格式

console.log(getURLParams(‘https://www.google.com/?name=1&age=2&age=3’));

// { name: ‘1’, age: [ ‘2’, ‘3’ ] }

console.log(getURLParams(‘name=1&age=2’));

// { name: ‘1’, age: ‘2’ }

或者更直接的

console.log(Object.fromEntries(new URLSearchParams(window.location.search)));

20、格式化货币（整数部分每3位用逗号分割）

====================================================================================

不需要小数的情况

---

// 方法 1

function formatMoney(num) {

return num.toLocaleString();

}

// 方法 2

function formatMoney(num) {

const nf = new Intl.NumberFormat();

return nf.format(num);

}

//方法 3

function formatMoney(num) {

return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ‘,’);

}

// 方法 4

function formatMoney(num) {

const arr = num.toString().split(‘’);

let index = -3;

while (arr.length + index > 0) {

arr.splice(index, 0, ‘,’);

index -= 4;

}

return arr.join(‘’);

}

console.log(‘20220415’ + formatMoney(20220316));

// ‘20,220,316’

支持小数

---

小数部分必须为2位，不足2位补零，多于2位四舍五入

const numFormat = new Intl.NumberFormat(‘zh-CN’, { minimumFractionDigits: 2, maximumFractionDigits: 2 });

/**

• 整数部分每3位用逗号分割。

• 小数部分必须为2位，不足2位补零，多于2位四舍五入

*/

function formatCurrency(number) {

return numFormat.format(number);

}

// 测试0

console.log(‘0转换成’ + formatCurrency(0));

console.log(‘-0转换成’ + formatCurrency(-0));

console.log(‘0.0转换成’ + formatCurrency(0.0));

console.log(‘-0.0转换成’ + formatCurrency(-0.0));

// 测试1位整数

console.log(‘3转换成’ + formatCurrency(3));

console.log(‘-3转换成’ + formatCurrency(-3));

// 测试3位整数

console.log(‘123转换成’ + formatCurrency(123));

console.log(‘-123转换成’ + formatCurrency(-123));

// 测试5位整数

console.log(‘12345转换成’ + formatCurrency(12345));

console.log(‘-12345转换成’ + formatCurrency(-12345));

// 测试7位整数

console.log(‘1234567转换成’ + formatCurrency(1234567));

console.log(‘-1234567转换成’ + formatCurrency(-1234567));

// 测试1位小数

console.log(‘12345.3转换成’ + formatCurrency(12345.3));

console.log(‘-12345.3转换成’ + formatCurrency(-12345.3));

// 测试2位小数

console.log(‘12345.34转换成’ + formatCurrency(12345.34));

console.log(‘-12345.34转换成’ + formatCurrency(-12345.34));

// 测试3位小数

console.log(‘12345.344转换成’ + formatCurrency(12345.344));

console.log(‘-12345.344转换成’ + formatCurrency(-12345.344));

console.log(‘12345.345转换成’ + formatCurrency(12345.345));

console.log(‘-12345.345转换成’ + formatCurrency(-12345.345));

21、格式化字节

======================================================================

将字节转换为可读文本时

const formatBytes = (bytes, decimals = 2) => {

if (bytes < 0) return ‘’;

if (bytes <= 1) return ${bytes}B;

const k = 1024;

const dm = decimals < 0 ? 0 : decimals;

const sizes = [‘B’, ‘KB’, ‘MB’, ‘GB’, ‘TB’, ‘PB’, ‘EB’, ‘ZB’, ‘YB’];

const i = Math.floor(Math.log(bytes) / Math.log(k));

return ${parseFloat((bytes / k ** i).toFixed(dm))}${sizes[i]};

};

console.log(formatBytes(1024));

// 1KB

console.log(formatBytes(1024 ** 2));

// 1MB

console.log(formatBytes(1024 ** 3));

// 1GB

console.log(formatBytes(1024 ** 4));

// 1TB

22、将HTML String转为DOM

==================================================================================

将变量嵌入到 HTML 中，然后，通过函数将这些字符串转换成真实的 DOM

// 方法 1

const str2DOM = (str) => {

const div = document.createElement(‘div’);

div.innerHTML = str;

return div.firstElementChild;

}

// 方法 2

const str2DOM = (str) => {

return new DOMParser().parseFromString(str, ‘text/html’).body

.firstElementChild;

}

// 方法 3

const str2DOM = (str) => {

return document.createRange().createContextualFragment(str);

}

// 方法 4

const str2DOM = (str) => {

const div = document.createElement(‘div’);

div.insertAdjacentHTML(‘afterbegin’, str);

return div.firstElementChild;

}

// 测试

const main = (name) => {

const str = <h1>Hello ${name}</h1>;

const element = str2DOM(str);

console.log('element: ', element);

document.body.appendChild(element);

}

main(‘World’);

23、随机打乱数组排序

=========================================================================

对一个数组进行随机排列顺序

//随机的排列数组

const shuffleArray = (arr) => arr.sort(() => Math.random() - 0.5)

// 测试

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

console.log(shuffleArray(arr))

//[5, 2, 7, 6, 9, 8, 3, 10, 1, 4]

console.log(shuffleArray(arr))

//[6, 8, 10, 9, 3, 7, 1, 2, 4, 5]

console.log(shuffleArray(arr))

//[9, 5, 10, 4, 7, 8, 3, 2, 6, 1]

24、复制到剪贴板

=======================================================================

const copyToClipboard = (text) =>

navigator.clipboard?.writeText && navigator.clipboard.writeText(text)

// 测试

copyToClipboard(“Hello World!”)

//Ctrl+V 可以粘贴 Hello World!

25、检测暗模式

======================================================================

const isDarkMode = () =>

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。有需要面试题资料的朋友点击这里可以免费领取。

const copyToClipboard = (text) =>

navigator.clipboard?.writeText && navigator.clipboard.writeText(text)

// 测试

copyToClipboard(“Hello World!”)

//Ctrl+V 可以粘贴 Hello World!

25、检测暗模式

======================================================================

const isDarkMode = () =>

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-Rmx92jGQ-1712120093736)]

[外链图片转存中…(img-wKFmK4Zx-1712120093736)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

[外链图片转存中…(img-XHbvwmkf-1712120093736)]

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。有需要面试题资料的朋友点击这里可以免费领取。

[外链图片转存中…(img-7eOIjLYM-1712120093737)]

---

1. ] ↩︎