当前位置: 首页 > 编程日记 > 正文

javascript数组集锦

设计数组的函数方法

toString, toLocaleString, valueOf,
concat, splice, slice
indexOf,lastIndexOf,
push, pop, shift, unshift,
sort, reverse
map, reduce, reduceRight, filter, every, some, forEach

创建数组

  • 数组字面量创建:var arr = [val1, val2, val3];
  • 数组构造函数:
  var arr = new Array();var arr = new Array(1, 2, 3, 5);//返回[1, 2, 3, 4, 5]var arr = new Array(2);// 返回 [ , , ]  一个参数时是数组的长度length

清空数组

清空数组有两种方法

  • arr.length = 0;
  • arr = [];

两者区别:js 中数组是对象,所以arr是一个指向数组值的链接,arr.length = 0时,把数组所有值清除,执行速度慢;arr = []时把arr的链接指向一个新的空数组,原数组值存在于内存中如果未被其它变量引用时则被回收。

var arr1 = [1, 2, 3];
var arr2 = arr1;
arr2 = [];
console.log(arr1);// [1, 2, 3] arr1 还在
arr2 = arr1;
arr2.length = 0;
console.log(arr1); // [] arr1同时也被清空了

转换方法

arr.toString() 返回由数组中的每个值的字符串形式拼接(以逗号分隔)的字符串
arr.toLocaleString() 和toString作用相同,不同之处在于对数组的每一项调用toString方法
arr.valueOf() 和toString类似,不过返回数组最适合的原始类型
arr.join() toString只能使用逗号分隔字符串,而join可以指定分隔符

var arr1 = ['h', ['e', 'g'], 'n'];
var arr2 = [1, 2, 3, 4];
arr1.toString();//"h,e,g,n"
arr1.toLocaleString();// "h,e,g,n"
arr2.valueOf();//[1, 2, 3, 4]
arr2.toString();//"1,2,3,4"
arr1.valueOf();//["h", Array(2), "n"]
arr2.join('-');//"1-2-3-4" 指定 - 分隔符

堆栈、队列方法

push(item) 在数组末尾压入数组项,可以是多项 ,返回修改后的数组长度
pop() 弹出并返回数组最后一项
shift() 弹出并返回数组第一项
unshift() 在数组前端压入数组项并返回数组长度

var arr = [4, 5, 6];
arr.push(7, 8);
arr; //[4, 5, 6, 7, 8]
arr.push([9, 10]);
arr; //[4, 5, 6, 7, 8, [9, 10]]arr.pop();
arr; //[4, 5, 6, 7, 8]
arr.shift() ;// arr  [5, 6 ,7, 8]
arr,unshift(1, 2, 3, 4); //arr [1, 2, 3, 4, 5, 6, 7, 8]

重排序 sort和reverse

arr.reverse() 反转数组,第一项变最后一项,最后一项变第一项,依次类推
sort() 对数组重排序,默认从小到大排序(按字符比较而非数值 如 2 > 100) ,可以传入排序函数

var arr = [1, 2, 3, 100];
arr.reverse(); //[100, 3, 2, 1]
arr.sort();//[1, 100, 2, 3]
arr.sort(compare);  //[1, 2, 3, 100]
function compare(value1, currentValue){console.log(value1, currentValue);return value1 - currentValue;
}
/*
排序函数打印出来的,可以看出是插入排序
1 100
100 2
1 2
100 32 3
*/

操作方法与位置方法 concat,slice, splice, indexOf ,lastIndexOf

arr.concat() 基于当前数组的所有项创建一个新数组,传入的项被添加到数组末尾构成新数组
arr.slice(start, end ) 基于当前数组中的一项或多项创建新数组,start为开始位置,end为结束位置,end没有的话默认为到数组结束
arr.splice(start, num, arr1, arr2......) 从start位置开始删除num项数组,然后在start位置插入arr1 ,arr2 ,,,,,,,,,。num为0时没有删除项, arr1, arr2 ,,,,,可以没有
arr.indexOf(value, start) 搜索value值在数组中的索引值 ,start为开始项默认为0,未找到返回 -1
arr.lastIndexOf(value, start) 从数组的末尾开始查找(倒序查找),没找到返回 -1

