Javascript数组Array方法解读


Posted in Javascript onMarch 13, 2016

接上一篇《Javascript数组Array基础介绍》,这一篇详细介绍Array的所有方法。

所有数组的方法都定义在Array.prototype上,而Array.prototype本身也是一个数组。

array.concat()

浅复制一份当前数组,并把接收到的参数附加到新数组的末尾。原数组不改变。

语法

array.concat(value1, value2, ..., valueN)
参数为需要合并的数组或非数组值

var arr1 = [1, 2, 3];
var obj = {animal : 'monkey'};
var arr2 = arr1.concat([4, 5, 6], obj, [7, 8, 9]);
// arr1 [1, 2, 3]
// arr2 [1, 2, 3, 4, 5, 6, {animal : 'monkey'}, 7, 8, 9]

obj.animal = 'tiger';
// [1, 2, 3, 4, 5, 6, {animal : 'tiger'}, 7, 8, 9]

可以合并数组或非数组值,但是要注意如果包含对象,对象还是引用原来的对象。

array.join()

返回一个将数组所有元素用分隔符拼接成的字符串,默认分隔符为逗号。

语法

array.join(seperator)
参数为分割符

var arr1 = [1, 2, 3];
var str = arr1.join(); // 1,2,3
str = arr1.join('#'); // 1#2#3

当将大量字符串片段组装时,join方法比+元素运算符要快。

利用new Array(3)将生成一个长度为三的空数组,同时结合join()方法,可以实现重复某段字符串。

var str = new Array(3).join('-+'); // -+-+

重复的次数就是数组长度减一,因为字符串是分隔符。

由于数组本身是对象,拥有toString()方法,利用它也能实现将数组拼接成一个字符串,只不过分隔符只能是逗号了。

var arr1 = [1, 2, 3];
arr1.toString(); // 1,2,3

实际上它会先调用每一个元素的toString()方法。

array.push()

把一个或多个参数附加在数组末尾,返回数组长度。改变数组自身。

语法

array.push(value1, value2, ..., valueN);
实例

var arr1 = [1, 2, 3];
var len = arr1.push(4, 5);

console.log(len); // 5
console.log(arr1); // [1, 2, 3, 4, 5]

另一种方法也可以实现在数组末尾插入值。

arr1[arr1.length] = 6; // [1, 2, 3, 4, 5, 6]  
array.pop()

将数组最后一项删除,并返回删除项。改变数组自身。

var arr1 = [1, 2, 3];
arr.pop(); // [1, 2] 返回 3

如果数组为空,返回undefined。

array.unshift()

把一个或多个参数插入到数组头部,返回数组长度。改变数组自身。

var arr1 = [1, 2, 3];
var len = arr1.unshift(4, 5);

console.log(len); // 5
console.log(arr1); // [4, 5, 1, 2, 3]

array.shift()

将数组的第一项删除,并返回删除项。改变数组自身。

var arr1 = [1, 2, 3];
arr.shift(); // [2, 3] 返回 1

如果数组为空,返回undefined。

array.sort()

这个方法按照每个元素的toString()方法返回的值进行排序,所以一般得不到期望的结果。

var arr1 = [1, 2, 3, 14, 24];
arr1.sort(); // [1, 14, 2, 24, 3]

但是sort()方法可以接收一个我们自定义的函数进行比较。比较函数接受两个参数,尤其sort()默认是升序,所以如果想让第一个参数位于第二个参数前面就要返回负数,相等返回0,位于后面返回正数。

var compare = function(a, b){
  return a - b;
}

var arr2 = [1, 12, 2, 23, 3 , 5, 4];
arr2.sort(compare); // [1, 2, 3, 4, 5, 12, 23]

比较字符串可以结合string.localeCompare()方法来用。

var arr3 = ['F', 'e', 'f', 'E'];
arr3.sort(function(a, b){
  return a.localeCompare(b);
});
// ['e', 'E', 'f', 'F']

array.reverse()

反转数组元素顺序,返回数组自身。

var arr1 = [1, 4, 3, 2];
arr1.reverse(); // [2, 3, 4, 1]

array.slice()

对数组浅复制其中的一段,不改变数组自身。

array.slice(start, end);
方法接受两个参数,最后一个可以省略,默认是数组自身长度。

var arr1 = [1, 2, 3, 4, 5, 6];

arr1.slice(4); // [5, 6]
arr1.slice(2, 4); // [3, 4]
arr1.slice(-3); // [4, 5, 6]

如果传入负数,那么会被自动加上数组的长度,试图变成非负数。
传入一个绝对值小于数组长度的值,就是从后向前取负数绝对值个数的元素。例如例子中取了后三个元素。

array.splice()

这是数组中最强大也最常用对的方法了,可以实现删除,插入,替换。

语法

array.slice(start, count, item);
该方法移除一个或多个元素,并用新的元素替代他们。start是开始的位置,count是删除的数量,item是新增加的元素(item不止一个,也可省略),以数组形式返回删除的元素。

var arr1 = [1, 2, 3, 4, 5];
//删除
arr1.splice(2, 1); // [1, 2, 4, 5] 返回 [3]
//插入
arr1.splice(3, 0, 6, 7); // [1, 2, 4, 6, 7, 5]
//替换
arr1.splice(1, 2, 8, 9); // [1, 8, 9, 6, 7, 5] 返回[2, 4]

下面介绍一些ECMAScript5新增的方法,主要是ie8不支持。

indexOf() 与 lastIndexOf()

查找对应项在数组中的索引位置,第二个参数表示对应查找方向的起始位置,返回第一个匹配的位置,如果没有找到则返回-1;
indexOf()是从前往后查找,lastIndexOf()是从后往前查找。

