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 相关文章推荐
javascript中的变量作用域以及变量提升详细介绍
Oct 24 Javascript
IE6-8中Date不支持toISOString的修复方法
May 04 Javascript
js数组操作常用方法
May 08 Javascript
javascript event在FF和IE的兼容传参心得(绝对好用)
Jul 10 Javascript
js代码实现点击按钮出现60秒倒计时
Jan 28 Javascript
js判断手机浏览器操作系统和微信浏览器的方法
Apr 30 Javascript
js完整倒计时代码分享
Sep 18 Javascript
基于JS实现bookstore静态页面的实例代码
Feb 22 Javascript
three.js实现3D模型展示的示例代码
Dec 31 Javascript
使用layui 渲染table数据表格的实例代码
Aug 19 Javascript
谈谈JavaScript中super(props)的重要性
Feb 12 Javascript
微信小程序实现Session功能及无法获取session问题的解决方法
May 07 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+JS无限级可伸缩菜单详解(简单易懂)
2007/01/02 PHP
YII中assets的使用示例
2014/07/31 PHP
浅析THINKPHP的addAll支持的最大数据量
2015/02/03 PHP
php实现基于PDO的预处理示例
2017/03/28 PHP
详解yii2使用多个数据库的案例
2017/06/16 PHP
TP5(thinkPHP5)框架基于ajax与后台数据交互操作简单示例
2018/09/03 PHP
jQuery使用手册之二 DOM操作
2007/03/24 Javascript
使用js简单实现了tree树菜单
2013/11/20 Javascript
jQuery 文本框得失焦点的简单实例
2014/02/19 Javascript
JavaScript面向对象编程入门教程
2014/04/16 Javascript
js中的getAttribute方法使用示例
2014/08/01 Javascript
jQuery插件Timelinr 实现时间轴特效
2015/10/04 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
2015/11/17 Javascript
js判断当前页面用什么浏览器打开的方法
2016/01/06 Javascript
异步加载JS、CSS代码(推荐)
2016/06/15 Javascript
jQuery Validate 相关参数及常用的自定义验证规则
2017/03/06 Javascript
vue调用高德地图实例代码
2017/04/28 Javascript
动态加载JavaScript文件的3种方式
2018/05/05 Javascript
微信小程序中使用ECharts 异步加载数据的方法
2018/06/27 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
2019/12/07 Javascript
python训练数据时打乱训练数据与标签的两种方法小结
2018/11/08 Python
pymongo中聚合查询的使用方法
2019/03/22 Python
使用python实现希尔、计数、基数基础排序的代码
2019/12/25 Python
Python编程快速上手——选择性拷贝操作案例分析
2020/02/28 Python
python 爬虫网页登陆的简单实现
2020/11/30 Python
CSS3实现多背景模拟动态边框的效果
2016/11/08 HTML / CSS
西班牙在线宠物商店:zooplus.es
2017/02/24 全球购物
PatPat阿根廷:妈妈们的购物平台
2019/05/30 全球购物
一套软件开发工程师笔试题
2015/05/18 面试题
农村门前三包责任书
2014/07/25 职场文书
调解书格式范本
2015/05/20 职场文书
2015年公司中秋节致辞
2015/07/31 职场文书
餐厅开业活动方案
2019/07/08 职场文书
MySQL时间设置注意事项的深入总结
2021/05/06 MySQL
关于HTML编码导致的乱码问题
2021/09/04 HTML / CSS
spring cloud 配置中心客户端启动遇到的问题
2021/09/25 Java/Android