javascript Array 数组常用方法


Posted in Javascript onApril 05, 2015

(1)基本的数组方法

1.join()

Array.join()方法将数组中所有元素都转化为字符串并连接在一起,返回最后生成的字符串。可以自己指定分隔的符号,如果不指定,默认使用逗号

var arr = [1,2,3];
console.log(arr.join());//"1,2,3"
console.log(arr.join("-"));//"1-2-3"

var a = new Array(10); //长度为10的空数组 组成下边字符串
console.log(a.join("-"));//"---------"

2.reverse()
Array.reverse()方法将数组中的元素颠倒顺序,返回逆序的数组(返回的数组是其本身,原始数组已经改变了)

var arr = [1,2,3];
arr.reverse();
console.log(arr.join());//"3,2,1"

所以,如果想把一个字符串逆序的话,可以这样

var str = "abcdefg";

console.log(str.split("").reverse().join(""));//"gfedcba" 返回的是新的值
console.log(str); //"abcdefg" 当然了,原始的是不会变的.

3.sort()
Array.sort()方法将数组中的元素排序并返回排序后的数组。

当不带参数时,默认按照顺序排序,也就是从小到大。当然,也可以直接给sort加一个比较函数比较

var arr = [1,4,7];
arr.sort();
console.log(arr); //[1,4,7]

arr.sort(function(a,b){
 return a-b; //从小到大
});
console.log(arr); //[1,4,7]

arr.sort(function(a,b){
 return b-a; //从大到小
});
console.log(arr); //[7,4,1]


var num = new Array('one','three','Six','Five');
num.sort(); //区分大小写排序
console.log(num); // ["Five", "Six", "one", "three"]
num.sort(function(s,t){
 var a = s.toLowerCase();
 var b = t.toLowerCase();
 if(a<b) return -1;
 if(a>b) return 1;
 return 0;
});
console.log(num); // ["Five", "one", "Six", "three"]

4.concat()
Array.concat()方法创建并返回一个新数组,它的元素包括调用concat()的原始数组的元素和concat()的每个参数。

如果这些参数中的任何一个自身是数组,则连接的是数组的元素,而非数组本身。

但要注意,concat()不会递归扁平化数组的数组。concat()也不会修改调用的数组。

var arr = [1,2,3];
console.log(arr.concat(4,5)); // [1, 2, 3, 4, 5]
console.log(arr);       // [1, 2, 3]
console.log(arr.concat([4,5])); // [1, 2, 3, 4, 5]
console.log(arr.concat([4,5],[6,7])); // [1, 2, 3, 4, 5,6,7]
console.log(arr.concat([4,[5,[6,7]]])); // [1, 2, 3, 4, [5, [6, 7]]]
console.log(arr.concat(4,[5,[6,7]])); // [1, 2, 3, 4, 5,[6,7]]

5.slice()
Array.slice()方法返回指定数组的一个片段或子数组。它的两个参数分别指定了片段开始和结束的位置(a,b)。返回的是从a开始到b的不包括b的数组元素。
如果只有一个参数(a).则代表从a到数组结尾的元素。
如果参数中出现负数(-a). 则表示相对于数组中最后一个元素相距a的位置。比如(-3)代表倒数第三个元素到末尾。出现负数就先换算出来,然后按照范围规则找出来
他也是返回新的数组,不会修改原始数组

var arr = [1,2,3,4,5];
console.log(arr.slice(0,3)); // [1, 2, 3]
console.log(arr); // [1, 2, 3, 4, 5]
console.log(arr.slice(3));//[4, 5]
console.log(arr.slice(-3));// [3, 4, 5]
console.log(arr.slice(-3,-1));// [3, 4]
console.log(arr.slice(2,-1));// [3, 4]

6. splice()
Array.splice()方法是在数组中插入或者删除元素的通用方法。它会修改原始数组的值,并返回一个新的数组序列

splice()的第一个参数指定了插入或删除的起始位置,第二个参数指定了应该从数组中删除的元素的个数。第二个参数省略则默认删到末尾。

var arr = [1,2,3,4,5,6,7,8];
console.log(arr.splice(4)); //[5, 6, 7, 8]
console.log(arr); // [1, 2, 3, 4]
console.log(arr.splice(1,2));// [2, 3]
console.log(arr); // [1, 4]

splice()的前两个参数指定了需要删除的数组元素。紧随其后的任意个数的参数指定了需要插入到数组中的元素,并从第一个参数代表的位置开始插入。

不同于上边的concat(),splice()是直接把数组插进去,比如下面的[1,2]

var arr = [1,2,3,4,5];
console.log(arr.splice(2,0,'a','b')); // []
console.log(arr); // [1, 2, "a", "b", 3, 4, 5]
console.log(arr.splice(2,1,[1,2],3));// ["a"]
console.log(arr); // [1, 2, [1, 2], 3, "b", 3, 4, 5]

