Javascript数组操作
1.1颠倒数组元素顺序
1.1.1 reverse()方法
语法:
arrayObject.reverse()
注意:该方法会改变原来的数组,而不会创建新的数组。
实例:
var myArr = ["1","2","3"]; document.write(myArr + "<br />"); //运行结果:1,2,3 document.write(myArr.reverse()); //运行结果:3,2,1
1.2判断某元素是否在数组内
1.2.1 indexOf方法
功能:返回给定元素在数组中的第一个索引值,否则返回-1。
语法:
array.indexOf(item[, index]);
item,要查找的元素。
index,开始查找指定元素的索引值,默认值为 0 (即在整个数组中查找指定元素)。
注意:
index大于或等于数组长度,则停止查找并返回-1。
index是一个负值,则将其作为数组末尾的一个抵消,即-1表示从最后一个元素开始查找,-2表示从倒数第二个元素开始查找 ,以此类推。
兼容性:不兼容IE6~8。
实例:
var arr = new Array(1, 2, 3); var backVal=arr.indexOf(2); console.log(backVal); //运行结果:1
1.2.2自定义函数
function contains(arr, obj) { var i = arr.length; while (i--) { if (arr[i] === obj) { return true; } } return false; } var arr = new Array(1, 2, 3); contains(arr, 2); //返回true contains(arr, 4); //返回false
1.2.3给Array增加一个函数
Array.prototype.contains = function (obj) { var i = this.length; while (i--) { if (this[i] === obj) { return true; } } return false; } [1, 2, 3].contains(2); //返回true [1, 2, 3].contains('2'); //返回false
注意:如果是用JQuery的话,可以用$.inArray(value, array);函数。
1.3删除数组中的某一值
1.3.1 delete方法
功能:只是将被删除的元素变成了undefined,而其他元素的键值还是不变。
兼容性:IE4及以上版本都支持。
实例:
var arr = ['a','b','c','d']; delete arr[1]; for(index in arr){ console.log(arr[index]); } 运行结果:a c d for(var i=0;i<arr.length;i++){ console.log(arr[i]); } 运行结果:a undefined c d
1.3.2 splice方法
功能:删除或者替换数组中的某一值。删除某一值后数组的数组的长度、索引也会相应地改变。
语法:
splice(index,len[,item]);
index:数组开始下标。
len:替换/删除的长度。
item:替换的值。
兼容性:IE5.5及以上版本都支持。
实例一:删除
var arr = ['a','b','c','d']; arr.splice(1,1); for(var i=0;i<arr.length;i++){ console.log(arr[i]); } 运行结果:a c d
实例二:替换
var arr = ['a','b','c','d']; arr.splice(1,1,1); for(var i=0;i<arr.length;i++){ console.log(arr[i]); } 运行结果:a 1 c d
实例二:替换及添加
var arr = ['a','b','c','d']; arr.splice(1,1,1,2); for(var i=0;i<arr.length;i++){ console.log(arr[i]); } 运行结果:a 1 2 c d
1.4遍历数组
1.4.1forEach()方法
功能:遍历数组,使数组的每一项都执行一次给定的函数。
语法:
array.forEach(callback[, thisArg]);
callback:在数组每一项上执行的函数,接收三个参数:currentValue(当前项的值)、index(当前项的索引)和array(数组本身)。
thisArg:可选参数。用来当作callback 函数内this值的对象,即callback函数的执行上下文。
兼容性:不兼容IE6~8。
1.4.2 map()方法
功能:遍历数组,返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组,而保持原数组不变。
语法:
array.map(callback[, thisArg]);
callback:在数组每一项上执行的函数,接收三个参数:currentValue(当前项的值)、index(当前项的索引)和array(数组本身)。
thisArg:可选参数。用来当作callback 函数内this的值的对象,即callback 函数的执行上下文。
兼容性:不兼容IE6~8。
1.4.3 forEach()和map()比较
共同点:
1、都是循环遍历数组中的每一项。
2、forEach()和map()里面每一次执行匿名函数都支持3个参数:数组中的当前项item,当前项的索引index,原始数组arr。
3、匿名函数中的this都是指Window。
4、只能遍历数组。
5、兼容性相同,IE8及以下版本不支持。
不同点:
1、forEach()没有返回值,而map()有返回值,可以return 出来。
实例:
var arr_0 = [12,23,24,42,1]; var res_0 = arr_0.forEach(function (item,index, arr) { arr [index] = item*10; }) console.log(res_0); //执行结果:undefined console.log(arr_0); //执行结果:[120, 230, 240, 420, 10],对原来的数组产生改变 var arr_1 = [12,23,24,42,1]; var res_1 = arr_1.map(function (item,index, arr) { return item*10; }) console.log(res_1); //执行结果:[120,230,240,420,10] console.log(arr_1); //执行结果:[12,23,24,42,1],原来的数组不变
1.4.4 filter()方法
功能:遍历数组,返回所有通过指定函数测试的元素创建的新数组。
语法:
arr.filter(callback[, thisArg]);
callback:在数组每一项上执行的函数,接收三个参数:currentValue(当前项的值)、index(当前项的索引)和array(数组本身)。
thisArg:可选参数。用来当作callback函数内this的值的对象,即callback 函数的执行上下文。
兼容性:不兼容IE6~8。
实例:
var arr = ["关羽","张翼德","赵子龙","黄忠","马超"]; var res = arr.filter(function(ele,index,array){ if(ele.length>2){ return true; } return false; }); console.log(arr); //执行结果:["关羽", "张翼德", "赵子龙", "黄忠", "马超"] console.log(res); //执行结果:["张翼德", "赵子龙"]
注意:return会结束定义的function函数,但filter()方法内部有一个类似for循环的句式对元素进行依次执行function函数。
1.4.5 some()方法
功能:遍历数组,数组中的每一个元素执行一次指定函数,直到找到一个使得指定函数返回一个true的值。如果找到则返回 true,否则返回false。
语法:
arr.some(callback[, thisArg]);
callback:在数组每一项上执行的函数,接收三个参数:currentValue(当前项的值)、index(当前项的索引)和array(数组本身)。
thisArg:可选参数。用来当作callback 函数内this的值的对象,即callback 函数的执行上下文。
兼容性:不兼容IE6~8。
实例:
var arr = [ 1, 2, 3, 4, 5, 6 ]; var res=arr.some(function(item,index,array){ console.log(item); return item > 3; }); //执行结果:1 2 3 4 console.log(arr); //执行结果:[1, 2, 3, 4, 5, 6],原数组不变 console.log(res); //执行结果:true
1.4.6 every()方法
功能:遍历数组,数组中的每个元素执行一次指定函数,只有所有元素都在指定函数中都返回true,则返回true,否则返回false。
语法:
arr.every(callback[, thisArg]);
callback:在数组每一项上执行的函数,接收三个参数:currentValue(当前项的值)、index(当前项的索引)和array(数组本身)。
thisArg:可选参数。用来当作callback 函数内this的值的对象,即callback 函数的执行上下文。
兼容性:不兼容IE6~8。
实例:
var arr = [ 6, 5, 4, 3, 2, 1 ]; var res = arr.every( function( item, index, array ){ console.log(item); return item > 3; }); //执行结果:6 5 4 3 console.log(arr); //执行结果:[6, 5, 4, 3, 2, 1],原数组不变 console.log(res); //执行结果:false
1.5数组的拼接
1.5.1 concat方法
功能:用于连接两个或多个数组。
语法:
arrayObject.concat(arrayX,arrayX,......,arrayX);
arrayX:必需。该参数可以是具体的值,也可以是数组对象。可以是任意多个。
注意:该方法返回一个新的数组。该数组是通过把所有arrayX参数添加到arrayObject中生成的。
实例一:拼接数组元素
var arr = [1,2,3]; var newArr=arr.concat(4,5); console.log(arr); //执行结果:[1, 2, 3],原数组不变 console.log(newArr); //执行结果:[1, 2, 3, 4, 5]
实例二:拼接数组
var arr_0 = ["George","John","Thomas"]; var arr_1 = ["James","Adrew", "Martin"]; var newArr=arr_0.concat(arr_1); console.log(arr_0); //执行结果:["George", "John", "Thomas"],原数组不变 console.log(arr_1); //执行结果:["James", "Adrew", "Martin"],原数组不变 console.log(newArr); //执行结果:["George", "John", "Thomas", "James", "Adrew", "Martin"]
1.6数组的截取
1.6.1 slice方法
功能:从已有的数组中返回选定的元素。
语法:
arrayObject.slice(start,end);
start:必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。
end:可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。
注意:该方法返回一个新的数组,包含从start到end(不包括该元素)的arrayObject中的元素。
实例:
var arr = ["George","John","Thomas"]; var newArr=arr.slice(1,2); console.log(arr); //执行结果:["George", "John", "Thomas"],原数组不变 console.log(newArr); //执行结果:["John"]
发表评论
-
JavaScript中对象的总结
2018-03-10 10:43 569JavaScript中对象的总结 1. ... -
JS数字指定长度不足前补零的实现
2018-03-10 10:25 12379JS数字指定长度不足前补零的实现 问题描述: ... -
银行卡卡号校验——Luhn算法
2017-11-06 09:34 2421银行卡卡号校验——Luhn算法 1.1 Luhn简介 ... -
JavaScript数组操作——遍历方法的兼容
2017-11-04 14:46 755JavaScript数组操作——遍历方法的兼容 1.1概述 ... -
获取select标签选中值
2017-11-03 08:54 1357获取select标签选中值 1.1实例讲解 <!DOCT ... -
表单提交前的验证方式——form的onsubmit事件
2017-10-30 14:21 8242表单提交前的验证方式——form的onsubmit事件 1.1 ... -
document.forms用法详解
2017-10-30 11:20 2673document.forms用法详解 1.1概述 ... -
js模拟表单post方式提交
2017-10-30 09:44 2088js模拟表单post方式提交 1.1概述 用j ... -
Form表单提交,页面不跳转的方法
2017-10-18 15:09 5635Form表单提交,页面不跳转的方法 1.1 解决方案一 ... -
javascript定时功能详解
2017-09-24 15:05 708javascript定时功能详解 1. ... -
js程序中$符号详解
2016-09-14 11:13 668js程序中$符号详解 $符号在php中是表示变 ... -
JS比较运算符之等于与不等于详解
2016-07-05 17:56 1818JS比较运算符之等于与不等于详解 1.1等于(==)与不等于( ... -
JS in的用法
2016-04-24 22:20 2301JS in的用法 1.1简介 JavaScript中的in 操 ... -
JS 访问对象中数据易错点总结
2016-04-16 16:07 458JS 访问对象中数据易错点总结 1.1访问Hash中的键值 例 ... -
JS number保留整数及n位小数的方法
2016-04-16 15:27 2710JS number保留整数及n位小 ... -
if语句中使用多个条件的优化
2016-04-16 11:31 6986if语句中使用多个条件 ...
相关推荐
Javascript数组操作整理.rarJavascript数组操作整理.rar
资源名称:Javascript数组及其操作 WORD版内容简介:本文档主要讲述的是Javascript数组及其操作;希望本文档会给有需要的朋友带来帮助;感兴趣的朋友可以过来看看 资源太大,传百度网盘了,链接在附件中,有...
Javascript数组及其操作
第一章JavaScript基础 1. 如何实现JavaScript 4 (1) 如何把JavaScript代码放到HTML页面里 4 使用[removed]标签,直接在HTML代码里加入JavaScript代码 4 使用[removed]调用外部的JavaScript(.js文件) 4 如何...
js数组操作,是工作中的一些积累整理起来,和大家分享
1、concat方法 [作用] 将多个数组联合起来,这个方法不会改变现存的数组,它只返回了所结合数组的一份拷贝。 [语法] arrayObj.concat(array1,array2,…) [实例] [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 2...
这里主要汇总一下JavaScript数组操作的常用API。相信对大家解决程序问题很有帮助。 一、性质 JavaScript中的数组是一种特殊的对象,用来表示偏移量的索引是该对象的属性,索引可能是整数。然而,这些数字索引在内部...
最近一直在用js,好好研究了下js数组的操作,在这里总结一下。 1、数组的创建 代码如下: var arrayObj = new Array(); //创建一个数组 var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是...
主要介绍了javascript 数组操作详解,需要的朋友可以参考下
主要给大家汇总介绍了Javascript数组操作函数,需要的朋友可以参考下
主要介绍了javascript数组操作,包括创建、元素的访问、元素删除、数组的拷贝等操作,还有其它示例,需要的朋友可以参考下
主要针对JavaScript数组操作函数push,pop,join,shift,unshift,slice,splice,concat进行总结,感兴趣的小伙伴们可以参考一下
本篇文章通过例举代码分析的方式给大家讲解了JavaScript数组操作难点以及需要注意的地方,一起学习参考下吧。
主要介绍了javascript数组操作总结,例如数组的创建、添加、删除、合并等操作方法,同时总结了属性和操作函数、方法等,需要的朋友可以参考下
本文主要介绍了JavaScript的数组操作,具有很好的参考价值,下面跟着小编一起来看下吧
JavaScript常用数组操作方法,让您更快了解数组操作,更好理解