当前位置: 首页 > news >正文

数组常见的方法

数组方法
一.概念:
数组是一个数据的集合,也就是我们把一些数据放在一个盒子里面,按照顺序排好,这个盒子就是一个数组,存储着一些数据的集合

二.分类:
我们简单的把所有数据类型分为两个大类 基本数据类型 和 复杂数据类型
基本数据类型: number / string / boolean / undefined / null
复杂数据类型: object / function / array / …

三.创建数组的方式
1.使用 Array 构造函数
使用 js 的内置构造函数 Array创建一个数组

2.使用字面量创建数组

四.数组的常规方法-----API
1.push()-----后增
(1).功能:是用来在数组的末尾追加一个或多个元素,即:可以接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度。
(2).参数:一个或多个元素
(3).返回值:插入数据之后数组的长度。
代码如下:

注:push(ele[,ele[,ele]])可以传递 1 ~ n 个参数

2.unshift-----前增
(1).功能:是在数组的最前面添加一个或多个元素,即:将参数添加到原数组开头
(2).参数:一个或多个元素
(3).返回值:插入数据之后数组的长度。
代码如下:

注:unshift(ele[,ele[,ele]])可以传递 1 ~ n 个参数

3.pop()-------后删
(1).功能:是用来删除数组末尾的一个元素
(2).参数:无
(3).返回值:返回数组的最后一个元素
代码如下:

注:a.pop没有参数;
b.调用一次按照规则删除一个;
c.删除了什么数据,返回值就是什么;

4.shift()------前删
(1).功能:是删除数组最前面的一个元素
(2).参数:无
(3).返回值:返回删除元素的值
代码如下:

注:a.shift 没有参数;
b.调用一次按照规则删除一个;
c.删除了什么数据,返回值就是什么;

5.sort()------排序;
(1).功能:是用来给数组排序的,这个只是一个基本的简单用法,只能对数组中的数字进行简单的排序(数组中数字的位数为1)
(2).参数:函数方法
(3).返回值:根据参数和运行结果进行返回
代码如下:

arr.sort()----->排序字母;
arr.sort()只能进行简单的1位数字的排序,
arr.sort(function(a,b){ return a - b})-----排序数字

注:当arr.sort(function(a,b){ return a - b})时,为升序排列
当arr.sort(function(a,b){ return b - a})时,为降序排列

6.concat()---------拼接
(1).功能:将参数添加到原数组中;
(2).参数: 1个或者n个数组
(3).返回值:一个新的拼接好的数组
代码如下:

注:concat()方法—拼接多个数组,不该变原数组

7.slice()-------截取数组 ;
(1).功能:截取数组
(2).参数:arr.slice(start , end)
参数详解:
start:必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。
end:可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。
(3).返回值:返回一个新的数组,包含从start到 end(不包括该元素)的arr中的元素
arr.slice(start , end);
代码如下:

注:slice( startIndex [,endIndex]) :
大于等于起始点下标,小于endIndex下标之间的内容;
特殊值 : endIndex : -1; 截止到倒数第几个;

8.splice()-----选取-----对数组批量的操作;
(1).功能:很强大的数组方法,它有很多种用法,可以实现删除、插入和替换.(该方法会改变原始数组)
(2).参数:arr.splice(startindex,数量,replaceItem )
参数详解:
startindex:必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。
数量:必需。要删除的项目数量。如果设置为 0,则不会删除项目。
replaceItem :可选。向数组添加的新项目
(3).返回值:含有被删除的元素的数组,若没有删除元素则返回一个空数组
代码如下:
arr.splice(startindex,howmany)
常规用法:删除掉对应起始点对应数量的项,并返回删除的结果。

splice( startIndex ):只传递一个参数;如果不传递第二个参数,会直接截取到数组结尾;

splice (startIndex , 数量 , replaceItem (替换的项) , … ,);

向数组的某个位置插入一条或者多条数据;

