文章已收录专栏：JavaScript 进阶教程

作者：卡卡西最近怎么样

文章导读：

      欢迎来到 JavaScript 进阶的学习
  
  
  
  
  
，ES5 对 JS 的数组 
  
  
  
  
 ，字符串等内置对象的方法均有扩充
  
  
  
  
  
。这篇文章我们要掌握的是新增的几个 Array 内置对象的常用迭代（遍历）方法 


 


 


 


 


 ，分别是 forEach()
 
 
 
 
 
，filter()  
   
   
   
   
 ，some() 

 

 

 

 

 ，every()等

 

 

 

 

 
，这些新方法可以让我们更方便地操作数组 
  
  
  
  
 。

文章目录：

一：类的本质是什么

 二：forEach() 方法 

forEach() 的格式

forEach() 方法使用

 三：filter() 方法 

filter() 的格式

filter() 方法使用

执行过程

 四：some() 方法 

some() 的格式

some() 方法使用

执行过程

 五：every() 方法 

every() 的格式

every() 方法使用：

执行过程

一：类的本质是什么

       类的本质是什么？首先我们来看一下下面这个代码的输出结果：

<script> class Animal{} console.log(typeof Animal); </script>

我们惊讶的发现          ，类的本质竟然是函数 
 

 
 

 
 

 
 

 
 

 ，或者我们可以这样理解










，类就是构造函数的高端写法罢了               ，那它既然是个函数 
 
 
 
 
 
 
 
 
 
 ，是不是也拥有构造函数的一系列特性呢？例如有没有原型对象？类创建的实例化对象有没有__proto__属性呢？我们来证实一下：

<script> class Animal{ constructor(name,age){ this.name=name; this.age=age; } eat(){ console.log(我在吃食物); } } var dog=new Animal(旺财,5) console.log(Animal.prototype); console.log(--------------------------------------); console.log(dog.__proto__); console.log(--------------------------------------); console.log(Animal.prototype===dog.__proto__); </script>

这个输出结果和我们了解到的构造函数的属性完全一样















，已经可以证明          ，ES5中构造函数有的属性 
 
  
 
  
 
  
 
  
 
  ，ES6的类中也有









，可以说
  
  
  
  
  
，类就是构造函数的语法糖

【语法糖】语法糖就是一种实现功能相同 
  
  
  
  
 ，但是更便捷的写法 


 


 


 


 


 ，我们学过的自增（i++）就是一种语法糖
 
 
 
 
 
，它是i=i+1的语法糖

类的本质总结：

类的本质是函数 类内的方法都在类的原型对象prototype属性中 类的实例化对象也有个__proto__属性指向类的实例化对象 类就是构造函数的语法糖

 二：forEach() 方法 

forEach()可用于数组的遍历  
   
   
   
   
 ，其参数是一个回调函数

forEach() 的格式：

array.forEach( function( currentValue , index , arr ){ ...... } )

参数 currentValue index arr 参数含义 数组当前的值 

 

 

 

 

 ，写成 value 即可 数组当前值的索引 数组本身

forEach() 方法使用：

<script> var arr1=[1,2,3,4,5,6] arr1.forEach(function(value,index,arr){ console.log(当前值为：+ value); console.log(当前值的索引为+ index); console.log(数组本身为+ arr); console.log(------------------------------------); }) </script>

这就达到了遍历数组的作用

 

 

 

 

 
，并且可以轻松拿到当前索引

注意：参数不需要的话也不可省略（或者从后往前省略          ，因为顺序是固定的 
 

 
 

 
 

 
 

 
 

 ，第一位的就是当前值










，第二位的就是当前值的索引）

 三：filter() 方法 

filter() 用于数组元素的筛选               ，返回符合条件的数组元素 
 
 
 
 
 
 
 
 
 
 ，返回的是一个新的数组















，需要一个新定义的空数组去接收          ，其参数也是一个回调函数

filter() 的格式：

var newarray=array.filter( function( currentValue , index , arr ){ ...... } )

参数 currentValue index arr 参数含义 数组当前的值 
 
  
 
  
 
  
 
  
 
  ，写成 value 即可 数组当前值的索引 数组本身

filter() 方法使用：

<script> var arr1=[1,2,3,4,5,6] var newarr=arr1.filter(function(value,index,arr){ return value%2==0; }) console.log(newarr); </script>

执行过程如下：

首先拿来数组第一个元素









，不符合条件
  
  
  
  
  
，继续下一个元素 再拿来第二个元素 
  
  
  
  
 ，符合条件 


 


 


 


 


 ，放进新数组 newarr 再拿来第三个
 
 
 
 
 
，不符合条件  
   
   
   
   
 ，继续下一个元素 再拿来第四个 

 

 

 

 

 ，符合条件

 

 

 

 

 
