includes.filter.map的用法

includes.filter.map的用法

includes 用法

includes()返回布尔值，表示是否找到了参数字符串 同样适用于数组
1.判断字符串

var str = 'hello word'
 console.log(str.includes('he'))   // 返回的结果是true

只要str存在的值，就会返回结果true，否则返回false

2.判断数组

  var arr = ['a','b','c','d']
  console.log(arr.includes('a')) // 返回结果是true

只要arr存在的值，就会返回结果true，否则返回false

3.判断NAN

  var arr = ['a','b','c','d',NaN]
   console.log(arr.includes(NaN))  //返回的记过是true

只要NAN存在，就会返回结果true，否则返回false

map的用法

一般用于对数组的处理 map是从给定数组中返回你想要的数组格式
举个例子
给定的数组

 let tempArr= [1,2,3,3,35,67,9,797,797,6,5,4,6];
 实际开发可能需要转化为label，value 键值对的形式  这时可以使用map
 let totalArr = tempArr.map(item=>{
  return {
    label:'显示的值'+item,
    value:item
  }
})
console.log(totalArr);
返回值 、、
[ { label: '显示的值1', value: 1 },
// { label: '显示的值2', value: 2 },
// { label: '显示的值3', value: 3 },
// { label: '显示的值3', value: 3 },
// { label: '显示的值35', value: 35 },
// { label: '显示的值67', value: 67 },
// { label: '显示的值9', value: 9 },
// { label: '显示的值797', value: 797 },
// { label: '显示的值797', value: 797 },
// { label: '显示的值6', value: 6 },
// { label: '显示的值5', value: 5 },
// { label: '显示的值4', value: 4 },
// { label: '显示的值6', value: 6 } ]

当然map功能很强大的可以在一个对象数组种挑选自己需要的键值对返回想要的数组，一般和后台对接口返回的数据比较多我们可以用map很轻松的搞定 有时使用map可以避免使用push 造成一些不必要的问题

fliter的用法

用于在数组中过滤掉一些不想要的值，返回符合条件的数组

// 从给定的数组中返回想要的数组
//totalarr =[ { label: '显示的值1', value: 1 },
// { label: '显示的值2', value: 2 },
// { label: '显示的值3', value: 3 },
// { label: '显示的值3', value: 3 },
// { label: '显示的值35', value: 35 },
// { label: '显示的值67', value: 67 },
// { label: '显示的值9', value: 9 },
// { label: '显示的值797', value: 797 },
// { label: '显示的值797', value: 797 },
// { label: '显示的值6', value: 6 },
// { label: '显示的值5', value: 5 },
// { label: '显示的值4', value: 4 },
// { label: '显示的值6', value: 6 } ]
let filterArr = [1,2,3,4];
//  从totalarr中挑选value值在filterArr 中的数组
let dinstinationArr = totalArr.filter(item=>{
   return filterArr.includes(item.value);
})
返回值
[ { label: '显示的值1', value: 1 },
  { label: '显示的值2', value: 2 },
  { label: '显示的值3', value: 3 },
  { label: '显示的值3', value: 3 },
  { label: '显示的值4', value: 4 } ] 'dinstinationArr>>'