更多课程 选择中心


Web培训

400-111-8989

Web培训

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

  • 发布:Web前端培训
  • 来源:小小张 程序员成长指北
  • 时间:2019-05-30 16:02

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

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

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

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

· 改变原有数组的方法: (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培训官网,小编将继续为大家推荐相关面试题!最后祝愿小伙伴们能够面试成功,顺利找到工作!

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

预约申请免费试听课

填写下面表单即可预约申请免费试听! 怕学不会?助教全程陪读,随时解惑!担心就业?一地学习,可全国推荐就业!

上一篇:Web前端面试题汇总之JS篇(三)
下一篇:Web前端面试题汇总之JS篇(五)

2022年Web前端面试题目汇总!

Web前端面试题汇总(建议收藏)

2022年Web前端工程师面试题目汇总(附答案详解)

2022年前端常见面试题整理汇总(附答案详解)

  • 扫码领取资料

    回复关键字:视频资料

    免费领取 达内课程视频学习资料

Copyright © 2023 Tedu.cn All Rights Reserved 京ICP备08000853号-56 京公网安备 11010802029508号 达内时代科技集团有限公司 版权所有

选择城市和中心
黑龙江省

吉林省

河北省

贵州省

云南省

广西省

海南省