文末有2道面试题可以挑战一下自己。
数组 Array 是 JavaScript 内置对象,它其实是一个函数。在 Chrome 开发者工具 Console 中输入 Array,按回车键,得到以下结果:
既然是函数,那么它就有一个原型属性 prototype,打印一下它的值,发现差不多有 30 多个函数,这些函数将在我们后续开发者扮演着重要的角色:
「温馨提示,如果你不知道某个对象有哪些方法,可以在浏览器的开发者工具的 Console中输入 xxx.prototype,比如 String.prototype」
通常创建数组有 2 种方式,一种是通过数组直接量 [] ,另一种是通过 new Array。下面是创建数组的两种方式
数组中可以是任意类型的元素,下面的数组中同时包含了字符串、数字和对象;
数组的核心内容已经学完了,剩下的就是如何利用原型对象中的 API 对数组进行操作了。一起看看这些 API。
concat,有拼接的意思,把多个数组中的值合并到一起。
copyWithin(target: number, start: number, end?: number): this;
复制数组中某个区间的数据到指定位置,会修改原数组。
fill(value:c T, start?: number, end?: number): this;
给某个区间填充指定的值,这个比较有用,下面给数组中所有元素设置为 1。
find,查找第一个符合条件的元素,返回值为元素的值;
findIndex,查找第一个符合条件的元素,返回值为元素在数组中的索引;参数是一个函数。
let numbers = [0, 5, 3, 6, 2];
let e = numbers.findIndex(function(e, index, arr) {
return e > 5;
});
forEach(callback(currentValue [, index [, array]])[,thisArg]),遍历数组,这种遍历不能暂停,只能遍历到结尾自动结束;
includes, 数组中是否包含某个数据;
indexOf,某个 item 在数组中的下标,如果下标为 -1 说明数组中不存在这个元素,常用这个判断数组中是否包含某个元素;
join, 数组中的元素以某个字符串拼接起来;
lastIndexOf,某个 item 在数组中的下标,如果下标为 -1 说明数组中不存在这个元素,从末尾开始遍历;
map,遍历数组中的元素,重新组成一个数组;
const array1 = [1, 4, 9, 16];
// pass a function to map
const map1 = array1.map(x => x * 2);
console.log(map1);
// expected output: Array [2, 8, 18, 32]
pop 删除数组中最后一个元素,返回值为删除的元素;
push 在数组末尾插入一个元素,返回值为数组的长度;
reverse 翻转一个数组;
shift 删除数组中第一个元素,返回值为删除的元素;
slice(beg, end),取数组中某个范围内的元素组合成一个新的数组,不会改变原数组;
some 查询数组中是否有符合某个条件的元素,比如查看数组是否存在偶数。
const array = [1, 2, 3, 4, 5];
// checks whether an element is even
const even = (element) => element % 2 === 0;
console.log(array.some(even));
// expected output: true
splice(start[, deleteCount[, item1[, item2[, ...]]]]),删除或插入元素到指定的位置。在数组第二个位置插入元素 drum,不进行删除。
let myFish = ['angel', 'clown', 'mandarin', 'sturgeon']
let removed = myFish.splice(2, 0, 'drum')
// myFish is ["angel", "clown", "drum", "mandarin", "sturgeon"]
// removed is [], no elements removed
unshift 从头在数组中插入元素。
const array1 = [1, 2, 3];
console.log(array1.unshift(4, 5));
// expected output: 5
console.log(array1);
// expected output: Array [4, 5, 1, 2, 3]
总结
本节内容主要介绍了数组相关的 API,只是做了简单的介绍,在实际的使用的过程中可以查看文末 MDN 关于各个 API 的详细介绍。今天的内容比较简单,大家加油。
最后做几道面试题,挑战一下,今天的打卡指令就是写错你的答案,最好能给出解析;
第 1 题:
let names = ['suyan', '前端小课'];
names.length = 0;
console.log(names[0]); // 它的值是?
第 2 题:
var numbers = [];
for(var i = 0; i < 4; i++) {
numbers.push(function() {
return i;
});
}
var result = numbers.map(function(e) {
return e();
});
console.log(result); // 值是什么?
推荐阅读:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array