你所不知道的forEach、map、filter、find、sort、some等易错点整理

1、forEach

var arr1 = [
   {name:'鸣人',age:16},
   {name:'佐助',age:17}
];
var arr2 = [1,2,3];

arr1.forEach(item => { 
  item.age = item.age + 1}
);

//=> [{name:'鸣人',age:17},{name:'佐助',age:18}]

arr2.forEach(item => {
  item = item * 2}
)

// => [1,2,3]

最后的结果是,arr1发生了改变,鸣人、佐助都长了一岁,arr2没有任何改变。所以,可以粗暴得出结论:当数组中元素是值类型,forEach绝对不会改变数组;当是引用类型,则可以改变数组
2 .不支持链式操作,所以以下代码是错误的:

[1,2,3,4,5].forEach(
   item => console.log(item)
).filter(item => { 
   return item > 2 
})
// Uncaught TypeError: Cannot read property 'filter' of undefined

注意这里我们说仅仅是forEach()这个方法不支持链式调用,在调用forEach之前,前面的数组你怎么玩链式都没问题,最后返回一个正常数组即可:

// 这个没问题
[1,2,3,4,5].filter(item => { 
  return item > 2 
}).forEach(item => {
   console.log(item) 
})

2、map

map()功能很强大,forEach()的一些局限性它很多都能解决。"map"即"映射",也就是原数组被"映射"成对应新数组。
创建新数组不代表不能用它改变原有数组,你用原有数组去承载就可以:

let arr = [1,2,3];
arr = arr.map(item => { return item * 2 })

arr同样也会改变,所以这也不费事嘛。。。

2、filter

map()没法做到的过滤,就交给filter()去完成,这个大家肯定也都知道。filter()和map()很像,就像周董《东风破》和《发如雪》一样像,也是创建一个新数组,新数组中的元素是筛选出来的符合条件的所有对象。简单写个例子:

let newArr = [1,2,3,4,5].filter(item =>{
   if(item > 3) return item 
})
//  => [4,5]

4、sort()

sort()用于对数组的元素进行排序。排序顺序可以是字母或数字,并按升序或降序。

4.1 基础点
1.默认排序按字母升序(更准确一些是根据字符串Unicode码点):

[3,4,2,1,5].sort()
// => [1,2,3,4,5]

['Javascript','Vue','React','Node','Webpack'].sort();
// => ["Javascript", "Node", "React", "Vue", "Webpack"]

sort()与map()、filter()等不同,它直接改变原始数组(很重要!);

2. 获取数组中的指定元素

let testArr = [{name:'鸣人',age:16},{name:'佐助',age:17},{name:'卡卡西',age:26}]
let index = testArr.findIndex(item => { return item.age > 16 });
// => 1
let testArr = [{name:'鸣人',age:16},{name:'佐助',age:17},{name:'卡卡西',age:26}]
let index = _.findIndex(testArr, {name:'佐助'});
// => 1

2.2 find()
find()顾名思义,就是用来在数组中找到我们所需要的元素,并且和some()一样,只要有一个满足即返回该元素,不会多余遍历,对性能很友善。

let testArr = [{name:'鸣人',age:16},{name:'佐助',age:17},{name:'卡卡西',age:27},{name:'佐助',age:17}]
let result = testArr.find(item => { return item.name == '佐助'});
// => { name:'佐助',age:17 }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容