，继续放进 newarr......以此类推

注意：需要一个新定义的数组去接收筛选过的数组          ，参数不需要的话也不可省略（或者从后往前省略 
 

 
 

 
 

 
 

 
 

 ，因为顺序是固定的










，第一位的就是当前值               ，第二位的就是当前值的索引）

 四：some() 方法 

some() 用于判断数组中是否有满足要求的元素 
 
 
 
 
 
 
 
 
 
 ，返回结果是一个布尔值















，存在则返回 true          ，不存在则返回 false 
 
  
 
  
 
  
 
  
 
  ，需要参数去接收返回的布尔值

some() 的格式：

var flag=array.some( function( currentValue , index , arr ){ ...... } )

参数 currentValue index arr 参数含义 数组当前的值









，写成 value 即可 数组当前值的索引 数组本身

some() 方法使用：

返回 true 的情况：

<script> var arr1=[1,2,3,4,5,6] var flag=arr1.some(function(value,index,arr){ return value==6; }) console.log(flag); </script>

返回 false 的情况：

<script> var arr1=[1,2,3,4,5,6] var flag=arr1.some(function(value,index,arr){ return value==7; }) console.log(flag); </script>

执行过程如下：

第一个返回true执行过程：

首先拿来数组第一个元素判断
  
  
  
  
  
，不符合条件 
  
  
  
  
 ，继续下一个元素 下一个元素也不符合条件 


 


 


 


 


 ，再继续下一个元素 下一个元素符合条件
 
 
 
 
 
，返回 true  
   
   
   
   
 ，不在继续往下执行判断

第二个返回false执行过程：

首先拿来数组第一个元素判断 

 

 

 

 

 ，不符合条件

 

 

 

 

 
，继续下一个元素 下一个元素也不符合条件          ，再继续下一个元素 下一个元素也不符合条件 
 

 
 

 
 

 
 

 
 

 ，再继续下一个元素 ......以此类推










，知道最后一个也不符合条件               ，返回 false

注意：需要定义一个参数去接受布尔值 


 


 


 


 


 。并且在判断过程中一旦有一个符合条件 
 
 
 
 
 
 
 
 
 
 ，就不再往下判断了















，直接返回 true          ，但是全不满足才返回 false
 
 
 
 
 
。参数不需要的话也不可省略（或者从后往前省略 
 
  
 
  
 
  
 
  
 
  ，因为顺序是固定的









，第一位的就是当前值
  
  
  
  
  
，第二位的就是当前值的索引）

 五：every() 方法 

every() 用于判断数组中元素是否全部满足要求 
  
  
  
  
 ，返回结果是一个布尔值 


 


 


 


 


 ，全部满足则返回 true
 
 
 
 
 
，有一个不满足则返回 false  
   
   
   
   
 ，需要参数去接收返回的布尔值

every() 的格式：

var flag=array.every( function( currentValue , index , arr ){ ...... } )

参数 currentValue index arr 参数含义 数组当前的值 

 

 

 

 

 ，写成 value 即可 数组当前值的索引 数组本身

every() 方法使用：

返回 true 的情况：

<script> var arr1=[1,2,3,4,5,6] var flag=arr1.every(function(value,index,arr){ return value>0; }) console.log(flag); </script>

返回 false 的情况：

<script> var arr1=[1,2,-3,4,5,6] var flag=arr1.every(function(value,index,arr){ return value>0; }) console.log(flag); </script>

执行过程如下：

第一个返回true执行过程：

首先拿来数组第一个元素判断

 

 

 

 

 
，符合条件          ，继续下一个元素 下一个元素也符合条件 
 

 
 

 
 

 
 

 
 

 ，再继续下一个元素 下一个元素也符合条件










，再继续......以此类推               ，直到最后一个元素也满足条件 
 
 
 
 
 
 
 
 
 
 ，则返回 true

第二个返回false执行过程：

首先拿来数组第一个元素判断















，符合条件          ，继续下一个元素 下一个元素也符合条件 
 
  
 
  
 
  
 
  
 
  ，再继续下一个元素 下一个元素不符合条件了









，返回 false
  
  
  
  
  
，不再往下继续判断

注意：需要定义一个参数去接受布尔值  
   
   
   
   
 。并且在判断过程中一旦有一个不符合条件 
  
  
  
  
 ，就不再往下判断了 


 


 


 


 


 ，直接返回 false
 
 
 
 
 
，但是全满足条件才返回 true 

 

 

 

 

 。参数不需要的话也不可省略（或者从后往前省略  
   
   
   
   
 ，因为顺序是固定的 

 

 

 

 

 ，第一位的就是当前值

 

 

 

 

 
，第二位的就是当前值的索引）

 创作不易          ，给个支持吧！！！