Web前端面试题:数组中常用的方法有哪些?

2019-05-3116:44:20WEB前端开发Comments3,138 views字数 2803阅读模式

Web前端面试题:数组中常用的方法有哪些?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

数组中常用的方法有哪些?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

开发中数组的使用场景非常多, 这里就简单整理总结一些常用的方法;从改变原有数据的方法、不改变原有数组的方法以及数据遍历的方法三方面总结。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

· 改变原有数组的方法: (9个)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

1. splice() 添加/删除数组元素文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

let a = [1, 2, 3, 4, 5, 6, 7];文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

let item = (0, 3); // [1,2,3]文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

(a); // [4,5,6,7]文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

// 从数组下标0开始,删除3个元素文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

let item1 = (0,3,'添加'); // [4,5,6]文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

(a); // ['添加',7]文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

// 从数组下标0开始,删除3个元素,并添加元素'添加'文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

2. sort() 数组排序文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

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

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

(function(a,b){

return a-b;

});

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

// 降序

(function(a,b){

return b-a;

});

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

3. pop() 删除一个数组中的最后的一个元素文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

4. shift() 删除数组的第一个元素文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

5. push() 向数组的末尾添加元素文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

6. unshift()向数组开头添加元素文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

7. reverse()文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

let a = [1,2,3];文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

(); // 3, 返回被删除的元素文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

(a); // [1,2]文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

(); // 1文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

(a); // [2]文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

("末尾添加"); // 2 ,返回数组长度文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

(a) ; [2,"末尾添加"]文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

("开头添加"); // 3文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

(a); //["开头添加", 2, "末尾添加"]文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

(); // ["末尾添加", 2, "开头添加"]文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

(a) // ["末尾添加", 2, "开头添加"]文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

8. ES6: copyWithin() 指定位置的成员复制到其他位置文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

let a = ['zhang', 'wang', 'zhou', 'wu', 'zheng'];文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

// 1位置开始被替换, 2位置开始读取要替换的 5位置前面停止替换文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

(1, 2, 5);文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

// ["zhang", "zhou", "wu", "zheng", "zheng"]文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

9. ES6: fill() 填充数组文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

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

// [7, 7, 7]

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

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

以上是9种会改变原数组的方法, 接下来是6种常用的不会改变原数组的方法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

· 不改变原数组的方法(6种)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

1. join() 数组转字符串文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

let a= ['hello','world'];文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

let str2=('+'); // 'hello+world'文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

2. cancat 合并两个或多个数组文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

let a = [1, 2, 3];文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

let b = [4, 5, 6];文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

//连接两个数组文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

let newVal=(b); // [1,2,3,4,5,6]文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

3. ES6扩展运算符...合并数组文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

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

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

(a,b);

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

4. indexOf() 查找数组是否存在某个元素,返回下标文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

let a=['啦啦',2,4,24,NaN]文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

(('啦')); // -1文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

(('啦啦')); // 0文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

5. ES7 includes() 查找数组是否包含某个元素 返回布尔文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

1. indexOf方法不能识别NaN文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

2. indexOf方法检查是否包含某个值不够语义化,需要判断是否不等于-1,表达不够直观文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

let a=['OB','Koro1',1,NaN];文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

(NaN); // true 识别NaN文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

('Koro1',100); // false 超过数组长度 不搜索文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

('Koro1',-3); // true 从倒数第三个元素开始搜索文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

6. slice() 浅拷贝数组的元素文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

字符串也有一个slice() 方法是用来提取字符串的,不要弄混了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

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

let b = (0,1);

(b, a);

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

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

(b,a);

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

· 遍历方法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

1. forEach:按升序为数组中含有效值的每一项执行一次回调函数。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

1.无法中途退出循环,只能用return退出本次回调,进行下一次回调.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

2.它总是返回 undefined值,即使你return了一个值。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

2. every 检测数组所有元素是否都符合判断条件文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

如果数组中检测到有一个元素不满足, 则整个表达式返回false,且元素不会再进行检测文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

function isBigEnough(element, index, array) {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

return element >= 10; // 判断数组中的所有元素是否都大于10文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

[12, 5, 8, 130, 44].every(isBigEnough); // false文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

[12, 54, 18, 130, 44].every(isBigEnough); // true文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

// 接受箭头函数写法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

[12, 5, 8, 130, 44].every(x => x >= 10); // false文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

[12, 54, 18, 130, 44].every(x => x >= 10); // true文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

3. some 数组中的是否有满足判断条件的元素文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

如果有一个元素满足条件,则表达式返回true, 剩余的元素不会再执行检测文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

4. filter 过滤原始数组,返回新数组文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

5. map 对数组中的每个元素进行处理,返回新的数组文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

6. reduce 为数组提供累加器,合并为一个值文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

reduce() 方法对累加器和数组中的每个元素(从左到右)应用一个函数,最终合并为一个值。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

// 数组求和

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) => (b),

[]

);

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

7. ES6:find()& findIndex() 根据条件找到数组成员文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

这两个方法都可以识别NaN,弥补了indexOf的不足.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

[1, 4, -5, 10,NaN].find((n) => (NaN, n));文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

// 返回元素NaN文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

[1, 4, -5, 10].findIndex((n) => n < 0);文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

// 返回索引2文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

8. ES6 keys()&values()&entries() 遍历键名、遍历键值、遍历键名+键值文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html

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

(index);

}

// 0

// 1

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

(elem);

}

// 'a'

// 'b'

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

(index, elem);

}

// 0 "a"

// 1 "b"
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/13244.html
  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/gcs/13244.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定