JS 数组新增方法

简介: JS 数组新增方法

文章导读:


     欢迎来到 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。参数不需要的话也不可省略(或者从后往前省略,因为顺序是固定的,第一位的就是当前值,第二位的就是当前值的索引)


相关文章
|
5月前
|
监控 负载均衡 JavaScript
有哪些有效的方法可以优化Node.js应用的性能?
有哪些有效的方法可以优化Node.js应用的性能?
308 69
|
4月前
|
JavaScript Linux 内存技术
Debian 11系统下Node.js版本更新方法详解
本指南详细介绍在Linux系统中安装和管理Node.js的步骤。首先检查现有环境,包括查看当前版本和清除旧版本;接着通过NodeSource仓库安装最新版Node.js并验证安装结果。推荐使用nvm(Node Version Manager)进行多版本管理,便于切换和设置默认版本。同时,提供常见问题解决方法,如权限错误处理和全局模块迁移方案,以及版本回滚操作,确保用户能够灵活应对不同需求。
341 0
|
4月前
|
JavaScript Linux 内存技术
Debian 11系统下Node.js版本更新方法
Debian 11更新Node.js主要就是这三种方式,无论你是初涉其中的新手还是找寻挑战的专家,总有一种方式能满足你的需求。现在,你已经是这个
372 80
|
8月前
|
前端开发 JavaScript
有没有方法可以保证在JavaScript中多个异步操作的执行顺序?
有没有方法可以保证在JavaScript中多个异步操作的执行顺序?
319 58
|
6月前
|
JavaScript 前端开发 Java
js 垃圾回收机制的方法
JS回收机制方法讲解
|
7月前
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
7月前
|
JavaScript 前端开发 Java
深入理解 JavaScript 中的 Array.find() 方法:原理、性能优势与实用案例详解
Array.find() 是 JavaScript 数组方法中一个非常实用和强大的工具。它不仅提供了简洁的查找操作,还具有性能上的独特优势:返回的引用能够直接影响原数组的数据内容,使得数据更新更加高效。通过各种场景的展示,我们可以看到 Array.find() 在更新、条件查找和嵌套结构查找等场景中的广泛应用。 在实际开发中,掌握 Array.find() 的特性和使用技巧,可以让代码更加简洁高效,特别是在需要直接修改原数据内容的情形。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一
|
7月前
|
移动开发 运维 供应链
通过array.some()实现权限检查、表单验证、库存管理、内容审查和数据处理;js数组元素检查的方法,some()的使用详解,array.some与array.every的区别(附实际应用代码)
array.some()可以用来权限检查、表单验证、库存管理、内容审查和数据处理等数据校验工作,核心在于利用其短路机制,速度更快,节约性能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
7月前
|
供应链 JavaScript 前端开发
通过array.every()实现数据验证、权限检查和一致性检查;js数组元素检查的方法,every()的使用详解,array.some与array.every的区别(附实际应用代码)
array.every()可以用来数据验证、权限检查、一致性检查等数据校验工作,核心在于利用其短路机制,速度更快,节约性能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
7月前
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
用array.filter()来实现数据筛选、数据清洗和链式调用,相对于for循环更加清晰,语义化强,能显著提升代码的可读性和可维护性。博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~

热门文章

最新文章