var arr1 = [1, 2, 3, 4, 3, 2, 1];
arr1.indexOf(2); // 1
arr1.indexOf(2, 3); // 5

arr1.lastIndexOf(3); // 4
arr1.lastIndexOf(3, 4) // 2

迭代方法

以下方法接受两个参数,第一个是每一项运行的函数,第二个函数运行的作用域。
运行函数有三个参数,分别是当前项,位置,数组本身。

array.every()

运行给定函数,如果迭代每一项都返回true,则最终返回true。

var arr1 = [1, 2, 3, 4, 5];
arr1.every(function(item, index, array){
  return item > 3;
});
// false

array.some()

运行给定函数,如果迭代中有一项返回true,则最终返回true。

arr1.some(function(item, index, array){
  return item > 3;
});
// true

array.map()

运行给定函数,将迭代中返回的值组成数组,返回该数组。

arr1.map(function(item, index, array){
  return item * 2;
});
// [2, 4, 6, 8, 10]

array.filter()

运行给定函数,将迭代中返回true的元素以数组形式返回

arr1.filter(function(item, index, array){
  return item > 3;
});
// [4, 5]

array.forEach()

运行给定函数,不返回任何值。类似于普通的for循环的功能。

归并方法

函数接受两个参数,第一个参数是每一个运行的自定义函数,第二项是作为归并基础的初始值。
自定义函数接受四个参数,分别是前一项,当前项,位置,数组。

array.reduce() 与 array.reduceRight()
var splitstr = function(prev, item, index, array){
  return prev + '#' + item;
}

var arr1 = [1, 2, 3, 4, 5];
arr1.reduce(splitstr, 8); // 8#1#2#3#4#5
arr1.reduceRight(splitstr, 8); // 8#5#4#3#2#1

小结

这一篇介绍了数组方法的种种细节和注意问题,下一篇将会介绍数组更高级的用法。本篇后续会添加ECMAScript6 新增加的数组方法的介绍。

Javascript 相关文章推荐
音乐播放用的的几个函数
Sep 07 Javascript
myFocus slide3D v1.1.0 使用方法与下载
Jan 12 Javascript
给事件响应函数传参数的四种方式小结
Dec 05 Javascript
javascript刷新父页面的各种方法汇总
Sep 03 Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
Jan 28 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
Jun 17 Javascript
jQuery数组处理函数整理
Aug 03 Javascript
JS变量及其作用域
Mar 29 Javascript
MvcPager分页控件 适用于Bootstrap
Jun 03 Javascript
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 jQuery
js代码编写无缝轮播图
Sep 13 Javascript
一篇文章让你搞懂JavaScript 原型和原型链
Nov 23 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
Mar 13 #Javascript
Javascript数组Array基础介绍
Mar 13 #Javascript
深入探究JavaScript中for循环的效率问题及相关优化
Mar 13 #Javascript
简单谈谈json跨域
Mar 13 #Javascript
详解JavaScript中数组和字符串的lastIndexOf()方法使用
Mar 13 #Javascript
Node.js编写爬虫的基本思路及抓取百度图片的实例分享
Mar 12 #Javascript
JavaScript中循环遍历Array与Map的方法小结
Mar 12 #Javascript
You might like
PHP数据过滤的方法
2013/10/30 PHP
PHP删除数组中空值的方法介绍
2014/04/14 PHP
PHP实现视频文件上传完整实例
2014/08/28 PHP
PHP实现合并discuz用户
2015/08/05 PHP
PHP自动识别当前使用移动终端
2018/05/21 PHP
JQuery.Ajax之错误调试帮助信息介绍
2013/07/04 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
2013/11/22 Javascript
javascript基于HTML5 canvas制作画箭头组件
2014/06/25 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
2016/04/15 Javascript
jQuery右下角悬浮广告实例
2016/10/17 Javascript
Angularjs实现下拉框联动的示例代码
2017/08/22 Javascript
vue监听scroll的坑的解决方法
2017/09/07 Javascript
关于TypeScript模块导入的那些事
2018/06/12 Javascript
Nodejs中的JWT和Session的使用
2018/08/21 NodeJs
js实现多个倒计时并行 js拼团倒计时
2019/02/25 Javascript
Vue中对iframe实现keep alive无刷新的方法
2019/07/23 Javascript
微信公众号服务器验证Token步骤图解
2019/12/30 Javascript
vue动态设置路由权限的主要思路
2021/01/13 Vue.js
[12:21]VICI vs TNC (BO3)
2018/06/07 DOTA
python实现TCP服务器端与客户端的方法详解
2015/04/30 Python
python基础教程之分支、循环简单用法
2016/06/16 Python
Python 装饰器深入理解
2017/03/16 Python
关于Django外键赋值问题详解
2017/08/13 Python
python numpy实现文件存取的示例代码
2019/05/26 Python
pygame实现烟雨蒙蒙下彩虹雨
2019/11/11 Python
Python中base64与xml取值结合问题
2019/12/22 Python
如何使用selenium和requests组合实现登录页面
2020/02/03 Python
python数据分析:关键字提取方式
2020/02/24 Python
Django框架models使用group by详解
2020/03/11 Python
I.T中国官网:精选时尚设计师单品网购平台
2018/03/26 全球购物
波兰化妆品和护肤品购物网站:eKobieca
2019/08/30 全球购物
优秀中职教师事迹材料
2014/08/26 职场文书
《正比例》教学反思
2016/02/23 职场文书
MySQL的join buffer原理
2021/04/29 MySQL
OpenCV图像变换之傅里叶变换的一些应用
2021/07/26 Python
使用Redis实现点赞取消点赞的详细代码
2022/03/20 Redis