文末有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, 数组中的元素以某个字符串拼接起来;
map,遍历数组中的元素,重新组成一个数组;
const array1 = [1, 4, 9, 16];// pass a function to mapconst 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 evenconst 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: 5console.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