2024年Web前端最新javascript常用数组算法总结，头条面试题

最后

编程基础的初级开发者，计算机科学专业的学生，以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念，以优化代码，提高编程技能。这份笔记都是可以作为参考的。

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

9 hash[arr[i]] = true;

10 result.push(arr[i]);

11 }

12 }

13 return result;

14 }

方法3：

1 //排序后比较相邻，如果一样则放弃，否则加入到result。会出现与方法2一样的问题，如果数组中存在1,1,'1’这样的情况，则会排错

2 function unique (arr) { 3 arr.sort();

4 var result=[arr[0]];

5 for(var i = 1; i < arr.length; i++){

6 if( arr[i] !== arr[i-1]) {

7 result.push(arr[i]);

8 }

9 }

10 return result;

11 }

方法4：

1 //最简单但是效率最低的算法,也不会出现方法2和方法3出现的bug

2 function unique (arr) { 3 if(arr.length == 0) return;

4 var result = [arr[0]], isRepeate;

5 for( var i = 0, j = arr.length; i < j; i++ ){ 6 isRepeate = false;

7 for( var k = 0, h = result.length; k < h; k++){

8 if(result[k] === arr[i]){ 9 isRepeate = true;

10 break;

11 }

12 if(k == h) break;

13 }

14 if( !isRepeate ) result.push(arr[i]);

15 }

16 return result;

17 }

方法5：

1 //此方法充分利用了递归和indexOf方法，感谢网友@真爱像深蓝

2 var unique = function (arr, newArr) {

3 var num;

4

5 if (-1 == arr.indexOf(num = arr.shift())) newArr.push(num);

6

7 arr.length && unique(arr, newArr);

8 }

2、数组顺序扰乱

---

方法1：

1 //每次随机抽一个数并移动到新数组中

2 function shuffle(array) { 3 var copy = [], 4 n = array.length, 5 i;

6 // 如果还剩有元素则继续。。。

7 while (n) { 8 // 随机抽取一个元素

9 i = Math.floor(Math.random() * array.length);

10 // 如果这个元素之前没有被选中过。。

11 if (i in array) {

12 copy.push(array[i]);

13 delete array[i];

14 n–;

15 }

16 }

方法2：

1 //跟方法1类似，只不过通过splice来去掉原数组已选项

2 function shuffle(array) { 3 var copy = [], 4 n = array.length, 5 i;

6 // 如果还剩有元素。。

7 while (n) { 8 // 随机选取一个元素

9 i = Math.floor(Math.random() * n–);

10 // 移动到新数组中

11 copy.push(array.splice(i, 1)[0]);

12 }

13 return copy;

14 }

方法3：

//前面随机抽数依次跟末尾的数交换，后面依次前移，即：第一次前n个数随机抽一个跟第n个交换，第二次前n-1个数跟第n-1个交换，依次类推。

function shuffle(array) {

var m = array.length,

t, i;

// 如果还剩有元素…

while (m) {

// 随机选取一个元素…

i = Math.floor(Math.random() * m–);

// 与当前元素进行交换

t = array[m];

array[m] = array[i];

array[i] = t;

}

return array;

}

3、数组判断

---

方法1：

1 //自带的isArray方法

2 var array6 = [];

3 Array.isArray(array6 );//true

方法2：

1 //利用instanceof运算符

2 var array5 = [];

3 array5 instanceof Array;//true

方法3：

学习笔记

主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue等等

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

HTML/CSS

**HTML：**HTML基本结构，标签属性，事件属性，文本标签，多媒体标签，列表 / 表格 / 表单标签，其他语义化标签，网页结构，模块划分

**CSS：**CSS代码语法，CSS 放置位置，CSS的继承，选择器的种类/优先级，背景样式，字体样式，文本属性，基本样式，样式重置，盒模型样式，浮动float，定位position，浏览器默认样式

HTML5 /CSS3

**HTML5：**HTML5 的优势，HTML5 废弃元素，HTML5 新增元素，HTML5 表单相关元素和属性

**CSS3：**CSS3 新增选择器，CSS3 新增属性，新增变形动画属性，3D变形属性，CSS3 的过渡属性，CSS3 的动画属性，CSS3 新增多列属性，CSS3新增单位，弹性盒模型

JavaScript

**JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串

ML5 表单相关元素和属性

**CSS3：**CSS3 新增选择器，CSS3 新增属性，新增变形动画属性，3D变形属性，CSS3 的过渡属性，CSS3 的动画属性，CSS3 新增多列属性，CSS3新增单位，弹性盒模型

[外链图片转存中…(img-XY6haWRg-1714912885304)]

JavaScript

**JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串

[外链图片转存中…(img-zpbfFKhS-1714912885304)]