JavaScript 内置对象数组

文末有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); // 值是什么？

---

推荐阅读：

用2000字详细解答昨天的题目（再忙也要看一下）

期中考试之 var、let、const

第三阶段结语：告别网络编程

打破讨论薪资的红线 之 签名原理（漫画）

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array