JavaScript数组常用方法


Posted in Javascript onMarch 02, 2015

判断某个对象是否是数组: instanceof、Array.isArray()

对于一个网页或者一个全局作用域可以使用instanceof操作符。

if(value instanceof Array){  //判断value是否是数组
   
}
instanceof操作符它假设只有一个全局执行环境,如果网页包含多个框架则使用ECMAScript5新增的Array.isArray()方法。

if(Array.isArray(value)){//判断value是否是数组

}
Array.isArray()方法支持的浏览器有IE9+、Firefor 4+、Safari5+、Opera 10.5+、Chrome。

如果要在未实现这个方法中的浏览器中检查数组,则使用:

if(Object.prototype.toString.call(value)=="[object Array]"){
}

将数组转换为字符串: toLocaleString()、toString()、valueOf()、join()

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

alert(test.toString());//a,b,c

alert(test.toLocaleString());//a,b,c

alert(test.valueOf());//a,b,c

alert(test);//a,b,c 默认调用toString()方法

alert(test.join(','));//a,b,c

alert(test.join('|'));//a|b|c

添加和移除数组元素方法:push()、pop()、unshift()、shift()

push()方法可以接受任意数量的参数,把他们逐个加到数组末尾,并且返回数组修改后的数组长度。

pop()方法从数组末尾移除最后一项,然后返回移除的项。

unshift()方法在数组前端添加任意数量的参数并返回新数组长度。

shift()方法能够移除数组中第一个项并返回移除的项。

var test=[];

var count = test.push('a','b');//从数组末尾逐个添加

count =test.push('c');

alert(count);//3

alert(test);//

var item = test.pop();

alert(item);//c

alert(test.length);//2

排序方法:reverse()和sort()

reverse()方法会反转数组项顺,操作数组本身。

sort()方法默认按升序排列数组项,操作数组本身。

var test=[1,2,3,4,5];

test.reverse();

alert(test);//5,4,3,2,1

var test2=[0,1,5,10,15];

test2.sort();

alert(test2);//0,1,10,15,5    sort()方法会调用每个数组项的toString()方法,比较字符串,以确定排序。所以这里排序是字符串排序

sort()方法还可以传入一个比较函数。

比较函数在第一个参数应该位于第二个之前则返回一个负数,如果两个参数相等则返回0,第一个参数应该位于第二个之后则返回一个正数。

function compare(value1,value2){

    if(value1<value2){

        return -1;

    }else if(value1>value2){

        return 1;

    }else{

         return 0; 

    }

}    

var test=[0,1,5,10,15];

test.sort(compare);

alert(test);//0,1,5,10,15  

操作方法:concat()、slice()、splice()

concat()方法用于连接两个或多个数组。该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。返回一个新的数组。

var a = [1,2,3];

alert(a.concat(4,5));//1,2,3,4,5

var arr = new Array(3)

arr[0] = "George"

arr[1] = "John"

arr[2] = "Thomas"

var arr2 = new Array(3)

arr2[0] = "James"

arr2[1] = "Adrew"

arr2[2] = "Martin"

alert(arr.concat(arr2));

//George,John,Thomas,James,Adrew,Martin

var arr = new Array(3)

arr[0] = "George"

arr[1] = "John"

arr[2] = "Thomas"

var arr2 = new Array(3)

arr2[0] = "James"

arr2[1] = "Adrew"

arr2[2] = "Martin"

var arr3 = new Array(2)

arr3[0] = "William"

arr3[1] = "Franklin"

alert(arr.concat(arr2,arr3))

//George,John,Thomas,James,Adrew,Martin,William,Franklin

slice() 方法可从已有的数组中返回选定的元素。返回一个新的数组,包含从 start 到 end (不包括该元素)的 arrayObject 中的元素。

var test =['a','b','c','d','e'];

var arr1=test.slice(1);

var arr2=test.slice(1,4);

alert(arr1);//b,c,d,e

alert(arr2);//b,c,d

splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。操作数组本身。

第一个参数:起始位置、第二个参数:截取的个数、第三个参数:追加的新元素。

//删除

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

var removed=test.splice(0,1)//删除第一项

alert(test);//b,c

alert(removed);//a 返回被删除的项

//插入

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

var removed2=test2.splice(1,0,'d','e')//从位置1开始插入d,e

alert(test2);//a,d,e,b,c

alert(removed2)//空数组

//替换

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

var removed3=test3.splice(1,1,'d','e')//从位置1开始插入d,e

alert(test3);//a,d,e,c

alert(removed3)//b

位置方法:indexOf()、lastIndexOf()

ECMAScript5提供方法支持浏览器:IE9+、Firefox 2+、Safari 3+、Opera 9.5+、Chrome

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。

lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置,在一个字符串中的指定位置从后向前搜索。

 一个参数时:表示要查找的值,返回索引位置(从0开始)、两个参数时:第一个参数表示起始位置,第二个参数表示要查找的值。

var numbers=[1,2,3,4,5,4,3,2,1];

alert(numbers.indexOf(4));//3

alert(numbers.lastIndexOf(4));//5
alert(numbers.IndexOf(4,4));//5

alert(numbers.lastIndexOf(4,4));//3

迭代方法:every()、filter()、forEach()、map()、some()

ECMAScript5提供方法支持浏览器:IE9+、Firefox 2+、Safari 3+、Opera 9.5+、Chrome

