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 相关文章推荐
jquery 问答知识整理
Feb 11 Javascript
jquery 插件开发备注
Aug 27 Javascript
在标题栏显示新消息提示,很多公司项目中用到这个方法
Nov 04 Javascript
javascript事件委托的用法及其好处简析
Apr 04 Javascript
Knockout结合Bootstrap创建动态UI实现产品列表管理
Sep 14 Javascript
javascript滚轮控制模拟滚动条
Oct 19 Javascript
JavaScript基于自定义函数判断变量类型的实现方法
Nov 23 Javascript
BootStrap 模态框实现刷新网页并关闭功能
Jan 04 Javascript
mac上node.js环境的安装测试
Jul 03 Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 jQuery
微信小程序实现的一键复制功能示例
Apr 24 Javascript
vue项目中使用bpmn为节点添加颜色的方法
Apr 30 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防CC攻击实现代码
2011/12/29 PHP
PHP使用header()输出图片缓存实例
2014/12/09 PHP
php从memcache读取数据再批量写入mysql的方法
2014/12/29 PHP
php封装json通信接口详解及实例
2017/03/07 PHP
javascript 冒泡排序 正序和倒序实现代码
2010/12/14 Javascript
一个基于jquery的文本框记数器
2012/09/19 Javascript
IE下JS读取xml文件示例代码
2013/08/05 Javascript
jQuery如何取id有.的值一般的方法是取不到的
2014/04/18 Javascript
Node.js 服务器端应用开发框架 -- Hapi.js
2014/07/29 Javascript
JavaScript获得表单target属性的方法
2015/04/02 Javascript
jQuery实现下拉框选择图片功能实例
2015/08/08 Javascript
学习JavaScript设计模式(多态)
2015/11/25 Javascript
解析JavaScript面向对象概念中的Object类型与作用域
2016/05/10 Javascript
bootstrap的工具提示实例代码
2017/05/17 Javascript
bootstrap daterangepicker双日历时间段选择控件详解
2017/06/15 Javascript
Vue 莹石摄像头直播视频实例代码
2018/08/31 Javascript
nuxt+axios实现打包后动态修改请求地址的方法
2020/04/22 Javascript
vue实现购物车加减
2020/05/30 Javascript
python中利用zfill方法自动给数字前面补0
2018/04/10 Python
详谈python3 numpy-loadtxt的编码问题
2018/04/29 Python
Python微医挂号网医生数据抓取
2019/01/24 Python
基于python实现百度翻译功能
2019/05/09 Python
pyqt5中QThread在使用时出现重复emit的实例
2019/06/21 Python
python logging日志模块原理及操作解析
2019/10/12 Python
vim自动补全插件YouCompleteMe(YCM)安装过程解析
2019/10/21 Python
Python读入mnist二进制图像文件并显示实例
2020/04/24 Python
Python脚本如何在bilibili中查找弹幕发送者
2020/06/04 Python
英语演讲稿范文
2014/01/03 职场文书
十佳护士获奖感言
2014/02/18 职场文书
《观舞记》教学反思
2014/04/16 职场文书
2015年挂职锻炼工作总结
2014/12/12 职场文书
描述鲁迅的名言整理,一生受用
2019/08/08 职场文书
《围炉夜话》110句人生箴言,精辟有内涵,引人深思
2019/10/23 职场文书
spring项目中切面及AOP的使用方法
2021/06/26 Java/Android
Springboot集成阿里云OSS上传文件系统教程
2021/06/28 Java/Android
十大最帅动漫男主 碓冰拓海上榜,第一是《灌篮高手》男主角
2022/03/18 日漫