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文字滚动停顿效果代码
Jun 28 Javascript
读jQuery之十二 删除事件核心方法
Jul 31 Javascript
JS表的模拟方法
Feb 05 Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
Oct 02 Javascript
JS中关于事件处理函数名后面是否带括号的问题
Nov 16 Javascript
微信小程序 视图容器组件的详解及实例代码
Jan 19 Javascript
vue事件修饰符和按键修饰符用法总结
Jul 25 Javascript
Bootstrap实现可折叠分组侧边导航菜单
Mar 07 Javascript
vue-cli项目代理proxyTable配置exclude的方法
Sep 20 Javascript
微信小程序环境下将文件上传到OSS的方法步骤
May 31 Javascript
Vue 中 a标签上href无法跳转的解决方式
Nov 12 Javascript
vue实现公共方法抽离
Jul 31 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数组一对一替换实现代码
2012/08/31 PHP
深入理解curl类,可用于模拟get,post和curl下载
2013/06/08 PHP
php生成短域名函数
2015/03/23 PHP
PHP开发APP端微信支付功能
2017/02/17 PHP
ThinkPHP使用getlist方法实现数据搜索功能示例
2017/05/08 PHP
php-beanstalkd消息队列类实例分享
2017/07/19 PHP
php命名空间设计思想、用法与缺点分析
2019/07/17 PHP
如何用javascript判断录入的日期是否合法
2007/01/08 Javascript
js DOM模型操作
2009/12/28 Javascript
javascript利用初始化数据装配模版的实现代码
2010/11/17 Javascript
js数组的基本用法及数组根据下标(数值或字符)移除元素
2013/10/20 Javascript
jquery下div 的resize事件示例代码
2014/03/09 Javascript
IE浏览器IFrame对象内存不释放问题解决方法
2014/08/22 Javascript
JS实现一个列表中包含上移下移删除等功能
2014/09/24 Javascript
PageSwitch插件实现100种不同图片切换效果
2015/07/28 Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
2016/08/01 Javascript
Node.js操作redis实现添加查询功能
2017/05/25 Javascript
element-ui 表格实现单元格可编辑的示例
2018/02/26 Javascript
Puppeteer环境搭建的详细步骤
2018/09/21 Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
2020/02/19 Javascript
Python通过RabbitMQ服务器实现交换机功能的实例教程
2016/06/29 Python
django 捕获异常和日志系统过程详解
2019/07/18 Python
Python Django模板之模板过滤器与自定义模板过滤器示例
2019/10/18 Python
python 线性回归分析模型检验标准--拟合优度详解
2020/02/24 Python
python使用正则表达式匹配txt特定字符串(有换行)
2020/12/09 Python
python 基于opencv去除图片阴影
2021/01/26 Python
CSS实现半透明边框与多重边框的场景分析
2019/11/13 HTML / CSS
初中三好学生事迹材料
2014/01/13 职场文书
消防安全检查制度
2014/02/04 职场文书
人力资源部经理岗位职责规定
2014/02/23 职场文书
父母对孩子说的话
2014/04/12 职场文书
莫言诺贝尔获奖演讲稿
2014/05/21 职场文书
聋哑人盗窃罪辩护词
2015/05/21 职场文书
Redis缓存-序列化对象存储乱码问题的解决
2021/06/21 Redis
MySQL利用UNION连接2个查询排序失效详解
2021/11/20 MySQL
nginx配置限速限流基于内置模块
2022/05/02 Servers