22个实用JavaScript编程知识，可帮助你提升面试成功率_[1,100000,21,30,4]

2401_84446963

于 2024-05-15 18:48:24 发布

阅读量210

点赞数 4

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84446963/article/details/138919367

版权

程序员专栏收录该内容

156 篇文章 0 订阅

订阅专栏

计算机网络

HTTP 缓存
你知道 302 状态码是什么嘛？你平时浏览网页的过程中遇到过哪些 302 的场景？
HTTP 常用的请求方式，区别和用途？
HTTPS 是什么？具体流程
三次握手和四次挥手
你对 TCP 滑动窗口有了解嘛？
WebSocket与Ajax的区别
了解 WebSocket 嘛？
HTTP 如何实现长连接？在什么时候会超时？
TCP 如何保证有效传输及拥塞控制原理。
TCP 协议怎么保证可靠的，UDP 为什么不可靠？

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

算法

链表
字符串
数组问题
二叉树
排序算法
二分查找
动态规划
BFS
栈
DFS
回溯算法

array.map(item => { if(item >= 3) val.push(item); });

//[5, 6, 7, 8, 9, 9, 10]


你可以查看更多内容：https://stackblitz.com/edit/find-item-array


## **4、在对象数组中找到一个项目**


这些是可用于在对象数组中查找项目的方法。


1、every：此方法测试数组中的所有元素是否通过提供的功能实现的测试。它返回一个布尔值。

let testevery2 = users.every(val=> val.id>3);

//false


2、some：此方法测试数组中的至少一个元素是否通过了提供的功能实现的测试。它返回一个布尔值。

let testsome2 = users.some(val=> val.id>3); //true


3、 lodash includes：判断在collection中返回的值，如果可以在value找到，则返回true，否则返回false。

let lodashtest11 =_.includes({ ‘a’: 1, ‘b’: 2 }, 1);

//true

let lodashtest12 =_.includes(‘abcd’, ‘bc’);

//true


4、 findIndex：此方法返回满足提供的测试功能的数组中第一个元素的索引。否则，它返回-1，表明没有任何元素通过测试。

let testindex2 = users.findIndex(val => val.id > 1);

//3


5、 find：此方法返回提供的数组中满足提供的测试功能的第一个元素的值。如果没有值满足测试功能，则返回undefined。

let testfind2 = users.find(el => (el.id > 2));

//{“id”:3,“name”:“sara”}


6、filter：此方法创建一个新数组，其中所有元素都通过了由提供的功能实现的测试。

let testfilter2 = users.filter(val=> val.id>3);


7、map：此方法创建一个新数组，其中填充了对调用数组中每个元素调用提供的函数的结果。

let val2 = [];

users.map(item => { if(item.id >= 3) val2.push(item); });


## **5、对数组项排序**


可以使用sort方法对数组进行排序。


该sort()方法对数组中的元素进行适当排序，然后返回排序后的数组。默认的排序顺序是升序，建立在将元素转换为字符串，然后比较其UTF-16代码单元值的序列的基础上。

const months = [‘March’, ‘Jan’, ‘Feb’, ‘Dec’];

months.sort();

console.log(months);

// expected output: Array [“Dec”, “Feb”, “Jan”, “March”]

const array1 = [1, 30, 4, 21, 100000];

array1.sort();

console.log(array1);

// expected output: Array [1, 100000, 21, 30, 4]


## **6、对具有特定属性的对象数组进行排序**


这些是可以使用对象的特定属性对对象数组进行排序的方法。


1、简单排序：此方法对数组中的元素进行适当排序，并返回排序后的数组。

