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

2019年5月31日16:44:20 发表评论 50 views

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

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

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

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

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

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

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

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

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

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

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

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

2. sort() 数组排序

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() 删除一个数组中的最后的一个元素

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

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

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

7. reverse()

let a = [1,2,3];

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

(a); // [1,2]

(); // 1

(a); // [2]

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

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

("开头添加"); // 3

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

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

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

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

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

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

(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=('+'); // 'hello+world'

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

let a = [1, 2, 3];

let b = [4, 5, 6];

//连接两个数组

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

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

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() 查找数组是否存在某个元素,返回下标

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

(('啦')); // -1

(('啦啦')); // 0

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

1. indexOf方法不能识别NaN

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

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

(NaN); // true 识别NaN

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

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

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

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

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

let b = (0,1);

(b, a);

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

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

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

[]

);

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

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

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

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

// 返回元素NaN

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

// 返回索引2

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

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"

发表评论

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