Web前端面试题汇总之JS篇(四)

今天小编要跟大家分享的文章是关于Web前端面试题JS相关知识的数组中常用的方法有哪些?的文章。在之前的文章中小编也为大家分享过一些相关面试题，如果你想参加Web前面面试，正在做面试准备，就来看一看小编今天为大家准备的文章吧!

数组中常用的方法有哪些?

开发中数组的使用场景非常多, 这里就简单整理总结一些常用的方法;从改变原有数据的方法、不改变原有数组的方法以及数据遍历的方法三方面总结。

· 改变原有数组的方法： (9个)

1. splice() 添加/删除数组元素

let a = [1, 2, 3, 4, 5, 6, 7];

let item = a.splice(0, 3); // [1,2,3]

console.log(a); // [4,5,6,7]

// 从数组下标0开始，删除3个元素

let item1 = a.splice(0,3,'添加'); // [4,5,6]

console.log(a); // ['添加',7]

// 从数组下标0开始，删除3个元素，并添加元素'添加'

2. sort() 数组排序

var array = [10, 1, 3, 4,20,4,25,8];

// 升序 a-b < 0 a将排到b的前面，按照a的大小来排序的

array.sort(function(a,b){

return a-b;

});

console.log(array); // [1,3,4,4,8,10,20,25];

// 降序

array.sort(function(a,b){

return b-a;

});

console.log(array); // [25,20,10,8,4,4,3,1];

3. pop() 删除一个数组中的最后的一个元素

4. shift() 删除数组的第一个元素

5. push() 向数组的末尾添加元素

6. unshift()向数组开头添加元素

7. reverse()

let a = [1,2,3];

a.pop(); // 3, 返回被删除的元素

console.log(a); // [1,2]

a.shift(); // 1

console.log(a); // [2]

a.push("末尾添加"); // 2 ,返回数组长度

console.log(a) ; [2,"末尾添加"]

a.unshift("开头添加"); // 3

console.log(a); //["开头添加", 2, "末尾添加"]

a.reverse(); // ["末尾添加", 2, "开头添加"]

console.log(a) // ["末尾添加", 2, "开头添加"]

8. ES6: copyWithin() 指定位置的成员复制到其他位置

let a = ['zhang', 'wang', 'zhou', 'wu', 'zheng'];

// 1位置开始被替换, 2位置开始读取要替换的 5位置前面停止替换

a.copyWithin(1, 2, 5);

// ["zhang", "zhou", "wu", "zheng", "zheng"]

9. ES6: fill() 填充数组

['a', 'b', 'c'].fill(7)

// [7, 7, 7]

['a', 'b', 'c'].fill(7, 1, 2)

// ['a', 7, 'c']

以上是9种会改变原数组的方法, 接下来是6种常用的不会改变原数组的方法

· 不改变原数组的方法(6种)

1. join() 数组转字符串

let a= ['hello','world'];

let str2=a.join('+'); // 'hello+world'

2. cancat 合并两个或多个数组

let a = [1, 2, 3];

let b = [4, 5, 6];

//连接两个数组

let newVal=a.concat(b); // [1,2,3,4,5,6]

3. ES6扩展运算符...合并数组

let a = [2, 3, 4, 5]

let b = [ 4,...a, 4, 4]

console.log(a,b);

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

4. indexOf() 查找数组是否存在某个元素，返回下标

let a=['啦啦',2,4,24,NaN]

console.log(a.indexOf('啦')); // -1

console.log(a.indexOf('啦啦')); // 0

5. ES7 includes() 查找数组是否包含某个元素 返回布尔

1. indexOf方法不能识别NaN

2. indexOf方法检查是否包含某个值不够语义化，需要判断是否不等于-1，表达不够直观

let a=['OB','Koro1',1,NaN];

a.includes(NaN); // true 识别NaN

a.includes('Koro1',100); // false 超过数组长度 不搜索

a.includes('Koro1',-3); // true 从倒数第三个元素开始搜索

6. slice() 浅拷贝数组的元素

字符串也有一个slice() 方法是用来提取字符串的，不要弄混了。

let a = [{name: 'OBKoro1'}, {name: 'zhangsan'}];

let b = a.slice(0,1);

console.log(b, a);

// [{"name":"OBKoro1"}] [{"name":"OBKoro1"}]

a[0].name='改变原数组';

console.log(b,a);

// [{"name":"改变原数组"}] [{"name":"改变原数组"}]

· 遍历方法

1. forEach:按升序为数组中含有效值的每一项执行一次回调函数。

1.无法中途退出循环，只能用return退出本次回调，进行下一次回调.

2.它总是返回 undefined值,即使你return了一个值。

2. every 检测数组所有元素是否都符合判断条件

如果数组中检测到有一个元素不满足, 则整个表达式返回false,且元素不会再进行检测

function isBigEnough(element, index, array) {

return element >= 10; // 判断数组中的所有元素是否都大于10

}

[12, 5, 8, 130, 44].every(isBigEnough); // false

[12, 54, 18, 130, 44].every(isBigEnough); // true

// 接受箭头函数写法

[12, 5, 8, 130, 44].every(x => x >= 10); // false

[12, 54, 18, 130, 44].every(x => x >= 10); // true

3. some 数组中的是否有满足判断条件的元素

如果有一个元素满足条件，则表达式返回true, 剩余的元素不会再执行检测

4. filter 过滤原始数组，返回新数组

5. map 对数组中的每个元素进行处理，返回新的数组

6. reduce 为数组提供累加器，合并为一个值

reduce() 方法对累加器和数组中的每个元素(从左到右)应用一个函数，最终合并为一个值。

// 数组求和

let sum = [0, 1, 2, 3].reduce(function (a, b) {

return a + b;

}, 0);

// 6

// 将二维数组转化为一维 将数组元素展开

let flattened = [[0, 1], [2, 3], [4, 5]].reduce(

(a, b) => a.concat(b),

[]

);

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

7. ES6：find()& findIndex() 根据条件找到数组成员

这两个方法都可以识别NaN,弥补了indexOf的不足.

[1, 4, -5, 10,NaN].find((n) => Object.is(NaN, n));

// 返回元素NaN

[1, 4, -5, 10].findIndex((n) => n < 0);

// 返回索引2

8. ES6 keys()&values()&entries() 遍历键名、遍历键值、遍历键名+键值

for (let index of ['a', 'b'].keys()) {

console.log(index);

}

// 0

// 1

for (let elem of ['a', 'b'].values()) {

console.log(elem);

}

// 'a'

// 'b'

for (let [index, elem] of ['a', 'b'].entries()) {

console.log(index, elem);

}

// 0 "a"

// 1 "b"

以上就是小编今天为大家分享的关于Web前端面试题汇总之JS篇(四)关于数组中常用的方法有哪些?的文章，希望本篇文章能够对正准备参加Web前端面试的小伙伴们有所帮助。想要了解更多Web前端面试相关知识记得关注达内Web培训官网，小编将继续为大家推荐相关面试题!最后祝愿小伙伴们能够面试成功，顺利找到工作!

【免责声明：本文图片及文字信息均由小编转载自网络，旨在分享提供阅读，版权归原作者所有，如有侵权请联系我们进行删除。】