宝塔服务器面板，一键全能部署及管理，送你10850元礼包，点我领取

欢迎阅读我从入门到弃用的JS系列文章，更多精彩内容不断更新。欢迎关注：)

在整个前端开发系统中，JS可以说占据了绝大多数。从今天开始，我将分享JS的核心语法及其在实际项目中的应用！

写在前面

任何一种母语编程语言都会有自己的语法，而学习语法的过程是最枯燥的，所以接下来我就用另一种方式分享一下原来的语法，学习起来还是很有意思的！

本章目标

数组的创建和基本方法的高级用法数组

数组的创建和基础方法

用一句话概括了数组：它是用于加载任何类型数据的集合。说白了，JS中的任何类型的数据都可以添加到前面的数组中。

第一，数组的创建

创建数组有两种方法：

1、var arr=new Array()；

2、var arr=[]；

一般来说，建议您使用第二种方法创建数组。

二、数组的基本方法。

1.添加推送和删除弹出窗口。

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

但是看起来太无聊了。我现在已经学会了。对于初学者来说，我可能会忘记午餐时间。

然后呢？

让我们改变我们的想法。我们试图通过一个可视化界面来展示数组的操作，然后通过添加和删除数组将其映射到dom。

注意：示例根本没有考虑DOM性能，只是演示数组的操作过程如何。

我们先来看看效果

这里，默认情况下，数组中有一个元素，然后我可以通过推送和删除数组来添加和删除元素。

添加和删除数组后，再次调用render方法进行呈现。同样，我们可以用同样的方法尝试unshift和shift方法。

2.删除阵列中的拼接。

实际上，它有三种用法。首先，我们来看看deletion，arr.splice(index，num)；

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

当我们调用数组的拼接方法时，主要是找到我们想要删除的索引，也就是我们当前点击的元素的索引。

因为这个框中的DOM是动态创建的，所以我们不能直接将点击事件添加到每个小框中，而是添加到它们的父框中。我们只需要绑定click事件一次，里面的基本dom操作就不再启动了。

我们在渲染方法中获得所有的小正方形元素。

我们首先通过e.target找到我们的click dom元素，然后将其与我们获得的小方块列表中的每个项目进行比较。如果它们相等，我们可以找到相应的指数。我们在实际项目中经常使用这种方法。

2.插入或替换数组中的元素。我们可以将第三个参数传递给拼接参数。

arr.splice(索引、编号、项目)

第三个参数的作用是我们需要把它插入到索引的位置。如果num为0，我们可以认为是删除0插入1，也就是插件操作。如果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中的数组对象和基本用法和一些高级函数用法。

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

未完待续。。。