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 相关文章推荐
JS 页面内容搜索,类似于 Ctrl+F功能的实现代码
Aug 13 Javascript
JS 如果改变span标签的是否隐藏属性
Oct 06 Javascript
基于jquery实现状态限定编辑的代码
Feb 11 Javascript
JavaScript禁止页面操作的示例代码
Dec 17 Javascript
js控制文本框输入的字符类型方法汇总
Jun 19 Javascript
JavaScript定义数组的三种方法(new Array(),new Array('x','y')
Oct 04 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
Oct 26 Javascript
JS实现微信弹出搜索框 多条件查询功能
Dec 13 Javascript
在vue中获取dom元素内容的方法
Jul 10 Javascript
es7学习教程之Decorators(修饰器)详解
Jul 21 Javascript
Angular将填入表单的数据渲染到表格的方法
Sep 22 Javascript
vue项目或网页上实现文字转换成语音播放功能
Jun 09 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
phpstrom使用xdebug配置方法
2013/12/17 PHP
PHP中__FILE__、dirname与basename用法实例分析
2014/12/01 PHP
php加密解密字符串示例
2016/10/13 PHP
PHP 7.0新增加的特性介绍
2017/06/08 PHP
innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别
2007/06/29 Javascript
jQuery学习7 操作JavaScript对象和集合的函数
2010/02/07 Javascript
一款js和css代码压缩工具[附JAVA环境配置方法]
2010/04/16 Javascript
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
2010/11/21 Javascript
Html5的placeholder属性(IE兼容)实现代码
2014/08/30 Javascript
JavaScript函数详解
2014/11/17 Javascript
JQuery显示隐藏页面元素的方法总结
2015/04/16 Javascript
使用impress.js制作幻灯片
2015/09/09 Javascript
Bootstrap模块dropdown实现下拉框响应
2016/05/22 Javascript
jQuery文字提示与图片提示效果实现方法
2016/07/04 Javascript
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
2017/06/02 jQuery
Node.js 使用命令行工具检查更新
2017/06/08 Javascript
JQuery实现ajax请求的示例和注意事项
2018/12/10 jQuery
其实你可以少写点if else与switch(推荐)
2019/01/10 Javascript
小程序getLocation需要在app.json中声明permission字段
2019/04/04 Javascript
Element-UI中关于table表格的那些骚操作(小结)
2019/08/15 Javascript
vue实现侧边栏导航效果
2019/10/21 Javascript
小程序实现多个选项卡切换
2020/06/19 Javascript
Ant Design的可编辑Tree的实现操作
2020/10/31 Javascript
python自定义类并使用的方法
2015/05/07 Python
详解用python实现简单的遗传算法
2018/01/02 Python
Python中文分词库jieba,pkusegwg性能准确度比较
2020/02/11 Python
python中sklearn的pipeline模块实例详解
2020/05/21 Python
基于Python词云分析政府工作报告关键词
2020/06/02 Python
使用CSS3来匹配横屏竖屏的简单方法
2015/08/04 HTML / CSS
基于ccs3的timeline时间线实现方法
2020/04/30 HTML / CSS
公司离职证明标准格式
2014/11/18 职场文书
2015年食堂工作总结报告
2015/04/23 职场文书
工程项目合作意向书
2015/05/08 职场文书
上学路上观后感
2015/06/16 职场文书
Golang 对es的操作实例
2022/04/20 Golang
Windows server 2022创建创建林、域树、子域的步骤
2022/06/25 Servers