let data = [{

id: “3”,

city: “toronto”,

state: “TR”,

zip: “75201”,

price: “123451”

{

id: “1”,

city: “anand”,

state: “AN”,

zip: “94210”,

price: “345678”

{

id: “5”,

city: “sudbury”,

state: “SB”,

zip: “00110”,

price: “789045”

}

];

let sorttest2 = data.sort((a, b) => (a.id < b.id ? -1 : Number(a.id > b.id)));console.log("sort test 2 ", sorttest2);

//output

{

“id”: “1”,

“city”: “anand”,

“state”: “AN”,

“zip”: “94210”,

“price”: “345678”

}, {

“id”: “3”,

“city”: “toronto”,

“state”: “TR”,

“zip”: “75201”,

“price”: “123451”

}, {

“id”: “5”,

“city”: “sudbury”,

“state”: “SB”,

“zip”: “00110”,

“price”: “789045”

}]


2、localCompare：此方法返回一个数字，该数字指示参考字符串是按排序顺序位于给定字符串之前，之后还是与之相同。

let sorttest2 = data.sort((a, b) => (a.id < b.id ? -1 : Number(a.id > b.id)));

//output

[{

“id”: “1”,

“city”: “anand”,

“state”: “AN”,

“zip”: “94210”,

“price”: “345678”

}, {

“id”: “3”,

“city”: “toronto”,

“state”: “TR”,

“zip”: “75201”,

“price”: “123451”

}, {

“id”: “5”,

“city”: “sudbury”,

“state”: “SB”,

“zip”: “00110”,

“price”: “789045”

}]


3、用多个字段排序


该parseInt()函数解析一个字符串参数，并返回一个指定基数的整数（数学数字系统中的基数）。

let sorttest4 = data.sort(function(left, right) {

var city_order = left.city.localeCompare(right.city);

var price_order = parseInt(left.price) - parseInt(right.price);

return city_order || -price_order;

});

//output

[{

“id”: “1”,

“city”: “anand”,

“state”: “AN”,

“zip”: “94210”,

“price”: “345678”

}, {

“id”: “5”,

“city”: “sudbury”,

“state”: “SB”,

“zip”: “00110”,

“price”: “789045”

}, {

“id”: “3”,

“city”: “toronto”,

“state”: “TR”,

“zip”: “75201”,

“price”: “123451”

}]


4、 Lodash \_sortBy：创建一个元素数组，并按照在每个迭代中运行集合中每个元素的结果，以升序排序。

let sorttest6 = _.sortBy(data, [“id”, “city”]);

//output

[{

“id”: “1”,

“city”: “anand”,

“state”: “AN”,

“zip”: “94210”,

“price”: “345678”

}, {

“id”: “3”,

“city”: “toronto”,

“state”: “TR”,

“zip”: “75201”,

“price”: “123451”

}, {

“id”: “5”,

“city”: “sudbury”,

“state”: “SB”,

“zip”: “00110”,

“price”: “789045”

}]


## **7、对日期数组进行排序**


1、使用sort

let isDescending = false; //set to true for Descending

let dates = [“1/7/2021”, “1/6/2021”, “8/18/2020”, “8/6/2020”];

let sorteddates = dates.sort((a, b) => isDescending ? new Date(b).getTime() - new Date(a).getTime() : new Date(a).getTime() - new Date(b).getTime());

console.log(sorteddates);

//[“8/6/2020”, “8/18/2020”, “1/6/2021”, “1/7/2021”]


2、使用Lodash

let arr = [{

date: “1/7/2021”

{

date: “1/6/2021”

{

date: “1/5/2020”

}

];

arr = _.sortBy(arr, function(dateObj) {

return new Date(dateObj.date);

});

console.log(“sort date”, arr);

//[{“name”:“test3”,“date”:“1/5/2020”},{“name”:“test2”,“date”:“1/6/2021”},{“name”:“test1”,“date”:“1/7/2021”}]


3、使用Lodash（按月和年排序）

let yearAndMonth = [

{ “year”: 2016, “month”: “FEBRUARY” },

{ “year”: 2015, “month”: “MARCH” },

{ “year”: 2021, “month”: “JANUARY” },

{ “year”: 2021, “month”: “FEBRUARY” }

]

let value= _.sortBy(yearAndMonth, a => new Date(1 + a.month + a.year));

console.log('Sorted Result: ', value);

//[{“year”:2015,“month”:“MARCH”},{“year”:2016,“month”:“FEBRUARY”},{“year”:2021,“month”:“JANUARY”},{“year”:2021,“month”:“FEBRUARY”}]


## **8、从阵列中删除一个项目**


1、 pop：此方法从数组中删除最后一个元素并返回该元素。此方法更改数组的长度。

let arraypoptest = [2, 1, 2, 5, 6, 7, 8, 9, 9, 10];let testpop = arraypoptest.pop();

console.log(“array pop”, testpop,“-”, arraypoptest);

//10 - [2, 1, 2, 5, 6, 7, 8, 9, 9];


2、shift：此方法从数组中删除第一个元素并返回该删除的元素。此方法更改数组的长度。

let arrayshifttest = [2, 1, 2, 5, 6, 7, 8, 9, 9, 10];

let testshift = arrayshifttest.shift();

console.log(“array shift”, testshift,“-”, arrayshifttest);

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


3、 slice：此方法将数组的一部分的浅表副本返回到一个新的数组对象中，该对象选自startto end（end不包括），其中startandend表示该数组中各项的索引。原始数组将不会被修改。

let arrayslicetest = [2, 1, 2, 5, 6, 7, 8, 9, 9, 10];

let testslice = arrayslicetest.slice(0, 3);

console.log(“array slice”, testslice, arrayslicetest);

//not changed original array

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


4、 splice：此方法通过删除或替换现有元素和/或在适当位置添加新元素来更改数组的内容。

let arraysplicetest = [2, 1, 2, 5, 6, 7, 8, 9, 9, 10];

let testsplice = arrayslicetest.splice(0, 3);

//[2, 1, 2]


5、 filter：此方法创建一个新数组，其中所有元素都通过了由提供的功能实现的测试。


数组：

let testarr = [2, 1, 2, 5, 6, 7, 8, 9, 9, 10];

let testarr2 = [2, 1, 2, 5, 6, 7, 8, 9, 9, 10];

let filtered = testarr.filter(function(value, index, arr) {

return value > 5;

});

let filtered2 = testarr2.filter(item => item !== 2);

console.log(“filter example 1”, filtered);

//[6, 7, 8, 9, 9, 10]

console.log(“filter example 2”, filtered2);

//[1, 5, 6, 7, 8, 9, 9, 10]


过滤并去除多个值：

let forDeletion = [2, 3, 5];

let mularr = [1, 2, 3, 4, 5, 3];

mularr = mularr.filter(item => !forDeletion.includes(item));

console.log(“multiple value deletion with filter”, mularr);

//[1, 4]


6、delete运算符： JavaScript delete 从对象中删除属性；如果不再保存对相同属性的引用，则最终将自动释放该引用。

let ar = [2, 1, 2, 5, 6, 7, 8, 9, 9, 10];

delete ar[4]; // delete element with index 4

console.log(ar);

//[2, 1, 2, 5, undefined, 7, 8, 9, 9, 10]


7、 lodash删除：\_remove删除从所有元素array的是predicate返回truthy对于和返回被删除的元素的数组。

let arrlodashtest = [2, 1, 2, 5, 6, 7, 8, 9, 9, 10];

let evens = _.remove(arrlodashtest, function(n) {

return n % 2 == 0;

});

console.log(“lodash remove array”, arrlodashtest);

//[1, 5, 7, 9, 9]





## **9、从对象数组中删除一个项目**


1、 pop：此方法从数组中删除最后一个元素并返回该元素。此方法更改数组的长度。

let users1 = [{

id: 1,

}, {

id: 2,

}, {

id: 3,

}, {

id: 4,

}];

let testpop1 = users1.pop();

console.log(

“array of objects pop”,

JSON.stringify(testpop1),“-”

JSON.stringify(users1)

);

//{“id”:4,“name”:“sara”} - [{“id”:1,“name”:“ted”},{“id”:2,“name”:“mike”},{“id”:3,“name”:“bob”}]


2、shift：此方法从数组中删除第一个元素并返回该删除的元素。此方法更改数组的长度。

let users2 = [

{ id: 1, name: “ted” },

{ id: 2, name: “mike” },

{ id: 3, name: “bob” },

{ id: 4, name: “sara” }

];

let testshift1 = users2.shift();

console.log(“array of objects shift”, JSON.stringify(testshift1),“-”, JSON.stringify(users2));

//{“id”:1,“name”:“ted”} - [{“id”:2,“name”:“mike”},{“id”:3,“name”:“bob”},{“id”:4,“name”:“sara”}]


3、 slice：此方法将数组的一部分的浅表副本返回到一个新的数组对象中，该对象选自startto end（不包括end），其中startandend表示该数组中各项的索引。原始数组将不会被修改。

let users3 = [

{ id: 1, name: “ted” },

{ id: 2, name: “mike” },

{ id: 3, name: “bob” },

{ id: 4, name: “sara” }

];

let testslice1 = users3.slice(0, 3);

console.log(“array of objects slice”, JSON.stringify(testslice1));

//not changed original array

//[{“id”:1,“name”:“ted”},{“id”:2,“name”:“mike”},{“id”:3,“name”:“bob”}]


4、splice：此方法通过删除或替换现有元素和/，或者在适当位置添加新元素来更改数组的内容。

let users4 = [

{ id: 1, name: “ted” },

{ id: 2, name: “mike” },

{ id: 3, name: “bob” },

{ id: 4, name: “sara” }

];

let testspice1 = users3.splice(0, 3);

console.log(“array of objects splice”, JSON.stringify(testsplice));

//[{“id”:1,“name”:“ted”},{“id”:2,“name”:“mike”},{“id”:3,“name”:“bob”}]


5、filter：此方法创建一个新数组，其中所有元素都通过了由提供的功能实现的测试。

let users7 = [

{ id: 1, name: “ted” },

{ id: 2, name: “mike” },

{ id: 3, name: “bob” },

{ id: 4, name: “sara” }

];

let filterObj = users7.filter(item => item.id !== 2);

console.log(“filter example array of objects”, filterObj);

//[{“id”:1,“name”:“ted”},{“id”:3,“name”:“bob”},{“id”:4,“name”:“sara”}]


6、lodash删除：\_remove删除从所有元素array的是predicate返回truthy对于和返回被删除的元素的数组。

let users8 = [

{ id: 1, name: “ted” },

{ id: 2, name: “mike” },

{ id: 3, name: “bob” },

{ id: 4, name: “sara” }

];

let evensObj = _.remove(users8, function(n) {

return n.id % 2 == 0;

});

console.log(“lodash remove array of object”, JSON.stringify(evensObj));

//[{“id”:2,“name”:“mike”},{“id”:4,“name”:“sara”}]


## **10、从数组中给定的字符串中查找字符数**


1、字符串匹配方法


该match()方法检索将字符串与正则表达式匹配的结果。

const test1 = (“atit patel”.match(/a/g)||[]).length

console.log(test1); //2


2、字符串拆分方法


该split()方法将a String分为子字符串的有序列表，然后将这些子字符串放入数组中，然后返回该数组。

const test2 =“atit patel”.split(“a”).length-1

console.log(test2); //2


3、indexOf方法


该indexOf()方法返回String第一次出现指定值的调用对象内的索引，从开始搜索fromIndex。如果找不到该值，则返回-1。

let stringsearch = “a” ,str = “atit patel”;

for(var count=-1,index=-2; index != -1; count++,index=str.indexOf(stringsearch,index+1) );

console.log(count); //2


4、filter方法


该filter()方法创建一个新数组，其中所有元素都通过了由提供的功能实现的测试。

const mainStr = ‘atit patel’;

const test3 = […mainStr].filter(l => l === ‘a’).length;

console.log(test3); //2


5、reduce方法


该reduce()方法在数组的每个元素上执行reducer函数（由你提供），从而产生单个输出值。

const mainStr1 = ‘atit patel’;

const test4 = […mainStr1].reduce((a, c) => c === ‘a’ ? ++a : a, 0);

console.log(test4); //2


## **11、从数组中给定的字符串中查找每个字符的出现次数**


1、我们可以添加reduce方法，该方法可以在迭代后返回对象

let s = ‘atit patel’;

let test5 = […s].reduce((a, e) => { a[e] = a[e] ? a[e] + 1 : 1; return a }, {});

console.log(test5); //{a: 2,e: 1,i: 1,l: 1,p: 1,t: 3}


2、与具有“或”运算符的方法6相同

let test6 = […s].reduce((res, char) => (res[char] = (res[char] || 0) + 1, res), {})

console.log(test6);//{a: 2,e: 1,i: 1,l: 1,p: 1,t: 3}


## **12、重命名对象数组中的对象属性**


1、使用Map：此方法创建一个新数组，其中填充了对调用数组中每个元素调用提供的函数的结果。

let countries = [

{ id: 1, name: “india” },

{ id: 2, name: “canada” },

{ id: 3, name: “america” }

];

const transformed = countries.map(({ id, name }) => ({

label: id,

value: name

}));

console.log(“1”, JSON.stringify(transformed));[{“label”:1,“value”:“india”},{“label”:2,“value”:“canada”},{“label”:3,“value”:“america”}]


2、使用带有参数的映射

const transformed2 = countries.map(({ id: label, name: value }) => ({

label,

value

}));

console.log(“2”, JSON.stringify(transformed2));

[{“label”:1,“value”:“india”},{“label”:2,“value”:“canada”},{“label”:3,“value”:“america”}]


3、使用lodash：\_.mapKeys方法创建一个对象，该对象具有与和相同的值，该对象object和密钥通过运行objectthru的每个自己的可枚举字符串键控属性生成iteratee。

const test1= _.mapKeys({ a: 1, b: 2 }, function(value, key) {

return key + value;

});

console.log(“3”,test1);

//{a1: 1, b2: 2}


如果我们想重命名对象键怎么办？让我们来看看解决方案。


4、将lodash用于值的对象

var users = {

‘atit’: { ‘user’: ‘atit’, ‘age’: 40 },

‘mahesh’: { ‘user’: ‘mahesh’, ‘age’: 15 }

};

const test2 = _.mapValues(users, function(o) { return o.age; });

console.log(“4”,test2);

//{atit: 40, mahesh: 15}

//shorthand

const test3 =_.mapValues(users, ‘age’);

console.log(“5”,test3);

//{atit: 40, mahesh: 15}


5、使用对象解构：该解构赋值语法是JavaScript表达式，使得它可以从阵列解压缩的值，或从属性的对象，为不同的变量。

const rename = (({id: a_b_c, …rest}) => ({a_b_c, …rest}))

console.log(rename({id: 1, val: 2}))

//{a_b_c: 1, val: 2}


## **13、如何合并两个数组并创建一个新数组？**


这可以简单地通过使用扩展运算符来实现。

var arr1 = [‘a’, ‘b’, ‘c’]

var arr2 = [‘d’, ‘e’]

var merged = […arr1, …arr2]

console.log(merged)


## **14、一个数字数组的总和**


## 1、reduce可用于遍历数组，将当前元素值添加到先前元素值的总和中。

console.log(

[1, 2, 3, 4].reduce((a, b) => a + b, 0)

)

console.log(

[].reduce((a, b) => a + b, 0)

)//10


2、使用Lodash

array = [1, 2, 3, 4];

sum = _.sum(array); // sum == 10


## **15、比较两个对象数组，删除重复项，根据属性合并对象**


我们确实需要比较两个不同的对象数组，并且如果两个对象匹配特定的属性值，则希望合并这两个对象，可以使用filter方法来实现。


该filter()方法创建一个新数组，其中所有元素都通过了由提供的功能实现的测试。


让我们创建测试数据。

let array1 = [

{ id: “50”, active: “a”, value: 10 },

{ id: “51”, active: “a”, value: 11 }

算法

冒泡排序
选择排序
快速排序
二叉树查找: 最大值、最小值、固定值
二叉树遍历
二叉树的最大深度
给予链表中的任一节点，把它删除掉
链表倒叙
如何判断一个单链表有环

由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！

如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

这可以简单地通过使用扩展运算符来实现。

var arr1 = ['a', 'b', 'c']

var arr2 = ['d', 'e']

var merged = [...arr1, ...arr2]

console.log(merged)

14、一个数字数组的总和

1、reduce可用于遍历数组，将当前元素值添加到先前元素值的总和中。

console.log(

[1, 2, 3, 4].reduce((a, b) => a + b, 0)

)

console.log(

[].reduce((a, b) => a + b, 0)

)//10

2、使用Lodash

array = [1, 2, 3, 4];

sum = _.sum(array); // sum == 10

15、比较两个对象数组，删除重复项，根据属性合并对象

我们确实需要比较两个不同的对象数组，并且如果两个对象匹配特定的属性值，则希望合并这两个对象，可以使用filter方法来实现。

该filter()方法创建一个新数组，其中所有元素都通过了由提供的功能实现的测试。

让我们创建测试数据。

let array1 = [

{ id: "50", active: "a", value: 10 },

{ id: "51", active: "a", value: 11 }



## 算法

1. 冒泡排序

2. 选择排序

3. 快速排序

4. 二叉树查找: 最大值、最小值、固定值

5. 二叉树遍历

6. 二叉树的最大深度

7. 给予链表中的任一节点，把它删除掉

8. 链表倒叙

9. 如何判断一个单链表有环

   [外链图片转存中...(img-5XAOjwp0-1715770081536)]

>由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！


**[如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

2401_84446963

关注

4
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
22个实用JavaScript编程知识，可帮助你提升面试成功率_[1,100000,21,30,4]

由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！我们确实需要比较两个不同的对象数组，并且如果两个对象匹配特定的属性值，则希望合并这两个对象，可以使用filter方法来实现。你平时浏览网页的过程中遇到过哪些 302 的场景？该filter()方法创建一个新数组，其中所有元素都通过了由提供的功能实现的测试。TCP 协议怎么保证可靠的，UDP 为什么不可靠？HTTP 常用的请求方式，区别和用途？2、使用Lodash。
复制链接

扫一扫