浅谈ECMAScript 中的Array类型(3)

是不是很意外?还是说这个就是你意想中的事情呢?根据MDN中介绍:是因为通常的情况下我们的回调函数是接受一个参数,但是接受一个参数并不代表 map() 方法只给回调函数只传一个参数而已,而上面的例子是因为 parseInt 平常我们使用的时候大都传一个参数进行转换,但是 parseInt 是可以接受两个参数的,只不过第二个参数为 二进制 而已,所以第二个参数则会变成二进制,那么第三个参数 parseInt

则会忽略,所以返回这个答案!

3、Array.prototype.some()

some() 方法用于判断回调函数中逻辑而返回 true 还是 false

粟子:

var arr = ['apple', 'banana', 'mango', 'guava'] checkarr = (arr, val) => { return arr.some(item => val === item) } console.log(checkarr(arr, 'apple'))//true

4、Array.prototype.reduce()

reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终为一个值

第一个值为累加器(上一次回调函数返回的值/初始为第一个值)

第二个值为当前值

第三个值为当前下标

第四个值为当前数组 简单的粟子:

var arr = [1, 2, 3, 4, 5] const data = arr.reduce((prev, curr) => prev + curr ) console.log(data)//15

合并数组里面对象的值并累加(结合find一起使用):

let tableNetWorkData = [ {'newLocker': 6,'newSection': -2,'newSite': 1,'partnerShip': "self"}, {'newLocker': 5,'newSection': 24,'newSite': 1,'partnerShip': "self"}, {'newLocker': 3,'newSection': 65,'newSite': 1,'partnerShip': "sell"}, {'newLocker': 1,'newSection': 38,'newSite': 1,'partnerShip': "agent"}, {'newLocker': -6,'newSection': 4,'newSite': 1,'partnerShip': "agent"}, {'newLocker': 8,'newSection': 22,'newSite': 1,'partnerShip': "lease"}, {'newLocker': 15,'newSection': -2,'newSite': 1,'partnerShip': "self"}, ] let result = tableNetWorkData.reduce((per, currNext) => { let pers = per.find( perItem => currNext.partnerShip === perItem.partnerShip ); if(pers) { pers.newLocker += currNext.newLocker; pers.newSection += currNext.newSection; pers.newSite += currNext.newSite; } else { let newPers = { newLocker: currNext.newLocker, newSection: currNext.newSection, newSite: currNext.newSite, partnerShip: currNext.partnerShip } per.push(newPers) } return per }, []); console.log(result)

结果如下:

浅谈ECMAScript 中的Array类型

再来一个数组去重:

let arr = [1,2,2,3,4,5,5,6,8,7,7,9,8] let result = arr.reduce( (prev, curr) => { if(prev.length === 0 || prev[prev.length - 1] !== curr) { prev.push(curr) } return prev }, []) console.log(result)

看结果:

浅谈ECMAScript 中的Array类型

5、Array.prototype.every()

every() 方法用于检测数组所有元素是否通过指定的函数的逻辑操作,通过则返回 true 否则返回 false 。注意空数组则无论什么逻辑都将返回 true

回调函数接通常收三个参数:

当前值

当前值的下标

原数组

简单的粟子:

var arr = [1, 30, 39, 21, 10, 13]; console.log(arr.every(curr => { return curr < 45 })); // expected output: true

6、Array.prototype.filter()

filter() 方法就是一个过滤原数组的方法返回需要的元素组成的新数组,想象成一个漏斗然后过滤一些符合的元素!(不会改变原数组)

当前值

当前值的下标

原数组

粟子:

let fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'] let filterindexOf = function (query){ return fruits.filter(item => { return item.toLowerCase().indexOf(query.toLowerCase())> -1 }) } console.log(filterindexOf('an'))//["banana", "mango", "orange"]

7、Array.prototype.toString()

toString() 方法就是将数组元素转化为字符串

粟子:

var array1 = ['ca', 'ba', 'a', '1a']; console.log(array1.toString());// "ca,ba,a,1a"

8、Array.prototype.find()

find() 方法返回数组中满足提供的测试函数的第一个元素的值

当前值

当前值的下标

原数组

粟子:

let arr = [ {name: 'apples', value: 2}, {name: 'bananas', value: 0}, {name: 'cherries', value: 5} ]; let res =arr.find ((item)=> { return item.name === 'bananas'; }) console.log(res)//{ name: "bananas", value: 0 }

总结

对于数组在我们平常对数据的一些操作都大都避免不了使用数组对数据进一步的逻辑操作,所以对于数组的一些方法都要熟悉熟练的使用,只有熟练的使用数组各种方法才能在后端返回的数据进行一梭子的操作完成业务操作甚至是比较骚的操作,同时在使用数组的方法的时候避免给自己挖一些不必要的坑,我们要严格按照规范使用数组的方法这样才不会出现一些神都看不懂的 bug ,当然文章所介绍的都是平常使用的一些方法,数组还有其他的方法没有写出来,需要的再自己查找了,如有错误万望指出,万分感谢!

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/2424ee2eaa6be8be9096215e79abcae1.html