var arr1 = [1, 2];
var arr2 = arr1.concat(3, [4, 5]);//[ 1, 2, 3, 4, 5 ]
arr2.slice()
//[ 1, 2, 3, 4, 5 ]arr2.slice(1)
//[ 2, 3, 4, 5 ] 
arr2.slice(1,4)
//[ 2, 3, 4 ]arr2
//[ 1, 2, 3, 4, 5 ]//以下为node环境下, > 为js表达式,回车后是输出
> arr2.slice(1)
[ 2, 3, 4, 5 ]
> arr2.slice(1,2)
[ 2 ]
> arr2.slice(1,4)
[ 2, 3, 4 ]
> arr2
[ 1, 2, 3, 4, 5 ]
> arr2.splice(0,1)
[ 1 ]
> arr2
[ 2, 3, 4, 5 ]
> arr2.splice(0,1,1)
[ 2 ]
> arr2
[ 1, 3, 4, 5 ]
> arr2.splice(1,0,2)
[]
> arr2
[ 1, 2, 3, 4, 5 ]
> arr2.splice(5,0,6, 7, 8)
[]
> arr2
[ 1, 2, 3, 4, 5, 6, 7, 8 ]
> arr2.indexOf(8)
7
> arr2.lastIndexOf(8)
7
// 当查找的值在数组中有多个时indexOf 和lastIndexOf返回不同

迭代方法 map, filter, every, some, forEach, reduce, reduceRight

arr.map() 对数组中的每一项运行给定的函数,返回每次调用的结果组成的数组。
arr.filter() 对数组中的每一项运行给定的函数,返回由给定函数返回ture的项组成的新数组。
arr.every()对数组中的每一项运行给定的函数,如果该函数对每一项都返回true则返回true
arr.some()对数组中的每一项运行给定的函数,如果该函数对任一项返回true则返回true
arr.forEach()对数组中的每一项运行给定的函数,没有返回值
以上5个方法传入的函数有三个参数 分别是item、index、arr,分别是当前项,当前项的索引,数组

arr.reduce(),arr.reduceRight()
迭代所有项,然后构建一个最终返回值,只是迭代的顺序不同,reduce从左到右,reduceRight从右到左。传入的函数的参数有prev、cur、index、arr,分别是前一项迭代的结果,当前项,当前项的索引,数组arr

var arr = [1, 2, 3, 4, 5];arr.map(function(item, index, arr){return item * 2;
}); //数组的每项都乘2 ,返回 [2, 4, 6, 8, 10]arr.filter(function(item, index, arr){return item % 2 == 0;
}); // 返回偶数项 [2, 4]arr.every(function(item, index, arr){return item > 0;
}); // 数组所有项都大于0 ,返回 truearr.some(function(item, index, arr){return item < 2;
});//  数组里有小于2的项? 返回truearr.forEach(function( item, index, arr){console.log(item, index, arr);
});// 没有返回项
/*
forEach打印出来的
1 0 [ 1, 2, 3, 4, 5 ]
2 1 [ 1, 2, 3, 4, 5 ]
3 2 [ 1, 2, 3, 4, 5 ]
4 3 [ 1, 2, 3, 4, 5 ]
5 4 [ 1, 2, 3, 4, 5 ]
*/arr.reduce(function(prev, cur, index, array){console.log(prev,cur);return prev * cur;
});// 返回数组所有项相乘的结果120
/*
打印结果
1 2
2 3
6 4
24 5
*/arr.reduceRight(function(prev, cur, index, array){console.log(prev,cur);return prev * cur;
});// 返回数组所有项相乘的结果120
/*
打印结果
5 4
20 3
60 2
120 1
*/

转载于:https://www.cnblogs.com/scarecrowlxb/p/7131157.html

相关文章:

JS实现HTML标签转义及反转义

