js 数组删除_JS从入门到不放弃（一）数组篇，JS语法真枯燥？不妨这样试试

欢迎来到我的JS从入门到放弃专题系列文章，更多精彩内容持续更新中，欢迎关注 ：)

在整个前端开发的体系中，JS可以说是占有绝大部分，从今天开始，我将分享一JS的核心语法以及在真实项目中的运用！

写在前面

任何本门编程语言都会有自己的一套语法，而学习语法的过程是最枯燥的，那么接下来我将换种方式来分享原来语法这样学起来还是很有意思的！

本章目标

1. 数组的创建和基础方法
2. 数组的高级用法

数组的创建和基础方法

一句话来概括数组：它是用来装载任意类型数据的集合。再俗点讲就是，JS中的什么类型的数据都可以往数组里面添加。

一、数组的创建

数组的创建方法有两种：

1、var arr = new Array();2、var arr = [];

一般来说，更推荐大家使用第二种方式来创建数组

二、数组的基础方法。

1、添加 push,删除pop

相信学习JS基础的都知道，一般来说，我们都会教大家这样去学习它的API，像这样的

但是这样好像太没意思啦，太无聊啦，我现在是学会了，对于初学者而言，说不定一顿午饭的时间就给忘了。

那咋办？？？？

我们换个思路，我们试着把数组的操作通过可视化的界面展示出来， 然后通过对数组的添加的删除去映射到dom上去。

注：要示例完全没有考虑DOM性能的问题，完全是为了演示数组的操作过程是怎么样的。

先来看效果

这里我默认数组中有一个元素，然后我通过对数组的添加(push)和删除(pop)操作实现对元素的添加和删除。

对数组的添加和删除后，重新调用render方法去渲染。同理，我们可以通过相同的方法去试一下unshift和shift方法。

2、删除数组中的某一项splice

它其实有三种用法，先来看删除，arr.splice(index,num);

index表示索引，即我们要开始删除的位置，num表示是数量，即我们要删除多少个元素。我这样说又太无聊了。接下来我们来看下示例：

我们通过调用数组的splice方法时，主要是找到我们要删除的索引，这个索引就是我们当前点击的元素的索引。

因为这里面的DOM是我们动态创建的，所以我们不能直接在每一个小方块上加点击事件，而是要加在它们的父级box上。我们只需要绑定一次点击事件即可，这里面的基础dom操作就不再展开了。

我们在render方法中获取到我们的所有小方块元素

我们先通过e.target找到我们的点击dom元素，然后再和我们获取到的小方块列表的每一项进行对比，如果相等，我们就可以找到对应的索引。我们在实际项目中这种做法也是经常会用到。

2、在数组中插入或者替换一个元素，splice参数我们可以传第三个参数

arr.splice(index,num,item)

第三个参数的作用就是我们需要将它插入到index的位置。如果num为0，则我们可以看成是删除0个，插入一个，即插件操作，如果num！＝0,则先删除，然后插入，这时候效果就是替换了。

数组的高级用法

一、过滤filter

比如，现在有一批分数卡片，0－100分，我们需要找出及格的分数卡片有哪些？

filter方法和forEach方法一样，需要传入一个回调函数，不同的是，filter的回调里面会循环每一项，如果返回true,则满足条件，返回false则不满足，满足条件的项，将会返回到整个filter方法中。所以filter它会返回一个新的数组，这个数组就是我们通过过滤后的新数组了。

二、映射map

这种操作在和filter类似，不同于filter的是，它返回的数组长度将和原数组一致，我们可以对原数组进行改造，形成映射关系，比如，还是上面的示例，我们将他们的分数都加10分，看效果

看懂了filter,这个map也不难理解了，相信写过react项目的童鞋一定对这个map不陌生吧。

三、some

它会返回一个bool值，如果数组中只要有一项满足条件，那么就返回true,否则返回false。比如，在提交表单的时候，我们需要至少选择一个爱好才能提交。

只要有一个返回true,res则为true

四、every

从字面上理解的意思是每一个，它和some就是相反的，一般来说，这种一般多用在全选的功能上。

可以看到，我们只有把四个复选框都选中了，全选按钮才被选中，否则不选中。

总结：

介绍了JS中的数组对象和基本用法和一些高级函数用法。

这里是【畅哥聊技术】JS从入门到不放弃相关技术文章，更多精彩内容持续更新中，敬请期待。

未完待续。。。