JavaScript数组你都掰扯不明白,简历上你敢写精通JavaScript?

举报
哪吒编程 发表于 2022/03/06 22:51:12 2022/03/06
【摘要】 目录 一、如何判断一个对象是不是数组?二、填充方法fill()1、ES6新增了两个方法2、fill() 三、复制方法```copyWithin()```四、栈方法五、队列方法六、排序方法七、...

一、如何判断一个对象是不是数组?

在只有一个全局作用域的时候,使用instanceof操作符就足矣:

if(value instanceof Array){
	//操作数组
}

 
  • 1
  • 2
  • 3

使用instanceof的前提是只有一个全局执行上下文,如果网页里有多个框架,则可能涉及两个不同的全局上下文,因此就会有两个不同版本的Array构造函数。如果要把数组从一个框架传到另一个框架,则这个数组的构造函数将有别于第二个框架内本地创建的数组。
为了解决这个问题,ECMAScript提供了 Array.isArray()方法。这个方法的目的就是确定一个值是否为数组,而不用管它是在哪个全局执行上下文中创建的。

if(Array.isArray(value)){
	//操作数组
}

 
  • 1
  • 2
  • 3

二、填充方法fill()

1、ES6新增了两个方法

批量复制方法copyWithin(),以及填充数组方法fill()
这两个方法的函数比较类似,都需要指定既有数组实例上的一个范围,包含开始索引,不包含结束索引,使用这个方法不会改变数组的大小。

2、fill()

使用fill()方法可以向一个已有的数组中插入全部或部分相同的值。开始索引用于指定开始填充的位置,它是可选的。如果不提供结束索引,则一直填充到数组末尾。负值索引从数组末尾开始计算。

例如:

(1)用1填充整个数组

const arr = [0,0,0,0,0]
arr.fill(1);//[1,1,1,1,1]
arr.fill(0);//[0,0,0,0,0]//重置为0

(2)用2填充索引大于等于2的元素

arr.fill(2,2);//[0,0,2,2,2]
arr.fill(0);//[0,0,0,0,0]//重置为0

(3)使用3填充索引大于等于1且小于3的元素

arr.fill(2,1,3);//[0,3,3,0,0]

(4)用4填充索引大于等于1且小于4的元素

arr.fill(4,-4,-1);//[0,4,4,4,0]

注意:fill()会自动忽略超出数组边界、零长度及方向相反的索引范围。

三、复制方法copyWithin()

copyWithin()会按照指定范围浅复制数组中的部分内容,然后将他们插入到指定索引开始的位置。

例如:

let arr,
    reset = () => arr = [0,1,2,3,4,5,6,7,8,9];
reset();

 
  • 1
  • 2
  • 3

(1)从arr中复制索引5开始的内容,插入到索引0开始的位置

arr.copyWithin(0,5);//[5,6,7,8,9,5,6,7,8,9]
reset();

//从arr中复制索引0开始到索引3结束的内容,插入到索引4开始的地方

arr.copyWithin(4,0,3);//[0,1,2,3,0,1,2,7,8,9]

四、栈方法

ECMAScript给数组提供了相当于栈操作的方法。
栈是一种后进先出(LIFO,Last-In-First-Out)的结构,也就是最近添加的元素先被删除。
插入push();
删除pop();

五、队列方法

队列以先进先出(FIFO,First-In-First-Out)形式的结构。
插入push();
取出shift();

六、排序方法

数组有两个方法可以用来对元素进行重排序:

  1. reverse()
  2. sort()

七、操作方法

1、合并concat()
2、切割slice()
slice()用于创建一个包含原有数组中一个或多个元素的新数组。

八、搜索和位置方法

ECMAScript提供两类搜索数组的方法,按严格相等搜索和按断言函数搜索。

1、严格相当搜索

ECMAScript提供了3中严格相等的搜索方法:

  1. indexOf()
  2. lastIndexOf()
  3. includes()

2、断言函数

  1. find()
  2. findIndex()

九、迭代方法

1、every()和some()

every()对数组每一项都进行传入的函数,如果对每一项函数都返回true,则这个方法返回true。
some()对数组每一项都运行传入的函数,如果有一项返函数返回true,则就返回true。
例如:

let nums = [1,2,3,4,5,4,3,2,1];
let ret = nums.every((item,index,array) => item > 2);//false
ret = nums.some((item,index,array) => item > 2);//true

 
  • 1
  • 2
  • 3

2、filter()

filter()是基于给定的函数来决定某一项是否应该包含在它返回的数组中。
比如,要返回一个所有元素都大于2的数组:
let ret = nums.filter((item,index,array) => item>2);//[3,4,5,4,3]

3、map()

map()返回一个数组,这个数组的每一项都是原始数组中同样位置的元素进行传入函数而返回的结果。
例如,对数组中的所有元素都乘以2:
let ret = nums.map((item,index ,array) => item * 2);//[2,4,6,8,10,8,6,4,2]

4、foreach()

foreach()只会对每一项运行传入的函数,没有返回值。本质上foreach()就相当于for循环遍历数组。

nums.foreach((item,index,array) => {
	//执行某些操作
});

 
  • 1
  • 2
  • 3

十、归并方法reduce()

reduce()对每一项都会运行的归并函数。
reduce()函数有四个参数:

  1. 上一个归并值
  2. 当前项
  3. 当前项的索引
  4. 数组本身
    这个函数返回的任何值都会作为下一次调用同一函数的第一个参数。如果没有传入可选的第二个参数(作为归并起始点),则第一次迭代将从数组的第二项开始,因此传递归并函数的第一个参数是数组的第一项,第二个参数是数组的第二项。
    可以使用reduce()对数组中所有值进行求和操作。
let nums = [1,2,3,4,5];
let ret = nums.reduce((prev,cur,index,array){
	return prev+cur;
});
alert(ret);//15

 
  • 1
  • 2
  • 3
  • 4
  • 5

往期精彩推荐:Java学习路线总结

十一、Vue思维导图

在这里插入图片描述

文章来源: blog.csdn.net,作者:哪 吒,版权归原作者所有,如需转载,请联系作者。

原文链接:blog.csdn.net/guorui_java/article/details/123293979

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。