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 相关文章推荐
iframe 上下滚动条如何默认在下方实现原理
Dec 10 Javascript
js工具方法弹出蒙版
May 08 Javascript
js动态调用css属性的小规律及实例说明
Dec 28 Javascript
jQuery 回车事件enter使用示例
Feb 18 Javascript
jquery实现的一个简单进度条效果实例
May 12 Javascript
JavaScript中的apply和call函数详解
Jul 20 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
Sep 08 Javascript
Vuejs第十一篇组件之slot内容分发实例详解
Sep 09 Javascript
js鼠标经过tab选项卡时实现切换延迟
Mar 24 Javascript
通过js修改input、select默认字体颜色
Apr 19 Javascript
详解Angular CLI + Electron 开发环境搭建
Jul 20 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
Apr 11 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的curl开启问题探讨
2014/04/08 PHP
CentOS 6.3下安装PHP xcache扩展模块笔记
2014/09/10 PHP
php rsa加密解密使用详解
2015/01/14 PHP
PHP序列化/对象注入漏洞分析
2016/04/18 PHP
PHP超低内存遍历目录文件和读取超大文件的方法
2019/05/01 PHP
javascript div 遮罩层封锁整个页面
2009/07/10 Javascript
JavaScript Cookie 直接浏览网站分网址
2009/12/08 Javascript
js获取RadioButtonList的Value/Text及选中值等信息实现代码
2013/03/05 Javascript
javascript获取设置div的高度和宽度兼容任何浏览器
2013/09/22 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
2013/11/19 Javascript
jQuery插件开发详细教程
2014/06/06 Javascript
Javascript Object 对象学习笔记
2014/12/17 Javascript
JS实现黑色风格的网页TAB选项卡效果代码
2015/10/09 Javascript
JavaScript判断日期时间差的实例代码
2018/03/01 Javascript
写一个移动端惯性滑动&amp;回弹Vue导航栏组件 ly-tab
2018/03/06 Javascript
微信小程序实现团购或秒杀批量倒计时
2020/11/01 Javascript
ng-alain表单使用方式详解
2018/07/10 Javascript
angularjs 动态从后台获取下拉框的值方法
2018/08/13 Javascript
vue中,在本地缓存中读写数据的方法
2018/09/21 Javascript
解决vue 单文件组件中样式加载问题
2019/04/24 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
2019/05/29 Javascript
微信小程序-可移动菜单的实现过程详解
2019/06/24 Javascript
微信小程序之几种常见的弹框提示信息实现详解
2019/07/11 Javascript
JSONObject与JSONArray使用方法解析
2020/09/28 Javascript
twilio python自动拨打电话,播放自定义mp3音频的方法
2019/08/08 Python
Django 在iframe里跳转顶层url的例子
2019/08/21 Python
Django模板语言 Tags使用详解
2019/09/09 Python
Python semaphore evevt生产者消费者模型原理解析
2020/03/18 Python
Python如何使用paramiko模块连接linux
2020/03/18 Python
OpenCV+python实现膨胀和腐蚀的示例
2020/12/21 Python
css3弹性盒模型(Flexbox)详细介绍
2014/10/08 HTML / CSS
IFCHIC台湾:欧美国际设计师品牌
2019/05/18 全球购物
微软巴西官方网站:Microsoft Brasil
2019/09/26 全球购物
预备党员党课思想汇报
2014/01/13 职场文书
暑期社会实践感言
2014/02/25 职场文书
幼儿园2016年感恩节活动总结
2016/04/01 职场文书