9.join()----------转换类方法
(1).功能:数组转换成字符串
(2).参数:可有可无
(3).返回值:新数组
代码如下:
如果join不传递参数,默认以 “,” 进行分割;

如果join传递参数,如:日期的转换 => year/month/date

10.reverse()----反转数组
(1).功能:反转数组项的顺序,会改变原数组
(2).参数:无
(3).返回值:新数组
代码如下:

**

五.ES5常用方法------索引
**
1.indexOf()个索引方法
(1).返回要查找的项在数组中首次出现的位置,在没找到的情况下返回-1
(2).indexOf()--------array.indexOf(item,start) (从数组的开头(位置 0)开始向后查找)
参数详解:
item: 必须。查找的元素。
start:可选的整数参数。规定在数组中开始检索的位置,如省略该参数,则将从array[0]开始检索
代码如下:

2.lastIndexOf()-------索引方法
(1).返回要查找的项在数组中首次出现的位置,在没找到的情况下返回-1
(2).lastIndexOf()--------array.lastIndexOf(item,start) (从数组的末尾开始向前查找)
参数详解:
item: 必须。查找的元素。
start:可选的整数参数。规定在数组中开始检索的位置。如省略该参数,则将从 array[array.length-1]开始检索
代码如下:

**

六…ES5常用方法------迭代器方法
**
1.forEach()
(1).功能:对数组进行遍历循环
(2).语法:arr.forEach(function(item , index , arr){})
参数详解:
item:代表数组的元素;
index:代表索引值,即下标;
arr:即数组
(3).返回值:没有返回值
代码如下:

输出的结果为:

2.map();
(1).功能:“映射”,对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组。
(2).语法:arr.map( function( item , index , arr){})
参数详解:
item:代表数组的元素;
index:代表索引值,即下标;
arr:即数组
(3).返回值:有返回值; 就是每次函数执行的返回值组成的数组;
代码如下:

注:map()方法,可以改变数组之中所有项,返回改变之后的新数组;原数组不改变,将元素组改变的值赋值给新数组

  1. filter() ;
    (1).功能:“过滤”功能,数组中的每一项运行给定函数,返回满足过滤条件组成的数组。
    (2).语法:arr.filter( function( item , index , arr ){})
    (3).返回值:有返回值; 一个数组,筛选之后的数组
    注:如何进行筛选 :
    函数的返回值为true,则表示选中当项数据, 数组之中会添加这一项数据。
    函数的返回值为false,则表示过滤,数组之中不会添加这一项数据;
    代码如下:

注:函数什么的都不写的情况执行结果都是 undefined , 那么一项内容都不会放进新数组之中

4.every()
(1).功能:判断数组中每一项都是否满足条件,只有所有项都满足条件,才会返回true。
(2).语法:arr.every( function( item , index ){})
(3).返回值:true/false
代码如下:

注:判定方法 :
返回值是一个布尔值 :
必须所有的函数执行结果都为true , 返回结果才为true;

相对高级的特性:

5.some();
(1).功能:判断数组中每一项都是否满足条件,只有所有项都满足条件,才会返回true。
(2).语法:arr.some( function( item , index ){})
(3).返回值:true/false
代码如下:

注:判定方法 :
返回值是一个布尔值 :
函数之中有一个执行结果为true , 返回结果则为true;

相对高级的特性:

**

七…ES5常用方法------归并方法
**
reduce()------归并 : 把数组中所有的项进行整合运算;
1.概念:对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值。
2.参数传值:
(1).参数传递方式 1 : reduce (函数 , start)
代码如下:

运行结果为:

应用:
A.求和:
代码如下:

运行结果:

B.求积:
代码如下:

运行结果:

(2).参数传递方式 2 : reduce (函数 )
如果没有传递第二个参数,那么数组的第一项就为start第一次的值;
代码如下:

运行结果:

(3).总结:
reduce 难点: 第一个参数 :
第一次执行的时候 :
如果传递了第一次就是传递的值;
如果没有传递那么就是数组的第一项,item 则为第二项;
其余的时候 其值都为上一次运算的结果;

**