开发交流QQ群: 173683895 173683895 526474645 人满的请加其它群 编码反编码 function html_encode(str) { var s ""; if (str.length 0) return ""; s str.replace(/&/g, "&amp;"); s s.replace(/</g, "<")…

喜欢把代码写一行的人_我最喜欢的代码行

喜欢把代码写一行的人Every developer has their favourite patterns, functions or bits of code. This is mine and I use it every day.每个开发人员都有自己喜欢的模式&#xff0c;功能或代码位。 这是我的&#xff0c;我每天都用。 它是什么&#xff1f; (What is it?) …

智能家居APP开发

智能家居APP开发 APP开发技术qq交流群&#xff1a;347072638 前言&#xff0c;随着智能硬件设备的流行&#xff0c;智能家居開始红火&#xff0c;智能家居就是家用电器的智能化。包含智能锁&#xff0c;灯&#xff0c;空调&#xff0c;灯&#xff0c;音箱等等&#xff0c;移动设…

android小技巧(二)

一、如何控制Android LED等&#xff1f;(设置NotificationManager的一些参数) 代码如下: final int ID_LED19871103; NotificationManager nm(NotificationManager)getSystemService(NOTIFICATION_SERVICE); Notification notification new Notification(); notificatio…

JS 验证表单不能为空

开发交流QQ群: 173683895 173683895 526474645 人满的请加其它群 JS 验证表单不能为空的简单demo&#xff0c;先看效果图 实现代码 <!--index.wxml--> <form classform bindsubmitformSubmit bindresetformReset><input namename value{{name}} placeho…

周末不用过来了,好好休息吧_如何好好休息

周末不用过来了&#xff0c;好好休息吧When I wrote about my productive routine in a previous article, I said I’d work for 1.5 hours and take a break for 30 minutes. And I’d repeat this sequence four times a day.当我在上一篇文章中谈到生产性例程时&#xff0c…

HTML实现折现图完整源码及效果图

开发交流QQ群: 173683895 173683895 526474645 人满的请加其它群 效果图 源码 <!DOCTYPE html> <html><head><meta charset"utf-8" /><script src"https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts-en.common…

Date类(java.util)和SimpleDateFormat类(java.text)

在程序开发中&#xff0c;经常需要处理日期和时间的相关数据&#xff0c;此时我们可以使用 java.util 包中的 Date 类。这个类最主要的作用就是获取当前时间&#xff0c;我们来看下 Date 类的使用&#xff1a; 使用 Date 类的默认无参构造方法创建出的对象就代表当前时间&#…

8月12笔记-安卓文件扫描

Android的文件系统 1.Android的项目是运行在Linux操作系统上的 2.Linux的文件系统根目录是/&#xff0c;Windows只有某个盘符根目录 3.mnt文件夹是手机的内存卡根目录&#xff0c;此目录是安卓开发经常使用的 4.在windows下&#xff0c;最高管理员叫做Administrator&#xff0c…

可视化编码_Modulz简介:可视编码的下一步

可视化编码by Colm Tuite通过Colm Tuite Modulz简介&#xff1a;可视编码的下一步 (Introducing Modulz: The Next Step in Visual Coding) Modulz is a visual code editor for designing and building digital products — without writing code. Last week, we launched ou…

SQL执行过程中的性能负载点

一、SQL执行过程 1、用户连接数据库&#xff0c;执行SQL语句&#xff1b; 2、先在内存进行内存读&#xff0c;找到了所需数据就直接交给用户工作空间&#xff1b; 3、内存读失败&#xff0c;也就说在内存中没找到支持SQL所需数据&#xff0c;就进行物理读&#xff0c;也就是到磁…

认识Backbone (五)

Backbone.Router&#xff08;路由&#xff09;/ Backbone.history&#xff08;历史&#xff09; Backbone.Router 为客户端路由提供了许多方法&#xff0c;并能连接到指定的动作&#xff08;actions&#xff09;和事件&#xff08;events&#xff09;。 对于不支持 History API…

if else 你以为你把它吃透了吗?我让你惊讶一下

开发交流QQ群: 173683895 173683895 526474645 人满的请加其它群 if 和 else 是写代码最常用的&#xff0c;但是往往同学们不会去深入的了解他&#xff0c;这里我写几个Demo玩玩。 首先简单列一下什么值会返回true &#xff0c; 什么值会返回false。 示例&#xff1a;…

router路由react_使用React Router在React中受保护的路由

router路由reactIn this video, you will see how to create a protected route using React Router. This route is accessible only when the user is logged in.在此视频中&#xff0c;您将看到如何使用React Router创建受保护的路由。 仅当用户登录时&#xff0c;此路由才可…

SSH框架搭建笔记

1、建立一个web项目&#xff0c;设置编码格式&#xff0c;建立src下的包&#xff0c;建立资源文件夹 2、加入Spring运行必须的jar包(5个jar包)spring-beans-4.1.4.RELEASE.jarspring-context-4.1.4.RELEASE.jarspring-core-4.1.4.RELEASE.jarspring-expression-4.1.4.RELEASE.j…

灵活运用 SQL SERVER FOR XML PATH

FOR XML PATH 有的人可能知道有的人可能不知道&#xff0c;其实它就是将查询结果集以XML形式展现&#xff0c;有了它我们可以简化我们的查询语句实现一些以前可能需要借助函数活存储过程来完成的工作。那么以一个实例为主. 一.FOR XML PATH 简单介绍 那么还是首先来介绍一下FOR…

小程序画布,随机24个数显示在画布上面,不可重叠

QQ技术交流群 173683866 526474645 欢迎加入交流讨论&#xff0c;打广告的一律飞机票 效果图&#xff08;下面两个图都是随机显示24的圆圈在画布上面&#xff09; 实现代码 <!--pages/test2/test2.wxml--> <canvas style"width: 100%; height:700rpx;" ca…

hacktoberfest_Hacktoberfest 2018:如何获得免费衬衫—即使您是编码新手

hacktoberfestEvery October, Digital Ocean and GitHub ship out free Hacktoberfest shirts to thousands of people around the world.每年10月&#xff0c;Digital Ocean和GitHub都会向全球成千上万的人运送免费的Hacktoberfest衬衫。 I’ve gotten Hacktoberfest shirts …

Android自动化测试框架

1、Monkeyrunner&#xff1a;优点&#xff1a;操作最为简单&#xff0c;可以录制测试脚本&#xff0c;可视化操作&#xff1b;缺点&#xff1a;主要生成坐标的自动化操作&#xff0c;移植性不强&#xff0c;功能最为局限&#xff1b; 2、Rubotium&#xff1a;主要针对某一个…

详解 Date 对象

JS使用Date对象来处理日期和时间 五种调用Date函数的方式 Date() 单纯的作为函数调用&#xff0c;传入的参数会被忽略&#xff0c;返回当前日期和时间的字符串表示。 new Date() 作为构造函数调用。 返回当前日期和时间的Date对象。 new Date(Milliseconds) 作为构造函数调用…

Bootstrap select 多选并获取选中的值

QQ技术交流群 173683866 526474645 欢迎加入交流讨论&#xff0c;打广告的一律飞机票 效果图&#xff1a; 输出日志 代码&#xff1a; <!DOCTYPE html> <html><head><meta charset"UTF-8"><script src"js/jquery-3.4.1.min.js&quo…

如何在React中使用Typescript

TypeScript can be very helpful to React developers.TypeScript对React开发人员可能非常有帮助。 In this video, Ben Awad teaches how to use Typescript in React and shares some of its benafits. He also tells about a great boilerplate for TypeScript React proje…

java web 开发应用 ----过滤器

过滤器的作用 1.当用户请求web资源时&#xff0c;如果没有过滤器&#xff0c;用户可以直接获取到这个web资源&#xff0c;当有了过滤器之后&#xff0c;当用户请求web资源时&#xff0c;web容器中的过滤器先会拦截到这个请求&#xff0c;然后根据这个请求 做相应的处理&#xf…

小程序在wxml使用indexOf

QQ技术交流群 173683866 526474645 欢迎加入交流讨论&#xff0c;打广告的一律飞机票 demo场景&#xff1a; 有两个数组&#xff0c;页面渲染一个数组1&#xff0c;数组2中有数组1随机下标的值&#xff0c;判断数组1是否包含数组2的值&#xff0c;如果包含了就改变当前下标的…

d3.js图表_如何使用D3.js建立历史价格图表

d3.js图表逐步可视化财务数据集的方法 (A step by step approach towards visualizing financial datasets) It is a challenge to communicate data and display these visualizations on multiple devices and platforms.交流数据并在多个设备和平台上显示这些可视化内容是一…

Harris角点

可参考&#xff1a;http://www.cnblogs.com/ronny/p/4009425.html http://www.cnblogs.com/ztfei/archive/2012/05/07/2487123.html http://blog.csdn.net/crzy_sparrow/article/details/7391511 矩阵M(x)的特征值能表示在水平和竖直方向的变化程度&#xff0c;但Harris给出的角…

【博客美化】公告栏显示个性时间

设置侧边公告栏显示个性化时间 效果图&#xff1a; <div id"myTime"><object classid"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase"http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version8,0,0,0"…

微信小程序实现退款

QQ技术交流群 173683866 526474645 欢迎加入交流讨论&#xff0c;打广告的一律飞机票 退款php代码 <?php // ---------------------------------------------------------------------- // | Tplay [ WE ONLY DO WHAT IS NECESSARY ] // -------------------------------…

firebase 发生消息_如何在命令行提示符下显示当前的Firebase项目名称,以防止发生危险错误...

firebase 发生消息by Thang Minh VuThang Minh Vu 如何在命令行提示符下显示当前的Firebase项目名称&#xff0c;以防止发生危险错误 (How to show your current Firebase project name on the command line prompt to prevent dangerous errors) When working on a project w…

使用SQLite删除Mac OS X 中launchpad里的快捷方式

一般情况下&#xff0c;从App Store安装的应用程序&#xff0c;如果应用删除&#xff0c;那么launchpad里对应的图标会一起删除了。 而对于不是通过App Store安装的应用程序&#xff0c;删除应用程序&#xff0c;Launchpad中很可能仍然留有相关程序图标。不能忍&#xff01;是要…