JavaScript 数组- Array的方法总结(推荐)


Posted in Javascript onJuly 21, 2016

JavaScript中的Array类型是经常用到的,Array类型也提供了很多方法能实现我们需求,下面我们来总结一下

一、创建Array的方法

var colors=new Array();

var colors=new Array(3);//创建一个长度为3的数组

var colors=new Array("red","blue")//创建一个数组["red","blue"]

当然,上面的new可以省略不写,如 var colors=Array("red");

2、直接使用数组字面量

var colors=["red","blue","green"];

二、Array的方法1

var colors=["red","blue","green"];

1、获取数组的长度 colors.length;//3

2、访问数组第二项colors[1];//blue

3、更改数据的第二项colors[1]="black";//["red","black","green"]

4、检查是否是一个数组 colors instanceof Array;//true

5、colors.toString();//默认会以逗号隔开输出字符串  red,blue,green

6、colors.join("|");//自定义以“|”隔开输出字符串 red|blue|green

7、colors.push("brown")//往数组的尾部添加一项

8、colors.pop()//往数组的尾部删除一项

9、colors.shift()//删除数组的第一项,并取得该值

10、colors.unshift("k1","k2")//往数组的前面插入这两项;["k1","k2","red","blue","green"];

11、colors.reverse()//翻转数组的顺序

12、colors.sort()或者colors.sort([func]);

13、concat() 返回一个新数组,不影响原数组 colors.concat()或者colors.concat("k1");

14、slice(begin,end)从数组下标begin开始到end复制这个数据,不包括下标end,如果是slice(begin)那么就是从下标begin开始到数组的尾部

15、splice

splice(0,2)//从下标0开始删除数组的两项

splice(2,0,"k1","k2")从下标2开始删除0项,紧接着从这里插入两项

splice(2,1,"k1")//从下标2开始删除一项,紧接着从这里插入一项

16、indexOf("item")//从数组头开始查找某项,找到后返回下标值,找不到返回-1

17、lastIndexOf("item")//从数组尾开始查找某项,找到后返回下标值,找不到返回-1

三、Array方法2:迭代方法(ECMAScript5)

1、every():对数组的每一项运行给定的函数,每一项都返回true,则返回true(不影响原数组)

var numbers=[1,2,3,2,1];
//判断是否每个数字都大于2
var flag=numbers.every(function (item,index,array) {
  return item>2;
});

2、filter():对数组中每一项运行给定的函数,返回该函数为true的项(不影响原数组)

var numbers=[1,2,3,2,1];
//返回大于2的项
var array=numbers.filter(function (item,index,array) {
  return item>2;
});

3、forEach():对数组中的每一项执行给定的函数,不返回值 (不影响原数组)

var numbers=[1,2,3,2,1];
//输出每一项的平方
numbers.forEach(function (item,index,array) {
  console.log(item*2);
});

4、map():对数组的每一项执行给定的函数,返回每次函数调用后结果组成的数组(不影响原数组)

var numbers=[1,2,3,2,1];
//返回每一项的平方
var array=numbers.map(function (item,index,array) {
  return item*item;
});

5、some():对数组的每一项执行给定的函数,如果有一项返回true则,则返回true

var numbers=[1,2,3,2,1];
var flag=numbers.some(function (item,index,array) {
  return item>2
});

三、Array方法3:归并方法(ECMAScript5)

1、reduce()方法从数组的第一行开始,逐个遍历到最后

2、reduceRight()方法从数组的最后一项开始,逐个向前遍历

var numbers=[1,2,3,4,5];
var result=numbers.reduce(function (prev,cur,index,array) {
  //prev:前一个运算的结果,刚开始时候为数字的第一项
  //cur:数组的当前项
  //index:当前数组的下标
  //array:执行这个运算的数组,当前为numbers
  console.log("prev:"+prev);
  console.log("cur:"+cur);
  console.log("index:"+index);
  console.log("array:"+array);
  console.log("=============");
  return prev+cur;
});

