JavaScript 数组拼接打印_JavaScript 内置对象数组

文末有2道面试题可以挑战一下自己。

数组 Array 是 JavaScript 内置对象,它其实是一个函数。在 Chrome 开发者工具 Console 中输入 Array,按回车键,得到以下结果:

6e52326a8fb082c597c2d3ba91ff7398.png

既然是函数,那么它就有一个原型属性 prototype,打印一下它的值,发现差不多有 30 多个函数,这些函数将在我们后续开发者扮演着重要的角色:

「温馨提示,如果你不知道某个对象有哪些方法,可以在浏览器的开发者工具的 Console中输入 xxx.prototype,比如 String.prototype」

98eee73f6a5814c63325cb11728b51d4.png

通常创建数组有 2 种方式,一种是通过数组直接量 [] ,另一种是通过 new Array。下面是创建数组的两种方式

62003761e6d66c02cf3f6630c3eb9fc7.png

数组中可以是任意类型的元素,下面的数组中同时包含了字符串、数字和对象;

041694c45c618186be5bad95a6fe377e.png

数组的核心内容已经学完了,剩下的就是如何利用原型对象中的 API 对数组进行操作了。一起看看这些 API。

concat,有拼接的意思,把多个数组中的值合并到一起。

94ed6405b9a676fa7b4ba04a6051f780.png

copyWithin(target: number, start: number, end?: number): this; 

复制数组中某个区间的数据到指定位置,会修改原数组。

fill(value:c T, start?: number, end?: number): this; 

给某个区间填充指定的值,这个比较有用,下面给数组中所有元素设置为 1。

1850facb9dacc9bb0fc08a612f94e5d6.png

find,查找第一个符合条件的元素,返回值为元素的值

findIndex,查找第一个符合条件的元素,返回值为元素在数组中的索引;参数是一个函数。

e3ed373d8e61e7d2f8a82290e36abd24.png

let numbers = [0, 5, 3, 6, 2];let e = numbers.findIndex(function(e, index, arr) {    return e > 5;});

forEach(callback(currentValue [, index [, array]])[,thisArg]),遍历数组,这种遍历不能暂停,只能遍历到结尾自动结束;

02c6c068fc458254520f5c9b2d210814.png

includes, 数组中是否包含某个数据;

a0fb89868f8bbb3e086c5525b07851ee.png

indexOf,某个 item 在数组中的下标,如果下标为 -1 说明数组中不存在这个元素,常用这个判断数组中是否包含某个元素;

1733e8154ff8e241a11326399d2e212b.png

join, 数组中的元素以某个字符串拼接起来;

80525888b77c08463368c55ed2487c05.png

lastIndexOf ,某个 item 在数组中的下标,如果下标为 -1 说明数组中不存在这个元素,从末尾开始遍历

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 删除数组中最后一个元素,返回值为删除的元素;

df3f08561652dda9c7fc68d440a2bc9f.png

push 在数组末尾插入一个元素,返回值为数组的长度;

14df86c91abf007750a9b9282c45ca71.png

reverse 翻转一个数组;

shift 删除数组中第一个元素,返回值为删除的元素;

slice(beg, end),取数组中某个范围内的元素组合成一个新的数组,不会改变原数组;

85d85c9535f6249c361817056dab70ac.png

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

057c1bcaf5490ee15045c7a576843b69.png

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值