7.push() pop() unshift() shift()
把这些方法看成栈操作就行:前两者正常的栈操作,后两者是反向的栈操作
push()和unshift()往数组中从后面、前面添加元素,并返回新数组的长度
pop()和shift()删除数组中最后、最前的元素,并返回删除的元素

var arr = [];

console.log(arr.push(1,2,3));//3
console.log(arr);//[1, 2, 3]

console.log(arr.pop());// 3
console.log(arr);//[1,2]

console.log(arr.push([4,5]));//3
console.log(arr);// [1, 2, [4, 5]]
var arr = [];

console.log(arr.unshift(1,2,3));//3
console.log(arr);//[1, 2, 3]

console.log(arr.shift());// 1
console.log(arr);// [2, 3]

console.log(arr.unshift([4,5]));//3
console.log(arr);//[[4, 5], 2, 3]

(2)ECMAScript5中的数组方法

这一类数组方法大多数有统一大致的规则。它们都不会修改原始数组。
大多数方法的第一个参数接收一个函数,并且对数组的每个元素(或一些元素)调用一次该函数。

如果是稀疏数组,对不存在的元素不调用传递的函数;

在大多数情况下,调用的这个函数一般使用三个参数:数组元素、元素的索引、数组本身。通常后两个参数也不需要填写进去。
除了这里第一个参数(函数)之外,还有第二个参数(它是可选的),如果第二个参数存在,则调用的函数将被看做是第二个参数的方法。

也就是说,在调用函数时传递进去的第二个参数作为它的this关键字的值来使用。

1.forEach()

这个方法从头至尾遍历数组,为每个数组调用指定的函数。

var data = [1,2,3,4,5];
var sum = 0;
data.forEach(function(value){ //只使用了第一个参数(函数),调用的函数也只使用了第一个参数数组元素
 sum += value;
});

console.log(sum);//15
console.log(data);// [1, 2, 3, 4, 5]
var data = [1,2,3,4,5];
var sum = 0;
data.forEach(function(value,item,data){ //调用的函数具有了三个参数
  data[item] = value*value; //取平方
});

console.log(data);// [1, 4, 9, 16, 25]

2.map()
这个方法将调用的数组中每个元素传递给指定的函数,并返回一个数组,它包含这个函数的返回值。

var data = [1,2,3,4,5];
var data1 = data.map(function(value){
 return ++ value;
});

console.log(data); // [1, 2, 3, 4, 5]
console.log(data1);// [2, 3, 4, 5, 6]

3.filter()
这个方法返回的数组元素是调用的数组的一个子集。传递的函数是用来逻辑判定的,该函数返回true或false。

如果返回值是true或者能转化为true的值,那么传递给判定函数的元素就是这个子集的成员,它将被添加到一个作为返回值的数组中。

var data = [1,2,3,4,5];
var data1 = data.filter(function(value){
 return value <= 3;
});

var data2 = data.filter(function(value){
 return value > 3;
});

console.log(data); // [1, 2, 3, 4, 5]
console.log(data1);// [1,2,3]
console.log(data2);// [4,5]

4.every()和some()
顾名思义,every()就是数组中所以元素都满足函数指定的条件时 返回true; some()就是某一项满足时就返回 true

var data = [1,2,3,4,5];
var data1 = data.every(function(value){
 return value < 4;
});

var data2 = data.some(function(value){
 return value >4;
});

console.log(data); // [1, 2, 3, 4, 5]
console.log(data1);// false
console.log(data2);// true

5.reduce()和reduceRight()
这两个方法使用指定的函数将数组元素进行组合,生成单个值。

reduce()有两个参数。第一个是执行化简操作的函数,就是说用某种方法把两个值化简为一个值,并返回化简后的值。

第二个参数可选,用来传递给第一个参数函数作为初始值。如果第二个参数没有,则初始值就使用数组的第一个元素值。

var data = [1,2,3,4,5];
var sum = data.reduce(function(a,b){
 return a+b;
});

var sum1 = data.reduce(function(a,b){
 return a+b;
},5);

var min = data.reduce(function(a,b){
 return (a<b)?a:b;
});

console.log(data); // [1, 2, 3, 4, 5]
console.log(sum);// 15
console.log(sum1);// 20
console.log(min);// 1

sum中没有第二个参数,所以初始值为第一个数组元素,第一步1+2=3,第二步3+3=6... 最后得15
sum1中有第二个参数,所以初始值为5,第一步5+1=6,第二步6+2=8... 最后得20

reduceRight()和reduce()差不多,不同的是它按照数组索引从高到低(从右到左)处理数组,而不是正常的从低到高。

var data = ['a','b','c']; 
var str = data.reduce(function(x,y){ //顺序
 return x+y;
});

var str1 = data.reduceRight(function(x,y){ //逆序
 return x+y;
});

console.log(data);// [1, 2, 3]
console.log(str);//"abc"
console.log(str1);//"cba"

