AI智能
改变未来

JavaScript-实战开发常用的数组方法,让编程不再成为你的难题


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
赞(0) 打赏
未经允许不得转载:爱站程序员基地 » JavaScript-实战开发常用的数组方法,让编程不再成为你的难题