[Day 21]从零开始学习 JS 的连续-30 Days---阵列操作介绍 (上篇)

阵列操作介绍 (上篇)

介绍四种阵列运用:

  1. map
  2. filter
  3. find
  4. findlndex

1. map

  1. 将原始阵列运算後,重新组合并回传一个新的阵列。
  2. 不会改变原始阵列。
const num = [1 , 2 , 7 , 10];
//newNum  数值型式
const newNum = num.map(function(item){
  return item*item;
})
console.log(newNum);
//newNum2  布林值型式
const newNum2 = num.map(function(item){
  return item > 5;
})
console.log(newNum2);  
//newNum3  物件型式
const newNum3 = num.map(function(item){
  let obj = {};
  obj.checkNum = item > 5;
  return obj;
})
console.log(newNum3);  
console.log(num)  //原始阵列


如图所示回传的新阵列里面可以是数值、布林值、物件。但不会改变原阵列。

  1. map 与 forEach 差异
const num = [1 , 2 , 7 , 10];
//newNum  数值型式
const newNum = num.map(function(item){
  // return item*item;
})
console.log(newNum);

const arr = [1 , 2 , 7 , 10];
//newNum  数值型式
const newArr = arr.forEach(function(item){
  // return item*item;
})
console.log(newArr);


如图所示 map 会组成新阵列,而 forEach 不会重新组成新阵列

2. filter

  1. 将原始阵列运筛选出符合条件的资料後,重新组合并回传一个新的阵列。
  2. 不会改变原始阵列。
const num = [1 , 2 , 7 , 10];
const newNum = num.filter(function(item){
  return item >=5;
})
console.log(newNum);


如图所示选取需要的资料并重新组成阵列。

今天就到这结束了。


<<:  Day 21 - Handle Side Effect I

>>:  Day 24 开发者福音无服务器运算

{CMoney战斗营} 的第一周 #物件导向

前言 在二十多岁的最後一年,决定再让自己任性一回,开始在 CMoney 参加工程师培训营,给自己半年...

第二十七天:不规则边缘

金鱼都能懂的网页切版:21 不规则边缘 https://codepen.io/mikeyam/pen...

[Day30] 建立购物车系统 - 13 & 完赛心得

1. 修改docker-compose.yml 将购物车与其他系统都改成docker执行,修改doc...

Day30 30 天文章总结 - 铁人文的赛後心得与我的心路历程

终於打到最後一篇啦,一路上真的蛮辛苦的,一边读资料,一边用自己的话来教大家,不敢说这一路上没有放弃过...