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 相关文章推荐
js 取时间差去掉周六周日实现代码
Dec 25 Javascript
jquery统计输入文字的个数并对其进行判断
Jan 07 Javascript
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
Mar 18 Javascript
JS模拟键盘打字效果的方法
Aug 05 Javascript
HTML5之WebSocket入门3 -通信模型socket.io
Aug 21 Javascript
完美实现bootstrap分页查询
Dec 09 Javascript
微信小程序 实例应用(记账)详解
Sep 28 Javascript
理解Angular的providers给Http添加默认headers
Jul 04 Javascript
妙用缓存调用链实现JS方法的重载
Apr 30 Javascript
详解JS中统计函数执行次数与执行时间
Sep 04 Javascript
express+vue+mongodb+session 实现注册登录功能
Dec 06 Javascript
vue 如何从单页应用改造成多页应用
Oct 23 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文件打开、关闭、写入的判断与执行代码
2011/05/24 PHP
浅谈thinkphp的实例化模型
2015/01/04 PHP
php遍历树的常用方法汇总
2015/06/18 PHP
laravel 判断查询数据库返回值的例子
2019/10/11 PHP
FF IE兼容性的修改小结
2009/09/02 Javascript
jQuery 标题的自动翻转实现代码
2009/10/14 Javascript
javascript 常用功能总结
2012/03/18 Javascript
只需20行代码就可以写出CSS覆盖率测试脚本
2013/04/24 Javascript
jquery中邮箱地址 URL网站地址正则验证实例代码
2013/09/15 Javascript
基于Vue.js实现数字拼图游戏
2016/08/02 Javascript
node.js实现登录注册页面
2017/04/08 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
2017/08/25 Javascript
新手必须知的Node.js 4个JavaScript基本概念
2018/09/16 Javascript
vue.js中proxyTable 转发请求的实现方法
2018/09/20 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
2019/04/29 Javascript
JS localStorage存储对象,sessionStorage存储数组对象操作示例
2020/02/15 Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
2020/03/07 Javascript
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
2020/03/10 Javascript
Vue.js暴露方法给WebView的使用操作
2020/09/07 Javascript
node.js如何根据URL返回指定的图片详解
2020/10/21 Javascript
python用reduce和map把字符串转为数字的方法
2016/12/19 Python
python远程连接服务器MySQL数据库
2018/07/02 Python
在Python中使用defaultdict初始化字典以及应用方法
2018/10/31 Python
详解python的四种内置数据结构
2019/03/19 Python
解决.ui文件生成的.py文件运行不出现界面的方法
2019/06/19 Python
浅析Python3 pip换源问题
2020/01/06 Python
Python 制作查询商品历史价格的小工具
2020/10/20 Python
优衣库澳大利亚官网:UNIQLO澳大利亚
2017/01/18 全球购物
C,C++的几个面试题小集
2013/07/13 面试题
超市业务员岗位职责
2013/12/05 职场文书
酒店员工检讨书
2014/02/18 职场文书
领导班子党的群众路线教育实践活动对照检查材料
2014/09/25 职场文书
2016年寒假社会实践活动总结
2015/03/27 职场文书
建筑工程材料员岗位职责
2015/04/11 职场文书
2016年清明节红领巾广播稿
2015/12/17 职场文书
趣味运动会口号
2015/12/24 职场文书