八.数组常用方法------字符串
**
1.创建字符串:
字面量------>var str1 = “”;
构造函数---->var str2 = new String("");
区别:
除了数据类型不一样:字面量是 string;构造函数是 object 类型;其余的使用方式都完全一致;
2.字符串实用API;
(1).字符串的使用方法和数组非常的相似;
(2).join 数组转换成字符串;(参考上边)
(3)split() : 分割;字符串转换成数组的;
代码如下:

(4).字符串截取 :
substr()
代码如下:

substring()
代码如下:

注:截取的内容是:大于等于 start 小于 end 的;slice用法和数组的slice用法完全一致;

相关文章:

  • 数据结构-C语言递归实现树的前中后序遍历
  • 核心动画(Core Animation)
  • url模块 和 querystring模块
  • APP开发的一些简单流程思路
  • querystring 查询字符串模块
  • 查看数据库表的数据量和SIZE大小的脚本修正
  • commonJS模块化
  • HDU4185 Oil Skimming(匈牙利)
  • yarn 和 bower的使用
  • phpcms 绑定域名
  • Python笔记:除、取整、取余、乘方
  • 父组件向子组件传值
  • 数加分析型数据库:让你的数据探索更灵活、准确、快速响应和高并发
  • 子组件 向 父组件传值
  • Vue ES6 Jade Scss Webpack Gulp
  • [iOS]Core Data浅析一 -- 启用Core Data
  • __proto__ 和 prototype的关系
  • 【前端学习】-粗谈选择器
  • Git学习与使用心得(1)—— 初始化
  • gops —— Go 程序诊断分析工具
  • HTML5新特性总结
  • Linux Process Manage
  • MaxCompute访问TableStore(OTS) 数据
  • Spring核心 Bean的高级装配
  • Vue ES6 Jade Scss Webpack Gulp
  • 初识MongoDB分片
  • 工作中总结前端开发流程--vue项目
  • 快速构建spring-cloud+sleuth+rabbit+ zipkin+es+kibana+grafana日志跟踪平台
  • 前端技术周刊 2019-02-11 Serverless
  • ​批处理文件中的errorlevel用法
  • #pragma pack(1)
  • (C++20) consteval立即函数
  • (delphi11最新学习资料) Object Pascal 学习笔记---第8章第5节(封闭类和Final方法)
  • (附源码)springboot青少年公共卫生教育平台 毕业设计 643214
  • (附源码)springboot猪场管理系统 毕业设计 160901
  • (离散数学)逻辑连接词
  • .chm格式文件如何阅读
  • .NET “底层”异步编程模式——异步编程模型(Asynchronous Programming Model,APM)...
  • .net 微服务 服务保护 自动重试 Polly
  • .NET4.0并行计算技术基础(1)
  • .NET8.0 AOT 经验分享 FreeSql/FreeRedis/FreeScheduler 均已通过测试
  • .Net各种迷惑命名解释
  • @for /l %i in (1,1,10) do md %i 批处理自动建立目录
  • @kafkalistener消费不到消息_消息队列对战之RabbitMq 大战 kafka
  • @RequestMapping-占位符映射
  • [ Linux Audio 篇 ] 音频开发入门基础知识
  • [Android Pro] listView和GridView的item设置的高度和宽度不起作用
  • [C#][DevPress]事件委托的使用
  • [C语言][C++][时间复杂度详解分析]二分查找——杨氏矩阵查找数字详解!!!
  • [EFI]Atermiter X99 Turbo D4 E5-2630v3电脑 Hackintosh 黑苹果efi引导文件
  • [EFI]英特尔 冥王峡谷 NUC8i7HVK 电脑 Hackintosh 黑苹果efi引导文件
  • [Excel]如何找到非固定空白格數列的條件數據? 以月份報價表單為例
  • [IE编程] IE8 新增的C++开发接口
  • [Java] IDEA Scala环境搭建
  • [JavaScript]_[初级]_[不使用JQuery原生Ajax提交表单文件并监听进度]