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技术实现的web小游戏(不含网游)
Jun 12 Javascript
超越Jquery_01_isPlainObject分析与重构
Oct 20 Javascript
jquery 操作iframe的几种方法总结
Dec 13 Javascript
js动态控制table的tr、td增加及删除的具体实现
Apr 30 Javascript
jQuery实现给页面换肤的方法
May 30 Javascript
jQuery获取字符串中出现最多的数
Feb 22 Javascript
关于javascript的一些知识以及循环详解
Sep 12 Javascript
JavaScript数据结构中栈的应用之表达式求值问题详解
Apr 11 Javascript
vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据
Apr 22 Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
Sep 15 Javascript
node puppeteer(headless chrome)实现网站登录
May 09 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
Nov 20 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
Windows PHP5和Apache的安装与配置
2009/06/08 PHP
PHP开启gzip页面压缩实例代码
2010/03/11 PHP
PHP经典设计模式之依赖注入定义与用法详解
2019/05/21 PHP
PHP数组实际占用内存大小原理解析
2020/12/11 PHP
ajax无刷新动态调用股票信息(改良版)
2008/11/01 Javascript
js不完美解决click和dblclick事件冲突问题
2012/07/16 Javascript
js实现select组件的选择输入过滤代码
2014/10/14 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
2015/08/21 Javascript
JS创建事件的三种方法(实例代码)
2016/05/12 Javascript
总结JavaScript的正则与其他语言的不同之处
2016/08/25 Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
2016/08/29 Javascript
详解springmvc 接收json对象的两种方式
2016/12/06 Javascript
jQuery插件扩展操作入门示例
2017/01/16 Javascript
基于JavaScript实现全选、不选和反选效果
2017/02/15 Javascript
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
2017/12/26 Javascript
微信小程序中使用ECharts 异步加载数据实现图表功能
2018/07/13 Javascript
详解使用element-ui table组件的筛选功能的一个小坑
2018/11/02 Javascript
JavaScript中将值转换为字符串的五种方法总结
2019/06/06 Javascript
Node.js爬虫如何获取天气和每日问候详解
2019/08/26 Javascript
python实现外卖信息管理系统
2018/01/11 Python
对numpy数据写入文件的方法讲解
2018/07/09 Python
用Django写天气预报查询网站
2018/10/21 Python
使用Python实现从各个子文件夹中复制指定文件的方法
2018/10/25 Python
对python中dict和json的区别详解
2018/12/18 Python
详解python中的index函数用法
2019/08/06 Python
python3多线程知识点总结
2019/09/26 Python
Pytorch中膨胀卷积的用法详解
2020/01/07 Python
六种酷炫Python运行进度条效果的实现代码
2020/07/17 Python
PUMA官方商城:世界领先的运动品牌之一
2016/11/16 全球购物
西班牙在线宠物食品和配件商店:bitiba
2019/10/11 全球购物
企业承诺书格式
2014/05/21 职场文书
2014年工程师工作总结
2014/11/25 职场文书
2014年政协工作总结
2014/12/09 职场文书
2015年司机工作总结
2015/04/23 职场文书
教师节主题班会教案
2015/08/17 职场文书
vue如何实现关闭对话框后刷新列表
2022/04/08 Vue.js