以上这篇JavaScript 数组- Array的方法总结(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
初窥JQuery(二) 事件机制(1)
Nov 25 Javascript
js iframe跨域访问(同主域/非同主域)分别深入介绍
Jan 24 Javascript
介绍一个简单的JavaScript类框架
Jun 24 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
Jul 29 Javascript
javascript中sort() 方法使用详解
Aug 30 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
Sep 20 Javascript
SVG描边动画
Feb 23 Javascript
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
Apr 21 Javascript
js禁止表单重复提交
Aug 29 Javascript
vue2.0设置proxyTable使用axios进行跨域请求的方法
Oct 19 Javascript
vue + element-ui的分页问题实现
Dec 17 Javascript
JavaScript, select标签元素左右移动功能实现
May 14 Javascript
完美JQuery图片切换效果的简单实现
Jul 21 #Javascript
jQuery的ajax下载blob文件
Jul 21 #Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
Jul 21 #Javascript
浅谈DOCTYPE对$(window).height()取值的影响
Jul 21 #Javascript
jQuery新窗口打开外链接
Jul 21 #Javascript
JS for循环中i++ 和 ++i的区别介绍
Jul 20 #Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
Jul 20 #Javascript
You might like
《PHP边学边教》(02.Apache+PHP环境配置――上篇)
2006/12/13 PHP
php 操作数组(合并,拆分,追加,查找,删除等)
2012/07/20 PHP
PHP 如何利用phpexcel导入数据库
2013/08/24 PHP
PHP多态代码实例
2015/06/26 PHP
PHP实现QQ空间自动回复说说的方法
2015/12/02 PHP
thinkPHP中多维数组的遍历方法
2016/01/09 PHP
XmlUtils JS操作XML工具类
2009/10/01 Javascript
计算世界完全对称日的js代码,粗糙版
2011/11/04 Javascript
IE8下String的Trim()方法失效的解决方法
2013/11/08 Javascript
JavaScript中实现单体模式分享
2015/01/29 Javascript
浅析javascript中的DOM
2015/03/01 Javascript
json格式数据的添加,删除及排序方法
2016/01/21 Javascript
AngularJS表单提交实例详解
2017/02/18 Javascript
vue+vux实现移动端文件上传样式
2017/07/28 Javascript
WebPack配置vue多页面的技巧
2018/05/15 Javascript
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
2020/07/17 Javascript
针对Vue路由history模式下Nginx后台配置操作
2020/10/22 Javascript
js实现限定范围拖拽的示例
2020/10/26 Javascript
[48:30]LGD vs infamous Supermajor小组赛D组 BO3 第一场 6.3
2018/06/04 DOTA
python重试装饰器示例
2014/02/11 Python
pyqt4教程之实现半透明的天气预报界面示例
2014/03/02 Python
Python中使用动态变量名的方法
2014/05/06 Python
python中常用的各种数据库操作模块和连接实例
2014/05/29 Python
Python中集合类型(set)学习小结
2015/01/28 Python
python基于BeautifulSoup实现抓取网页指定内容的方法
2015/07/09 Python
Python金融数据可视化汇总
2017/11/17 Python
Python生成指定数量的优惠码实操内容
2019/06/18 Python
解决Django后台ManyToManyField显示成Object的问题
2019/08/09 Python
浅谈Python __init__.py的作用
2020/10/28 Python
有机童装:Toby Tiger
2018/05/23 全球购物
北京麒麟网信息技术有限公司网络游戏测试面试题
2013/09/28 面试题
餐厅采购员岗位职责
2014/03/06 职场文书
教师师德师风个人整改方案
2014/09/18 职场文书
依法行政工作汇报
2014/10/28 职场文书
咖啡厅里的创业计划书
2019/08/21 职场文书
Java 通过手写分布式雪花SnowFlake生成ID方法详解
2022/04/07 Java/Android