every():对数组中的每一项运行给定函数,如果该函数对每一项都返回true,则返回true。

filter():对数组中的每一项运行给定函数,返回该函数会返回true的项组成的数组。

forEach():对数组中的每一项运行给定函数,这个方法没有返回值。

map():对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组。

some():对数组中的每一项运行给定函数,如果该函数对任一项返回true,则返回true。

以上函数都不会修改数组中包含的值。

var numbers=[1,2,3,4,5,4,3,2,1];

//every()

var everyResult=numbers.every(function(item,index,array){

      return (item>2); 

})

alert(everyResult);//false

//some()

var someResult=numbers.some(function(item,index,array){

      return (item>2); 

})

alert(someResult);//true

//filter()

var filterResult=numbers.filter(function(item,index,array){

      return (item>2); 

})

alert(filterResult);//[3,4,5,4,3]
//map()

var mapResult=numbers.map(function(item,index,array){

      return (item*2); 

})

alert(mapResult);//[2,4,6,8,10,8,6,4,2]
//forEach()

numbers.forEach(function(item,index,array){

      //执行操作 无返回值

})

归并方法:reduce()、reduceRight()

 ECMAScript5提供方法支持浏览器:IE9+、Firefox 3+、Safari 4+、Opera 10.5+、Chrome

 两个方法都会迭代数组的所以项,然后构建一个最终返回的值。reduce()方法从数组第一项开始,reduceRight()方法从数组最后开始。

var values=[1,2,3,4,5];

var sum=valuse.reduce(function(prev,cur,index,array){

         prev+cur;

});

alert(sum);//15

以上就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
FormValid0.5版本发布,带ajax自定义验证例子
Aug 17 Javascript
jquery select选中的一个小问题
Oct 11 Javascript
node.js 一个简单的页面输出实现代码
Mar 07 Javascript
javascript full screen 全屏显示页面元素的方法
Sep 27 Javascript
利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域
Dec 14 Javascript
jQuery插件datalist实现很好看的input下拉列表
Jul 14 Javascript
使用Javascript写的2048小游戏
Nov 25 Javascript
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
Aug 15 Javascript
karma+webpack搭建vue单元测试环境的方法示例
May 24 Javascript
vue权限路由实现的方法示例总结
Jul 29 Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
Sep 28 Javascript
npm qs模块使用详解
Feb 07 Javascript
使用npm发布Node.JS程序包教程
Mar 02 #Javascript
js实现点击链接后窗口缩小并居中的方法
Mar 02 #Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
Mar 02 #Javascript
Javascript动画的实现原理浅析
Mar 02 #Javascript
JavaScript页面模板库handlebars的简单用法
Mar 02 #Javascript
EasyUI中实现form表单提交的示例分享
Mar 01 #Javascript
EasyUI实现二级页面的内容勾选的方法
Mar 01 #Javascript
You might like
关于PHP实现异步操作的研究
2013/02/03 PHP
YII中Ueditor富文本编辑器文件和图片上传的配置图文教程
2017/03/15 PHP
Thinkphp5.0 框架使用模型Model添加、更新、删除数据操作详解
2019/10/11 PHP
基于js disabled=&quot;false&quot;不起作用的解决办法
2013/06/26 Javascript
JQuery-tableDnD 拖拽的基本使用介绍
2013/07/04 Javascript
控制input输入框中提示信息的显示和隐藏的方法
2014/02/12 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
2015/03/20 Javascript
原生javascript实现的一个简单动画效果
2016/03/30 Javascript
Bootstrap+jfinal退出系统弹出确认框的实现方法
2016/05/30 Javascript
JavaScript中ES6字符串扩展方法
2016/08/26 Javascript
Extjs让combobox写起来简洁又漂亮
2017/01/05 Javascript
AngularJS Select(选择框)使用详解
2017/01/18 Javascript
jQuery使用EasyUi实现三级联动下拉框效果
2017/03/08 Javascript
微信小程序之前台循环数据绑定
2017/08/18 Javascript
jquery动态添加带有样式的HTML标签元素方法
2018/02/24 jQuery
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
2018/10/19 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
2019/12/09 Javascript
Vue组件模板的几种书写形式(3种)
2020/02/19 Javascript
基于python socketserver框架全面解析
2017/09/21 Python
简单了解django orm中介模型
2019/07/30 Python
django中上传图片分页三级联动效果的实现代码
2019/08/30 Python
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
2010/04/01 HTML / CSS
Notino意大利:购买香水和化妆品
2018/11/14 全球购物
Rentalcars.com中国:世界上最大的在线汽车租赁服务
2019/08/22 全球购物
精彩自我鉴定
2014/01/16 职场文书
幼儿园新学期寄语
2014/01/18 职场文书
爷爷追悼会答谢词
2014/01/24 职场文书
中学生学雷锋活动心得体会
2014/03/10 职场文书
社区网格化管理实施方案
2014/03/21 职场文书
关爱老人标语
2014/06/21 职场文书
学雷锋志愿者活动方案
2014/08/21 职场文书
2015年度质量工作总结报告
2015/04/27 职场文书
八月一日观后感
2015/06/10 职场文书
独生子女证明范本
2015/06/19 职场文书
Java中PriorityQueue实现最小堆和最大堆的用法
2021/06/27 Java/Android
介绍一下28个JS常用数组方法
2022/05/06 Javascript