JavaScript-实战开发常用的数组方法,让编程不再成为你的难题
1.forEach()方法,用于遍历数组
forEach(callback[,object])方法 第一个参数是回调函数,回调函数中有3个默认参数ele,index,self
ele参数指的是当前元素,index参数指的是索引,self参数指的是当前元素所属的数组对象。
forEach(callback[,object])方法 第二个参数是一个对象,参数为空this指向的Window,参数为对象时,this指向对象。
personArr.forEach(function(ele,index,self){this[index].innerHTML=ele.name;},document.getElementsByTagName(\'li\'))
以上代码将数组中的内容,在li标签中显示,不需要再使用for循环。
forEach()方法原理代码:
Array.prototype.myForeach=function(func){var arr=this;var len=arr.length;var param2=arguments[1] || window; //如果有参数指向就实参,没有实参指向Windowfor(var i=0;i<len;i++){func.apply(param2,[arr[i],i,arr]);}}personArr.myForeach(function(ele,index,self){console.log(ele,index,self);console.log(this);},document.getElementsByTagName(\'li\'))
2.filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素(过滤掉不符合条件的元素)回调函数中的返回值为true,则添加到新数组中去,返回值为false或没有符合条件的元素则返回空数组
注意: filter() 不会对空数组进行检测。
注意: filter() 不会改变原始数组。
filter(callback[,object]) 第一个参数是回调函数,回调函数中有3个默认参数ele,index,self
ele参数指的是当前元素,index参数指的是索引,self参数指的是当前元素所属的数组对象。
filter(callback[,object])方法 第二个参数是一个对象,参数为空this指向的Window,参数为对象时,this指向对象。
var newArr =personArr.filter(function(ele,index,self){if(ele.age > 18){return true;}});console.log(newArr);
以上代码过滤掉数组中ele.age小于18的值。
filter()方法原理代码:
Array.prototype.myFilter=function(func){var _arr = this;var len = _arr.length;//如果有参数指向就实参,没有实参指向Windowvar param2 = arguments[1] || window;var newArr = [];for(var i=0;i<len;i++){//如果func.apply(param2,[_arr[i],i,_arr])为true返回新数组,否则返回空数组func.apply(param2,[_arr[i],i,_arr])?newArr.push(_arr[i]):\"\";}return newArr}
3.map() 将一个数组中的元素转换到另一个数组中,返回一个新数组
注意: map() 不会对空数组进行检测。
注意: map() 不会改变原始数组。
map(callback[,object]) 第一个参数是回调函数,回调函数中有3个默认参数ele,index,self
ele参数指的是当前元素,index参数指的是索引,self参数指的是当前元素所属的数组对象。
map(callback[,object])方法 第二个参数是一个对象,参数为空this指向的Window,参数为对象时,this指向对象。
//map(callback[,object]) 返回一个新数组var newArr = personArr.map(function(ele,index,self){// console.log(ele,index,self)// console.log(this)ele.age = ele.age + 10return ele},{name:\"jack\"})console.log(newArr)
以上代码数组中ele.age的值每一个都会加上10,返回一个新数组,不会改变原始数组。
map()方法原理代码:
Array.prototype.myMap = function(func){var _arr = this;var len = _arr.length;var param2 = arguments[1] || window;var newArr = [];for(var i = 0; i < len;i++){newArr.push( func.apply(param2,[_arr[i],i,_arr]) )}return newArr;}
4.every()方法用于检测数组所有元素是否都符合指定条件(通过函数提供)。如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测。如果所有元素都满足条件,则返回 true。
注意: every() 不会对空数组进行检测。
注意: every() 不会改变原始数组。
every(callback[,object]) 第一个参数是回调函数,回调函数中有3个默认参数ele,index,self
ele参数指的是当前元素,index参数指的是索引,self参数指的是当前元素所属的数组对象。
every(callback[,object])方法 第二个参数是一个对象,参数为空this指向的Window,参数为对象时,this指向对象。
var flag = personArr.myEvery(function(ele,index,self){console.log(ele,index,self)console.log(this)return ele.age > 18},{name : \"jack\"})console.log(flag)
every()方法返回布尔值。如果所有元素都通过检测返回 true,否则返回 false。
every()方法原理代码:
Array.prototype.myEvery = function(func){var _arr = this;var len = _arr.length;var param2 = arguments[1] || window;var flag = true;for(var i = 0; i < len;i++){if( !func.apply(param2,[_arr[i],i,_arr]) ){flag = false;break;}}return flag;}
5.some()方法用于检测数组所有元素是否都符合指定条件(通过函数提供)。如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。如果没有满足条件的元素,则返回false。
注意: reduce() 对于空数组是不会执行回调函数的。
some(callback[,object]) 第一个参数是回调函数,回调函数中有3个默认参数ele,index,self
ele参数指的是当前元素,index参数指的是索引,self参数指的是当前元素所属的数组对象。
some(callback[,object])方法 第二个参数是一个对象,参数为空this指向的Window,参数为对象时,this指向对象。
var flag = personArr.some(function(ele,index,self){//console.log(ele,index,self)//console.log(this)return ele.age >= 25},{name : \"jack\"})console.log(flag)
some()方法布尔值。如果数组中有元素满足条件返回 true,否则返回 false。
6.reduce()方法用于检测数组所有元素是否都符合指定条件(通过函数提供)。如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。如果没有满足条件的元素,则返回false。
注意: reduce() 对于空数组是不会执行回调函数的。
reduce(callback[,object]) 第一个参数是回调函数,回调函数中有4个默认参数prevValue,ele,index,self
prevValue初始值, 或者计算结束后的返回值。ele参数指的是当前元素,index参数指的是索引,self参数指的是当前元素所属的数组对象。
7.slice()方法方法可提取字符串的某个部分,并以新的字符串返回被提取的部分。
注意: 如果是负数,则该参数规定的是从字符串的尾部开始算起的位置。也就是说,-1 指字符串的最后一个字符,-2 指倒数第二个字符,以此类推。
slice(start, end) 第一个参数必填. 要抽取的片断的起始下标。第一个字符位置为 0
slice(start, end) 方法 第二个参数是可选。 紧接着要截取的片段结尾的下标。若未指定此参数,则要提取的子串包括 start 到原字符串结尾的字符串。如果该参数是负数,那么它规定的是从字符串的尾部开始算起的位置。
8.sort()方法用于对数组的元素进行排序。默认是升序
注意: 这种方法会改变原始数组!。
sort(sortfunction) 可选。规定排序顺序。必须是函数。
9.splice() 方法用于添加或删除数组中的元素。
注意: 这种方法会改变原始数组!。
splice() 第一个参数操作的对应下标 从0开始,第二个参数删除个数 如果是0不删除元素,删除从1开始,第三个参数添加元素(多个用逗号隔开)–可省略
10.indexOf()–判断数组里面是否存在对应的值,存在则返回该值第一次出现时所在的下标,不存在则返回-1
var values = [1,2,3,4,5];indexOf() 从头找指定项的位置var v1 = values.indexOf(3);lastIndexOf() 从后往前查位置var v2 = values.lastIndexOf(3);两者如果没查到都返回-1
11.slice()方法可提取字符串的某个部分,并以新的字符串返回被提取的部分。
slice(start, end) 第一个参数可选。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推,从0开始。
slice(start, end) 第二个参数可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。从0开始不会改变,从1开始截取
注意: 这种方法不会改变原始数组!。
12.reverse()方法用于颠倒数组中元素的顺序。
var color = [1,2,3,4];console.log(color.valueOf());//1,2,3,4