6.indexOf()和lastIndexOf()
这个方法搜索整个数组中具有给定值的元素,返回找到的元素的索引(找到了一个就退出了),没有找到则返回-1.

一个从头至尾,一个从尾至头

var data = ['a','b','a','c','a']; 

console.log(data.indexOf('a')); //0
console.log(data.indexOf('d')); //-1
console.log(data.lastIndexOf('a'));//4

console.log(data.lastIndexOf('a',-2));//2 从倒数第二个开始
console.log(data.lastIndexOf('a',1));//0  从顺序第二个往前

7.数组类型 isArray()
判断一个对象是不是数组

console.log(Array.isArray([]));//true
console.log(Array.isArray({}));//false

//模拟上边的
var isArray1 = Function.isArray||function(o){
 return typeof o === "object" &&
  Object.prototype.toString.call(o) === "[object Array]";
};

console.log(isArray1([]));//true
console.log(isArray1({}));//false
Javascript 相关文章推荐
指定位置如果有图片显示图片,无图片显示广告的JS
Jun 05 Javascript
基于jquery的回到页面顶部按钮
Jun 27 Javascript
yepnope.js 异步加载资源文件
Sep 08 Javascript
javascript使用appendChild追加节点实例
Jan 12 Javascript
JS实现左右拖动改变内容显示区域大小的方法
Oct 13 Javascript
jquery ajax结合thinkphp的getjson实现跨域的方法
Jun 06 Javascript
jquery 获取select数组与name数组长度的实现代码
Jun 20 Javascript
javascript简单链式调用案例分析
May 10 Javascript
微信小程序使用modal组件弹出对话框功能示例
Nov 29 Javascript
微信小程序页面传多个参数跳转页面的实现方法
May 17 Javascript
微信小程序页面间传递数组对象方法解析
Nov 06 Javascript
Vue过滤器,生命周期函数和vue-resource简单介绍
Jan 12 Vue.js
javascript数据结构与算法之检索算法
Apr 04 #Javascript
使用jquery制作弹出框效果
Apr 03 #Javascript
javascript 实现map集合
Apr 03 #Javascript
jQuery制作简洁的图片轮播效果
Apr 03 #Javascript
jQuery制作效果超棒的手风琴折叠菜单
Apr 03 #Javascript
jQuery实现左右切换焦点图
Apr 03 #Javascript
基于jquery ui的alert,confirm方案(支持换肤)
Apr 03 #Javascript
You might like
咖啡知识大全
2021/03/03 新手入门
php 移除数组重复元素的一点说明
2008/11/27 PHP
php 数组的合并、拆分、区别取值函数集
2010/02/15 PHP
PHP字符串处理的10个简单方法
2010/06/30 PHP
Zend Framework动作助手(Zend_Controller_Action_Helper)用法详解
2016/03/05 PHP
完美利用Yii2微信后台开发的系列总结
2016/07/18 PHP
js获取单元格自定义属性值的代码(IE/Firefox)
2010/04/05 Javascript
onsubmit阻止form表单提交与onclick的相关操作
2010/09/03 Javascript
xml转json的js代码
2012/08/28 Javascript
用jQuery实现一些导航条切换,显示隐藏的实例代码
2013/06/08 Javascript
JavaScript实现简单图片滚动附源码下载
2014/06/17 Javascript
jquery序列化表单以及回调函数的使用示例
2014/07/02 Javascript
jquery预加载图片的方法
2015/05/27 Javascript
简介JavaScript中getUTCMonth()方法的使用
2015/06/10 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
2016/01/10 Javascript
使用Node.js处理前端代码文件的编码问题
2016/02/16 Javascript
jQuery EasyUI 入门必看
2016/06/03 Javascript
防止Node.js中错误导致进程阻塞的办法
2016/08/11 Javascript
从零开始学习Node.js系列教程一:http get和post用法分析
2017/04/13 Javascript
tsconfig.json配置详解
2019/05/17 Javascript
nodejs对项目下所有空文件夹创建gitkeep的方法
2019/08/02 NodeJs
[51:52]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
[05:49]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS 选手采访
2021/03/11 DOTA
浅谈Python中的可变对象和不可变对象
2017/07/07 Python
python绘制散点图并标记序号的方法
2018/12/11 Python
如何基于python对接钉钉并获取access_token
2020/04/21 Python
Python接口测试数据库封装实现原理
2020/05/09 Python
python zip()函数的使用示例
2020/09/23 Python
详解如何用HTML5 Canvas API控制图片的缩放变换
2016/03/22 HTML / CSS
个人校本研修方案
2014/05/26 职场文书
汉语言文学专业自荐信
2014/06/11 职场文书
美术社团活动总结
2014/06/27 职场文书
学习实践科学发展观心得体会
2014/09/10 职场文书
数学教师求职信范文
2015/03/20 职场文书
大学生学习十八届五中全会精神心得体会
2016/01/05 职场文书
优质服务心得体会(共4篇)
2016/01/22 职场文书