JavaScript 数组你都掰扯不明白，还敢说精通 JavaScript ？| 赠书

Posted 2022-03-30 CSDN云计算

作者 | 哪吒

来源 | CSDN博客

最近小编在看文章的时候，总有很多刚刚入门的小白说精通这个，精通那个技术，更有意思的是，最近看到一则简历上说精通 javascript ，聊一聊发现数组还不明白，就对外说精通~所以今天小编就给大家说道说道，文末更是有福利，伙伴们可以积极领取呦~

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

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

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

使用instanceof的前提是只有一个全局执行上下文，如果网页里有多个框架，则可能涉及两个不同的全局上下文，因此就会有两个不同版本的Array构造函数。如果要把数组从一个框架传到另一个框架，则这个数组的构造函数将有别于第二个框架内本地创建的数组。

为了解决这个问题，ECMAScript提供了 Array.isArray()方法。这个方法的目的就是确定一个值是否为数组，而不用管它是在哪个全局执行上下文中创建的。

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

填充方法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）从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();

排序方法

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

• reverse()

• 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

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) => 
  //执行某些操作
);

归并方法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

在评论区留言你对本文的观点

CSDN云计算将选出五名优质留言

携手【中国青年出版社-中青雄狮图书】送出

《JavaScript从入门到实战开发最强教科书：完全版》

截至4月1日14:00点

往期推荐

如果让你来设计网络

写时复制就这么几行代码，还是不会？

留不住客户？该从你的系统上找找原因了！

明明还有大量内存，为啥报错“无法分配内存”？

点分享

点收藏

点点赞

点在看