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 相关文章推荐
XMLHTTPRequest的属性和方法简介
Nov 23 Javascript
jQuery学习基础知识小结
Nov 25 Javascript
jQuery父级以及同级元素查找介绍
Sep 04 Javascript
jQuery链使用指南
Jan 20 Javascript
Bootstrap+jfinal退出系统弹出确认框的实现方法
May 30 Javascript
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
May 17 Javascript
vue-cli webpack 引入swiper的操作方法
Sep 15 Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
Dec 25 Javascript
jquery实现动态创建form并提交的方法示例
May 27 jQuery
JavaScript闭包相关知识解析
Oct 19 Javascript
jquery实现烟花效果(面向对象)
Mar 10 jQuery
解决vue+webpack项目接口跨域出现的问题
Aug 10 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
zend api扩展的php对象的autoload工具
2011/04/18 PHP
apache+codeigniter 通过.htcaccess做动态二级域名解析
2012/07/01 PHP
用PHP实现浏览器点击下载TXT文档的方法详解
2013/06/02 PHP
php调用Google translate_tts api实现代码
2013/08/07 PHP
PHP SPL标准库之数据结构堆(SplHeap)简单使用实例
2015/05/12 PHP
PHP提取字符串中的手机号正则表达式怎么写
2017/07/17 PHP
JQuery实现自定义对话框的代码
2008/06/15 Javascript
javascript按位非运算符的使用方法
2013/11/14 Javascript
创建你的第一个AngularJS应用的方法
2015/06/16 Javascript
javascript作用域问题实例分析
2015/07/13 Javascript
三种Node.js写文件的方式
2016/03/08 Javascript
jQuery插件dataTables添加序号列的方法
2016/07/06 Javascript
JS实现页面内跳转的简单代码
2017/09/03 Javascript
微信、QQ、微博、Safari中使用js唤起App
2018/01/24 Javascript
Layui 导航默认展开和菜单栏选中高亮设置的方法
2019/09/04 Javascript
layer扩展打开/关闭动画的方法
2019/09/23 Javascript
Vue使用screenfull实现全屏效果
2020/09/17 Javascript
[03:02]2020完美世界城市挑战赛(秋季赛)总决赛回顾
2021/03/11 DOTA
Python range与enumerate函数区别解析
2020/02/28 Python
Python实现在Windows平台修改文件属性
2020/03/05 Python
python matplotlib绘制三维图的示例
2020/09/24 Python
pytorch加载语音类自定义数据集的方法教程
2020/11/10 Python
Python 将代码转换为可执行文件脱离python环境运行(步骤详解)
2021/01/25 Python
详解CSS3弹性伸缩盒
2020/09/21 HTML / CSS
详解CSS3:overflow属性
2020/11/17 HTML / CSS
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
2014/05/07 HTML / CSS
联想新加坡官方网站:Lenovo Singapore
2017/10/24 全球购物
美国羽绒床上用品第一品牌:Pacific Coast
2018/08/25 全球购物
幼儿园大班新学期寄语
2014/01/18 职场文书
大跃进口号
2014/06/16 职场文书
政风行风评议工作总结
2014/10/21 职场文书
2014年食堂工作总结
2014/11/20 职场文书
公务员政审个人总结
2015/02/12 职场文书
七一晚会主持词
2015/06/29 职场文书
2015年医院保卫科工作总结
2015/07/23 职场文书
2016年小学圣诞节活动总结
2016/03/31 职场文书