JS之JQ的mapreducefiltersortreverse

map 是遍历数组，并返回一个新数组

reduce 是遍历数组，把所有元素组合到一起：

filter 是遍历数组，根据条件筛选 得出一个新数组

与我们之前用的数组方法仅仅返回一个新数组不同， sort 方法将改变原数组，返回被排序后的数组。

默认 ：按字母顺序或数字顺序对数组中的元素进行排序。

sort 可以把比较函数作为参数传入。比较函数有返回值，当 a 小于 b，返回一个负数；当 a 大于 b ，返回一个正数；相等时返回0。

如果没有传入比较函数，它将把值全部转成字符串，并按照字母顺序进行排序。

下面的例子将展示 sort 的使用，传入的比较函数把元素按照从小到大的顺序进行排列：

reverse 对数组进行反转，对元素组 *** 作，返回反转后的数组。

concat 方法可以用来把两个数组的内容合并到一个数组中。

concat 方法的参数应该是一个数组。参数中的数组会拼接在原数组的后面，并作为一个新数组返回。

下面是一个拼接数组的例子，用concat 把 otherArray 拼接在 oldArray 的后面：

js循环遍历变量的方式有以下几种：

1for(let i = 0; i < 5; i++)

2forEach

3for of

4for in

那么我们来看下这几种遍历方式的用法，以及退出循环的方法

1for

这是最常用的遍历方法，for用来遍历数组，可以使用break 退出循环，使用continue来跳过本次循环。

2forEach

除了抛出异常以外，没有办法中止或跳出 forEach() 循环。

并且forEach不会改变原来的数组

3for of

for of 可以迭代 可迭代对象 （包括 Array ， Map ， Set ， String ， TypedArray ， arguments 对象等等）

对于for of，可以由break, throw 或return终止, 可以用continue略过此次循环。在这些情况下，迭代器关闭。

<script type="text/javascript">

/对比:

1、map速度比foreach快

2、map会返回一个新数组，不对原数组产生影响,foreach不会产生新数组，foreach返回undefined

3、map因为返回数组所以可以链式 *** 作，foreach不能

4, map里可以用return ,而foreach里用return不起作用，foreach不能用break，会直接报错/

/方法一:/

var arr1 = [1, 2, 3, 4, 5, 6];

for(var i = 0, len = arr1length; i < len; i++) { //优化性能处理

consolelog(arr1[i], 'for遍历出来的数据'); //每个item 1,2,3,4,5,6

}

/方法二:/

/forEach方法中的function回调支持3个参数，第1个是遍历的数组内容；第2个是对应的数组索引，第3个是数组本身/

var arr2 = [{

name: 'bob',

age: 20

},

{

name: 'tom',

age: 18

},

{

name: 'sos',

age: 19

}

]

arr2forEach((val, i) => { //没有返回值的，对原来数组也没有影响

consolelog(val, '遍历出来的每个obj')

});

/方法三:/

var fruits = [1, 2, 3, 4, 5, 6, 7, 8];

let arr = fruitsmap((item, index) => {

consolelog(item, 'top')

consolelog(index, 'top')

return item 8

})

consolelog(arr, 'newarr') //[8, 16, 24, 32, 40, 48, 56, 64] "newarr"

var a = fruitsindexOf("Apple", 4);

consolelog(a)

//for 和 forEach都是普通循环，map 带返回值并且返回一个新数组；

/

当前元素的值,当期元素的索引值,当期元素属于的数组对象;

语法:arraymap(function(currentValue,index,arr), thisValue)

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

map() 方法按照原始数组元素顺序依次处理元素。

注意： map() 不会对空数组进行检测。

注意： map() 不会改变原始数组。

/

/方法四:/

/兼容写法：

不管是forEach还是map在IE6 - 8 下都不兼容（ 不兼容的情况下在Arrayprototype上没有这两个方法）, 那么需要我们自己封装一个都兼容的方法：/

/

forEach遍历数组

@param callback [function] 回调函数；

@param context [object] 上下文；

/

ArrayprototypemyForEach = function myForEach(callback, context) {

context = context || window;

if('forEach' in Arrayprototye) {

thisforEach(callback, context);

return;

}

//IE6-8下自己编写回调函数执行的逻辑

for(var i = 0, len = thislength; i < len; i++) {

callback && callbackcall(context, this[i], i, this);

}

}

/

map遍历数组

@param callback [function] 回调函数；

@param context [object] 上下文；

/

ArrayprototypemyMap = function myMap(callback, context) {

context = context || window;

if('map' in Arrayprototye) {

return thismap(callback, context);

}

//IE6-8下自己编写回调函数执行的逻辑var newAry = [];

for(var i = 0, len = thislength; i < len; i++) {

if(typeof callback === 'function') {

var val = callbackcall(context, this[i], i, this);

newAry[newArylength] = val;

}

}

return newAry;

}

</script>

首先定义一个数组

const arr = [1,2,3,4,5,6];

第一种：for循环

for (let i = 0;i<arrlength;i++){

   consolelog(arr[i]);

}

for(j=0,len=arrlength;j<len;j++){}//这种方法基本上是所有循环遍历方法中性能最高的一种

第二种 for of (需要ES6支持) 性能要好于forin，但仍然比不上普通for循环

for (let value of arr){

       consolelog(value);

}

第三种 for in 它的效率是最低的

for (let i in arr){

      consolelog(arr[i]);

 }

第四种 foreach() 实际上性能比普通for循环弱

    1、箭头函数写法

    arrforEach(value =>{

        consolelog(value);

    })

    2、普通函数写法

    arrforEach(function(value){

       consolelog(value);

     })

第五种 entries()

for (let [index, value] of arrentries()) {

     consolelog(value);

 }

第六种 keys()

for (let inx of arrkeys()){

consolelog(arr[inx]);

}

第七种 reduce()

1、箭头函数

arrreduce((pre,cur)=>{

       consolelog(cur);

 })

2、普通函数

arrreduce(function(pre,cur){

     consolelog(cur);

})

第八种 map() 但实际效率还比不上foreach

1、箭头函数

 arrmap(value=>{

       consolelog(value);

 })

2、普通函数

arrmap(function(value){

      consolelog(value);

})

第九种 values()

for (let value of arrvalues()){

       consolelog(value);

 }

以上就是关于JS之JQ的map/reduce/filter/sort/reverse全部的内容，包括:JS之JQ的map/reduce/filter/sort/reverse、js 循环遍历变量的几种方式、js数组遍历的常用的几种方法以及差异和性能优化等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！